Summary

Resolves #8989

This PR reintroduces the previously removed overlay mask to the flyout component. The EuiOverlayMask was temporarily removed to simplify the development of other features and to be able to fix its buggy behavior separately.

The flyout elements are now rendered outside the overlay mask, which allows managed flyouts to render without unexpected flashes when updating the ownFocus prop or rerendering for other business logic reasons.

Note that this PR is marked as draft as the change to z-index values needs to be tested against Kibana. Other than a slight change to that value this PR should not change much. I tested the changes against Kibana and didn't find any broken flyouts due to the z-index change.

Why are we making this change?

It's part of the Flyout System M1 work. See the issue this resolves and the epic for more details.

Screenshots #

Impact to users

The change may affect z-index positioning of custom consumer-created elements if using values that aren't in line with what EUI expects.

The old logic included a behavior I was unaware of that used z-index: 6000 for flyouts when they were rendered with the overlay mask. The usual z-index value for flyouts is 1000. We're testing if changing the flyout z-index/level would have any negative impact on Kibana as this value would make way more sense semantically.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added or updated jest and cypress tests
  • Updated visual regression tests