@elastic/eui 113.1.0 → 113.2.0

package/lib/components/flyout/flyout.component.js

@@ -25,9 +25,8 @@ var _flyout_resize_button = require("./_flyout_resize_button");
 var _use_flyout_resizable = require("./use_flyout_resizable");
 var _use_flyout_z_index = require("./use_flyout_z_index");
 var _flyout_parent_context = require("./flyout_parent_context");
-var _selectors = require("./manager/selectors");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "children", "as", "hideCloseButton", "flyoutMenuProps", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "hasChildBackground", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby", "aria-labelledby", "id", "resizable", "minWidth", "onResize", "onAnimationEnd"],
+var _excluded = ["className", "children", "as", "hideCloseButton", "flyoutMenuProps", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "hasChildBackground", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby", "aria-labelledby", "id", "resizable", "minWidth", "onResize", "onAnimationEnd", "container"],
   _excluded2 = ["titleId"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -58,8 +57,24 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+/**
+ * Resolves the container prop (element, getter, or selector string) to an
+ * HTMLElement, or null if not found / invalid.
+ */
+var resolveContainer = function resolveContainer(raw) {
+  if (raw == null) return null;
+  if (typeof raw === 'string') {
+    if (typeof document === 'undefined') return null;
+    var el = document.querySelector(raw);
+    return el instanceof HTMLElement ? el : null;
+  }
+  if (typeof raw === 'function') return raw();
+  if (typeof HTMLElement === 'undefined') return null;
+  return raw instanceof HTMLElement ? raw : null;
+};
 var defaultElement = 'div';
 var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _maskProps$headerZind, _managerSessions, _managerState$layoutM, _managerState$current, _managerState$flyouts, _managerState$pushPad;
   var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
     className = _usePropsWithComponen.className,
     children = _usePropsWithComponen.children,
@@ -104,7 +119,9 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     minWidth = _usePropsWithComponen.minWidth,
     onResize = _usePropsWithComponen.onResize,
     onAnimationEnd = _usePropsWithComponen.onAnimationEnd,
+    containerProp = _usePropsWithComponen.container,
     rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
+  var container = resolveContainer(containerProp);
   var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
     setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
@@ -116,13 +133,46 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     type: type,
     pushMinBreakpoint: pushMinBreakpoint
   });
