Use flyout manager state for push offsets

Author: tsullivan

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

@@ -42,6 +42,8 @@ import {
   useFlyoutId,
   useFlyoutWidth,
   useIsFlyoutActive,
+  useFlyoutManager,
+  useHasPushPadding,
 } from './manager';
 
 import { CommonProps, PropsOfElement } from '../common';
@@ -51,7 +53,6 @@ import type { EuiButtonIconPropsForButton } from '../button';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiScreenReaderOnly } from '../accessibility';
-import { useMutationObserver } from '../observer/mutation_observer';
 
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { euiFlyoutStyles, composeFlyoutInlineStyles } from './flyout.styles';
@@ -276,6 +277,13 @@ export const EuiFlyoutComponent = forwardRef(
     const flyoutId = useFlyoutId(id);
     const layoutMode = useFlyoutLayoutMode();
     const isActiveManagedFlyout = useIsFlyoutActive(flyoutId);
+    const flyoutManager = useFlyoutManager();
+
+    // Use a ref to access the latest flyoutManager without triggering effect re-runs
+    const flyoutManagerRef = useRef(flyoutManager);
+    useEffect(() => {
+      flyoutManagerRef.current = flyoutManager;
+    }, [flyoutManager]);
 
     const {
       onMouseDown: onMouseDownResizableButton,
@@ -325,18 +333,27 @@ export const EuiFlyoutComponent = forwardRef(
       const cssVarName = `--euiPushFlyoutOffset${
         side === 'left' ? 'InlineStart' : 'InlineEnd'
       }`;
+      const managerSide = side === 'left' ? 'left' : 'right';
 
       if (shouldApplyPadding) {
         document.body.style[paddingSide] = `${width}px`;
         setGlobalCSSVariables({
           [cssVarName]: `${width}px`,
         });
+        // Update manager state if in managed context
+        if (isInManagedContext && flyoutManagerRef.current) {
+          flyoutManagerRef.current.setPushPadding(managerSide, width);
+        }
       } else {
         // Explicitly remove padding when this push flyout becomes inactive
         document.body.style[paddingSide] = '';
         setGlobalCSSVariables({
           [cssVarName]: null,
         });
+        // Clear manager state if in managed context
+        if (isInManagedContext && flyoutManagerRef.current) {
+          flyoutManagerRef.current.setPushPadding(managerSide, 0);
+        }
       }
 
       // Cleanup on unmount
@@ -345,6 +362,10 @@ export const EuiFlyoutComponent = forwardRef(
         setGlobalCSSVariables({
           [cssVarName]: null,
         });
+        // Clear manager state on unmount if in managed context
+        if (isInManagedContext && flyoutManagerRef.current) {
+          flyoutManagerRef.current.setPushPadding(managerSide, 0);
+        }
       };
     }, [
       isPushed,
@@ -632,44 +653,13 @@ export const EuiFlyoutComponent = forwardRef(
     const maskCombinedRefs = useCombinedRefs([maskProps?.maskRef, maskRef]);
 
     /**
-     * Track whether body padding from a push flyout exists to coordinate scroll locking.
-     * Use state to allow updates when padding changes.
-     */
-    const [hasPushFlyoutPadding, setHasPushFlyoutPadding] = useState(() => {
-      if (isPushed || !isInManagedContext) return false;
-      const leftPadding = document.body.style.paddingInlineStart;
-      const rightPadding = document.body.style.paddingInlineEnd;
-      return !!(leftPadding || rightPadding);
-    });
-
-    /**
-     * Monitor body padding and update state when it changes.
-     * This allows overlay flyouts to enable scroll lock once push padding is removed.
+     * For overlay flyouts in managed contexts, coordinate scroll locking with push flyout state.
+     * Only enable scroll lock when there's no active push padding in the manager.
      */
-    const checkPadding = useCallback(() => {
-      const leftPadding = document.body.style.paddingInlineStart;
-      const rightPadding = document.body.style.paddingInlineEnd;
-      const hasPadding = !!(leftPadding || rightPadding);
-      setHasPushFlyoutPadding(hasPadding);
-    }, []);
-
-    // Monitor body style changes for overlay flyouts in managed contexts
-    useMutationObserver(
-      isPushed || !isInManagedContext ? null : document.body,
-      checkPadding,
-      { attributeFilter: ['style'] }
-    );
-
-    // Check padding state immediately after render
-    useLayoutEffect(() => {
-      if (!isPushed && isInManagedContext) {
-        checkPadding();
-      } else {
-        setHasPushFlyoutPadding(false);
-      }
-    }, [isPushed, isInManagedContext, checkPadding]);
-
-    const shouldUseScrollLock = hasOverlayMask && !hasPushFlyoutPadding;
+    const hasPushPaddingInManager = useHasPushPadding();
+    const shouldDeferScrollLock =
+      !isPushed && isInManagedContext && hasPushPaddingInManager;
+    const shouldUseScrollLock = hasOverlayMask && !shouldDeferScrollLock;
 
     return (
       <EuiFlyoutOverlay

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

@@ -35,6 +35,8 @@ export const ACTION_SET_ACTIVITY_STAGE = `${PREFIX}/setActivityStage` as const;
 export const ACTION_GO_BACK = `${PREFIX}/goBack` as const;
 /** Dispatched to navigate to a specific flyout (remove all sessions after it). */
 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;
 
 /**
  * Add a flyout to manager state. The manager will create or update
@@ -91,6 +93,13 @@ export interface GoToFlyoutAction extends BaseAction {
   flyoutId: string;
 }
 
+/** Set push padding offset for a specific side. */
+export interface SetPushPaddingAction extends BaseAction {
+  type: typeof ACTION_SET_PUSH_PADDING;
+  side: 'left' | 'right';
+  width: number;
+}
+
 /** Union of all flyout manager actions. */
 export type Action =
   | AddFlyoutAction
@@ -100,7 +109,8 @@ export type Action =
   | SetLayoutModeAction
   | SetActivityStageAction
   | GoBackAction
-  | GoToFlyoutAction;
+  | GoToFlyoutAction
+  | SetPushPaddingAction;
 
 /**
  * Register a flyout with the manager.
@@ -173,3 +183,13 @@ export const goToFlyout = (flyoutId: string): GoToFlyoutAction => ({
   type: ACTION_GO_TO_FLYOUT,
   flyoutId,
 });
+
+/** Set push padding offset for a specific side. */
+export const setPushPadding = (
+  side: 'left' | 'right',
+  width: number
+): SetPushPaddingAction => ({
+  type: ACTION_SET_PUSH_PADDING,
+  side,
+  width,
+});

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

@@ -25,6 +25,8 @@ export {
   useFlyoutWidth,
   useParentFlyoutSize,
   useHasChildFlyout,
+  usePushPaddingOffsets,
+  useHasPushPadding,
 } from './selectors';
 
 export { useFlyoutLayoutMode } from './layout_mode';

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

@@ -14,6 +14,7 @@ export {
   closeFlyout as closeFlyoutAction,
   setActiveFlyout as setActiveFlyoutAction,
   setFlyoutWidth as setFlyoutWidthAction,
+  setPushPadding as setPushPaddingAction,
   setActivityStage as setActivityStageAction,
 } from './actions';
 
@@ -42,6 +43,8 @@ export {
   useIsInManagedFlyout,
   useHasActiveSession,
   useParentFlyoutSize,
+  usePushPaddingOffsets,
+  useHasPushPadding,
 } from './hooks';
 
 export { EuiFlyoutChild, type EuiFlyoutChildProps } from './flyout_child';

packages/eui/src/components/flyout/manager/reducer.test.ts

@@ -49,6 +49,7 @@ describe('flyoutManagerReducer', () => {
         sessions: [],
         flyouts: [],
         layoutMode: LAYOUT_MODE_SIDE_BY_SIDE,
+        pushPadding: { left: 0, right: 0 },
       });
     });
   });

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

@@ -15,6 +15,7 @@ import {
   ACTION_SET_ACTIVITY_STAGE,
   ACTION_GO_BACK,
   ACTION_GO_TO_FLYOUT,
+  ACTION_SET_PUSH_PADDING,
   Action,
 } from './actions';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_MAIN, STAGE_OPENING } from './const';
