[Flyout system] Dynamic z-index calculation

packages/eui/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiCollapsibleNav close button can be hidden 1`] = `
 <div>
   <div
-    class="css-w7myn3-getEuiFlyoutOverlayStyles"
+    class="css-16bcmd3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -58,7 +58,7 @@ exports[`EuiCollapsibleNav does not render if isOpen is false 1`] = `<div />`;
 exports[`EuiCollapsibleNav is rendered 1`] = `
 <div>
   <div
-    class="css-w7myn3-getEuiFlyoutOverlayStyles"
+    class="css-16bcmd3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -168,7 +168,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
     aria-pressed="true"
   />
   <div
-    class="css-w7myn3-getEuiFlyoutOverlayStyles"
+    class="css-16bcmd3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -221,7 +221,7 @@ exports[`EuiCollapsibleNav props button 1`] = `
 exports[`EuiCollapsibleNav props dockedBreakpoint 1`] = `
 <div>
   <div
-    class="css-w7myn3-getEuiFlyoutOverlayStyles"
+    class="css-16bcmd3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -298,7 +298,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
 exports[`EuiCollapsibleNav props onClose 1`] = `
 <div>
   <div
-    class="css-w7myn3-getEuiFlyoutOverlayStyles"
+    class="css-16bcmd3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"
@@ -380,7 +380,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
 exports[`EuiCollapsibleNav props size 1`] = `
 <div>
   <div
-    class="css-w7myn3-getEuiFlyoutOverlayStyles"
+    class="css-16bcmd3-getEuiFlyoutOverlayStyles"
   />
   <div
     data-focus-guard="true"

packages/eui/src/components/flyout/__snapshots__/flyout.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`EuiFlyout is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -64,7 +64,7 @@ exports[`EuiFlyout props accepts div props 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -121,7 +121,7 @@ exports[`EuiFlyout props closeButtonPosition can be outside 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -177,7 +177,7 @@ exports[`EuiFlyout props closeButtonProps 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -233,7 +233,7 @@ exports[`EuiFlyout props hideCloseButton 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -277,7 +277,7 @@ exports[`EuiFlyout props is rendered as nav 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -334,7 +334,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom number 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -391,7 +391,7 @@ exports[`EuiFlyout props maxWidth can be set to a custom value and measurement 1
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -448,7 +448,7 @@ exports[`EuiFlyout props maxWidth can be set to a default 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -505,7 +505,7 @@ exports[`EuiFlyout props outsideClickCloses 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -562,7 +562,7 @@ exports[`EuiFlyout props ownFocus can alter mask props with maskProps without th
 >
   <div>
     <div
-      class="css-6kvyas-getEuiFlyoutOverlayStyles"
+      class="css-15xuqqa-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -673,7 +673,7 @@ exports[`EuiFlyout props paddingSize l is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -730,7 +730,7 @@ exports[`EuiFlyout props paddingSize m is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -787,7 +787,7 @@ exports[`EuiFlyout props paddingSize none is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -844,7 +844,7 @@ exports[`EuiFlyout props paddingSize s is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -922,7 +922,7 @@ exports[`EuiFlyout props sides left is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -978,7 +978,7 @@ exports[`EuiFlyout props sides right is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1035,7 +1035,7 @@ exports[`EuiFlyout props size accepts custom number 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1092,7 +1092,7 @@ exports[`EuiFlyout props size fill is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1149,7 +1149,7 @@ exports[`EuiFlyout props size l is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1206,7 +1206,7 @@ exports[`EuiFlyout props size m is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1263,7 +1263,7 @@ exports[`EuiFlyout props size s is rendered 1`] = `
 >
   <div>
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"
@@ -1324,7 +1324,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
       style="inset-block-start: 0px;"
     />
     <div
-      class="css-w7myn3-getEuiFlyoutOverlayStyles"
+      class="css-16bcmd3-getEuiFlyoutOverlayStyles"
     />
     <div
       data-focus-guard="true"

packages/eui/src/components/flyout/flyout.component.tsx

@@ -77,6 +77,7 @@ import { useEuiFlyoutResizable } from './use_flyout_resizable';
 import type { EuiFlyoutCloseEvent } from './types';
 import { useEuiFlyoutZIndex } from './use_flyout_z_index';
 import { EuiFlyoutParentProvider } from './flyout_parent_context';
+import { useCurrentFlyoutZIndexRef } from './manager/selectors';
 
 interface _EuiFlyoutComponentProps {
   /**
@@ -278,13 +279,24 @@ export const EuiFlyoutComponent = forwardRef(
     const layoutMode = useFlyoutLayoutMode();
     const isActiveManagedFlyout = useIsFlyoutActive(flyoutId);
     const flyoutManager = useFlyoutManager();
+    const currentZIndexRef = useCurrentFlyoutZIndexRef();
 
     // Use a ref to access the latest flyoutManager without triggering effect re-runs
     const flyoutManagerRef = useRef(flyoutManager);
     useEffect(() => {
       flyoutManagerRef.current = flyoutManager;
     }, [flyoutManager]);
 
+    useEffect(() => {
+      // Keep track of unmanaged flyouts to properly calculate z-index
+      // values for all flyouts
+      if (!isInManagedContext) {
+        flyoutManagerRef.current?.addUnmanagedFlyout(flyoutId);
+
+        return () => flyoutManagerRef.current?.closeUnmanagedFlyout(flyoutId);
+      }
+    }, [isInManagedContext, flyoutId]);
+
     const {
       onMouseDown: onMouseDownResizableButton,
       onKeyDown: onKeyDownResizableButton,
@@ -451,9 +463,16 @@ export const EuiFlyoutComponent = forwardRef(
 
     const siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
 
+    let managedFlyoutIndex = currentZIndexRef.current;
+    if (isInManagedContext && currentSession) {
+      managedFlyoutIndex = currentSession.zIndex;
+    }
+
     const { flyoutZIndex, maskZIndex } = useEuiFlyoutZIndex({
       maskProps,
       isPushed,
+      managedFlyoutIndex,
+      isChildFlyout: isChildFlyout,
     });
 
     /**

packages/eui/src/components/flyout/manager/actions.ts

@@ -37,6 +37,10 @@ export const ACTION_GO_BACK = `${PREFIX}/goBack` as const;
 export const ACTION_GO_TO_FLYOUT = `${PREFIX}/goToFlyout` as const;
 /** Dispatched to set push padding offset for a side. */
 export const ACTION_SET_PUSH_PADDING = `${PREFIX}/setPushPadding` as const;
+export const ACTION_ADD_UNMANAGED_FLYOUT =
+  `${PREFIX}/addUnmanagedFlyout` as const;
+export const ACTION_CLOSE_UNMANAGED_FLYOUT =
+  `${PREFIX}/closeUnmanagedFlyout` as const;
 
 /**
  * Add a flyout to manager state. The manager will create or update
@@ -100,6 +104,16 @@ export interface SetPushPaddingAction extends BaseAction {
   width: number;
 }
 
+export interface AddUnmanagedFlyoutAction extends BaseAction {
+  type: typeof ACTION_ADD_UNMANAGED_FLYOUT;
+  flyoutId: string;
+}
+
+export interface CloseUnmanagedFlyoutAction extends BaseAction {
+  type: typeof ACTION_CLOSE_UNMANAGED_FLYOUT;
+  flyoutId: string;
+}
+
 /** Union of all flyout manager actions. */
 export type Action =
   | AddFlyoutAction
@@ -110,7 +124,9 @@ export type Action =
   | SetActivityStageAction
   | GoBackAction
   | GoToFlyoutAction
-  | SetPushPaddingAction;
+  | SetPushPaddingAction
+  | AddUnmanagedFlyoutAction
+  | CloseUnmanagedFlyoutAction;
 
 /**
  * Register a flyout with the manager.
@@ -193,3 +209,19 @@ export const setPushPadding = (
   side,
   width,
 });
+
+/** Register an unmanaged flyout for z-index positioning purposes */
+export const addUnmanagedFlyout = (
+  flyoutId: string
+): AddUnmanagedFlyoutAction => ({
+  type: ACTION_ADD_UNMANAGED_FLYOUT,
+  flyoutId,
+});
+
+/** Unregister an unmanaged flyout */
+export const closeUnmanagedFlyout = (
+  flyoutId: string
+): CloseUnmanagedFlyoutAction => ({
+  type: ACTION_CLOSE_UNMANAGED_FLYOUT,
+  flyoutId,
+});

packages/eui/src/components/flyout/manager/flyout_sessions.stories.tsx

@@ -313,7 +313,6 @@ const NonSessionFlyout: React.FC<{ size: string }> = ({ size }) => {
           ownFocus={flyoutOwnFocus}
           pushAnimation={true}
           onClose={flyoutOnClose}
-          side="left"
         >
           <EuiFlyoutHeader>
             <EuiTitle size="m">