@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

package/optimize/es/components/flyout/flyout.js

@@ -1,11 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded = ["session", "as", "onClose"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,345 +9,57 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
-import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useIsWithinMinBreakpoint, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables } from '../../services';
-import { logicalStyle } from '../../global_styling';
-import { EuiFocusTrap } from '../focus_trap';
-import { EuiOverlayMask } from '../overlay_mask';
-import { EuiI18n } from '../i18n';
-import { useResizeObserver } from '../observer/resize_observer';
-import { EuiPortal } from '../portal';
-import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiFlyoutCloseButton } from './_flyout_close_button';
-import { euiFlyoutStyles } from './flyout.styles';
-import { EuiFlyoutChild } from './flyout_child';
-import { EuiFlyoutChildProvider } from './flyout_child_manager';
+import React, { useRef, forwardRef } from 'react';
 import { usePropsWithComponentDefaults } from '../provider/component_defaults';
+import { EuiFlyoutComponent } from './flyout.component';
+import { EuiFlyoutChild, EuiFlyoutMain, useHasActiveSession, useIsInManagedFlyout } from './manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var TYPES = ['push', 'overlay'];
-export var SIDES = ['left', 'right'];
-export var SIZES = ['s', 'm', 'l'];
-/**
- * Custom type checker for named flyout sizes since the prop
- * `size` can also be CSSProperties['width'] (string | number)
- */
-function isEuiFlyoutSizeNamed(value) {
-  return SIZES.includes(value);
-}
-export var PADDING_SIZES = ['none', 's', 'm', 'l'];
-var defaultElement = 'div';
+export { FLYOUT_SIDES, FLYOUT_PADDING_SIZES, FLYOUT_SIZES, FLYOUT_TYPES } from './const';
 export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
   var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
-    className = _usePropsWithComponen.className,
-    children = _usePropsWithComponen.children,
+    session = _usePropsWithComponen.session,
     as = _usePropsWithComponen.as,
-    _usePropsWithComponen2 = _usePropsWithComponen.hideCloseButton,
-    hideCloseButton = _usePropsWithComponen2 === void 0 ? false : _usePropsWithComponen2,
-    closeButtonProps = _usePropsWithComponen.closeButtonProps,
-    _usePropsWithComponen3 = _usePropsWithComponen.closeButtonPosition,
-    _closeButtonPosition = _usePropsWithComponen3 === void 0 ? 'inside' : _usePropsWithComponen3,
     onClose = _usePropsWithComponen.onClose,
-    _usePropsWithComponen4 = _usePropsWithComponen.ownFocus,
-    ownFocus = _usePropsWithComponen4 === void 0 ? true : _usePropsWithComponen4,
-    _usePropsWithComponen5 = _usePropsWithComponen.side,
-    side = _usePropsWithComponen5 === void 0 ? 'right' : _usePropsWithComponen5,
-    _usePropsWithComponen6 = _usePropsWithComponen.size,
-    size = _usePropsWithComponen6 === void 0 ? 'm' : _usePropsWithComponen6,
-    _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
-    paddingSize = _usePropsWithComponen7 === void 0 ? 'l' : _usePropsWithComponen7,
-    _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
-    maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
-    style = _usePropsWithComponen.style,
-    maskProps = _usePropsWithComponen.maskProps,
-    _usePropsWithComponen9 = _usePropsWithComponen.type,
-    type = _usePropsWithComponen9 === void 0 ? 'overlay' : _usePropsWithComponen9,
-    outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
-    _usePropsWithComponen10 = _usePropsWithComponen.pushMinBreakpoint,
-    pushMinBreakpoint = _usePropsWithComponen10 === void 0 ? 'l' : _usePropsWithComponen10,
-    _usePropsWithComponen11 = _usePropsWithComponen.pushAnimation,
-    pushAnimation = _usePropsWithComponen11 === void 0 ? false : _usePropsWithComponen11,
-    _focusTrapProps = _usePropsWithComponen.focusTrapProps,
-    _usePropsWithComponen12 = _usePropsWithComponen.includeFixedHeadersInFocusTrap,
-    includeFixedHeadersInFocusTrap = _usePropsWithComponen12 === void 0 ? true : _usePropsWithComponen12,
-    includeSelectorInFocusTrap = _usePropsWithComponen.includeSelectorInFocusTrap,
-    _ariaDescribedBy = _usePropsWithComponen['aria-describedby'],
     rest = _objectWithoutProperties(_usePropsWithComponen, _excluded);