-  var currentSession = (0, _manager.useCurrentSession)();
+  // When no explicit container is provided, push padding targets
+  // document.body and global push-offset CSS vars are set. When a
+  // container is provided, only that element receives padding.
+  var shouldSetGlobalPushVars = container == null;
+  if ('container' in props && ('maskProps' in props || 'includeFixedHeadersInFocusTrap' in props) && process.env.NODE_ENV === 'development') {
+    if ('maskProps' in props) {
+      console.warn('EuiFlyout: `maskProps` is deprecated. Prefer using the `container` prop to scope flyouts.');
+    }
+    if ('includeFixedHeadersInFocusTrap' in props) {
+      console.warn('EuiFlyout: `includeFixedHeadersInFocusTrap` is deprecated. Prefer `includeSelectorInFocusTrap` when using `container`.');
+    }
+  }
+  // Explicit viewport flyouts (container={null}) default to 'above' so
+  // they render above fixed headers. Container-scoped and legacy flyouts
+  // (no container prop) default to 'below'.
+  var effectiveHeaderZindexLocation = (_maskProps$headerZind = maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) !== null && _maskProps$headerZind !== void 0 ? _maskProps$headerZind : containerProp === null ? 'above' : 'below';
+
+  // Report the container element to the flyout manager for layout calculations.
+  (0, _react.useEffect)(function () {
+    var _flyoutManagerRef$cur;
+    if (!container) return;
+    (_flyoutManagerRef$cur = flyoutManagerRef.current) === null || _flyoutManagerRef$cur === void 0 || _flyoutManagerRef$cur.setContainerElement(container);
+    return function () {
+      var _flyoutManagerRef$cur2;
+      if (((_flyoutManagerRef$cur2 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur2 === void 0 || (_flyoutManagerRef$cur2 = _flyoutManagerRef$cur2.state) === null || _flyoutManagerRef$cur2 === void 0 ? void 0 : _flyoutManagerRef$cur2.containerElement) === container) {
+        flyoutManagerRef.current.setContainerElement(null);
+      }
+    };
+  }, [container]);
+
+  // Performance: read context once and derive all manager-dependent values inline.
   var isInManagedContext = (0, _manager.useIsInManagedFlyout)();
   var flyoutId = (0, _manager.useFlyoutId)(id);
-  var layoutMode = (0, _manager.useFlyoutLayoutMode)();
-  var isActiveManagedFlyout = (0, _manager.useIsFlyoutActive)(flyoutId);
   var flyoutManager = (0, _manager.useFlyoutManager)();
-  var currentZIndexRef = (0, _selectors.useCurrentFlyoutZIndexRef)();
+  var managerState = flyoutManager === null || flyoutManager === void 0 ? void 0 : flyoutManager.state;
+  var managerSessions = managerState === null || managerState === void 0 ? void 0 : managerState.sessions;
+  var currentSession = managerSessions ? (_managerSessions = managerSessions[managerSessions.length - 1]) !== null && _managerSessions !== void 0 ? _managerSessions : null : null;
+  var layoutMode = (_managerState$layoutM = managerState === null || managerState === void 0 ? void 0 : managerState.layoutMode) !== null && _managerState$layoutM !== void 0 ? _managerState$layoutM : _const.LAYOUT_MODE_SIDE_BY_SIDE;
+  var isActiveManagedFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId) === flyoutId || (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === flyoutId;
+  var currentZIndexRef = (0, _react.useRef)((_managerState$current = managerState === null || managerState === void 0 ? void 0 : managerState.currentZIndex) !== null && _managerState$current !== void 0 ? _managerState$current : 0);
 
   // Use a ref to access the latest flyoutManager without triggering effect re-runs
   var flyoutManagerRef = (0, _react.useRef)(flyoutManager);
@@ -133,106 +183,186 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     // Keep track of unmanaged flyouts to properly calculate z-index
     // values for all flyouts
     if (!isInManagedContext) {
-      var _flyoutManagerRef$cur;
-      (_flyoutManagerRef$cur = flyoutManagerRef.current) === null || _flyoutManagerRef$cur === void 0 || _flyoutManagerRef$cur.addUnmanagedFlyout(flyoutId);
+      var _flyoutManagerRef$cur3;
+      (_flyoutManagerRef$cur3 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur3 === void 0 || _flyoutManagerRef$cur3.addUnmanagedFlyout(flyoutId);
       return function () {
-        var _flyoutManagerRef$cur2;
-        return (_flyoutManagerRef$cur2 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur2 === void 0 ? void 0 : _flyoutManagerRef$cur2.closeUnmanagedFlyout(flyoutId);
+        var _flyoutManagerRef$cur4;
+        return (_flyoutManagerRef$cur4 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur4 === void 0 ? void 0 : _flyoutManagerRef$cur4.closeUnmanagedFlyout(flyoutId);
       };
     }
   }, [isInManagedContext, flyoutId]);
-  var _useEuiFlyoutResizabl = (0, _use_flyout_resizable.useEuiFlyoutResizable)({
-      enabled: resizable,
-      minWidth: minWidth,
-      maxWidth: typeof maxWidth === 'number' ? maxWidth : 0,
-      onResize: onResize,
-      side: side,
-      size: _size
-    }),
-    onMouseDownResizableButton = _useEuiFlyoutResizabl.onMouseDown,
-    onKeyDownResizableButton = _useEuiFlyoutResizabl.onKeyDown,
-    size = _useEuiFlyoutResizabl.size,
-    setFlyoutRef = _useEuiFlyoutResizabl.setFlyoutRef;
 
-  /**
-   * Setting up the refs on the actual flyout element in order to
-   * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element
-   */
-  var _useState = (0, _react.useState)(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    resizeRef = _useState2[0],
-    setResizeRef = _useState2[1];
-  var setRef = (0, _services.useCombinedRefs)([setResizeRef, ref, internalParentFlyoutRef, setFlyoutRef]);
-  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isPushed ? resizeRef : null, 'width'),
-    width = _useResizeObserver.width;
-
-  // Memoize flyout identification and relationships to prevent race conditions
+  // Derive flyout identity and sibling info from the single context read
   var flyoutIdentity = (0, _react.useMemo)(function () {
     if (!flyoutId || !currentSession) {
       return {
         isMainFlyout: false,
         siblingFlyoutId: null,
-        hasValidSession: false,
-        sessionForWidth: null
+        hasValidSession: false
       };
     }
     var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
     return {
       isMainFlyout: currentSession.mainFlyoutId === flyoutId,
       siblingFlyoutId: siblingFlyoutId,
-      hasValidSession: true,
-      sessionForWidth: currentSession
+      hasValidSession: true
     };
   }, [flyoutId, currentSession]);
 
   // Destructure for easier use
   var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
     isMainFlyout = flyoutIdentity.isMainFlyout;
-  var _siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
+
+  // Derive sibling flyout data from manager state (single read, no extra hooks)
+  var siblingFlyout = siblingFlyoutId ? (_managerState$flyouts = managerState === null || managerState === void 0 ? void 0 : managerState.flyouts.find(function (f) {
+    return f.flyoutId === siblingFlyoutId;
+  })) !== null && _managerState$flyouts !== void 0 ? _managerState$flyouts : null : null;
+  var _siblingFlyoutWidth = siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.width;
+  var isSiblingFill = (siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.size) === 'fill';
+  var siblingFlyoutMinWidth = siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.minWidth;
   var siblingFlyoutWidth = layoutMode === _const.LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
 
+  // Observe the container's dimensions so the resize hook and
+  // positioning styles stay aligned with its bounding rect.
+  // When no container is provided, these remain inert (null/undefined).
+  var containerDimensions = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
+  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
+
+  // Track the container's bounding rect for positioning the flyout.
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerRect = _useState2[0],
+    setContainerRect = _useState2[1];
+  (0, _react.useLayoutEffect)(function () {
+    if (!container) {
+      setContainerRect(null);
+      return;
+    }
+    setContainerRect(container.getBoundingClientRect());
+  }, [container, containerDimensions.width]);
+  (0, _react.useEffect)(function () {
+    if (!container) return;
+    var updateRect = function updateRect() {
+      var next = container.getBoundingClientRect();
+      setContainerRect(function (prev) {
+        if (prev && prev.top === next.top && prev.left === next.left && prev.width === next.width && prev.height === next.height) {
+          return prev;
+        }
+        return next;
+      });
+    };
+    window.addEventListener('scroll', updateRect, {
+      passive: true
+    });
+    window.addEventListener('resize', updateRect, {
+      passive: true
+    });
+    return function () {
+      window.removeEventListener('scroll', updateRect);
+      window.removeEventListener('resize', updateRect);
+    };
+  }, [container]);
+  // Prefer the manager's reference width when available so resize clamp
+  // uses the same value as layout mode. When we have a container, cap by
+  // its measured width so we never allow resize past the container (e.g. if
+  // manager had viewport fallback or timing mismatch).
+  var managerRefWidth = isInManagedContext && typeof (managerState === null || managerState === void 0 ? void 0 : managerState.referenceWidth) === 'number' && managerState.referenceWidth > 0 ? managerState.referenceWidth : undefined;
+  var effectiveReferenceWidth = containerReferenceWidth != null && containerReferenceWidth > 0 ? managerRefWidth != null ? Math.min(managerRefWidth, containerReferenceWidth) : containerReferenceWidth : managerRefWidth !== null && managerRefWidth !== void 0 ? managerRefWidth : containerReferenceWidth;
+  var _useEuiFlyoutResizabl = (0, _use_flyout_resizable.useEuiFlyoutResizable)({
+      enabled: resizable,
+      minWidth: minWidth,
+      maxWidth: typeof maxWidth === 'number' ? maxWidth : undefined,
+      // For fill siblings, clamp based on their minWidth rather than their
+      // current measured width. Fill siblings dynamically adjust via CSS
+      // (`calc(90% - mainWidth)`), so subtracting their current width from
+      // the max creates a circular dependency where the main flyout can
+      // never grow (max = 90% - (90% - main) = main). Using minWidth
+      // breaks this cycle while ensuring the fill sibling never collapses
+      // below its configured minimum.
+      siblingFlyoutWidth: isSiblingFill ? siblingFlyoutMinWidth : siblingFlyoutWidth !== null && siblingFlyoutWidth !== void 0 ? siblingFlyoutWidth : undefined,
+      referenceWidth: effectiveReferenceWidth,
+      onResize: onResize,
+      side: side,
+      size: _size
+    }),
+    onMouseDownResizableButton = _useEuiFlyoutResizabl.onMouseDown,
+    onKeyDownResizableButton = _useEuiFlyoutResizabl.onKeyDown,
+    size = _useEuiFlyoutResizabl.size,
+    setFlyoutRef = _useEuiFlyoutResizabl.setFlyoutRef;
+
+  // Publish the main flyout's resolved width as a CSS custom property on
+  // the document element so that the child (fill) flyout can track it
+  // synchronously during drag resize, avoiding the 1-frame lag that
+  // results from the async ResizeObserver → manager-state pipeline.
+  (0, _react.useLayoutEffect)(function () {
+    if (!isMainFlyout) return;
+
+    // Only set when we have a computed percentage (during active resize)
+    if (typeof size === 'string' && size.endsWith('%')) {
+      document.documentElement.style.setProperty('--euiFlyoutMainWidth', size);
+    }
+    return function () {
+      document.documentElement.style.removeProperty('--euiFlyoutMainWidth');
+    };
+  }, [isMainFlyout, size]);
+
+  /**
+   * Setting up the refs on the actual flyout element in order to
+   * accommodate for the `isPushed` state by adding padding to the body equal to the width of the element
+   */
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    resizeRef = _useState4[0],
+    setResizeRef = _useState4[1];
+  var setRef = (0, _services.useCombinedRefs)([setResizeRef, ref, internalParentFlyoutRef, setFlyoutRef]);
+  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isPushed ? resizeRef : null, 'width'),
+    width = _useResizeObserver.width;
+
   /**
-   * Effect for adding push padding to body. Using useLayoutEffect to ensure
-   * padding changes happen synchronously before child components render -
-   * this is needed to prevent RemoveScrollBar from measuring the body in an
-   * inconsistent state during flyout transitions.
+   * Effect for adding push padding so the flyout has room. Targets the
+   * container element when one is provided, otherwise document.body.
+   * Uses useLayoutEffect so padding is applied before child render.
    */
   (0, _react.useLayoutEffect)(function () {
     if (!isPushed) {
-      return; // Only push-type flyouts manage body padding
+      return;
     }
+    var paddingTarget = container !== null && container !== void 0 ? container : document.body;
     var shouldApplyPadding = !isInManagedContext || isActiveManagedFlyout;
     var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
     var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
     var managerSide = side === 'left' ? 'left' : 'right';
+
+    // Capture pre-existing inline padding so it can be restored on cleanup
+    var previousPadding = paddingTarget.style[paddingSide];
     var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
     if (shouldApplyPadding) {
-      document.body.style[paddingSide] = "".concat(paddingWidth, "px");
-      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
-      // Update manager state if in managed context
+      paddingTarget.style[paddingSide] = "".concat(paddingWidth, "px");
+      if (shouldSetGlobalPushVars) {
+        setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
+      }
       if (isInManagedContext && flyoutManagerRef.current) {
         flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
       }
     } else {
-      // Explicitly remove padding when this push flyout becomes inactive
-      document.body.style[paddingSide] = '';
-      setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
-      // Clear manager state if in managed context
+      paddingTarget.style[paddingSide] = previousPadding;
+      if (shouldSetGlobalPushVars) {
+        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
+      }
       if (isInManagedContext && flyoutManagerRef.current) {
         flyoutManagerRef.current.setPushPadding(managerSide, 0);
       }
     }
-
-    // Cleanup on unmount
     return function () {
-      document.body.style[paddingSide] = '';
-      setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
-      // Clear manager state on unmount if in managed context
+      paddingTarget.style[paddingSide] = previousPadding;
+      if (shouldSetGlobalPushVars) {
+        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
+      }
       if (isInManagedContext && flyoutManagerRef.current) {
         flyoutManagerRef.current.setPushPadding(managerSide, 0);
       }
     };
-  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth]);
+  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth, shouldSetGlobalPushVars, container]);
 
   /**
    * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -240,7 +370,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   (0, _react.useEffect)(function () {
     document.body.classList.add('euiBody--hasFlyout');
     return function () {
-      // Remove the hasFlyout class when the flyout is unmounted
       document.body.classList.remove('euiBody--hasFlyout');
     };
   }, []);
@@ -265,6 +394,9 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     // Main flyout with child flyout - don't close on ESC
     return false;
   }, [isInManagedContext, hasChildFlyout, isChildFlyout]);
+  var handleClose = (0, _react.useCallback)(function (event) {
+    onClose(event);
+  }, [onClose]);
 
   /**
    * ESC key closes flyout based on flyout hierarchy rules
@@ -272,15 +404,15 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (!isPushed && event.key === _services.keys.ESCAPE && shouldCloseOnEscape) {
       event.preventDefault();
-      onClose(event);
+      handleClose(event);
     }
-  }, [onClose, isPushed, shouldCloseOnEscape]);
+  }, [handleClose, isPushed, shouldCloseOnEscape]);
   var managedFlyoutIndex = currentZIndexRef.current;
   if (isInManagedContext && currentSession) {
     managedFlyoutIndex = currentSession.zIndex;
   }
   var _useEuiFlyoutZIndex = (0, _use_flyout_z_index.useEuiFlyoutZIndex)({
-      maskProps: maskProps,
+      headerZindexLocation: effectiveHeaderZindexLocation,
       isPushed: isPushed,
       managedFlyoutIndex: managedFlyoutIndex,
       isChildFlyout: isChildFlyout
@@ -289,20 +421,125 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     maskZIndex = _useEuiFlyoutZIndex.maskZIndex;
 
   /**
-   * Set inline styles
+   * Inline styles position the flyout inside the reference container's
+   * bounding rect (document.body or a specific element) while remaining in
+   * document.body with position: fixed.
    */
   var inlineStyles = (0, _react.useMemo)(function () {
     var composedStyles = (0, _flyout.composeFlyoutInlineStyles)(size, layoutMode, siblingFlyoutId, siblingFlyoutWidth || null, maxWidth, flyoutZIndex);
-    return _objectSpread(_objectSpread({}, style), composedStyles);
-  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex]);
+
+    // Constrain the flyout to the reference container's bounding rect.
+    var containerPositionStyles = {};
+    if (containerRect) {
+      var containerMaxWidth = containerRect.width * 0.9;
+      // Use clientWidth (excludes scrollbar) to match the coordinate
+      // system of getBoundingClientRect() and CSS position: fixed.
+      var viewportWidth = document.documentElement.clientWidth;
+      var containerRightOffset = viewportWidth - containerRect.right;
+
+      // Compute the container-relative width for this flyout.
+      //
+      // For `position: fixed` elements CSS resolves `%` values against
+      // the viewport, not the container. The resize hook outputs
+      // percentage strings relative to `_referenceWidth` (the container),
+      // so we must convert them to pixel values here.
+      //
+      // Named sizes use their standard proportions (matching
+      // `composeFlyoutSizing`). Percentage strings from the resize hook
+      // are parsed and resolved against the container width. Numeric
+      // values are used directly.
+      var sizePercentMap = {
+        s: 0.25,
+        m: 0.5,
+        l: 0.75,
+        fill: 0.9
+      };
+      var containerRelativeWidth;
+      if (typeof size === 'string') {
+        var namedPct = sizePercentMap[size];
+        if (namedPct !== undefined) {
+          containerRelativeWidth = containerRect.width * namedPct;
+        } else if (size.endsWith('%')) {
+          // Percentage string from the resize hook — the value is
+          // relative to `_referenceWidth` (container width). Parse it
+          // and resolve against the container to get the correct pixels.
+          var pct = parseFloat(size);
+          if (!isNaN(pct)) {
+            containerRelativeWidth = containerRect.width * (pct / 100);
+          }
+        }
+      } else if (typeof size === 'number') {
+        containerRelativeWidth = size;
+      }
+
+      // All container-scoped flyouts get top/height from the container rect.
+      // Reset minInlineSize to 0 so that the CSS `min-inline-size` (which
+      // resolves against the viewport for `position: fixed`) does not
+      // prevent the container-relative width constraints from taking effect.
+      containerPositionStyles = {
+        top: containerRect.top,
+        height: containerRect.height,
+        minInlineSize: 0
+      };
+      if (isChildFlyout) {
+        // Child flyouts position themselves relative to the main flyout.
+        // In side-by-side mode, `siblingFlyoutWidth` is the main flyout's
+        // pixel width; in stacked mode it's 0 (child sits on top).
+        var siblingPx = siblingFlyoutWidth || 0;
+        if (side === 'left') {
+          containerPositionStyles.left = containerRect.left + siblingPx;
+        } else {
+          containerPositionStyles.right = containerRightOffset + siblingPx;
+        }
+        if (containerRelativeWidth !== undefined) {
+          // Set `inlineSize` (logical property) so it properly overrides
+          // `inlineSize` from composedStyles. We intentionally do NOT set
+          // maxInlineSize — the CSS `max-inline-size` from the size class
+          // provides the size-specific cap on initial render, and the
+          // resize hook's clamp handles it after resize interactions.
+          //
+          // For fill-size children in side-by-side mode, subtract the
+          // main flyout's width so the child takes only the remaining
+          // available space. For non-fill children, do NOT subtract —
+          // a fill-size main will shrink dynamically to accommodate.
+          var fillDeduction = size === 'fill' && layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE && siblingFlyoutWidth ? siblingFlyoutWidth : 0;
+          containerPositionStyles.inlineSize = Math.min(Math.max(0, containerRelativeWidth - fillDeduction), containerMaxWidth);
+        } else {
+          containerPositionStyles.maxInlineSize = containerMaxWidth;
+        }
+      } else {
+        // Main/standalone flyouts align to the container's edge.
+        if (side === 'left') {
+          containerPositionStyles.left = containerRect.left;
+        } else {
+          containerPositionStyles.right = containerRightOffset;
+        }
+        if (containerRelativeWidth !== undefined) {
+          // For fill-size flyouts in side-by-side mode, subtract the
+          // sibling's width so the main shrinks to accommodate the child.
+          var _siblingPx = size === 'fill' && layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE && siblingFlyoutWidth ? siblingFlyoutWidth : 0;
+          containerPositionStyles.inlineSize = Math.min(Math.max(0, containerRelativeWidth - _siblingPx), containerMaxWidth);
+        } else {
+          containerPositionStyles.maxInlineSize = containerMaxWidth;
+        }
+      }
+    }
+    return _objectSpread(_objectSpread(_objectSpread({}, style), composedStyles), containerPositionStyles);
+  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex, containerRect, side, isChildFlyout]);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout.euiFlyoutStyles);
   var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const2.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
   var classes = (0, _classnames.default)('euiFlyout', isChildFlyout && hasChildBackground && 'euiFlyout--hasChildBackground', className);
   var flyoutToggle = (0, _react.useRef)(document.activeElement);
