update EuiOverlayMask to use react portal (#254)

* update EuiOverlayMask to use react portal

* change log

* updates from cj review

CHANGELOG.md

@@ -1,5 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated `<EuiOverlayMask>` to append `<div>` to body. [(#254)](https://github.com/elastic/eui/pull/254)
+
 **Bug fixes**
 
 - Disabled tab styling. [(#258)[https://github.com/elastic/eui/pull/258]]

src/components/overlay_mask/overlay_mask.js

@@ -1,35 +1,54 @@
-import React, {
-  Component,
-} from 'react';
+/**
+ * NOTE: We can't test this component because Enzyme doesn't support rendering
+ * into portals.
+ */
+
+import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
 
 export class EuiOverlayMask extends Component {
   constructor(props) {
     super(props);
+
+    const {
+      className,
+      children, // eslint-disable-line no-unused-vars
+      ...rest
+    } = this.props;
+
+    this.overlayMaskNode = document.createElement('div');
+    this.overlayMaskNode.className = classNames(
+      'euiOverlayMask',
+      className
+    );
+    Object.keys(rest).forEach((key) => {
+      this.overlayMaskNode.setAttribute(key, rest[key]);
+    });
   }
 
   componentDidMount() {
     document.body.classList.add('euiBody-hasOverlayMask');
+    document.body.appendChild(this.overlayMaskNode);
   }
 
   componentWillUnmount() {
     document.body.classList.remove('euiBody-hasOverlayMask');
+
+    document.body.removeChild(this.overlayMaskNode);
+    this.overlayMaskNode = null;
   }
 
   render() {
-    const {
-      ...rest
-    } = this.props;
-
-    return (
-      <div
-        className="euiOverlayMask"
-        {...rest}
-      />
+    return createPortal(
+      this.props.children,
+      this.overlayMaskNode
     );
   }
 }
 
 EuiOverlayMask.propTypes = {
   className: PropTypes.string,
+  children: PropTypes.node,
 };