merge react-14 into master

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-overlays",
-  "version": "0.4.4",
+  "version": "0.50.0-alpha4",
   "description": "Utilities for creating robust overlay components",
   "author": "Jason Quense <monastic.panic@gmail.com>",
   "repository": "react-bootstrap/react-overlays",
@@ -39,7 +39,7 @@
     "major": "release major"
   },
   "peerDependencies": {
-    "react": ">=0.13.0"
+    "react": "^0.14.0-alpha"
   },
   "devDependencies": {
     "babel": "5.6.14",
@@ -48,7 +48,6 @@
     "babel-loader": "^5.3.0",
     "babel-plugin-object-assign": "^1.2.1",
     "chai": "^3.2.0",
-    "component-playground": "jquense/component-playground",
     "css-loader": "^0.15.6",
     "es5-shim": "^4.1.7",
     "eslint": "^0.24.0",
@@ -75,9 +74,10 @@
     "mt-changelog": "^0.6.1",
     "node-libs-browser": "^0.5.2",
     "raw-loader": "^0.5.1",
-    "react": "^0.13.3",
-    "react-bootstrap": "^0.24.2",
+    "react": "^0.14.0-beta3",
+    "react-bootstrap": "0.24.5-react-pre.0",
     "react-component-metadata": "^1.2.2",
+    "react-dom": "^0.14.0-beta3",
     "react-hot-loader": "^1.2.7",
     "release-script": "^0.2.1",
     "rimraf": "^2.4.2",

src/Modal.js

@@ -287,8 +287,6 @@ const Modal = React.createClass({
 
     modalManager.add(this, container, this.props.containerClassName);
 
-    this.iosClickHack();
-
     this._onDocumentKeyupListener =
       addEventListener(doc, 'keyup', this.handleDocumentKeyUp);
 
@@ -389,16 +387,9 @@ const Modal = React.createClass({
     }
   },
 
-  iosClickHack() {
-    // Support: <= React 0.13: https://github.com/facebook/react/issues/1169
-    if (this.refs.backdrop) {
-      React.findDOMNode(this.refs.backdrop).onclick = function () {};
-    }
-  },
-
   //instead of a ref, which might conflict with one the parent applied.
   getDialogElement() {
-    let node = React.findDOMNode(this.refs.modal);
+    let node = this.refs.modal;
     return node && node.lastChild;
   },
 

src/Portal.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import mountable from 'react-prop-types/lib/mountable';
 import ownerDocument from './utils/ownerDocument';
 import getContainer from './utils/getContainer';
@@ -62,7 +63,9 @@ let Portal = React.createClass({
     // Save reference for future access.
     if (overlay !== null) {
       this._mountOverlayTarget();
-      this._overlayInstance = React.render(overlay, this._overlayTarget);
+      this._overlayInstance = ReactDOM.unstable_renderSubtreeIntoContainer(
+        this, overlay, this._overlayTarget
+      );
     } else {
       // Unrender if the component is null for transitions to null
       this._unrenderOverlay();
@@ -72,7 +75,7 @@ let Portal = React.createClass({
 
   _unrenderOverlay() {
     if (this._overlayTarget) {
-      React.unmountComponentAtNode(this._overlayTarget);
+      ReactDOM.unmountComponentAtNode(this._overlayTarget);
       this._overlayInstance = null;
     }
   },
@@ -94,7 +97,7 @@ let Portal = React.createClass({
       if (this._overlayInstance.getWrappedDOMNode) {
         return this._overlayInstance.getWrappedDOMNode();
       } else {
-        return React.findDOMNode(this._overlayInstance);
+        return ReactDOM.findDOMNode(this._overlayInstance);
       }
     }
 

src/Position.js

@@ -1,4 +1,5 @@
 import React, { cloneElement } from 'react';
+import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import ownerDocument from './utils/ownerDocument';
 import getContainer from './utils/getContainer';
@@ -108,7 +109,7 @@ class Position extends React.Component {
       return;
     }
 
-    const overlay = React.findDOMNode(this);
+    const overlay = ReactDOM.findDOMNode(this);
     const container = getContainer(this.props.container, ownerDocument(this).body);
 
     this.setState(calcOverlayPosition(

src/RootCloseWrapper.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+
 import addEventListener from './utils/addEventListener';
 import createChainedFunction from './utils/createChainedFunction';
 import ownerDocument from './utils/ownerDocument';
@@ -31,7 +33,8 @@ export default class RootCloseWrapper extends React.Component {
     let { id, suppressRootClose } = getSuppressRootClose();
 
     this._suppressRootId = id;
-    this._suppressRootClosehHandler = suppressRootClose;
+
+    this._suppressRootCloseHandler = suppressRootClose;
   }
 
   bindRootCloseHandlers() {
@@ -79,14 +82,14 @@ export default class RootCloseWrapper extends React.Component {
 
     if (noWrap) {
       return React.cloneElement(child, {
-        onClick: createChainedFunction(this._suppressRootClosehHandler, child.props.onClick)
+        onClick: createChainedFunction(this._suppressRootCloseHandler, child.props.onClick)
       });
     }
 
     // Wrap the child in a new element, so the child won't have to handle
     // potentially combining multiple onClick listeners.
     return (
-      <div onClick={this._suppressRootClosehHandler}>
+      <div onClick={this._suppressRootCloseHandler}>
         {child}
       </div>
     );
@@ -97,7 +100,7 @@ export default class RootCloseWrapper extends React.Component {
     // stealing the ref from the owner, but we know exactly the DOM structure
     // that will be rendered, so we can just do this to get the child's DOM
     // node for doing size calculations in OverlayMixin.
-    const node = React.findDOMNode(this);
+    const node = ReactDOM.findDOMNode(this);
     return this.props.noWrap ? node : node.firstChild;
   }
 

src/Transition.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import transitionInfo from 'dom-helpers/transition/properties';
 import addEventListener from 'dom-helpers/events/on';
 import classnames from 'classnames';
@@ -84,7 +85,7 @@ class Transition extends React.Component {
 
   performEnter(props) {
     this.cancelNextCallback();
-    const node = React.findDOMNode(this);
+    const node = ReactDOM.findDOMNode(this);
 
     // Not this.props, because we might be about to receive new props.
     props.onEnter(node);
@@ -102,7 +103,7 @@ class Transition extends React.Component {
 
   performExit(props) {
     this.cancelNextCallback();
-    const node = React.findDOMNode(this);
+    const node = ReactDOM.findDOMNode(this);
 
     // Not this.props, because we might be about to receive new props.
     props.onExit(node);

src/utils/getContainer.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import ReactDOM from 'react-dom';
 
 export default function getContainer(container, defaultContainer){
   container = typeof container === 'function' ? container() : container;
-  return React.findDOMNode(container) || defaultContainer;
+  return ReactDOM.findDOMNode(container) || defaultContainer;
 }

src/utils/ownerDocument.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import ReactDOM from 'react-dom';
 import ownerDocument from 'dom-helpers/ownerDocument';
 
 export default function (componentOrElement) {
-  return ownerDocument(React.findDOMNode(componentOrElement));
+  return ownerDocument(ReactDOM.findDOMNode(componentOrElement));
 }

src/utils/ownerWindow.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import ReactDOM from 'react-dom';
 import ownerWindow from 'dom-helpers/ownerWindow';
 
 export default function (componentOrElement) {
-  return ownerWindow(React.findDOMNode(componentOrElement));
+  return ownerWindow(ReactDOM.findDOMNode(componentOrElement));
 }

test/ModalSpec.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Modal from '../src/Modal';
 import { render } from './helpers';
 import jquery from 'jquery';
 import simulant from 'simulant';
 import Transition from '../src/Transition';
 
-let $ = componentOrNode => jquery(React.findDOMNode(componentOrNode));
+let $ = componentOrNode => jquery(ReactDOM.findDOMNode(componentOrNode));
 
 describe('Modal', function () {
   let mountPoint;
@@ -17,7 +18,7 @@ describe('Modal', function () {
   });
 
   afterEach(function () {
-    React.unmountComponentAtNode(mountPoint);
+    ReactDOM.unmountComponentAtNode(mountPoint);
     document.body.removeChild(mountPoint);
   });
 
@@ -28,8 +29,7 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    assert.ok(
-      ReactTestUtils.findRenderedDOMComponentWithTag(instance.refs.modal, 'strong'));
+    assert.equal(instance.refs.modal.querySelectorAll('strong').length, 1);
   });
 
   it('Should disable scrolling on the modal container while open', function() {
@@ -57,7 +57,7 @@ describe('Modal', function () {
 
     let instance = render(<Container />, mountPoint);
     let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal);
-    let backdrop = React.findDOMNode(modal.refs.backdrop);
+    let backdrop = modal.refs.backdrop;
 
     expect($(instance).css('overflow')).to.equal('hidden');
 
@@ -92,7 +92,7 @@ describe('Modal', function () {
 
     let instance = render(<Container />, mountPoint);
     let modal = ReactTestUtils.findRenderedComponentWithType(instance, Modal);
-    let backdrop = React.findDOMNode(modal.refs.backdrop);
+    let backdrop = modal.refs.backdrop;
 
     expect($(instance).hasClass('test test2')).to.be.true;
 
@@ -109,7 +109,7 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.backdrop);
+    let backdrop = instance.refs.backdrop;
 
     ReactTestUtils.Simulate.click(backdrop);
 
@@ -124,7 +124,7 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.backdrop);
+    let backdrop = instance.refs.backdrop;
 
     ReactTestUtils.Simulate.click(backdrop);
   });
@@ -137,7 +137,7 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.backdrop);
+    let backdrop = instance.refs.backdrop;
 
     ReactTestUtils.Simulate.click(backdrop);
 
@@ -152,7 +152,7 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.backdrop);
+    let backdrop = instance.refs.backdrop;
 
     simulant.fire(backdrop, 'keyup', { keyCode: 27 });
   });
@@ -166,7 +166,7 @@ describe('Modal', function () {
       </Modal>
     , mountPoint);
 
-    let backdrop = React.findDOMNode(instance.refs.backdrop);
+    let backdrop = instance.refs.backdrop;
 
     expect(
       backdrop.style.borderWidth).to.equal('3px');
@@ -273,7 +273,7 @@ describe('Modal', function () {
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(focusableContainer);
+      ReactDOM.unmountComponentAtNode(focusableContainer);
       document.body.removeChild(focusableContainer);
     });
 

test/PortalSpec.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Portal from '../src/Portal';
 
@@ -20,7 +21,7 @@ describe('Portal', function () {
 
   afterEach(function() {
     if (instance && ReactTestUtils.isCompositeComponent(instance) && instance.isMounted()) {
-      React.unmountComponentAtNode(React.findDOMNode(instance));
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(instance));
     }
   });
 
@@ -45,7 +46,7 @@ describe('Portal', function () {
       <Container />
     );
 
-    assert.equal(React.findDOMNode(instance).querySelectorAll('#test1').length, 1);
+    assert.equal(ReactDOM.findDOMNode(instance).querySelectorAll('#test1').length, 1);
   });
 
   it('Should not render a null overlay', function() {

test/PositionSpec.js

@@ -1,5 +1,6 @@
 import pick from 'lodash/object/pick';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 
 import Position from '../src/Position';
@@ -14,7 +15,7 @@ describe('Position', function () {
         <span>Text</span>
       </Position>
     );
-    assert.equal(React.findDOMNode(instance).nodeName, 'SPAN');
+    assert.equal(ReactDOM.findDOMNode(instance).nodeName, 'SPAN');
   });
 
   it('Should warn about several children', function () {
@@ -57,7 +58,7 @@ describe('Position', function () {
               <div ref="bar" />
 
               <Position
-                target={() => React.findDOMNode(this.refs[this.state.target])}
+                target={() => this.refs[this.state.target]}
                 fakeProp={this.state.fakeProp}
               >
                 <div />
@@ -102,7 +103,7 @@ describe('Position', function () {
     });
 
     afterEach(function () {
-      React.unmountComponentAtNode(mountPoint);
+      ReactDOM.unmountComponentAtNode(mountPoint);
       document.body.removeChild(mountPoint);
     });
 
@@ -135,7 +136,7 @@ describe('Position', function () {
               }}/>
 
               <Position
-                target={() => React.findDOMNode(this.refs.target)}
+                target={() => this.refs.target}
                 container={this}
                 containerPadding={50}
                 placement={placement}