-  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
-    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
-  var Element = as || defaultElement;
-  var maskRef = useRef(null);
-
-  // Ref for the main flyout element to pass to context
-  var internalParentFlyoutRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isChildFlyoutOpen = _useState2[0],
-    setIsChildFlyoutOpen = _useState2[1];
-  var _useState3 = useState('side-by-side'),
-    _useState4 = _slicedToArray(_useState3, 2),
-    childLayoutMode = _useState4[0],
-    setChildLayoutMode = _useState4[1];
-
-  // Check for child flyout
-  var childFlyoutElement = React.Children.toArray(children).find(function (child) {
-    return /*#__PURE__*/React.isValidElement(child) && (child.type === EuiFlyoutChild || child.type.displayName === 'EuiFlyoutChild');
-  });
-  var hasChildFlyout = !!childFlyoutElement;
-
-  // Validate props, determine close button position and set child flyout classes
-  var closeButtonPosition;
-  var childFlyoutClasses = [];
-  if (hasChildFlyout) {
-    if (side !== 'right') {
-      throw new Error('EuiFlyout: When an EuiFlyoutChild is present, the `side` prop of EuiFlyout must be "right".');
-    }
-    if (!isEuiFlyoutSizeNamed(size) || !['s', 'm'].includes(size)) {
-      throw new Error("EuiFlyout: When an EuiFlyoutChild is present, the `size` prop of EuiFlyout must be \"s\" or \"m\". Received \"".concat(size, "\"."));
-    }
-    if (_closeButtonPosition !== 'inside') {
-      throw new Error('EuiFlyout: When an EuiFlyoutChild is present, the `closeButtonPosition` prop of EuiFlyout must be "inside".');
-    }
-    closeButtonPosition = 'inside';
-    childFlyoutClasses = ['euiFlyout--hasChild', "euiFlyout--hasChild--".concat(childLayoutMode), "euiFlyout--hasChild--".concat(childFlyoutElement.props.size || 's')];
-  } else {
-    closeButtonPosition = _closeButtonPosition;
-  }
-  var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
-  var isPushed = type === 'push' && windowIsLargeEnoughToPush;
-
-  /**
-   * 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 _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    resizeRef = _useState6[0],
-    setResizeRef = _useState6[1];
-  var setRef = useCombinedRefs([setResizeRef, ref, internalParentFlyoutRef]);
-  var _useResizeObserver = useResizeObserver(isPushed ? resizeRef : null, 'width'),
-    width = _useResizeObserver.width;
-  useEffect(function () {
-    /**
-     * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
-     */
-    if (isPushed) {
-      var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
-      var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
-      document.body.style[paddingSide] = "".concat(width, "px");
-
-      // EUI doesn't use this css variable, but it is useful for consumers
-      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
-      return function () {
-        document.body.style[paddingSide] = '';
-        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
-      };
-    }
-  }, [isPushed, setGlobalCSSVariables, side, width]);
-
-  /**
-   * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
-   */
-  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');
-    };
-  }, []);
-
-  /**
-   * ESC key closes flyout (always?)
-   */
-  var onKeyDown = useCallback(function (event) {
-    if (!isPushed && event.key === keys.ESCAPE && !isChildFlyoutOpen) {
-      event.preventDefault();
-      onClose(event);
-    }
-  }, [onClose, isPushed, isChildFlyoutOpen]);
-
-  /**
-   * Set inline styles
-   */
-  var inlineStyles = useMemo(function () {
-    var widthStyle = !isEuiFlyoutSizeNamed(size) && logicalStyle('width', size);
-    var maxWidthStyle = typeof maxWidth !== 'boolean' && logicalStyle('max-width', maxWidth);
-    return _objectSpread(_objectSpread(_objectSpread({}, style), widthStyle), maxWidthStyle);
-  }, [style, maxWidth, size]);
-  var styles = useEuiMemoizedStyles(euiFlyoutStyles);
-  var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], 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 = classnames.apply(void 0, ['euiFlyout'].concat(_toConsumableArray(childFlyoutClasses), [className]));
+  var hasActiveSession = useHasActiveSession();
+  var isUnmanagedFlyout = useRef(false);
+  var isInManagedFlyout = useIsInManagedFlyout();
 
   /*
-   * Trap focus even when `ownFocus={false}`, otherwise closing
-   * the flyout won't return focus to the originating button.
-   *
-   * Set `clickOutsideDisables={true}` when `ownFocus={false}`
-   * to allow non-keyboard users the ability to interact with
-   * elements outside the flyout.
-   *
-   * Set `onClickOutside={onClose}` when `ownFocus` and `type` are the defaults,
-   * or if `outsideClickCloses={true}` to close on clicks that target
-   * (both mousedown and mouseup) the overlay mask.
+   * Flyout routing logic
+   * 1. Main Flyout: When session={true} OR when there's an active session and this flyout
+   *    is rendered outside of a managed flyout context.
+   * 2. Child Flyout: When there's an active session AND this flyout IS rendered within a
+   *    managed flyout context.
+   * 3. Standard Flyout: Default fallback when neither condition is met.
    */
