From 56e667ca223a16df9a7e26b13fa47442d9b69365 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Thu, 2 Nov 2017 14:17:19 +0100
Subject: [PATCH 01/21] Bumped react react-dom and html-react-parser version.

---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index c8ea76b1..467009a5 100644
--- a/package.json
+++ b/package.json
@@ -53,10 +53,10 @@
     "mocha": "^3.2.0",
     "nyc": "^10.1.2",
     "prettier": "^1.4.4",
-    "react": "^15.4.2",
+    "react": "^16.0.0",
     "react-addons-test-utils": "^15.4.2",
     "react-docgen": "^2.14.0",
-    "react-dom": "^15.4.2",
+    "react-dom": "^16.0.0",
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.2",
     "sinon": "^1.17.7",
@@ -81,7 +81,7 @@
     "date-fns": "^1.27.2",
     "emojione": "^3.0.3",
     "escape-html": "^1.0.3",
-    "html-react-parser": "^0.3.4",
+    "html-react-parser": "^0.4.0",
     "lodash": "^4.17.4",
     "mobile-detect": "^1.3.6",
     "radium": "^0.19.0",

From 5fb17612d05f3bfb31465dd00aa54848a2e88520 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Thu, 2 Nov 2017 14:32:03 +0100
Subject: [PATCH 02/21] Bumped react and react-dom version.

---
 docs/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 50bf27ce..fd184ac2 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -49,8 +49,8 @@
     "lodash": "^4.17.4",
     "prop-types": "^15.5.6",
     "radium": "^0.19.1",
-    "react": "^15.5.3",
-    "react-dom": "^15.5.3",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "react-jss": "^5.3.0",
     "react-markdown": "^2.4.4",
     "react-router": "^3.0.2",

From 745a6498d1487b026ffeb4fb4ccfd605122df147 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Thu, 2 Nov 2017 15:16:03 +0100
Subject: [PATCH 03/21] Fixed all the tests. Fixes #930.

---
 .nycrc         |  8 ++++++++
 mocha-setup.js |  4 ++++
 mocha.opts     |  2 ++
 package.json   | 10 +++++-----
 4 files changed, 19 insertions(+), 5 deletions(-)
 create mode 100644 .nycrc
 create mode 100644 mocha-setup.js
 create mode 100644 mocha.opts

diff --git a/.nycrc b/.nycrc
new file mode 100644
index 00000000..a10a6aa1
--- /dev/null
+++ b/.nycrc
@@ -0,0 +1,8 @@
+{
+  "reporter": [
+    "text"
+  ],
+  "exclude": [
+    "test/**/*"
+  ]
+}
diff --git a/mocha-setup.js b/mocha-setup.js
new file mode 100644
index 00000000..c855e1cb
--- /dev/null
+++ b/mocha-setup.js
@@ -0,0 +1,4 @@
+const Adapter = require('enzyme-adapter-react-16');
+const enzyme = require('enzyme');
+
+enzyme.configure({ adapter: new Adapter() });
diff --git a/mocha.opts b/mocha.opts
new file mode 100644
index 00000000..7001a18a
--- /dev/null
+++ b/mocha.opts
@@ -0,0 +1,2 @@
+--require ./mocha-setup
+--compilers js:babel-core/register
diff --git a/package.json b/package.json
index 467009a5..c3b66151 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
     "/*"
   ],
   "scripts": {
-    "test": "NODE_ENV=test nyc mocha --compilers js:babel-core/register test/*",
-    "test:watch": "NODE_ENV=test mocha --watch --compilers js:babel-core/register test/*",
+    "test": "NODE_ENV=test nyc mocha --opts ./mocha.opts test/*",
+    "test:watch": "NODE_ENV=test mocha --opts ./mocha.opts --watch test/*",
     "watch": "babel -d dist/ -w src/",
     "compile": "rimraf dist && babel -d dist/ src/",
     "lint": "eslint '{src,docs/src,test}/**/**/*.{js,jsx}'",
@@ -43,7 +43,8 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
     "chai": "^3.5.0",
-    "enzyme": "^2.7.0",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.3",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
     "eslint-plugin-import": "^2.6.1",
@@ -51,10 +52,9 @@
     "eslint-plugin-mocha": "^4.8.0",
     "eslint-plugin-react": "^7.1.0",
     "mocha": "^3.2.0",
-    "nyc": "^10.1.2",
+    "nyc": "^11.2.1",
     "prettier": "^1.4.4",
     "react": "^16.0.0",
-    "react-addons-test-utils": "^15.4.2",
     "react-docgen": "^2.14.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^15.5.4",

From 604d2275a8e30291a837099c131f5a614e110393 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 14:25:16 +0100
Subject: [PATCH 04/21] Added react-portal to portal pop-over element to bottom
 of root.

---
 package.json           |  1 +
 src/pop-over/index.jsx | 32 ++++++++++++++++++--------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index c3b66151..8466beda 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "react-event-listener": "^0.4.5",
     "react-measure": "^1.4.5",
     "react-onclickoutside": "^6.6.3",
+    "react-portal": "^4.0.0",
     "recompose": "^0.22.0",
     "tlds": "^1.182.0"
   }
diff --git a/src/pop-over/index.jsx b/src/pop-over/index.jsx
index a5800489..fd8f36a4 100644
--- a/src/pop-over/index.jsx
+++ b/src/pop-over/index.jsx
@@ -1,6 +1,8 @@
+/* global document */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Radium from 'radium';
+import { Portal } from 'react-portal';
 import getStyles from './get-styles';
 import Divider from '../divider';
 
@@ -34,20 +36,22 @@ const PopOver = ({
   }
 
   return (
-    <section
-      style={getStyles.root(position, style)}
-      ref={popOverRef}
-      {...custom}
-    >
-      {
-        header
-        ? <h1 onClick={onHeaderClick} style={getStyles.header(headerStyle)}>{header}</h1>
-        : null
-      }
-      {children}
-      {divider}
-      {secondaryMenuItems}
-    </section>
+    <Portal node={document && document.getElementsByTagName('main')[0]}>
+      <section
+        style={getStyles.root(position, style)}
+        ref={popOverRef}
+        {...custom}
+      >
+        {
+          header
+          ? <h1 onClick={onHeaderClick} style={getStyles.header(headerStyle)}>{header}</h1>
+          : null
+        }
+        {children}
+        {divider}
+        {secondaryMenuItems}
+      </section>
+    </Portal>
   );
 };
 

