[EuiOverlayMask] Fix document is undefined

[jeepers3327]

Summary

This fixes #4807 which causes ReferenceError: document is not defined error. The code that I add is to check whether the document is defined before appending the overlay mask component to the document body.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs and playground toggles
• Added documentation
• Checked Code Sandbox works for any docs examples
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cla-checker-service]

💚 CLA has been signed

[elizabetdev]

Hi @jeepers3327 👋🏽 ,

Thank you for opening this PR to fix the issue #4807.

Could you please sign the Contributor Agreement so we can review your PR?

[jeepers3327]

Hello @miukimiu ,

I've already signed the Contributor Agreement. Thanks.

[elizabetdev]

Thanks @jeepers3327. One of ours engineers will do the review. 🎉

In the meantime, can you go through the PR checklist? For example, a changelog entry is missing. 🙂

[thompsongl]

This does cover cases where EuiOverlayMask is hidden to start, but there is still a document error if the component is shown to start:

The node creation point needs to be adjusted, as well. It may need to be moved inside the useEffect in cases where SSR is used:

eui/src/components/overlay_mask/overlay_mask.tsx

Line 55 in 5e322a8

const overlayMaskNode = useRef<HTMLDivElement>(document.createElement('div'));

[jeepers3327]

This does cover cases where EuiOverlayMask is hidden to start, but there is still a document error if the component is shown to start:

The node creation point needs to be adjusted, as well. It may need to be moved inside the useEffect in cases where SSR is used:

eui/src/components/overlay_mask/overlay_mask.tsx

Line 55 in 5e322a8

const overlayMaskNode = useRef<HTMLDivElement>(document.createElement('div'));

I fixed the issue by setting the overlayMaskNode inside useEffect (985633b)

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5422/

[thompsongl]

This looks ready to merge after the changelog update and the one suggestion below

[jeepers3327]

I've applied the suggested code and move the changelog entry on the top portion of the document.

Just a question, do I have to added any dependencies in @elastic/eui since I get this error during git commit.

● Validation Error:

  Module @emotion/jest/enzyme-serializer in the snapshotSerializers option was not found.
         <rootDir> is: /home/hei/contribute/eui

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
child_process.js:866
    throw err;

This wasn't present during my PR and commits.

[thompsongl]

Just a question, do I have to added any dependencies

Try running yarn install if you haven't in a couple days

[thompsongl]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5422/

[chandlerprall]

👍 LGTM