-  var flyoutToggle = useRef(document.activeElement);
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    focusTrapShards = _useState8[0],
-    setFocusTrapShards = _useState8[1];
-  var focusTrapSelectors = useMemo(function () {
-    var selectors = [];
-    if (includeSelectorInFocusTrap) {
-      selectors = Array.isArray(includeSelectorInFocusTrap) ? includeSelectorInFocusTrap : [includeSelectorInFocusTrap];
+  if (session === true || hasActiveSession && !isInManagedFlyout) {
+    if (isUnmanagedFlyout.current) {
+      // TODO: @tkajtoch - We need to find a better way to handle the missing event.
+      onClose === null || onClose === void 0 || onClose({});
+      return null;
     }
-    if (includeFixedHeadersInFocusTrap) {
-      selectors.push('.euiHeader[data-fixed-header]');
-    }
-    return selectors;
-  }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
-  useEffect(function () {
-    if (focusTrapSelectors.length > 0) {
-      var shardsEls = focusTrapSelectors.flatMap(function (selector) {
-        return Array.from(document.querySelectorAll(selector));
-      });
-      setFocusTrapShards(Array.from(shardsEls));
+    return ___EmotionJSX(EuiFlyoutMain, _extends({}, rest, {
+      onClose: onClose,
+      as: "div"
+    }));
+  }
 
-      // Flyouts that are toggled from shards do not have working
-      // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
-      shardsEls.forEach(function (shard) {
-        if (shard.contains(flyoutToggle.current)) {
-          resizeRef === null || resizeRef === void 0 || resizeRef.focus();
-        }
-      });
-    } else {
-      // Clear existing shards if necessary, e.g. switching to `false`
-      setFocusTrapShards(function (shards) {
-        return shards.length ? [] : shards;
-      });
-    }
-  }, [focusTrapSelectors, resizeRef]);
-  var focusTrapProps = useMemo(function () {
-    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
-      shards: [].concat(_toConsumableArray(focusTrapShards), _toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
-    });
-  }, [_focusTrapProps, focusTrapShards]);
+  // Else if this flyout is a child of a session AND within a managed flyout context, render EuiChildFlyout.
+  if (hasActiveSession && isInManagedFlyout) {
+    return ___EmotionJSX(EuiFlyoutChild, _extends({}, rest, {
+      onClose: onClose,
+      as: "div"
+    }));
+  }
 
-  /*
-   * Provide meaningful screen reader instructions/details
-   */
-  var hasOverlayMask = ownFocus && !isPushed;
-  var descriptionId = useGeneratedHtmlId();
-  var ariaDescribedBy = classnames(descriptionId, _ariaDescribedBy);
-  var screenReaderDescription = useMemo(function () {
-    return ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-      id: descriptionId
-    }, hasOverlayMask ? ___EmotionJSX(EuiI18n, {
-      token: "euiFlyout.screenReaderModalDialog",
-      default: "You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close."
-    }) : ___EmotionJSX(EuiI18n, {
-      token: "euiFlyout.screenReaderNonModalDialog",
-      default: "You are in a non-modal dialog. To close the dialog, press Escape."
-    }), ' ', focusTrapShards.length > 0 && ___EmotionJSX(EuiI18n, {
-      token: "euiFlyout.screenReaderFocusTrapShards",
-      default: "You can still continue tabbing through other global page landmarks."
-    })));
-  }, [hasOverlayMask, descriptionId, focusTrapShards.length]);
+  // TODO: if resizeable={true}, render EuiResizableFlyout.
 
