[EuiOverlayMask] Fix document is undefined (#5422)

* [EuiOverlayMask] Fix document is undefined

* added PR entry to changelog

* fix document is undefined when EuiOverlayMask is visible at start

* revised code as per suggested

* added CHANGELOG entry

* Apply suggestions from code review

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>

CHANGELOG.md

@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed scrollbars in `EuiRange` tick labels in Safari ([#5427](https://github.com/elastic/eui/pull/5427))
+- Fixed an `EuiOverlayMask` bug where it calls window.document on server side([#5422](https://github.com/elastic/eui/pull/5422))
 
 ## [`42.0.0`](https://github.com/elastic/eui/tree/v42.0.0)
 

src/components/overlay_mask/overlay_mask.tsx

@@ -52,7 +52,7 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
   headerZindexLocation = 'above',
   ...rest
 }) => {
-  const overlayMaskNode = useRef<HTMLDivElement>(document.createElement('div'));
+  const overlayMaskNode = useRef<HTMLDivElement>();
   const [isPortalTargetReady, setIsPortalTargetReady] = useState(false);
 
   useEffect(() => {
@@ -63,9 +63,19 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    if (typeof document !== 'undefined') {
+      overlayMaskNode.current = document.createElement('div');
+    }
+  }, []);
+
   useEffect(() => {
     const portalTarget = overlayMaskNode.current;
-    document.body.appendChild(overlayMaskNode.current);
+
+    if (portalTarget) {
+      document.body.appendChild(portalTarget);
+    }
+
     setIsPortalTargetReady(true);
 
     return () => {
@@ -83,7 +93,9 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
           `Unhandled property type. EuiOverlayMask property ${key} is not a string.`
         );
       }
-      overlayMaskNode.current.setAttribute(key, rest[key]!);
+      if (overlayMaskNode.current) {
+        overlayMaskNode.current.setAttribute(key, rest[key]!);
+      }
     });
   }, []); // eslint-disable-line react-hooks/exhaustive-deps