Update for React 14

.travis.yml

@@ -2,3 +2,4 @@ language: node_js
 node_js:
   - "stable"
 sudo: false
+install: npm install || true

docs/src/app/components/code-example/code-block.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDom = require('react-dom');
 let { Styles } = require('material-ui');
 let { Spacing } = Styles;
 
@@ -11,7 +12,7 @@ class CodeBlock extends React.Component {
   }
 
   componentDidMount() {
-    var code = React.findDOMNode(this.refs.code);
+    var code = this.refs.code;
     require([
       "codemirror/lib/codemirror.js",
       "codemirror/mode/htmlmixed/htmlmixed.js",

docs/src/app/components/pages/components/menus.jsx

@@ -1,5 +1,5 @@
-let React = require('react/addons');
-let ReactTransitionGroup = React.addons.TransitionGroup;
+let React = require('react');
+let ReactTransitionGroup = require('react-addons-transition-group')
 let Menu = require('menus/menu');
 let MenuItem = require('menus/menu-item');
 let MenuDivider = require('menus/menu-divider');

docs/src/app/components/pages/components/text-fields.jsx

@@ -1,4 +1,5 @@
-let React = require('react/addons');
+let React = require('react');
+let LinkedStateMixin = require('react-addons-linked-state-mixin');
 let { ClearFix, Mixins, SelectField, TextField, Styles } = require('material-ui');
 let ComponentDoc = require('../../component-doc');
 let { Colors } = Styles;
@@ -8,7 +9,7 @@ let CodeExample = require('../../code-example/code-example');
 
 let TextFieldsPage = React.createClass({
 
-  mixins: [StyleResizable, React.addons.LinkedStateMixin],
+  mixins: [StyleResizable, LinkedStateMixin],
 
   getInitialState() {
     return {

examples/browserify-gulp-example/src/app/app.jsx

@@ -1,5 +1,5 @@
 (function () {
-  let React = require('react/addons');
+  let React = require('react');
   let injectTapEventPlugin = require('react-tap-event-plugin');
   let Main = require('./components/main.jsx'); // Our custom react component
 

examples/webpack-example/src/app/app.jsx

@@ -1,5 +1,5 @@
 (function () {
-  let React = require('react/addons');
+  let React = require('react');
   let injectTapEventPlugin = require('react-tap-event-plugin');
   let Main = require('./components/main.jsx'); // Our custom react component
 

icon-builder/tpl/SvgIcon.js

@@ -1,5 +1,5 @@
-const React = require('react/addons');
-const PureRenderMixin = React.addons.PureRenderMixin;
+const React = require('react');
+const PureRenderMixin = require('react-addons-pure-render-mixin');
 const SvgIcon = {{{ muiRequireStmt }}};
 
 const {{className}} = React.createClass({

package.json

@@ -30,6 +30,13 @@
   },
   "homepage": "http://material-ui.com/",
   "dependencies": {
+    "react-addons-create-fragment": "^0.14.0-rc1",
+    "react-addons-linked-state-mixin": "^0.14.0-rc1",
+    "react-addons-pure-render-mixin": "^0.14.0-rc1",
+    "react-addons-test-utils": "^0.14.0-rc1",
+    "react-addons-transition-group": "^0.14.0-rc1",
+    "react-addons-update": "^0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1",
     "react-draggable2": "^0.5.1"
   },
   "peerDependencies": {
@@ -60,6 +67,7 @@
     "karma-webpack": "^1.7.0",
     "mocha": "^2.2.5",
     "phantomjs": "^1.9.17",
+    "react": "^0.14.0-rc1",
     "react-hot-loader": "^1.2.8",
     "react-router": "^0.13.3",
     "react-stub-context": "^0.3.0",

src/avatar.jsx

@@ -1,4 +1,4 @@
-let React = require('react/addons');
+let React = require('react');
 let StylePropable = require('./mixins/style-propable');
 let Colors = require('./styles/colors');
 

src/buttons/flat-button-label.jsx

@@ -1,5 +1,5 @@
-const React = require('react/addons');
-const PureRenderMixin = React.addons.PureRenderMixin;
+const React = require('react');
+const PureRenderMixin = require('react-addons-pure-render-mixin');
 const Styles = require('../utils/styles');
 
 

src/circular-progress.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDom = require('react-dom');
 let StylePropable = require('./mixins/style-propable');
 let AutoPrefix = require('./styles/auto-prefix');
 let Transitions = require("./styles/transitions");
@@ -34,8 +35,8 @@ let CircularProgress = React.createClass({
   },
 
   componentDidMount() {
-    let wrapper = React.findDOMNode(this.refs.wrapper);
-    let path = React.findDOMNode(this.refs.path);
+    let wrapper = this.refs.wrapper;
+    let path = this.refs.path;
 
     this._scalePath(path);
     this._rotateWrapper(wrapper);

src/dialog.jsx

@@ -1,4 +1,4 @@
-let React = require('react/addons');
+let React = require('react');
 let WindowListenable = require('./mixins/window-listenable');
 let CssEvent = require('./utils/css-event');
 let KeyCode = require('./utils/key-code');
@@ -8,7 +8,7 @@ let FlatButton = require('./flat-button');
 let Overlay = require('./overlay');
 let Paper = require('./paper');
 
-let ReactTransitionGroup = React.addons.TransitionGroup;
+let ReactTransitionGroup = require('react-addons-transition-group')
 
 let TransitionItem = React.createClass({
   mixins: [StylePropable],

src/drop-down-menu.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDom = require('react-dom');
 let StylePropable = require('./mixins/style-propable');
 let Transitions = require('./styles/transitions');
 let KeyCode = require('./utils/key-code');
@@ -224,8 +225,8 @@ let DropDownMenu = React.createClass({
   },
 
   _setWidth() {
-    let el = React.findDOMNode(this);
-    let menuItemsDom = React.findDOMNode(this.refs.menuItems);
+    let el = ReactDom.findDOMNode(this);
+    let menuItemsDom = ReactDom.findDOMNode(this.refs.menuItems);
     if (!this.props.style || !this.props.style.hasOwnProperty('width')) {
       el.style.width = 'auto';
       el.style.width = menuItemsDom.offsetWidth + 'px';

src/enhanced-button.jsx

@@ -1,5 +1,5 @@
-const React = require('react/addons');
-const PureRenderMixin = React.addons.PureRenderMixin;
+const React = require('react');
+const PureRenderMixin = require('react-addons-pure-render-mixin');
 const StylePropable = require('./mixins/style-propable');
 const Colors = require('./styles/colors');
 const Children = require('./utils/children');

src/enhanced-switch.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDom = require('react-dom');
 let KeyCode = require('./utils/key-code');
 let StylePropable = require('./mixins/style-propable');
 let Transitions = require('./styles/transitions');
@@ -57,13 +58,13 @@ let EnhancedSwitch = React.createClass({
   getEvenWidth(){
     return (
       parseInt(window
-        .getComputedStyle(React.findDOMNode(this.refs.root))
+        .getComputedStyle(this.refs.root)
         .getPropertyValue('width'), 10)
     );
   },
 
   componentDidMount() {
-    let inputNode = React.findDOMNode(this.refs.checkbox);
+    let inputNode = this.refs.checkbox;
     if (!this.props.switched || inputNode.checked !== this.props.switched) {
       this.props.onParentShouldUpdate(inputNode.checked);
     }
@@ -302,14 +303,14 @@ let EnhancedSwitch = React.createClass({
 
 
   isSwitched() {
-    return React.findDOMNode(this.refs.checkbox).checked;
+    return this.refs.checkbox.checked;
   },
 
   // no callback here because there is no event
   setSwitched(newSwitchedValue) {
     if (!this.props.hasOwnProperty('checked') || this.props.checked === false) {
       this.props.onParentShouldUpdate(newSwitchedValue);
-      React.findDOMNode(this.refs.checkbox).checked = newSwitchedValue;
+      this.refs.checkbox = newSwitchedValue;
     }
     else if (process.env.NODE_ENV !== 'production') {
       let message = 'Cannot call set method while checked is defined as a property.';
@@ -318,7 +319,7 @@ let EnhancedSwitch = React.createClass({
   },
 
   getValue() {
-    return React.findDOMNode(this.refs.checkbox).value;
+    return this.refs.checkbox.value;
   },
 
   isKeyboardFocused() {
@@ -331,7 +332,7 @@ let EnhancedSwitch = React.createClass({
       isKeyboardFocused: false,
     });
 
-    let isInputChecked = React.findDOMNode(this.refs.checkbox).checked;
+    let isInputChecked = this.refs.checkbox.checked;
 
     if (!this.props.hasOwnProperty('checked')) {
       this.props.onParentShouldUpdate(isInputChecked);

src/enhanced-textarea.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDom = require('react-dom');
 let StylePropable = require('./mixins/style-propable');
 let AutoPrefix = require('./styles/auto-prefix');
 
@@ -107,7 +108,7 @@ let EnhancedTextarea = React.createClass({
   },
 
   getInputNode() {
-    return React.findDOMNode(this.refs.input);
+    return this.refs.input;
   },
 
   setValue(value) {
@@ -116,7 +117,7 @@ let EnhancedTextarea = React.createClass({
   },
 
   _syncHeightWithShadow(newValue, e) {
-    let shadow = React.findDOMNode(this.refs.shadow);
+    let shadow = this.refs.shadow;
     let currentHeight = this.state.height;
     let newHeight;
 

src/flat-button.jsx

@@ -1,5 +1,5 @@
-const React = require('react/addons');
-const PureRenderMixin = React.addons.PureRenderMixin;
+const React = require('react');
+const PureRenderMixin = require('react-addons-pure-render-mixin');
 const Transitions = require('./styles/transitions');
 const Children = require('./utils/children');
 const ColorManipulator = require('./utils/color-manipulator');

src/floating-action-button.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDom = require('react-dom');
 let StylePropable = require('./mixins/style-propable');
 let Transitions = require('./styles/transitions');
 let ColorManipulator = require('./utils/color-manipulator');
@@ -249,11 +250,11 @@ let FloatingActionButton = React.createClass({
   _handleKeyboardFocus(e, keyboardFocused) {
     if (keyboardFocused && !this.props.disabled) {
       this.setState({ zDepth: this.state.initialZDepth + 1 });
-      React.findDOMNode(this.refs.overlay).style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4);
+      this.refs.overlay.style.backgroundColor = ColorManipulator.fade(this.getStyles().icon.color, 0.4);
     }
     else if (!this.state.hovered) {
       this.setState({ zDepth: this.state.initialZDepth });
-      React.findDOMNode(this.refs.overlay).style.backgroundColor = 'transparent';
+      this.refs.overlay.style.backgroundColor = 'transparent';
     }
   },
 

src/left-nav.jsx

@@ -2,6 +2,7 @@ const isBrowser = typeof window !== 'undefined';
 let Modernizr = isBrowser ? require('./utils/modernizr.custom') : undefined;
 
 let React = require('react');
+let ReactDom = require('react-dom');
 let KeyCode = require('./utils/key-code');
 let StylePropable = require('./mixins/style-propable');
 let AutoPrefix = require('./styles/auto-prefix');
@@ -193,8 +194,8 @@ let LeftNav = React.createClass({
 
   _updateMenuHeight() {
     if (this.props.header) {
-      let container = React.findDOMNode(this.refs.clickAwayableElement);
-      let menu = React.findDOMNode(this.refs.menuItems);
+      let container = ReactDom.findDOMNode(this.refs.clickAwayableElement);
+      let menu = ReactDom.findDOMNode(this.refs.menuItems);
       let menuHeight = container.clientHeight - menu.offsetTop;
       menu.style.height = menuHeight + 'px';
     }
@@ -270,7 +271,7 @@ let LeftNav = React.createClass({
   },
 
   _setPosition(translateX) {
-    let leftNav = React.findDOMNode(this.refs.clickAwayableElement);
+    let leftNav = ReactDom.findDOMNode(this.refs.clickAwayableElement);
     leftNav.style[AutoPrefix.single('transform')] =
       'translate3d(' + (this._getTranslateMultiplier() * translateX) + 'px, 0, 0)';
     this.refs.overlay.setOpacity(1 - translateX / this._getMaxTranslateX());

src/linear-progress.jsx

@@ -30,8 +30,8 @@ let LinearProgress = React.createClass({
   },
 
   componentDidMount() {
-    let bar1 = React.findDOMNode(this.refs.bar1);
-    let bar2 = React.findDOMNode(this.refs.bar2);
+    let bar1 = this.refs.bar1;
+    let bar2 = this.refs.bar2;
 
     this._barUpdate(0, bar1, [
       [-35, 100],

src/lists/list-divider.jsx

@@ -1,4 +1,4 @@
-let React = require('react/addons');
+let React = require('react');
 let StylePropable = require('../mixins/style-propable');
 
 

src/lists/list-item.jsx

@@ -1,5 +1,6 @@
-const React = require('react/addons');
-const PureRenderMixin = React.addons.PureRenderMixin;
+const React = require('react');
+const ReactDom = require('react-dom');
+const PureRenderMixin = require('react-addons-pure-render-mixin');
 const ColorManipulator = require('../utils/color-manipulator');
 const StylePropable = require('../mixins/style-propable');
 const Colors = require('../styles/colors');
@@ -347,7 +348,7 @@ const ListItem = React.createClass({
 
   applyFocusState(focusState) {
     const button = this.refs.enhancedButton;
-    const buttonEl = React.findDOMNode(button);
+    const buttonEl = ReactDom.findDOMNode(button);
 
     if (button) {
       switch(focusState) {

src/lists/list.jsx

@@ -1,5 +1,5 @@
-const React = require('react/addons');
-const PureRenderMixin = React.addons.PureRenderMixin;
+const React = require('react');
+const PureRenderMixin = require('react-addons-pure-render-mixin');
 const PropTypes = require('../utils/prop-types');
 const StylePropable = require('../mixins/style-propable');
 const Typography = require('../styles/typography');