-  /*
-   * Trap focus even when `ownFocus={false}`, otherwise closing
-   * the flyout won't return focus to the originating button.
-   *
-   * Set `clickOutsideDisables={true}` when `ownFocus={false}`
-   * to allow non-keyboard users the ability to interact with
-   * elements outside the flyout.
-   *
-   * Set `onClickOutside={onClose}` when `ownFocus` and `type` are the defaults,
-   * or if `outsideClickCloses={true}` to close on clicks that target
-   * (both mousedown and mouseup) the overlay mask.
-   */
-  var onClickOutside = useCallback(function (event) {
-    // Do not close the flyout for any external click
-    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);
-    } else {
-      // No overlay mask is present, so any outside clicks should close the flyout
-      if (outsideClickCloses === true) return onClose(event);
-    }
-    // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
-    return undefined;
-  }, [onClose, hasOverlayMask, outsideClickCloses]);
-  var closeButton = !hideCloseButton && ___EmotionJSX(EuiFlyoutCloseButton, _extends({}, closeButtonProps, {
+  isUnmanagedFlyout.current = true;
+  return ___EmotionJSX(EuiFlyoutComponent, _extends({}, rest, {
     onClose: onClose,
-    closeButtonPosition: closeButtonPosition,
-    side: side
+    as: as,
+    ref: ref
   }));
-
-  // render content within EuiFlyoutChildProvider if childFlyoutElement is present
-  var contentToRender = children;
-  if (hasChildFlyout && childFlyoutElement) {
-    contentToRender = ___EmotionJSX(EuiFlyoutChildProvider, {
-      parentSize: size,
-      parentFlyoutRef: internalParentFlyoutRef,
-      childElement: childFlyoutElement,
-      childrenToRender: children,
-      reportIsChildOpen: setIsChildFlyoutOpen,
-      reportChildLayoutMode: setChildLayoutMode
-    });
-  }
-  return ___EmotionJSX(EuiFlyoutWrapper, {
-    hasOverlayMask: hasOverlayMask,
-    maskProps: _objectSpread(_objectSpread({}, maskProps), {}, {
-      maskRef: useCombinedRefs([maskProps === null || maskProps === void 0 ? void 0 : maskProps.maskRef, maskRef])
-    }),
-    isPortalled: !isPushed
-  }, ___EmotionJSX(EuiWindowEvent, {
-    event: "keydown",
-    handler: onKeyDown
-  }), ___EmotionJSX(EuiFocusTrap, _extends({
-    disabled: isPushed || ownFocus && isChildFlyoutOpen,
-    scrollLock: hasOverlayMask,
-    clickOutsideDisables: !ownFocus,
-    onClickOutside: onClickOutside
-  }, focusTrapProps), ___EmotionJSX(Element, _extends({
-    className: classes,
-    css: cssStyles,
-    style: inlineStyles,
-    ref: setRef
-  }, rest, {
-    role: !isPushed ? 'dialog' : rest.role,
-    "aria-modal": !isPushed || undefined,
-    tabIndex: !isPushed ? 0 : rest.tabIndex,
-    "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
-    "data-autofocus": !isPushed || undefined
-  }), !isPushed && screenReaderDescription, closeButton, contentToRender)));
-}
-// React.forwardRef interferes with the inferred element type
-// Casting to ensure correct element prop type checking for `as`
-// e.g., `href` is not on a `div`
-);
-// Recast to allow `displayName`
-EuiFlyout.displayName = 'EuiFlyout';
-
-/**
- * Light wrapper for conditionally rendering portals or overlay masks:
- *  - If ownFocus is set, wrap with an overlay and allow the user to click it to close it.
- *  - Otherwise still wrap within an EuiPortal so it appends to the bottom of the window.
- * Push flyouts have no overlay OR portal behavior.
- */
-var EuiFlyoutWrapper = function EuiFlyoutWrapper(_ref) {
-  var children = _ref.children,
-    hasOverlayMask = _ref.hasOverlayMask,
-    maskProps = _ref.maskProps,
-    isPortalled = _ref.isPortalled;
-  if (hasOverlayMask) {
-    return ___EmotionJSX(EuiOverlayMask, _extends({
-      headerZindexLocation: "below"
-    }, maskProps), children);
-  } else if (isPortalled) {
-    return ___EmotionJSX(EuiPortal, null, children);
-  } else {
-    return ___EmotionJSX(React.Fragment, null, children);
-  }
-};
+});
+EuiFlyout.displayName = 'EuiFlyout';

