From 138694add0d66106fd1e90c70afce3ecf2aeeb04 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 2 Jan 2018 14:04:52 -0700
Subject: [PATCH] update EuiOverlayMask to use react portal

---
 src-docs/src/views/modal/confirm_modal.js     |  2 +-
 .../__snapshots__/overlay_mask.test.js.snap   |  9 ------
 src/components/overlay_mask/overlay_mask.js   | 30 +++++++++++++++----
 .../overlay_mask/overlay_mask.test.js         | 16 ----------
 4 files changed, 26 insertions(+), 31 deletions(-)
 delete mode 100644 src/components/overlay_mask/__snapshots__/overlay_mask.test.js.snap
 delete mode 100644 src/components/overlay_mask/overlay_mask.test.js

diff --git a/src-docs/src/views/modal/confirm_modal.js b/src-docs/src/views/modal/confirm_modal.js
index ff485b1e59a..561918765b1 100644
--- a/src-docs/src/views/modal/confirm_modal.js
+++ b/src-docs/src/views/modal/confirm_modal.js
@@ -34,7 +34,7 @@ export class ConfirmModal extends Component {
 
     if (this.state.isModalVisible) {
       modal = (
-        <EuiOverlayMask>
+        <EuiOverlayMask data-test-subj="exampleOverlayMask" className="test1">
           <EuiConfirmModal
             title="Do this thing"
             onCancel={this.closeModal}
diff --git a/src/components/overlay_mask/__snapshots__/overlay_mask.test.js.snap b/src/components/overlay_mask/__snapshots__/overlay_mask.test.js.snap
deleted file mode 100644
index 5cdf288d066..00000000000
--- a/src/components/overlay_mask/__snapshots__/overlay_mask.test.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiOverlayMask is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="testClass1 testClass2"
-  data-test-subj="test subject string"
-/>
-`;
diff --git a/src/components/overlay_mask/overlay_mask.js b/src/components/overlay_mask/overlay_mask.js
index 2866263373d..4030c13dd7e 100644
--- a/src/components/overlay_mask/overlay_mask.js
+++ b/src/components/overlay_mask/overlay_mask.js
@@ -2,6 +2,8 @@ import React, {
   Component,
 } from 'react';
 import PropTypes from 'prop-types';
+import { createPortal } from 'react-dom';
+import classnames from 'classnames';
 
 export class EuiOverlayMask extends Component {
   constructor(props) {
@@ -14,22 +16,40 @@ export class EuiOverlayMask extends Component {
 
   componentWillUnmount() {
     document.body.classList.remove('euiBody-hasOverlayMask');
+
+    if (this.overlayMaskNode) {
+      document.body.removeChild(this.overlayMaskNode);
+    }
+    this.overlayMaskNode = null;
   }
 
   render() {
     const {
+      className,
+      children,
       ...rest
     } = this.props;
 
-    return (
-      <div
-        className="euiOverlayMask"
-        {...rest}
-      />
+    if (!this.overlayMaskNode) {
+      this.overlayMaskNode = document.createElement('div');
+      this.overlayMaskNode.className = classnames(
+        'euiOverlayMask',
+        className
+      );
+      Object.keys(rest).forEach((key) => {
+        this.overlayMaskNode.setAttribute(key, rest[key]);
+      });
+      document.body.appendChild(this.overlayMaskNode);
+    }
+
+    return createPortal(
+      children,
+      this.overlayMaskNode
     );
   }
 }
 
 EuiOverlayMask.propTypes = {
   className: PropTypes.string,
+  children: PropTypes.node,
 };
diff --git a/src/components/overlay_mask/overlay_mask.test.js b/src/components/overlay_mask/overlay_mask.test.js
deleted file mode 100644
index 4eb608a2725..00000000000
--- a/src/components/overlay_mask/overlay_mask.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test';
-
-import { EuiOverlayMask } from './overlay_mask';
-
-describe('EuiOverlayMask', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiOverlayMask {...requiredProps} />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});