@@ -31,6 +32,7 @@ export const initialState: EuiFlyoutManagerState = {
   sessions: [],
   flyouts: [],
   layoutMode: LAYOUT_MODE_SIDE_BY_SIDE,
+  pushPadding: { left: 0, right: 0 },
 };
 
 /**
@@ -257,6 +259,18 @@ export function flyoutManagerReducer(
       return { ...state, sessions: newSessions, flyouts: newFlyouts };
     }
 
+    // Set push padding offset for a specific side
+    case ACTION_SET_PUSH_PADDING: {
+      const { side, width } = action;
+      return {
+        ...state,
+        pushPadding: {
+          ...(state.pushPadding ?? { left: 0, right: 0 }),
+          [side]: width,
+        },
+      };
+    }
+
     default:
       return state;
   }

packages/eui/src/components/flyout/manager/selectors.test.tsx

@@ -45,6 +45,7 @@ describe('Flyout Manager Selectors', () => {
         closeFlyout: jest.fn(),
         setActiveFlyout: jest.fn(),
         setFlyoutWidth: jest.fn(),
+        setPushPadding: jest.fn(),
         goBack: jest.fn(),
         goToFlyout: jest.fn(),
         historyItems: [],
@@ -77,6 +78,7 @@ describe('Flyout Manager Selectors', () => {
         closeFlyout: jest.fn(),
         setActiveFlyout: jest.fn(),
         setFlyoutWidth: jest.fn(),
+        setPushPadding: jest.fn(),
         goBack: jest.fn(),
         goToFlyout: jest.fn(),
         historyItems: [],
@@ -101,6 +103,7 @@ describe('Flyout Manager Selectors', () => {
         closeFlyout: jest.fn(),
         setActiveFlyout: jest.fn(),
         setFlyoutWidth: jest.fn(),
+        setPushPadding: jest.fn(),
         goBack: jest.fn(),
         goToFlyout: jest.fn(),
         historyItems: [],
@@ -132,6 +135,7 @@ describe('Flyout Manager Selectors', () => {
         closeFlyout: jest.fn(),
         setActiveFlyout: jest.fn(),
         setFlyoutWidth: jest.fn(),
+        setPushPadding: jest.fn(),
         goBack: jest.fn(),
         goToFlyout: jest.fn(),
         historyItems: [],
@@ -173,6 +177,7 @@ describe('Flyout Manager Selectors', () => {
         closeFlyout: jest.fn(),
         setActiveFlyout: jest.fn(),
         setFlyoutWidth: jest.fn(),
+        setPushPadding: jest.fn(),
         goBack: jest.fn(),
         goToFlyout: jest.fn(),
         historyItems: [],

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

@@ -87,3 +87,18 @@ export const useHasChildFlyout = (flyoutId: string) => {
   const session = useSession(flyoutId);
   return !!session?.childFlyoutId;
 };
+
+/** Get the current push padding offsets from manager state. */
+export const usePushPaddingOffsets = () => {
+  const context = useFlyoutManager();
+  if (!context) {
+    return { left: 0, right: 0 };
+  }
+  return context.state.pushPadding ?? { left: 0, right: 0 };
+};
+
+/** True if there's any active push padding (left or right side). */
+export const useHasPushPadding = () => {
+  const pushPadding = usePushPaddingOffsets();
+  return pushPadding.left > 0 || pushPadding.right > 0;
+};

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