package/optimize/es/components/flyout/flyout.styles.js

@@ -1,5 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,7 +14,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css, keyframes } from '@emotion/react';
 import { euiShadowXLarge } from '@elastic/eui-theme-common';
-import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
+import { isEuiFlyoutSizeNamed } from './const';
+import { PROPERTY_FLYOUT } from './manager/const';
+import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, logicalStyles, mathWithUnits } from '../../global_styling';
 import { euiFormMaxWidth } from '../form/form.styles';
 export var FLYOUT_BREAKPOINT = 'm';
 export var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
@@ -34,11 +39,12 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--m{", composeFlyoutSizing(euiThemeContext, 'm'), ";};label:s;"),
     m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--s{", composeFlyoutSizing(euiThemeContext, 's'), ";};label:m;"),
     l: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'l'), ";;label:l;"),
+    fill: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'fill'), ";;label:fill;"),
     noMaxWidth: /*#__PURE__*/css(logicalCSS('max-width', 'none'), ";;label:noMaxWidth;"),
     // Side
-    right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), " ", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
+    right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), "&:not([", PROPERTY_FLYOUT, "]){", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;animation-fill-mode:forwards;animation-iteration-count:1;}}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
     // Left-side flyouts should only be used for navigation
-    left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
+    left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);&:not([", PROPERTY_FLYOUT, "]){", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;animation-fill-mode:forwards;animation-iteration-count:1;}};label:left;"),
     // Type
     overlay: {
       overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
@@ -90,6 +96,13 @@ export var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, s
       // 1.
       width: '75vw',
       max: "".concat(euiTheme.breakpoint.l, "px")
+    },
+    // NOTE: These styles are for the flyout system in `stacked` layout mode.
+    // In `side-by-side` mode, @flyout.component.tsx uses inline styles.
+    fill: {
+      min: '90vw',
+      width: '90vw',
+      max: '90vw'
     }
   };
   return "\n    ".concat(logicalCSS('max-width', flyoutSizes[size].max), "\n\n    ").concat(euiMaxBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n      ").concat(logicalCSS('min-width', 0), "\n      ").concat(logicalCSS('width', flyoutSizes[size].min), "\n    }\n    ").concat(euiMinBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n      ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n      ").concat(logicalCSS('width', flyoutSizes[size].width), "\n    }\n  ");
