EuiOverlayMask converted to TS (#1858)

* `EuiOverlayMask` converted to TS

* `EuiOverlayMask` updated Changelog

* `EuiOverlayMask` code review fixes

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiOverlayMask` to TS ([#1858](https://github.com/elastic/eui/pull/1858))
 - Converted `EuiStat` to TS ([#1848](https://github.com/elastic/eui/pull/1848))
 - Added `isLoading` prop to `EuiStat` ([#1848](https://github.com/elastic/eui/pull/1848))
 

src/components/index.d.ts

@@ -20,7 +20,6 @@
 /// <reference path="./modal/index.d.ts" />
 /// <reference path="./observer/mutation_observer/index.d.ts" />
 /// <reference path="./observer/resize_observer/index.d.ts" />
-/// <reference path="./overlay_mask/index.d.ts" />
 /// <reference path="./page/index.d.ts" />
 /// <reference path="./pagination/index.d.ts" />
 /// <reference path="./panel/index.d.ts" />

src/components/overlay_mask/index.ts

@@ -0,0 +1 @@
+export { EuiOverlayMask } from './overlay_mask';

src/components/overlay_mask/overlay_mask.tsx

@@ -0,0 +1,64 @@
+/**
+ * NOTE: We can't test this component because Enzyme doesn't support rendering
+ * into portals.
+ */
+
+import { Component, HTMLAttributes } from 'react';
+import { createPortal } from 'react-dom';
+import classNames from 'classnames';
+import { CommonProps, keysOf, Omit } from '../common';
+
+export interface EuiOverlayMaskProps {
+  onClick?: () => void;
+}
+
+export type Props = CommonProps &
+  Omit<
+    Partial<Record<keyof HTMLAttributes<HTMLDivElement>, string>>,
+    keyof EuiOverlayMaskProps
+  > &
+  EuiOverlayMaskProps;
+
+export class EuiOverlayMask extends Component<Props> {
+  private overlayMaskNode?: HTMLDivElement;
+
+  constructor(props: Props) {
+    super(props);
+
+    const { className, children, onClick, ...rest } = this.props;
+
+    this.overlayMaskNode = document.createElement('div');
+    this.overlayMaskNode.className = classNames('euiOverlayMask', className);
+    if (onClick) {
+      this.overlayMaskNode.addEventListener('click', onClick);
+    }
+    keysOf(rest).forEach(key => {
+      if (typeof rest[key] !== 'string') {
+        throw new Error(
+          `Unhandled property type. EuiOverlayMask property ${key} is not a string.`
+        );
+      }
+      this.overlayMaskNode!.setAttribute(key, rest[key]!);
+    });
+
+    document.body.appendChild(this.overlayMaskNode);
+  }
+
+  componentDidMount() {
+    document.body.classList.add('euiBody-hasOverlayMask');
+  }
+
+  componentWillUnmount() {
+    document.body.classList.remove('euiBody-hasOverlayMask');
+
+    if (this.props.onClick) {
+      this.overlayMaskNode!.removeEventListener('click', this.props.onClick);
+    }
+    document.body.removeChild(this.overlayMaskNode!);
+    this.overlayMaskNode = undefined;
+  }
+
+  render() {
+    return createPortal(this.props.children, this.overlayMaskNode!);
+  }
+}