From d1dde86078ff97db7be28ede5089f5ab61895ea6 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 15:28:57 +0100
Subject: [PATCH 05/21] Added own portal component.

---
 package.json           |  1 -
 src/pop-over/index.jsx |  4 ++--
 src/portal/index.jsx   | 51 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 3 deletions(-)
 create mode 100644 src/portal/index.jsx

diff --git a/package.json b/package.json
index 8466beda..c3b66151 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,6 @@
     "react-event-listener": "^0.4.5",
     "react-measure": "^1.4.5",
     "react-onclickoutside": "^6.6.3",
-    "react-portal": "^4.0.0",
     "recompose": "^0.22.0",
     "tlds": "^1.182.0"
   }
diff --git a/src/pop-over/index.jsx b/src/pop-over/index.jsx
index fd8f36a4..54d29d8b 100644
--- a/src/pop-over/index.jsx
+++ b/src/pop-over/index.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Radium from 'radium';
-import { Portal } from 'react-portal';
+import Portal from '../portal';
 import getStyles from './get-styles';
 import Divider from '../divider';
 
@@ -36,7 +36,7 @@ const PopOver = ({
   }
 
   return (
-    <Portal node={document && document.getElementsByTagName('main')[0]}>
+    <Portal node={document.getElementsByTagName('main')[0]}>
       <section
         style={getStyles.root(position, style)}
         ref={popOverRef}
diff --git a/src/portal/index.jsx b/src/portal/index.jsx
new file mode 100644
index 00000000..21695895
--- /dev/null
+++ b/src/portal/index.jsx
@@ -0,0 +1,51 @@
+/* global document */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom'; // eslint-disable-line import/no-extraneous-dependencies
+import isObject from 'lodash/isObject';
+import isFunction from 'lodash/isFunction';
+
+class Portal extends React.Component {
+  static displayName = 'Portal'
+
+  static propTypes = {
+    /** Content to be portaled */
+    children: PropTypes.node.isRequired,
+    /** Optional node to portal children to */
+    node: PropTypes.node
+  };
+
+  static defaultProps = {
+    node: null
+  };
+
+  componentWillUnmount() {
+    if (this.defaultNode) {
+      document.body.removeChild(this.defaultNode);
+    }
+
+    this.defaultNode = null;
+  }
+
+  render() {
+    if (!isObject(window) && !window.document && !window.document.createElement) {
+      return false;
+    }
+
+    if (!this.props.node && !this.defaultNode) {
+      this.defaultNode = document.createElement('div');
+      document.body.appendChild(this.defaultNode);
+    }
+
+    if (!isFunction(createPortal)) {
+      return this.props.children;
+    }
+
+    return createPortal(
+      this.props.children,
+      this.props.node || this.defaultNode
+    );
+  }
+}
+
+export default Portal;

From 4f169994a7fc42af1fc12332cf12936f07c4e0dc Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 15:38:10 +0100
Subject: [PATCH 06/21] Deconstructed props.

---
 src/portal/index.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/portal/index.jsx b/src/portal/index.jsx
index 21695895..d9cef9b8 100644
--- a/src/portal/index.jsx
+++ b/src/portal/index.jsx
@@ -12,7 +12,7 @@ class Portal extends React.Component {
     /** Content to be portaled */
     children: PropTypes.node.isRequired,
     /** Optional node to portal children to */
-    node: PropTypes.node
+    node: PropTypes.instanceOf(Object)
   };
 
   static defaultProps = {
@@ -28,22 +28,24 @@ class Portal extends React.Component {
   }
 
   render() {
+    const { children, node } = this.props;
+
     if (!isObject(window) && !window.document && !window.document.createElement) {
       return false;
     }
 
-    if (!this.props.node && !this.defaultNode) {
+    if (!node && !this.defaultNode) {
       this.defaultNode = document.createElement('div');
       document.body.appendChild(this.defaultNode);
     }
 
     if (!isFunction(createPortal)) {
-      return this.props.children;
+      return children;
     }
 
     return createPortal(
-      this.props.children,
-      this.props.node || this.defaultNode
+      children,
+      node || this.defaultNode
     );
   }
 }

From 0a59bdb44f18c3fd6d68d33371ef32dbda83e060 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 16:06:55 +0100
Subject: [PATCH 07/21] Added doc page about portal component. Fixes #783.

---
 docs/components.json                  | 56 ++++++++++-----------
 docs/src/components/nav.jsx           |  1 +
 docs/src/components/portal/example.js | 42 ++++++++++++++++
 docs/src/components/portal/index.jsx  | 71 +++++++++++++++++++++++++++
 docs/src/index.js                     |  2 +
 5 files changed, 144 insertions(+), 28 deletions(-)
 create mode 100644 docs/src/components/portal/example.js
 create mode 100644 docs/src/components/portal/index.jsx

diff --git a/docs/components.json b/docs/components.json
index 7af48b29..0d6e6d3f 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -465,7 +465,7 @@
       }
     }
   },