@@ -115,4 +128,83 @@ var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddin
     }), " ").concat(euiTheme.size.l, ";")
   };
   return "\n    .euiFlyoutHeader {\n      ".concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat(logicalCSS('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat(logicalCSS('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutBody__banner .euiCallOut {\n      ").concat(logicalCSS('padding-horizontal', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutFooter {\n      padding: ").concat(footerPaddingSizes[paddingSize], ";\n    }\n  ");
+};
+
+/**
+ * Helper for `composeFlyoutInlineStyles`
+ * Handles maxWidth prop overrides to ensure they take precedence over base CSS
+ */
+var composeMaxWidthOverrides = function composeMaxWidthOverrides(maxWidth, isFill) {
+  if (typeof maxWidth === 'boolean') {
+    return {};
+  }
+  var overrides = {
+    maxWidth: maxWidth
+  };
+
+  // For fill size flyouts, we need to override min-width to allow dynamic sizing
+  if (isFill) {
+    overrides.minWidth = '0';
+
+    // When maxWidth is provided for fill flyouts, we need to override the CSS rule
+    // that sets min-inline-size: 90vw. We calculate min(maxWidth, 90vw) to ensure
+    // the flyout respects both constraints and doesn't get stuck at 90vw minimum.
+    if (maxWidth) {
+      var maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
+      overrides.minWidth = "min(".concat(maxWidthWithUnits, ", 90vw)");
+    }
+  }
+  return logicalStyles(overrides);
+};
+
+/**
+ * Composes all inline styles for a flyout based on its configuration
+ */
+export var composeFlyoutInlineStyles = function composeFlyoutInlineStyles(size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth) {
+  // Handle custom width values (non-named sizes)
+  var customWidthStyles = !isEuiFlyoutSizeNamed(size) ? logicalStyles({
+    width: size
+  }) : {};
+  var isFill = size === 'fill';
+
+  // Handle dynamic width calculation for fill size in side-by-side mode
+  var dynamicStyles = isFill && layoutMode === 'side-by-side' && siblingFlyoutId && siblingFlyoutWidth ? logicalStyles({
+    width: "calc(90vw - ".concat(siblingFlyoutWidth, "px)"),
+    minWidth: '0'
+  }) : {};
+
+  // For fill flyouts with maxWidth, we need to ensure the minWidth override is applied
+  // to override the CSS rule that sets min-inline-size: 90vw
+  var minWidthOverride = {};
+  if (isFill && maxWidth) {
+    if (layoutMode === 'side-by-side' && siblingFlyoutId && siblingFlyoutWidth && dynamicStyles.inlineSize) {
+      // For fill flyouts with maxWidth and a sibling: min(maxWidth, calc(90vw - siblingWidth))
+      var dynamicWidth = dynamicStyles.inlineSize;
+      var maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
+      minWidthOverride = {
+        minWidth: "min(".concat(maxWidthWithUnits, ", ").concat(dynamicWidth, ")")
+      };
+    } else {
+      // For fill flyouts with maxWidth but no sibling: min(maxWidth, 90vw)
+      var maxWidthOverrides = composeMaxWidthOverrides(maxWidth, isFill);
+      minWidthOverride = {
+        minWidth: maxWidthOverrides.minInlineSize
+      };
+    }
+  }
+
+  // Calculate the final maxWidth based on conditions
+  var finalMaxWidth;
+  if (maxWidth && isFill && layoutMode === 'side-by-side' && siblingFlyoutId && siblingFlyoutWidth && dynamicStyles.inlineSize) {
+    // For fill flyouts with maxWidth and a sibling: min(maxWidth, calc(90vw - siblingWidth))
+    var _dynamicWidth = dynamicStyles.inlineSize;
+    var _maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
+    finalMaxWidth = "min(".concat(_maxWidthWithUnits, ", ").concat(_dynamicWidth, ")");
+  } else if (maxWidth) {
+    // For all other cases with maxWidth: use the original maxWidth value
+    finalMaxWidth = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
+  }
+  return logicalStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customWidthStyles), dynamicStyles), minWidthOverride), finalMaxWidth ? {
+    maxWidth: finalMaxWidth
+  } : {}));
 };