-  var _useState3 = (0, _react.useState)([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    focusTrapShards = _useState4[0],
-    setFocusTrapShards = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    focusTrapShards = _useState6[0],
+    setFocusTrapShards = _useState6[1];
+  var isSideBySideChild = isChildFlyout && layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE;
+  // Side-by-side: main + child form a single modal unit; only main has aria-modal
+  // to avoid competing dialog semantics. Stacked children are independent modals.
+  var announcesAsModal = (0, _react.useMemo)(function () {
+    return !isPushed && !isSideBySideChild;
+  }, [isPushed, isSideBySideChild]);
   var focusTrapSelectors = (0, _react.useMemo)(function () {
     var selectors = [];
     if (includeSelectorInFocusTrap) {
@@ -311,8 +548,14 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     if (includeFixedHeadersInFocusTrap) {
       selectors.push('.euiHeader[data-fixed-header]');
     }
+
+    // Include parent in focus trap shards for side-by-side mode (unified navigation).
+    // In stacked mode, parent is hidden behind child so shouldn't be navigable.
+    if (isSideBySideChild) {
+      selectors.push("[".concat(_const.PROPERTY_LEVEL, "=\"").concat(_const.LEVEL_MAIN, "\"]"));
+    }
     return selectors;
-  }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
+  }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap, isSideBySideChild]);
 
   /**
    * Finds the shards to include in the focus trap by querying by `focusTrapSelectors`.
@@ -370,8 +613,8 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
       token: "euiFlyout.screenReaderModalDialog",
       default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
     }) : (0, _react2.jsx)(_i18n.EuiI18n, {
-      token: "euiFlyout.screenReaderNonModalDialog",
-      default: "You are in a non-modal dialog. To close the dialog, press Escape."
+      token: "euiFlyout.screenReaderNoOverlayMaskDialog",
+      default: "You are in a modal dialog. To close the dialog, press Escape."
     }), ' ', focusTrapShards.length > 0 && (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiFlyout.screenReaderFocusTrapShards",
       default: "You can still continue tabbing through other global page landmarks."
@@ -423,26 +666,31 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     if (outsideClickCloses === false) return undefined;
     if (hasOverlayMask) {
       // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-      if (event.target === maskRef.current) return onClose(event);
+      if (event.target === maskRef.current) return handleClose(event);
     } else {
       // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
+      if (outsideClickCloses === true) return handleClose(event);
     }
     // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
     return undefined;
-  }, [onClose, hasOverlayMask, outsideClickCloses]);
+  }, [handleClose, hasOverlayMask, outsideClickCloses]);
   var maskCombinedRefs = (0, _services.useCombinedRefs)([maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef, maskRef]);
 
   /**
    * For overlay flyouts in managed contexts, coordinate scroll locking with push flyout state.
    */
-  var hasPushPaddingInManager = (0, _manager.useHasPushPadding)();
+  var pushPadding = (_managerState$pushPad = managerState === null || managerState === void 0 ? void 0 : managerState.pushPadding) !== null && _managerState$pushPad !== void 0 ? _managerState$pushPad : {
+    left: 0,
+    right: 0
+  };
+  var hasPushPaddingInManager = pushPadding.left > 0 || pushPadding.right > 0;
   var shouldDeferScrollLock = !isPushed && isInManagedContext && hasPushPaddingInManager;
   var shouldUseScrollLock = hasOverlayMask && !shouldDeferScrollLock;
   return (0, _react2.jsx)(_flyout_overlay.EuiFlyoutOverlay, {
     hasOverlayMask: hasOverlayMask,
     isPushed: isPushed,
     maskZIndex: maskZIndex,
+    headerZindexLocation: effectiveHeaderZindexLocation,
     maskProps: _objectSpread(_objectSpread({}, maskProps), {}, {
       maskRef: maskCombinedRefs
     })
@@ -461,15 +709,15 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     ref: setRef,
     id: id
   }, rest, {
-    role: !isPushed ? 'dialog' : rest.role,
-    "aria-modal": !isPushed || undefined,
+    role: announcesAsModal ? 'dialog' : rest.role,
+    "aria-modal": announcesAsModal ? true : undefined,
     tabIndex: !isPushed ? 0 : rest.tabIndex,
     "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
     "data-autofocus": !isPushed || undefined,
     onAnimationEnd: onAnimationEnd
   }), !isPushed && screenReaderDescription, !_flyoutMenuProps && !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, _extends({}, closeButtonProps, {
-    onClose: onClose,
+    onClose: handleClose,
     closeButtonPosition: closeButtonPosition,
     side: side
   })), _flyoutMenuProps && (0, _react2.jsx)(_flyout_menu.EuiFlyoutMenu, _extends({}, flyoutMenuProps, {