-  "components/button/index.jsx": {
+  "components/button/component.jsx": {
     "description": "General purpose button with three types",
     "displayName": "Button",
     "methods": [],
@@ -4729,22 +4729,7 @@
   "components/message/index.jsx": {
     "description": "Messages with optional styling for the current user's message,\ndifferent font sizes and message styles",
     "displayName": "Message",
-    "methods": [
-      {
-        "name": "renderIconMenu",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      },
-      {
-        "name": "renderImageIconMenu",
-        "docblock": null,
-        "modifiers": [],
-        "params": [],
-        "returns": null
-      }
-    ],
+    "methods": [],
     "props": {
       "avatar": {
         "type": {
@@ -5067,17 +5052,6 @@
           "computed": false
         }
       },
-      "iconColor": {
-        "type": {
-          "name": "string"
-        },
-        "required": false,
-        "description": "Color for the IconMenu's icon",
-        "defaultValue": {
-          "value": "colors.icons",
-          "computed": true
-        }
-      },
       "enableMultiline": {
         "type": {
           "name": "bool"
@@ -5873,6 +5847,32 @@
       }
     }
   },
+  "components/portal/index.jsx": {
+    "description": "",
+    "displayName": "Portal",
+    "methods": [],
+    "props": {
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": true,
+        "description": "Content to be portaled"
+      },
+      "node": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Optional node to portal children to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      }
+    }
+  },
   "components/profile/index.jsx": {
     "description": "Profile useful for showing a user's info",
     "displayName": "Profile",
diff --git a/docs/src/components/nav.jsx b/docs/src/components/nav.jsx
index cfcbf940..0b19e55e 100644
--- a/docs/src/components/nav.jsx
+++ b/docs/src/components/nav.jsx
@@ -70,6 +70,7 @@ const Nav = ({ media, toggleMenu, open }, context) => {
       <MenuItem onClick={() => router.push('/pagination')} active={router.isActive('/pagination')} text="Pagination" />
       <MenuItem onClick={() => router.push('/paper')} active={router.isActive('/paper')} text="Paper" />
       <MenuItem onClick={() => router.push('/pop-over')} active={router.isActive('/pop-over')} text="PopOver" />
+      <MenuItem onClick={() => router.push('/portal')} active={router.isActive('/portal')} text="Portal" />
       <MenuItem onClick={() => router.push('/profile')} active={router.isActive('/profile')} text="Profile" />
       <MenuItem onClick={() => router.push('/profile-card')} active={router.isActive('/profile-card')} text="ProfileCard" />
       <MenuItem onClick={() => router.push('/radio-button')} active={router.isActive('/radio-button')} text="RadioButton" />
diff --git a/docs/src/components/portal/example.js b/docs/src/components/portal/example.js
new file mode 100644
index 00000000..e751e330
--- /dev/null
+++ b/docs/src/components/portal/example.js
@@ -0,0 +1,42 @@
+export default `
+  \`\`\`jsx
+  import React, { Component } from 'react';
+  import MessageInput from 'anchor-ui/message-input';
+
+  class MyComponent extends Component {
+    state = {
+      value: ''
+    }
+
+    // This is called by both enter and click
+    handleSendMessage = () => {
+      // Assuming there is a function/prop which actually sends the message
+      const { sendMessage } = this.props;
+
+      // Grab input value from state. This is set by handleChange
+      const { value } = this.state;
+
+      sendMessage(value);
+    }
+
+    handleChange = (event) => {
+      this.setState({
+        value: event.currentTarget.value
+      });
+    }
+
+    render() {
+      const { value } = this.state;
+
+      return (
+        <MessageInput
+          onChange={this.handleChange}
+          placeholder="Type something..."
+          value={value}
+          sendMessage={this.handleSendMessage}
+        />
+      );
+    }
+  }
+  \`\`\`
+`;
diff --git a/docs/src/components/portal/index.jsx b/docs/src/components/portal/index.jsx
new file mode 100644
index 00000000..0931e331
--- /dev/null
+++ b/docs/src/components/portal/index.jsx
@@ -0,0 +1,71 @@
+/* global document */
+import React from 'react';
+import _ from 'lodash';
+import IconRocket from '../../../../dist/icons/icon-rocket';
+import Button from '../../../../dist/button';
+import Portal from '../../../../dist/portal';
+import Props from '../props';
+import components from '../../../components.json';
+import Paper from '../../../../dist/paper';
+import example from './example';
+import Markdown from '../markdown';
+
+class PortalDoc extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      portal: false
+    };
+  }
+
+  togglePortal = () => {
+    const { portal } = this.state;
+
+    this.setState({
+      portal: !portal
+    });
+  }
+
+  render() {
+    const { portal } = this.state;
+    const componentData = _.find(components, component => component.displayName === 'Portal');
+    const style = {
+      paper: {
+        margin: 0,
+        padding: '20px'
+      },
+      button: { margin: '10px' }
+    };
+
+    return (
+      <article className="page">
+        <h1>Portal</h1>
+        <section>
+          <h1>Description</h1>
+          <p>{componentData.description}</p>
+        </section>
+        <section>
+          <h1>Examples</h1>
+          <Markdown markdown={example} title="Code example" />
+          <Paper style={style.paper} id="portal-container">
+            <h2>{portal ? 'Remove the Portal' : 'Add a Portal'}</h2>
+            <Button onClick={this.togglePortal} style={style.button} iconButton>
+              <IconRocket />
+            </Button>
+            {
+              portal
+                ? <Portal node={document.getElementById('portal-container')}>
+                  <div>I got portaled to the bottom of this section!</div>
+                </Portal>
+                : null
+            }
+          </Paper>
+        </section>
+        <Props props={componentData.props} />
+      </article>
+    );
+  }
+}
+
+export default PortalDoc;
diff --git a/docs/src/index.js b/docs/src/index.js
index f8de7ff5..4c94eafb 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -51,6 +51,7 @@ import DateSeparator from './components/date-separator';
 import EmojiFilter from './components/emoji-filter';
 import Gallery from './components/gallery';
 import Media from './components/media';
+import Portal from './components/portal';
 import './css/meyer-reset.css';
 import './css/index.css';
 import './css/prism.css';
