React Update

demo.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 Demo = require './src/components/demo'
 {startMathJax} = require './src/helpers/mathjax'
 
@@ -10,7 +11,7 @@ loadApp = ->
   mainDiv = document.createElement('div')
   mainDiv.id = 'react-root-container'
   document.body.appendChild(mainDiv)
-  React.render(<Demo/>, mainDiv)
+  ReactDOM.render(<Demo/>, mainDiv)
   true
 
 loadApp() or document.addEventListener('readystatechange', loadApp)

package.json

@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/openstax/react-components",
   "dependencies": {
-    "bootstrap": "3.3.5",
+    "bootstrap": "3.3.6",
     "camelcase": "1.2.1",
     "classnames": "2.1.5",
     "eventemitter2": "0.4.14",
@@ -49,7 +49,7 @@
     "extract-text-webpack-plugin": "0.8.2",
     "file-exists": "0.1.1",
     "file-loader": "0.8.4",
-    "fixed-data-table": "0.4.1",
+    "fixed-data-table": "0.6.0",
     "gulp": "3.9.0",
     "gulp-coffeelint": "0.4.0",
     "gulp-env": "0.2.0",
@@ -77,8 +77,10 @@
     "lodash": "3.10.1",
     "mocha": "2.2.5",
     "phantomjs": "1.9.18",
-    "react": "0.13.1",
-    "react-bootstrap": ">=0.23.0 <=0.26.2",
+    "react": "0.14.8",
+    "react-dom": "0.14.8",
+    "react-addons-test-utils": "0.14.8",
+    "react-bootstrap": "0.28.2",
     "react-hot-loader": "1.3.0",
     "react-scroll-components": "0.2.2",
     "selenium-webdriver": "2.47.0",
@@ -92,11 +94,6 @@
     "webpack-umd-external": "1.0.2",
     "when": "3.7.3"
   },