@@ -13,6 +13,7 @@ import {
   closeFlyout as closeFlyoutAction,
   setActiveFlyout as setActiveFlyoutAction,
   setFlyoutWidth as setFlyoutWidthAction,
+  setPushPadding as setPushPaddingAction,
   goBack as goBackAction,
   goToFlyout as goToFlyoutAction,
 } from './actions';
@@ -34,6 +35,7 @@ export interface FlyoutManagerStore {
   closeFlyout: (flyoutId: string) => void;
   setActiveFlyout: (flyoutId: string | null) => void;
   setFlyoutWidth: (flyoutId: string, width: number) => void;
+  setPushPadding: (side: 'left' | 'right', width: number) => void;
   goBack: () => void;
   goToFlyout: (flyoutId: string) => void;
   historyItems: Array<{
@@ -106,6 +108,8 @@ function createStore(
     setActiveFlyout: (flyoutId) => dispatch(setActiveFlyoutAction(flyoutId)),
     setFlyoutWidth: (flyoutId, width) =>
       dispatch(setFlyoutWidthAction(flyoutId, width)),
+    setPushPadding: (side, width) =>
+      dispatch(setPushPaddingAction(side, width)),
     goBack: () => dispatch(goBackAction()),
     goToFlyout: (flyoutId) => dispatch(goToFlyoutAction(flyoutId)),
     historyItems: computeHistoryItems(), // Initialize with current state

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

@@ -56,10 +56,19 @@ export interface FlyoutSession {
   title: string;
 }
 
+export interface PushPaddingOffsets {
+  /** Push padding applied to the left side (in pixels) */
+  left: number;
+  /** Push padding applied to the right side (in pixels) */
+  right: number;
+}
+
 export interface EuiFlyoutManagerState {
   sessions: FlyoutSession[];
   flyouts: EuiManagedFlyoutState[];
   layoutMode: EuiFlyoutLayoutMode;
+  /** Active push padding offsets (updated by active push flyouts) */
+  pushPadding?: PushPaddingOffsets;
 }
 
 /**
@@ -78,6 +87,7 @@ export interface FlyoutManagerApi {
   closeFlyout: (flyoutId: string) => void;
   setActiveFlyout: (flyoutId: string | null) => void;
   setFlyoutWidth: (flyoutId: string, width: number) => void;
+  setPushPadding: (side: 'left' | 'right', width: number) => void;
   goBack: () => void;
   goToFlyout: (flyoutId: string) => void;
   historyItems: Array<{