@@ -105,6 +106,7 @@ ReactDOM.render(
         <Route path="/emoji-filter" component={EmojiFilter} />
         <Route path="/gallery" component={Gallery} />
         <Route path="/media" component={Media} />
+        <Route path="/portal" component={Portal} />
       </Route>
     </Router>
   </StyleRoot>,

From 031eba6041374c77eefd8766d95e68e4afdc4845 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 16:15:04 +0100
Subject: [PATCH 08/21] Added example for portal component.

---
 docs/src/components/portal/example.js | 37 ++++++++++++---------------
 1 file changed, 16 insertions(+), 21 deletions(-)

diff --git a/docs/src/components/portal/example.js b/docs/src/components/portal/example.js
index e751e330..7649979d 100644
--- a/docs/src/components/portal/example.js
+++ b/docs/src/components/portal/example.js
@@ -1,40 +1,35 @@
 export default `
   \`\`\`jsx
   import React, { Component } from 'react';
-  import MessageInput from 'anchor-ui/message-input';
+  import Portal from 'anchor-ui/portal';
 
   class MyComponent extends Component {
     state = {
-      value: ''
+      portalOpen: false
     }
 
-    // This is called by both enter and click
-    handleSendMessage = () => {
-      // Assuming there is a function/prop which actually sends the message
-      const { sendMessage } = this.props;
+    togglePortal = () => {
+      const { portalOpen } = this.state;
 
-      // Grab input value from state. This is set by handleChange
-      const { value } = this.state;
-
-      sendMessage(value);
-    }
-
-    handleChange = (event) => {
       this.setState({
-        value: event.currentTarget.value
+        portalOpen: !portalOpen
       });
     }
 
     render() {
-      const { value } = this.state;
+      const { portalOpen } = this.state;
 
       return (
-        <MessageInput
-          onChange={this.handleChange}
-          placeholder="Type something..."
-          value={value}
-          sendMessage={this.handleSendMessage}
-        />
+        <section>
+          <Button onClick={this.togglePortal}>Portal</Button>
+          {
+            portalOpen
+              ? <Portal node={document.getElementById('root')}>
+                // children to be portaled
+              </Portal>
+              :null
+          }
+        </section>
       );
     }
   }

From 934c6e5606ebfadcbaeb2eb23bf50cf67da35d7e Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 16:18:36 +0100
Subject: [PATCH 09/21] Added description for docs page.

---
 docs/components.json | 2 +-
 src/portal/index.jsx | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/components.json b/docs/components.json
index 0d6e6d3f..298d34b8 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -5848,7 +5848,7 @@
     }
   },
   "components/portal/index.jsx": {
-    "description": "",
+    "description": "For transportation of elements to document.body of an element of choice",
     "displayName": "Portal",
     "methods": [],
     "props": {
diff --git a/src/portal/index.jsx b/src/portal/index.jsx
index d9cef9b8..89f15f6c 100644
--- a/src/portal/index.jsx
+++ b/src/portal/index.jsx
@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom'; // eslint-disable-line import/no-extra
 import isObject from 'lodash/isObject';
 import isFunction from 'lodash/isFunction';
 
+/** For transportation of elements to document.body of an element of choice */
 class Portal extends React.Component {
   static displayName = 'Portal'
 

From 98dc8f778e9f0da867b5895746ee3a0119f7eabb Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 16:20:39 +0100
Subject: [PATCH 10/21] Added description for docs page.

---
 docs/components.json | 2 +-
 src/portal/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/components.json b/docs/components.json
index 298d34b8..aab7405f 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -5848,7 +5848,7 @@
     }
   },
   "components/portal/index.jsx": {
-    "description": "For transportation of elements to document.body of an element of choice",
+    "description": "For transportation of elements to document.body or an element of choice",
     "displayName": "Portal",
     "methods": [],
     "props": {
diff --git a/src/portal/index.jsx b/src/portal/index.jsx
index 89f15f6c..84635f5d 100644
--- a/src/portal/index.jsx
+++ b/src/portal/index.jsx
@@ -5,7 +5,7 @@ import { createPortal } from 'react-dom'; // eslint-disable-line import/no-extra
 import isObject from 'lodash/isObject';
 import isFunction from 'lodash/isFunction';
 
-/** For transportation of elements to document.body of an element of choice */
+/** For transportation of elements to document.body or an element of choice */
 class Portal extends React.Component {
   static displayName = 'Portal'
 

From 5232a412d69ec193d28128c88c12faa2c8e59684 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Tue, 7 Nov 2017 16:35:26 +0100
Subject: [PATCH 11/21] Added alert about react v16.

---
 docs/src/components/portal/index.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/src/components/portal/index.jsx b/docs/src/components/portal/index.jsx
index 0931e331..1792bf8f 100644
--- a/docs/src/components/portal/index.jsx
+++ b/docs/src/components/portal/index.jsx
@@ -4,6 +4,7 @@ import _ from 'lodash';
 import IconRocket from '../../../../dist/icons/icon-rocket';
 import Button from '../../../../dist/button';
 import Portal from '../../../../dist/portal';
+import Alert from '../../../../dist/alert';
 import Props from '../props';
 import components from '../../../components.json';
 import Paper from '../../../../dist/paper';
@@ -35,12 +36,18 @@ class PortalDoc extends React.Component {
         margin: 0,
         padding: '20px'
       },
-      button: { margin: '10px' }
+      button: { margin: '10px' },
+      alert: { maxWidth: '100%' }
     };
 
     return (
       <article className="page">
         <h1>Portal</h1>
+        <Alert
+          style={style.alert}
+          text="Portal will only transport elements to desired element in React v16 or later. If React isn't at v16 it will render the element where it's called."
+          type="warning"
+        />
         <section>
           <h1>Description</h1>
           <p>{componentData.description}</p>

From ba9869cab7c154413ab4f6eb9e08eb969bf2f5d8 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Wed, 8 Nov 2017 09:24:30 +0100
Subject: [PATCH 12/21] Made passthrough for portal node prop instead.

---
 docs/src/components/icon-menu.jsx |  3 +++
 docs/src/components/select.jsx    |  3 +++
 src/icon-menu/index.jsx           |  9 +++++++--
 src/pop-over/index.jsx            | 11 +++++++----
 src/portal/index.jsx              | 11 +++++------
 src/select/index.jsx              |  7 ++++++-
 6 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/docs/src/components/icon-menu.jsx b/docs/src/components/icon-menu.jsx
index 2e0611b9..486bb108 100644
--- a/docs/src/components/icon-menu.jsx
+++ b/docs/src/components/icon-menu.jsx
@@ -1,3 +1,4 @@
+/* global document */
 import React from 'react';
 import _ from 'lodash';
 import IconMenu from '../../../dist/icon-menu';
@@ -62,6 +63,7 @@ const IconMenuDoc = () => {
               headerStyle={style.headerStyle}
               secondaryMenuItems={[<MenuItem icon={<IconRocket />} text="An item" onClick={() => {}} />, <MenuItem text="Another item" onClick={() => {}} />]}
               dividerText="More items"
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Active item" onClick={() => {}} active />
               <MenuItem text="Inactive item" onClick={() => {}} />
@@ -77,6 +79,7 @@ const IconMenuDoc = () => {
               secondaryMenuItems={[<MenuItem icon={<IconRocket />} text="An item" onClick={() => {}} />, <MenuItem text="Another item" onClick={() => {}} />]}
               dividerText="More items"
               buttonStyle={style.button}
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Active item" onClick={() => {}} active />
               <MenuItem text="Inactive item" onClick={() => {}} />
diff --git a/docs/src/components/select.jsx b/docs/src/components/select.jsx
index da3720e3..d5c9f253 100644
--- a/docs/src/components/select.jsx
+++ b/docs/src/components/select.jsx
@@ -1,3 +1,4 @@
+/* global document */
 import React, { Component } from 'react';
 import _ from 'lodash';
 import MenuItem from '../../../dist/menu-item';
@@ -64,6 +65,7 @@ class SelectDoc extends Component {
               label="Select"
               onChange={this.changeValue}
               style={style.select}
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Menu item" value={1} />
               <MenuItem text="Menu item 2" value={2} />
@@ -74,6 +76,7 @@ class SelectDoc extends Component {
               onChange={this.changeValueError}
               style={style.select}
               error="Error message"
+              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Menu item" value={1} />
               <MenuItem text="Menu item 2" value={2} />
diff --git a/src/icon-menu/index.jsx b/src/icon-menu/index.jsx
index a02e326b..d290c887 100644
--- a/src/icon-menu/index.jsx
+++ b/src/icon-menu/index.jsx
@@ -45,7 +45,9 @@ class IconMenu extends Component {
      */
     onHeaderClick: PropTypes.func,
     /** Override the styles of the Button component */
-    buttonStyle: PropTypes.instanceOf(Object)
+    buttonStyle: PropTypes.instanceOf(Object),
+    /** Node to portal PopOver to */
+    portalNode: PropTypes.instanceOf(Object)
   }
 
   static defaultProps = {
@@ -58,7 +60,8 @@ class IconMenu extends Component {
     dividerText: null,
     onMenuClose: () => {},
     onHeaderClick: () => {},
-    buttonStyle: {}
+    buttonStyle: {},
+    portalNode: null
   }
 
   constructor() {
@@ -156,6 +159,7 @@ class IconMenu extends Component {
       dividerStyle,
       onHeaderClick,
       buttonStyle,
+      portalNode,
       ...custom
     } = this.props;
     const { open, position } = this.state;
@@ -198,6 +202,7 @@ class IconMenu extends Component {
           dividerText={dividerText}
           dividerStyle={dividerStyle}
           onHeaderClick={this.handleHeaderClick}
+          portalNode={portalNode}
         >
           {menuItemsWithProps}
         </PopOver>
diff --git a/src/pop-over/index.jsx b/src/pop-over/index.jsx
index 54d29d8b..b2cd84ad 100644
--- a/src/pop-over/index.jsx
+++ b/src/pop-over/index.jsx
@@ -1,4 +1,3 @@
-/* global document */
 import React from 'react';
 import PropTypes from 'prop-types';
 import Radium from 'radium';
@@ -19,6 +18,7 @@ const PopOver = ({
   dividerText,
   dividerStyle,
   onHeaderClick,
+  portalNode,
   ...custom
 }) => {
   if (!open) {
@@ -36,7 +36,7 @@ const PopOver = ({
   }
 
   return (
-    <Portal node={document.getElementsByTagName('main')[0]}>
+    <Portal node={portalNode}>
       <section
         style={getStyles.root(position, style)}
         ref={popOverRef}
@@ -83,7 +83,9 @@ PopOver.propTypes = {
    *
    * function(event: object) => void
    */
-  onHeaderClick: PropTypes.func
+  onHeaderClick: PropTypes.func,
+  /** Node to portal PopOver to */
+  portalNode: PropTypes.instanceOf(Object)
 };
 
 PopOver.defaultProps = {
@@ -95,7 +97,8 @@ PopOver.defaultProps = {
   secondaryMenuItems: null,
   dividerText: null,
   dividerStyle: {},
-  onHeaderClick: null
+  onHeaderClick: null,
+  portalNode: null
 };
 
 export default Radium(PopOver);
diff --git a/src/portal/index.jsx b/src/portal/index.jsx
index 84635f5d..5c958483 100644
--- a/src/portal/index.jsx
+++ b/src/portal/index.jsx
@@ -31,8 +31,11 @@ class Portal extends React.Component {
   render() {
     const { children, node } = this.props;
 
-    if (!isObject(window) && !window.document && !window.document.createElement) {
-      return false;
+    if (
+      (!isObject(window) && !window.document && !window.document.createElement)
+      || !isFunction(createPortal)
+    ) {
+      return children;
     }
 
     if (!node && !this.defaultNode) {
@@ -40,10 +43,6 @@ class Portal extends React.Component {
       document.body.appendChild(this.defaultNode);
     }
 
-    if (!isFunction(createPortal)) {
-      return children;
-    }
-
     return createPortal(
       children,
       node || this.defaultNode
diff --git a/src/select/index.jsx b/src/select/index.jsx
index bda6a8df..1f56a7a3 100644
--- a/src/select/index.jsx
+++ b/src/select/index.jsx
@@ -46,6 +46,8 @@ class Select extends Component {
     errorStyle: PropTypes.instanceOf(Object),
     /** The header's icon color */
     iconColor: PropTypes.string,
+    /** Node to portal PopOver to */
+    portalNode: PropTypes.instanceOf(Object),
     color: PropTypes.string.isRequired
   }
 
@@ -59,7 +61,8 @@ class Select extends Component {
     placeholder: '',
     error: null,
     errorStyle: {},
-    iconColor: colors.white
+    iconColor: colors.white,
+    portalNode: null
   }
 
   constructor() {
@@ -153,6 +156,7 @@ class Select extends Component {
       disableOnClickOutside, // eslint-disable-line react/prop-types
       enableOnClickOutside, // eslint-disable-line react/prop-types
       iconColor,
+      portalNode,
       ...custom
     } = this.props;
 
@@ -195,6 +199,7 @@ class Select extends Component {
           open={open}
           popOverRef={(popOver) => { this.popOver = popOver; }}
           position={position}
+          portalNode={portalNode}
         >
           {childrenWithProps}
         </PopOver>

From 48690c085f0778a688cd4d4cb5adadc96a16cfaf Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Wed, 8 Nov 2017 09:39:44 +0100
Subject: [PATCH 13/21] Fixed Selects positioning.

---
 src/internal/get-pop-over-position.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/internal/get-pop-over-position.js b/src/internal/get-pop-over-position.js
index 80178c82..a10a2fd3 100644
--- a/src/internal/get-pop-over-position.js
+++ b/src/internal/get-pop-over-position.js
@@ -57,7 +57,7 @@ const getPopOverPosition = (button, popOver, type = 'iconMenu') => {
   }
 
   if (type === 'select') {
-    position = combineStyles(position, { left: 'initial', right: 'initial' });
+    position = combineStyles(position, { left: button.left, right: 'initial' });
   }
 
   return position;

From 47fffc4a0caf671b5e3a957315b88c02fcd472b9 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Wed, 8 Nov 2017 09:41:56 +0100
Subject: [PATCH 14/21] Fixed pop-over-position test.

---
 test/internal/get-pop-over-position.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/internal/get-pop-over-position.test.js b/test/internal/get-pop-over-position.test.js
index 97c7d93a..34f57d03 100644
--- a/test/internal/get-pop-over-position.test.js
+++ b/test/internal/get-pop-over-position.test.js
@@ -144,7 +144,7 @@ describe('getPopOverPosition', () => {
     expect(position.position).to.equal('fixed');
     expect(position).to.have.all.keys('position', 'top', 'right', 'bottom', 'left');
     expect(position.right).to.equal('initial');
-    expect(position.left).to.equal('initial');
+    expect(position.left).to.equal(button.left);
   });
 
 

From fafbb627ad8b206867f40cc2e0fad5b9389ba402 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Wed, 8 Nov 2017 09:42:26 +0100
Subject: [PATCH 15/21] DocGen.

---
 docs/components.json | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/docs/components.json b/docs/components.json
index aab7405f..7b8eb541 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -2433,6 +2433,18 @@
           "value": "{}",
           "computed": false
         }
+      },
+      "portalNode": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Node to portal PopOver to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
       }
     }
   },
@@ -5844,6 +5856,18 @@
           "value": "null",
           "computed": false
         }
+      },
+      "portalNode": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Node to portal PopOver to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
       }
     }
   },
@@ -6635,6 +6659,18 @@
           "computed": true
         }
       },
+      "portalNode": {
+        "type": {
+          "name": "instanceOf",
+          "value": "Object"
+        },
+        "required": false,
+        "description": "Node to portal PopOver to",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
       "color": {
         "type": {
           "name": "string"

From c99f8ed59ffcb85fb29cfc5f60dce864f3695857 Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Wed, 8 Nov 2017 10:55:32 +0100
Subject: [PATCH 16/21] Adjusted in favor of comments.

---
 .eslintrc                         |  3 ++-
 docs/components.json              | 36 -------------------------------
 docs/src/components/icon-menu.jsx |  2 --
 docs/src/components/select.jsx    |  2 --
 docs/src/css/index.css            |  7 ++----
 package.json                      |  2 +-
 src/icon-menu/index.jsx           |  9 ++------
 src/pop-over/index.jsx            | 10 +++------
 src/portal/index.jsx              | 31 +++++++++++++++++++-------
 src/select/index.jsx              |  7 +-----
 10 files changed, 34 insertions(+), 75 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 8745ce85..c9c95c0a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -8,7 +8,8 @@
     "react/no-danger": 0
   },
   "globals": {
-    "window": true
+    "window": true,
+    "document": true
   },
   "plugins": [
     "mocha"
diff --git a/docs/components.json b/docs/components.json
index 7b8eb541..aab7405f 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -2433,18 +2433,6 @@
           "value": "{}",
           "computed": false
         }
-      },
-      "portalNode": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "Node to portal PopOver to",
-        "defaultValue": {
-          "value": "null",
-          "computed": false
-        }
       }
     }
   },
@@ -5856,18 +5844,6 @@
           "value": "null",
           "computed": false
         }
-      },
-      "portalNode": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "Node to portal PopOver to",
-        "defaultValue": {
-          "value": "null",
-          "computed": false
-        }
       }
     }
   },
@@ -6659,18 +6635,6 @@
           "computed": true
         }
       },
-      "portalNode": {
-        "type": {
-          "name": "instanceOf",
-          "value": "Object"
-        },
-        "required": false,
-        "description": "Node to portal PopOver to",
-        "defaultValue": {
-          "value": "null",
-          "computed": false
-        }
-      },
       "color": {
         "type": {
           "name": "string"
diff --git a/docs/src/components/icon-menu.jsx b/docs/src/components/icon-menu.jsx
index 486bb108..929c50dd 100644
--- a/docs/src/components/icon-menu.jsx
+++ b/docs/src/components/icon-menu.jsx
@@ -63,7 +63,6 @@ const IconMenuDoc = () => {
               headerStyle={style.headerStyle}
               secondaryMenuItems={[<MenuItem icon={<IconRocket />} text="An item" onClick={() => {}} />, <MenuItem text="Another item" onClick={() => {}} />]}
               dividerText="More items"
-              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Active item" onClick={() => {}} active />
               <MenuItem text="Inactive item" onClick={() => {}} />
@@ -79,7 +78,6 @@ const IconMenuDoc = () => {
               secondaryMenuItems={[<MenuItem icon={<IconRocket />} text="An item" onClick={() => {}} />, <MenuItem text="Another item" onClick={() => {}} />]}
               dividerText="More items"
               buttonStyle={style.button}
-              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Active item" onClick={() => {}} active />
               <MenuItem text="Inactive item" onClick={() => {}} />
diff --git a/docs/src/components/select.jsx b/docs/src/components/select.jsx
index d5c9f253..575be0ca 100644
--- a/docs/src/components/select.jsx
+++ b/docs/src/components/select.jsx
@@ -65,7 +65,6 @@ class SelectDoc extends Component {
               label="Select"
               onChange={this.changeValue}
               style={style.select}
-              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Menu item" value={1} />
               <MenuItem text="Menu item 2" value={2} />
@@ -76,7 +75,6 @@ class SelectDoc extends Component {
               onChange={this.changeValueError}
               style={style.select}
               error="Error message"
-              portalNode={document.getElementsByTagName('main')[0]}
             >
               <MenuItem text="Menu item" value={1} />
               <MenuItem text="Menu item 2" value={2} />
diff --git a/docs/src/css/index.css b/docs/src/css/index.css
index 475d3bc2..115188a7 100644
--- a/docs/src/css/index.css
+++ b/docs/src/css/index.css
@@ -10,6 +10,8 @@ body {
   padding: 0;
   height: inherit;
   color: #212121;
+  font-weight: 100;
+  font-family: 'Lato', sans-serif;
 }
 
 #root,
@@ -18,11 +20,6 @@ main {
   height: inherit;
 }
 
-main {
-  font-weight: 100;
-  font-family: 'Lato', sans-serif;
-}
-
 .small .emojione {
   font-size: 22px;
 }
diff --git a/package.json b/package.json
index 8cdd1661..10549dfc 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,6 @@
     "prettier": "^1.7.4",
     "react": "^16.0.0",
     "react-docgen": "^2.19.0",
-    "react-dom": "^16.0.0",
     "react-test-renderer": "^15.5.4",
     "rimraf": "^2.6.2",
     "sinon": "^1.17.7",
@@ -85,6 +84,7 @@
     "lodash": "^4.17.4",
     "mobile-detect": "^1.3.6",
     "radium": "^0.19.0",
+    "react-dom": "^16.0.0",
     "react-event-listener": "^0.4.5",
     "react-measure": "^1.4.5",
     "react-onclickoutside": "^6.6.3",
diff --git a/src/icon-menu/index.jsx b/src/icon-menu/index.jsx
index d290c887..a02e326b 100644
--- a/src/icon-menu/index.jsx
+++ b/src/icon-menu/index.jsx
@@ -45,9 +45,7 @@ class IconMenu extends Component {
      */
     onHeaderClick: PropTypes.func,
     /** Override the styles of the Button component */
-    buttonStyle: PropTypes.instanceOf(Object),
-    /** Node to portal PopOver to */
-    portalNode: PropTypes.instanceOf(Object)
+    buttonStyle: PropTypes.instanceOf(Object)
   }
 
   static defaultProps = {
@@ -60,8 +58,7 @@ class IconMenu extends Component {
     dividerText: null,
     onMenuClose: () => {},
     onHeaderClick: () => {},
-    buttonStyle: {},
-    portalNode: null
+    buttonStyle: {}
   }
 
   constructor() {
@@ -159,7 +156,6 @@ class IconMenu extends Component {
       dividerStyle,
       onHeaderClick,
       buttonStyle,
-      portalNode,
       ...custom
     } = this.props;
     const { open, position } = this.state;
@@ -202,7 +198,6 @@ class IconMenu extends Component {
           dividerText={dividerText}
           dividerStyle={dividerStyle}
           onHeaderClick={this.handleHeaderClick}
-          portalNode={portalNode}
         >
           {menuItemsWithProps}
         </PopOver>
diff --git a/src/pop-over/index.jsx b/src/pop-over/index.jsx
index b2cd84ad..527864fa 100644
--- a/src/pop-over/index.jsx
+++ b/src/pop-over/index.jsx
@@ -18,7 +18,6 @@ const PopOver = ({
   dividerText,
   dividerStyle,
   onHeaderClick,
-  portalNode,
   ...custom
 }) => {
   if (!open) {
@@ -36,7 +35,7 @@ const PopOver = ({
   }
 
   return (
-    <Portal node={portalNode}>
+    <Portal>
       <section
         style={getStyles.root(position, style)}
         ref={popOverRef}
@@ -83,9 +82,7 @@ PopOver.propTypes = {
    *
    * function(event: object) => void
    */
-  onHeaderClick: PropTypes.func,
-  /** Node to portal PopOver to */
-  portalNode: PropTypes.instanceOf(Object)
+  onHeaderClick: PropTypes.func
 };
 
 PopOver.defaultProps = {
@@ -97,8 +94,7 @@ PopOver.defaultProps = {
   secondaryMenuItems: null,
   dividerText: null,
   dividerStyle: {},
-  onHeaderClick: null,
-  portalNode: null
+  onHeaderClick: null
 };
 
 export default Radium(PopOver);
diff --git a/src/portal/index.jsx b/src/portal/index.jsx
index 5c958483..76457ee7 100644
--- a/src/portal/index.jsx
+++ b/src/portal/index.jsx
@@ -1,12 +1,23 @@
-/* global document */
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { createPortal } from 'react-dom'; // eslint-disable-line import/no-extraneous-dependencies
-import isObject from 'lodash/isObject';
-import isFunction from 'lodash/isFunction';
+import { createPortal } from 'react-dom';
+import has from 'lodash/has';
+
+const displayName = 'Portal';
+
+const propTypes = {
+  /** Content to be portaled */
+  children: PropTypes.node.isRequired,
+  /** Optional node to portal children to */
+  node: PropTypes.instanceOf(Object)
+};
+
+const defaultProps = {
+  node: null
+};
 
 /** For transportation of elements to document.body or an element of choice */
-class Portal extends React.Component {
+class Portal extends Component {
   static displayName = 'Portal'
 
   static propTypes = {
@@ -32,8 +43,8 @@ class Portal extends React.Component {
     const { children, node } = this.props;
 
     if (
-      (!isObject(window) && !window.document && !window.document.createElement)
-      || !isFunction(createPortal)
+      has(window, 'document.createElement')
+      || createPortal
     ) {
       return children;
     }
@@ -50,4 +61,8 @@ class Portal extends React.Component {
   }
 }
 
+Portal.propTypes = propTypes;
+Portal.defaultProps = defaultProps;
+Portal.displayName = displayName;
+
 export default Portal;
diff --git a/src/select/index.jsx b/src/select/index.jsx
index 1f56a7a3..bda6a8df 100644
--- a/src/select/index.jsx
+++ b/src/select/index.jsx
@@ -46,8 +46,6 @@ class Select extends Component {
     errorStyle: PropTypes.instanceOf(Object),
     /** The header's icon color */
     iconColor: PropTypes.string,
-    /** Node to portal PopOver to */
-    portalNode: PropTypes.instanceOf(Object),
     color: PropTypes.string.isRequired
   }
 
@@ -61,8 +59,7 @@ class Select extends Component {
     placeholder: '',
     error: null,
     errorStyle: {},
-    iconColor: colors.white,
-    portalNode: null
+    iconColor: colors.white
   }
 
   constructor() {
@@ -156,7 +153,6 @@ class Select extends Component {
       disableOnClickOutside, // eslint-disable-line react/prop-types
       enableOnClickOutside, // eslint-disable-line react/prop-types
       iconColor,
-      portalNode,
       ...custom
     } = this.props;
 
@@ -199,7 +195,6 @@ class Select extends Component {
           open={open}
           popOverRef={(popOver) => { this.popOver = popOver; }}
           position={position}
-          portalNode={portalNode}
         >
           {childrenWithProps}
         </PopOver>

From a19be8a10d4dcdffda5fc32f2f8c78c1a0f28e3b Mon Sep 17 00:00:00 2001
From: iancstewart <ian.c.stewart@icloud.com>
Date: Wed, 8 Nov 2017 18:51:43 +0100
Subject: [PATCH 17/21] Fixed broken check.

---
 docs/src/components/icon-menu.jsx    | 1 -
 docs/src/components/portal/index.jsx | 1 -
 docs/src/components/select.jsx       | 1 -
 src/portal/index.jsx                 | 7 ++-----
 4 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/docs/src/components/icon-menu.jsx b/docs/src/components/icon-menu.jsx
index 929c50dd..2e0611b9 100644
--- a/docs/src/components/icon-menu.jsx
+++ b/docs/src/components/icon-menu.jsx
@@ -1,4 +1,3 @@
-/* global document */
 import React from 'react';
 import _ from 'lodash';
 import IconMenu from '../../../dist/icon-menu';
diff --git a/docs/src/components/portal/index.jsx b/docs/src/components/portal/index.jsx
index 1792bf8f..c5ab82fc 100644
--- a/docs/src/components/portal/index.jsx
+++ b/docs/src/components/portal/index.jsx
@@ -1,4 +1,3 @@
-/* global document */
 import React from 'react';
 import _ from 'lodash';
 import IconRocket from '../../../../dist/icons/icon-rocket';
diff --git a/docs/src/components/select.jsx b/docs/src/components/select.jsx
index 575be0ca..da3720e3 100644
--- a/docs/src/components/select.jsx
+++ b/docs/src/components/select.jsx
@@ -1,4 +1,3 @@
-/* global document */
 import React, { Component } from 'react';
 import _ from 'lodash';
 import MenuItem from '../../../dist/menu-item';
diff --git a/src/portal/index.jsx b/src/portal/index.jsx
index 76457ee7..fcb3f7f5 100644
--- a/src/portal/index.jsx
+++ b/src/portal/index.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
-import has from 'lodash/has';
+import isFunction from 'lodash/isFunction';
 
 const displayName = 'Portal';
 
@@ -42,10 +42,7 @@ class Portal extends Component {
   render() {
     const { children, node } = this.props;
 
-    if (
-      has(window, 'document.createElement')
-      || createPortal
-    ) {
+    if (!isFunction(document.createElement) || !isFunction(createPortal)) {
       return children;
     }
 

From cd1433ef691d3b7d459b73e65cfaf04071a77da4 Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Mon, 13 Nov 2017 12:22:57 +0100
Subject: [PATCH 18/21] Changed example.

---
 docs/src/components/portal/example.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/portal/example.js b/docs/src/components/portal/example.js
index 7649979d..4028dfdd 100644
--- a/docs/src/components/portal/example.js
+++ b/docs/src/components/portal/example.js
@@ -25,7 +25,7 @@ export default `
           {
             portalOpen
               ? <Portal node={document.getElementById('root')}>
-                // children to be portaled
+                <div>I got portaled to the bottom of this section!</div>
               </Portal>
               :null
           }

From 27614e7a9f0bc0a0ebdd2f639ecc03daa4e4ada2 Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Mon, 13 Nov 2017 12:24:45 +0100
Subject: [PATCH 19/21] Changed text.

---
 docs/src/components/portal/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/components/portal/index.jsx b/docs/src/components/portal/index.jsx
index c5ab82fc..7e34f847 100644
--- a/docs/src/components/portal/index.jsx
+++ b/docs/src/components/portal/index.jsx
@@ -44,7 +44,7 @@ class PortalDoc extends React.Component {
         <h1>Portal</h1>
         <Alert
           style={style.alert}
-          text="Portal will only transport elements to desired element in React v16 or later. If React isn't at v16 it will render the element where it's called."
+          text="Portal will only transport elements to a given element in React v16 or later. In older versions of React Portal will just render children."
           type="warning"
         />
         <section>

From 8d78b6bff9b17a34f40391fa5ae4042de039ca59 Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Mon, 13 Nov 2017 12:30:28 +0100
Subject: [PATCH 20/21] Cleanup.

---
 src/portal/index.jsx | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/portal/index.jsx b/src/portal/index.jsx
index fcb3f7f5..8a7a9030 100644
--- a/src/portal/index.jsx
+++ b/src/portal/index.jsx
@@ -16,21 +16,8 @@ const defaultProps = {
   node: null
 };
 
-/** For transportation of elements to document.body or an element of choice */
+/** Transportation of elements */
 class Portal extends Component {
-  static displayName = 'Portal'
-
-  static propTypes = {
-    /** Content to be portaled */
-    children: PropTypes.node.isRequired,
-    /** Optional node to portal children to */
-    node: PropTypes.instanceOf(Object)
-  };
-
-  static defaultProps = {
-    node: null
-  };
-
   componentWillUnmount() {
     if (this.defaultNode) {
       document.body.removeChild(this.defaultNode);

From 016069be185f08eb1e6bed5e449714e932e3e3e1 Mon Sep 17 00:00:00 2001
From: Sjaak Luthart <sjaak.luthart@anchor.chat>
Date: Mon, 13 Nov 2017 12:31:29 +0100
Subject: [PATCH 21/21] Docgen.

---
 docs/components.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components.json b/docs/components.json
index aab7405f..9846e606 100644
--- a/docs/components.json
+++ b/docs/components.json
@@ -5848,7 +5848,7 @@
     }
   },
   "components/portal/index.jsx": {
-    "description": "For transportation of elements to document.body or an element of choice",
+    "description": "Transportation of elements",
     "displayName": "Portal",
     "methods": [],
     "props": {