Breaking: Remove style/className support, shouldComponentUpdate.

Brings React 15.4 compatibility; doesn't rely on any internal React
modules.

If you need to style the portal, wrap your children in another
div.

lib/portal.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import ReactDOM, { findDOMNode } from 'react-dom';
-import CSSPropertyOperations from 'react/lib/CSSPropertyOperations';
-import shallowCompare from 'react/lib/shallowCompare';
 
 const KEYCODES = {
   ESCAPE: 27,
@@ -56,10 +54,6 @@ export default class Portal extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
-    return shallowCompare(this, nextProps, nextState);
-  }
-
   componentWillUnmount() {
     if (this.props.closeOnEsc) {
       document.removeEventListener('keydown', this.handleKeydown);
@@ -126,29 +120,10 @@ export default class Portal extends React.Component {
     }
   }
 
-  applyClassNameAndStyle(props) {
-    if (props.className) {
-      this.node.className = props.className;
-    }
-    if (props.style) {
-      // React 15.1.0+ requires third parameter in debug mode
-      /* eslint-disable no-underscore-dangle */
-      CSSPropertyOperations.setValueForStyles(this.node,
-                                              props.style,
-                                              this._reactInternalInstance);
-      /* eslint-enable no-underscore-dangle */
-    }
-  }
-
   renderPortal(props) {
     if (!this.node) {
       this.node = document.createElement('div');
-      // apply CSS before the node is added to the DOM to avoid needless reflows
-      this.applyClassNameAndStyle(props);
       document.body.appendChild(this.node);
-    } else {
-      // update CSS when new props arrive
-      this.applyClassNameAndStyle(props);
     }
 
     let children = props.children;
@@ -174,8 +149,6 @@ export default class Portal extends React.Component {
 }
 
 Portal.propTypes = {
-  className: React.PropTypes.string,
-  style: React.PropTypes.object,
   children: React.PropTypes.element.isRequired,
   openByClickOn: React.PropTypes.element,
   closeOnEsc: React.PropTypes.bool,

test/portal_spec.js

@@ -72,26 +72,27 @@ describe('react-portal', () => {
     assert.equal(closePortal, wrapper.instance().closePortal);
   });
 
-  it('should add className to the portal\'s wrapping node', () => {
+  // style & className were removed in 3.0
+  it('should not add className to the portal\'s wrapper', () => {
     mount(<Portal className="some-class" isOpened><p>Hi</p></Portal>);
-    assert.equal(document.body.lastElementChild.className, 'some-class');
+    assert.notEqual(document.body.lastElementChild.className, 'some-class');
   });
 
-  it('should add inline style to the portal\'s wrapping node', () => {
+  it('should not add inline style to the portal\'s wrapper', () => {
     mount(<Portal isOpened style={{ color: 'blue' }}><p>Hi</p></Portal>);
-    assert.equal(document.body.lastElementChild.style.color, 'blue');
+    assert.notEqual(document.body.lastElementChild.style.color, 'blue');
   });
 
-  it('should update className on the portal\'s wrapping node when props.className changes', () => {
+  it('should not update className on the portal\'s wrapper when props.className changes', () => {
     const wrapper = mount(<Portal className="some-class" isOpened><p>Hi</p></Portal>);
     wrapper.setProps({ className: 'some-other-class', children: <p>Hi</p> });
-    assert.equal(document.body.lastElementChild.className, 'some-other-class');
+    assert.notEqual(document.body.lastElementChild.className, 'some-other-class');
   });
 
-  it('should update inline style on the portal\'s wrapping node when props.style changes', () => {
+  it('should not update inline style on the portal\'s wrapper when props.style changes', () => {
     const wrapper = mount(<Portal isOpened style={{ color: 'blue' }}><p>Hi</p></Portal>);
     wrapper.setProps({ style: { color: 'red' }, children: <p>Hi</p> });
-    assert.equal(document.body.lastElementChild.style.color, 'red');
+    assert.notEqual(document.body.lastElementChild.style.color, 'red');
   });
 
   describe('callbacks', () => {