-  "peerDependencies": {
-    "react": "^0.13.1",
-    "react-bootstrap": ">=0.23.0 <=0.26.2",
-    "react-scroll-components": "^0.2.2"
-  },
   "config": {
     "blanket": {
       "pattern": "src"

resources/styles/globals/openstax-bootstrap.less

@@ -21,22 +21,22 @@
 @import "@{bootstrap-path}/dropdowns";
 @import "@{bootstrap-path}/button-groups";
 @import "@{bootstrap-path}/input-groups";
-// @import "@{bootstrap-path}/navs";
-// @import "@{bootstrap-path}/navbar";
+@import "@{bootstrap-path}/navs";
+@import "@{bootstrap-path}/navbar";
 // @import "@{bootstrap-path}/breadcrumbs";
 // @import "@{bootstrap-path}/pagination";
 // @import "@{bootstrap-path}/pager";
-// @import "@{bootstrap-path}/labels";
-// @import "@{bootstrap-path}/badges";
+@import "@{bootstrap-path}/labels";
+@import "@{bootstrap-path}/badges";
 // @import "@{bootstrap-path}/jumbotron";
-// @import "@{bootstrap-path}/thumbnails";
+@import "@{bootstrap-path}/thumbnails";
 @import "@{bootstrap-path}/alerts";
 @import "@{bootstrap-path}/progress-bars";
-// @import "@{bootstrap-path}/media";
+@import "@{bootstrap-path}/media";
 @import "@{bootstrap-path}/list-group";
 @import "@{bootstrap-path}/panels";
 @import "@{bootstrap-path}/responsive-embed";
-// @import "@{bootstrap-path}/wells";
+@import "@{bootstrap-path}/wells";
 @import "@{bootstrap-path}/close";
 
 // Components w/ JavaScript

src/components/exercise/mode.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 _ = require 'underscore'
 
 ArbitraryHtmlAndMath = require '../html'
@@ -45,10 +46,10 @@ ExMode = React.createClass
 
   focusBox: ->
     {focus, mode} = @props
-    @refs.freeResponse?.getDOMNode?().focus?() if focus and mode is 'free-response'
+    ReactDOM.findDOMNode(@refs.freeResponse)?.focus?() if focus and mode is 'free-response'
 
   onFreeResponseChange: ->
-    freeResponse = @refs.freeResponse?.getDOMNode()?.value
+    freeResponse = ReactDOM.findDOMNode(@refs.freeResponse)?.value
     if freeResponse.length <= RESPONSE_CHAR_LIMIT
       @setState({freeResponse})
       @props.onFreeResponseChange?(freeResponse)

src/components/exercise/step-card.cjsx

@@ -1,4 +1,4 @@
-React = require 'react/addons'
+React = require 'react'
 _ = require 'underscore'
 
 classnames = require 'classnames'
@@ -135,7 +135,7 @@ ExerciseStepCard = React.createClass
 
     footerProps = _.pick(@props, props.StepFooter)
     footerProps.controlButtons = controlButtons or <ControlButtons {...controlProps}/>
-    footer = React.addons.cloneWithProps(footer, footerProps)
+    footer = React.cloneElement(footer, footerProps)
 
     cardClasses = classnames 'task-step', 'openstax-exercise-card', className
 

src/components/html.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 _ = require 'underscore'
 classnames = require 'classnames'
 
@@ -54,7 +55,7 @@ module.exports = React.createClass
   # Perform manipulation on HTML contained inside the components node.
   updateDOMNode: ->
     # External links should open in a new window
-    root = @getDOMNode()
+    root = ReactDOM.findDOMNode(@)
     links = root.querySelectorAll('a')
     _.each links, (link) ->
       link.setAttribute('target', '_blank') unless link.getAttribute('href')?[0] is '#'

src/components/pinned-header-footer-card/index.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 _ = require 'underscore'
 
 {ScrollListenerMixin} = require 'react-scroll-components'
@@ -46,7 +47,7 @@ module.exports = React.createClass
     if @props.fixedOffset?
       offset = @props.fixedOffset
     else if @refs.header?
-      offset = @getTopPosition(@refs.header.getDOMNode())
+      offset = @getTopPosition(ReactDOM.findDOMNode(@refs.header))
 
     offset
 
@@ -116,18 +117,18 @@ module.exports = React.createClass
     @setState(shouldBeShy: true)
 
   getHeaderHeight: ->
-    header = @refs.header?.getDOMNode()
+    header = ReactDOM.findDOMNode(@refs.header)
     headerHeight = header?.offsetHeight or 0
 
   setOriginalContainerMargin: ->
-    container = @refs.container?.getDOMNode()
+    container = ReactDOM.findDOMNode(@refs.container)
     return unless container
 
     @setState(containerMarginTop: window.getComputedStyle(container).marginTop) if window.getComputedStyle?
 
   setContainerMargin: ->
     headerHeight = @getHeaderHeight()
-    container = @refs.container?.getDOMNode()
+    container = ReactDOM.findDOMNode(@refs.container)
     return unless container
 
     @setState(headerHeight: headerHeight)

src/components/resize-listener-mixin.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 _ = require 'underscore'
 
 module.exports =
@@ -41,7 +42,7 @@ module.exports =
 
   _getComponentSize: ->
     return {height: 0, width: 0} unless @isMounted()
-    componentNode = @getDOMNode()
+    componentNode = ReactDOM.findDOMNode(@)
     width: componentNode.offsetWidth
     height: componentNode.offsetHeight
 

src/components/smart-overflow.cjsx

@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 _ = require 'underscore'
 classnames = require 'classnames'
 
@@ -21,7 +22,7 @@ SmartOverflow = React.createClass
   mixins: [ResizeListenerMixin]
 
   getOffset: ->
-    componentNode = @getDOMNode()
+    componentNode = ReactDOM.findDOMNode(@)
     topOffset = componentNode.getBoundingClientRect().top
 
   getTriggerHeight: ->

test/helpers/index.coffee

@@ -1,7 +1,8 @@
 _ = require 'underscore'
 expect = chai.expect
-React = require 'react/addons'
-ReactTestUtils = React.addons.TestUtils
+React = require 'react'
+ReactDOM = require 'react-dom'
+ReactTestUtils = require 'react-addons-test-utils'
 {Promise}      = require 'es6-promise'
 {commonActions} = require './utilities'
 sandbox = null
@@ -23,7 +24,7 @@ Testing = {
     promise = new Promise( (resolve, reject) ->
       props = _.clone(options.props)
       props._wrapped_component = component
-      wrapper = React.render( React.createElement(Wrapper, props), root )
+      wrapper = ReactDOM.render( React.createElement(Wrapper, props), root )
       resolve({
         root,
         wrapper,
@@ -34,7 +35,7 @@ Testing = {
     # defer adding the then callback so it'll be called after whatever is attached after the return
     _.defer -> promise.then ->
       _.delay( ->
-        React.unmountComponentAtNode(root)
+        ReactDOM.unmountComponentAtNode(root)
       , unmountAfter )
       return arguments
     promise