Update react 0.14.0 rc1

examples/browserify-gulp-example/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "material-ui": ">=0.8",
-    "react": ">=0.13",
-    "react-tap-event-plugin": "^0.1.3"
+    "react": ">=0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1"
   }
 }

examples/webpack-example/package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "material-ui": ">=0.8",
-    "react": ">=0.13",
-    "react-tap-event-plugin": "^0.1.3"
+    "react": ">=0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1"
   }
 }

package.json

@@ -33,8 +33,15 @@
     "react-draggable2": "^0.5.1"
   },
   "peerDependencies": {
-    "react": ">=0.13",
-    "react-tap-event-plugin": ">=0.1.3"
+    "react": ">=0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1",
+    "react-addons-transition-group": "^0.14.0-rc1",
+    "react-addons-update": "^0.14.0-rc1",
+    "react-addons-create-fragment": "^0.14.0-rc1",
+    "react-addons-pure-render-mixin": "^0.14.0-rc1",
+    "react-addons-linked-state-mixin": "^0.14.0-rc1",
+    "react-addons-clone-with-props": "^0.14.0-rc1",
+    "react-addons-test-utils": "^0.14.0-rc1"
   },
   "devDependencies": {
     "babel": "^5.4.3",
@@ -61,9 +68,8 @@
     "mocha": "^2.2.5",
     "phantomjs": "^1.9.17",
     "react-hot-loader": "^1.2.8",
-    "react-router": "^0.13.3",
-    "react-stub-context": "^0.3.0",
-    "react-tap-event-plugin": "^0.1.6",
+    "react-router": "^1.0.0-beta4",
+    "react-tap-event-plugin": "^0.2.0",
     "sinon": "^1.15.4",
     "sinon-chai": "^2.8.0",
     "transfer-webpack-plugin": "^0.1.4",

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 = ReactDOM.findDOMNode(this.refs.wrapper);
+    let path = ReactDOM.findDOMNode(this.refs.path);
 
     this._scalePath(path);
     this._rotateWrapper(wrapper);

src/date-picker/calendar-year.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDOM = require('react-dom');
 let StylePropable = require('../mixins/style-propable');
 let Colors = require('../styles/colors');
 let DateTime = require('../utils/date-time');
@@ -78,8 +79,8 @@ let CalendarYear = React.createClass({
   _scrollToSelectedYear() {
     if (this.refs.selectedYearButton === undefined) return;
 
-    let container = this.getDOMNode();
-    let yearButtonNode = this.refs.selectedYearButton.getDOMNode();
+    let container = ReactDOM.findDOMNode(this);
+    let yearButtonNode = ReactDOM.findDOMNode(this.refs.selectedYearButton);
 
     let containerHeight = container.clientHeight;
     let yearButtonNodeHeight = yearButtonNode.clientHeight || 32;

src/date-picker/date-picker-dialog.jsx

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDOM = require('react-dom');
 let StylePropable = require('../mixins/style-propable');
 let WindowListenable = require('../mixins/window-listenable');
 let CssEvent = require('../utils/css-event');
@@ -149,7 +150,7 @@ let DatePickerDialog = React.createClass({
   },
 
   _handleDialogDismiss() {
-    CssEvent.onTransitionEnd(this.refs.dialog.getDOMNode(), () => {
+    CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this.refs.dialog), () => {
       this.setState({
         isCalendarActive: false,
         showMonthDayPicker: true,
@@ -160,7 +161,7 @@ let DatePickerDialog = React.createClass({
   },
 
   _handleDialogClickAway() {
-    CssEvent.onTransitionEnd(this.refs.dialog.getDOMNode(), () => {
+    CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this.refs.dialog), () => {
       this.setState({
         isCalendarActive: false,
         showMonthDayPicker: true,

src/dialog.jsx

@@ -1,4 +1,5 @@
-let React = require('react/addons');
+let React = require('react');
+let ReactDOM = require('react-dom');
 let WindowListenable = require('./mixins/window-listenable');
 let CssEvent = require('./utils/css-event');
 let KeyCode = require('./utils/key-code');
@@ -8,7 +9,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],
@@ -225,7 +226,7 @@ let Dialog = React.createClass({
   },
 
   dismiss() {
-    CssEvent.onTransitionEnd(this.getDOMNode(), () => {
+    CssEvent.onTransitionEnd(ReactDOM.findDOMNode(this), () => {
       this.refs.dialogOverlay.allowScrolling();
     }.bind(this));
 
@@ -303,9 +304,9 @@ let Dialog = React.createClass({
   _positionDialog() {
     if (this.state.open) {
       let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
-      let container = this.getDOMNode();
-      let dialogWindow = this.refs.dialogWindow.getDOMNode();
-      let dialogContent = this.refs.dialogContent.getDOMNode();
+      let container = ReactDOM.findDOMNode(this);
+      let dialogWindow = ReactDOM.findDOMNode(this.refs.dialogWindow);
+      let dialogContent = ReactDOM.findDOMNode(this.refs.dialogContent);
       let minPaddingTop = 16;
 
       //Reset the height in case the window was resized.

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(ReactDOM.findDOMNode(this.refs.root))
         .getPropertyValue('width'), 10)
     );
   },
 
   componentDidMount() {
-    let inputNode = React.findDOMNode(this.refs.checkbox);
+    let inputNode = ReactDOM.findDOMNode(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 ReactDOM.findDOMNode(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;
+      ReactDOM.findDOMNode(this.refs.checkbox).checked = 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 ReactDOM.findDOMNode(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 = ReactDOM.findDOMNode(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 ReactDOM.findDOMNode(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 = ReactDOM.findDOMNode(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);
+      ReactDOM.findDOMNode(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';
+      ReactDOM.findDOMNode(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

@@ -1,4 +1,5 @@
 let React = require('react');
+let ReactDOM = require('react-dom');
 let StylePropable = require('./mixins/style-propable');
 let Transitions = require("./styles/transitions");
 
@@ -30,8 +31,8 @@ let LinearProgress = React.createClass({
   },
 
   componentDidMount() {
-    let bar1 = React.findDOMNode(this.refs.bar1);
-    let bar2 = React.findDOMNode(this.refs.bar2);
+    let bar1 = ReactDOM.findDOMNode(this.refs.bar1);
+    let bar2 = ReactDOM.findDOMNode(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');