package/optimize/es/components/flyout/flyout_menu.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "backButton", "popover", "title", "hideCloseButton"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import classNames from 'classnames';
+import React, { useContext } from 'react';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiTitle } from '../title';
+import { EuiFlyoutCloseButton } from './_flyout_close_button';
+import { euiFlyoutMenuStyles } from './flyout_menu.styles';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    backButton = _ref.backButton,
+    popover = _ref.popover,
+    title = _ref.title,
+    hideCloseButton = _ref.hideCloseButton,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(EuiFlyoutMenuContext),
+    onClose = _useContext.onClose;
+  var styles = useEuiMemoizedStyles(euiFlyoutMenuStyles);
+  var classes = classNames('euiFlyoutMenu', className);
+  var titleId = useGeneratedHtmlId();
+  var titleNode;
+  if (title) {
+    titleNode = ___EmotionJSX(EuiTitle, {
+      size: "xxs",
+      id: titleId
+    }, ___EmotionJSX("h3", null, title));
+  }
+  var handleClose = function handleClose(event) {
+    onClose === null || onClose === void 0 || onClose(event);
+  };
+  var closeButton;
+  if (!hideCloseButton) {
+    closeButton = ___EmotionJSX(EuiFlyoutCloseButton, {
+      onClose: handleClose,
+      side: "right",
+      closeButtonPosition: "inside"
+    });
+  }
+  return ___EmotionJSX("div", _extends({
+    className: classes,
+    css: styles.euiFlyoutMenu__container
+  }, rest), ___EmotionJSX(EuiFlexGroup, {
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gutterSize: "none",
+    responsive: false
+  }, backButton && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, backButton), popover && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, popover), titleNode && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, titleNode), ___EmotionJSX(EuiFlexItem, {
+    grow: true
+  }), children && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, children), ___EmotionJSX(EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__spacer
+  })), closeButton);
+};

package/optimize/es/components/flyout/flyout_menu.styles.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+export var euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutMenu__container: /*#__PURE__*/css("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";padding-block-start:calc(", euiTheme.size.m, " * 0.8);.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__spacer: /*#__PURE__*/css("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;")
+  };
+};

package/{es/components/flyout/flyout_context.js → optimize/es/components/flyout/flyout_menu_context.js}

@@ -7,10 +7,4 @@
  */
 
 import { createContext } from 'react';
-
-/**
- * Context shared between the main and child flyouts
- * @internal
- */
-
-export var EuiFlyoutContext = /*#__PURE__*/createContext(null);
+export var EuiFlyoutMenuContext = /*#__PURE__*/createContext({});

package/optimize/es/components/flyout/flyout_resizable.js

@@ -16,6 +16,7 @@ import { EuiResizableButton } from '../resizable_container';
 import { getPosition } from '../resizable_container/helpers';
 import { EuiFlyout } from './flyout';
 import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
+import { DEFAULT_SIDE, DEFAULT_TYPE } from './const';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // If not omitted, the correct props don't show up in the docs prop table
 
@@ -26,9 +27,9 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
     onResize = _ref.onResize,
     _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'right' : _ref$side,
+    side = _ref$side === void 0 ? DEFAULT_SIDE : _ref$side,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'overlay' : _ref$type,
+    type = _ref$type === void 0 ? DEFAULT_TYPE : _ref$type,
     _ref$ownFocus = _ref.ownFocus,
     ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
     children = _ref.children,