@elastic/eui 110.0.0 → 111.0.0

package/test-env/components/flyout/flyout.component.js

@@ -0,0 +1,477 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutComponent = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _manager = require("./manager");
+var _focus_trap = require("../focus_trap");
+var _i18n = require("../i18n");
+var _resize_observer = require("../observer/resize_observer");
+var _accessibility = require("../accessibility");
+var _flyout_close_button = require("./_flyout_close_button");
+var _flyout = require("./flyout.styles");
+var _component_defaults = require("../provider/component_defaults");
+var _const = require("./const");
+var _hooks = require("./hooks");
+var _flyout_menu = require("./flyout_menu");
+var _flyout_overlay = require("./_flyout_overlay");
+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"],
+  _excluded2 = ["titleId"];
+/*
+ * 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.
+ */
+/* eslint-disable local/i18n */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2.default)(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 defaultElement = 'div';
+var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
+    className = _usePropsWithComponen.className,
+    children = _usePropsWithComponen.children,
+    as = _usePropsWithComponen.as,
+    _usePropsWithComponen2 = _usePropsWithComponen.hideCloseButton,
+    hideCloseButton = _usePropsWithComponen2 === void 0 ? false : _usePropsWithComponen2,
+    _flyoutMenuProps = _usePropsWithComponen.flyoutMenuProps,
+    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 ? _const.DEFAULT_SIDE : _usePropsWithComponen5,
+    _usePropsWithComponen6 = _usePropsWithComponen.size,
+    _size = _usePropsWithComponen6 === void 0 ? _const.DEFAULT_SIZE : _usePropsWithComponen6,
+    _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
+    paddingSize = _usePropsWithComponen7 === void 0 ? _const.DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
+    _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
+    maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
+    style = _usePropsWithComponen.style,
+    _usePropsWithComponen9 = _usePropsWithComponen.hasChildBackground,
+    hasChildBackground = _usePropsWithComponen9 === void 0 ? false : _usePropsWithComponen9,
+    maskProps = _usePropsWithComponen.maskProps,
+    _usePropsWithComponen10 = _usePropsWithComponen.type,
+    type = _usePropsWithComponen10 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen10,
+    outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
+    _usePropsWithComponen11 = _usePropsWithComponen.pushMinBreakpoint,
+    pushMinBreakpoint = _usePropsWithComponen11 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen11,
+    _usePropsWithComponen12 = _usePropsWithComponen.pushAnimation,
+    pushAnimation = _usePropsWithComponen12 === void 0 ? false : _usePropsWithComponen12,
+    _focusTrapProps = _usePropsWithComponen.focusTrapProps,
+    _usePropsWithComponen13 = _usePropsWithComponen.includeFixedHeadersInFocusTrap,
+    includeFixedHeadersInFocusTrap = _usePropsWithComponen13 === void 0 ? true : _usePropsWithComponen13,
+    includeSelectorInFocusTrap = _usePropsWithComponen.includeSelectorInFocusTrap,
+    _ariaDescribedBy = _usePropsWithComponen['aria-describedby'],
+    _ariaLabelledBy = _usePropsWithComponen['aria-labelledby'],
+    id = _usePropsWithComponen.id,
+    _usePropsWithComponen14 = _usePropsWithComponen.resizable,
+    resizable = _usePropsWithComponen14 === void 0 ? false : _usePropsWithComponen14,
+    minWidth = _usePropsWithComponen.minWidth,
+    onResize = _usePropsWithComponen.onResize,
+    onAnimationEnd = _usePropsWithComponen.onAnimationEnd,
+    rest = (0, _objectWithoutProperties2.default)(_usePropsWithComponen, _excluded);
+  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
+  var Element = as || defaultElement;
+  var maskRef = (0, _react.useRef)(null);
+
+  // Ref for the main flyout element to pass to context
+  var internalParentFlyoutRef = (0, _react.useRef)(null);
+  var isPushed = (0, _hooks.useIsPushed)({
+    type: type,
+    pushMinBreakpoint: pushMinBreakpoint
+  });
+  var currentSession = (0, _manager.useCurrentSession)();
+  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)();
+
+  // Use a ref to access the latest flyoutManager without triggering effect re-runs
+  var flyoutManagerRef = (0, _react.useRef)(flyoutManager);
+  (0, _react.useEffect)(function () {
+    flyoutManagerRef.current = flyoutManager;
+  }, [flyoutManager]);
+  (0, _react.useEffect)(function () {
+    // 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);
+      return function () {
+        var _flyoutManagerRef$cur2;
+        return (_flyoutManagerRef$cur2 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur2 === void 0 ? void 0 : _flyoutManagerRef$cur2.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 = (0, _slicedToArray2.default)(_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;
+
+  /**
+   * 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.
+   */
+  (0, _react.useLayoutEffect)(function () {
+    if (!isPushed) {
+      return; // Only push-type flyouts manage body padding
+    }
+    var shouldApplyPadding = !isInManagedContext || isActiveManagedFlyout;
+    var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+    var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
+    var managerSide = side === 'left' ? 'left' : 'right';
+    if (shouldApplyPadding) {
+      document.body.style[paddingSide] = "".concat(width, "px");
+      setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, "".concat(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((0, _defineProperty2.default)({}, cssVarName, null));
+      // Clear manager state if in managed context
+      if (isInManagedContext && flyoutManagerRef.current) {
+        flyoutManagerRef.current.setPushPadding(managerSide, 0);
+      }
+    }
+
+    // Cleanup on unmount
+    return function () {
+      document.body.style[paddingSide] = '';
+      setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, null));
+      // Clear manager state on unmount if in managed context
+      if (isInManagedContext && flyoutManagerRef.current) {
+        flyoutManagerRef.current.setPushPadding(managerSide, 0);
+      }
+    };
+  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width]);
+
+  /**
+   * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
+   */
+  (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');
+    };
+  }, []);
+
+  // Memoize flyout identification and relationships to prevent race conditions
+  var flyoutIdentity = (0, _react.useMemo)(function () {
+    if (!flyoutId || !currentSession) {
+      return {
+        isMainFlyout: false,
+        siblingFlyoutId: null,
+        hasValidSession: false,
+        sessionForWidth: null
+      };
+    }
+    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
+    return {
+      siblingFlyoutId: siblingFlyoutId,
+      hasValidSession: true,
+      sessionForWidth: currentSession
+    };
+  }, [flyoutId, currentSession]);
+
+  // Destructure for easier use
+  var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
+  var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) != null;
+  var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === id;
+  var shouldCloseOnEscape = (0, _react.useMemo)(function () {
+    // Regular flyout - always close on ESC
+    if (!isInManagedContext) {
+      return true;
+    }
+
+    // Managed flyout with no child - close on ESC
+    if (!hasChildFlyout) {
+      return true;
+    }
+
+    // Child flyout - close on ESC
+    if (isChildFlyout) {
+      return true;
+    }
+
+    // Main flyout with child flyout - don't close on ESC
+    return false;
+  }, [isInManagedContext, hasChildFlyout, isChildFlyout]);
+
+  /**
+   * ESC key closes flyout based on flyout hierarchy rules
+   */
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (!isPushed && event.key === _services.keys.ESCAPE && shouldCloseOnEscape) {
+      event.preventDefault();
+      onClose(event);
+    }
+  }, [onClose, isPushed, shouldCloseOnEscape]);
+  var siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
+  var managedFlyoutIndex = currentZIndexRef.current;
+  if (isInManagedContext && currentSession) {
+    managedFlyoutIndex = currentSession.zIndex;
+  }
+  var _useEuiFlyoutZIndex = (0, _use_flyout_z_index.useEuiFlyoutZIndex)({
+      maskProps: maskProps,
+      isPushed: isPushed,
+      managedFlyoutIndex: managedFlyoutIndex,
+      isChildFlyout: isChildFlyout
+    }),
+    flyoutZIndex = _useEuiFlyoutZIndex.flyoutZIndex,
+    maskZIndex = _useEuiFlyoutZIndex.maskZIndex;
+
+  /**
+   * Set inline styles
+   */
+  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]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout.euiFlyoutStyles);
+  var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const.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 = (0, _slicedToArray2.default)(_useState3, 2),
+    focusTrapShards = _useState4[0],
+    setFocusTrapShards = _useState4[1];
+  var focusTrapSelectors = (0, _react.useMemo)(function () {
+    var selectors = [];
+    if (includeSelectorInFocusTrap) {
+      selectors = Array.isArray(includeSelectorInFocusTrap) ? includeSelectorInFocusTrap : [includeSelectorInFocusTrap];
+    }
+    if (includeFixedHeadersInFocusTrap) {
+      selectors.push('.euiHeader[data-fixed-header]');
+    }
+    return selectors;
+  }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
+
+  /**
+   * Finds the shards to include in the focus trap by querying by `focusTrapSelectors`.
+   *
+   * @param shouldAutoFocus Whether to auto-focus the flyout wrapper when the focus trap is activated.
+   * This is necessary because when a flyout is toggled from within a shard, the focus trap's `autoFocus`
+   * feature doesn't work. This logic manually focuses the flyout as a workaround.
+   */
+  var findShards = (0, _react.useCallback)(function () {
+    var shouldAutoFocus = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    if (focusTrapSelectors.length > 0) {
+      var shardsEls = focusTrapSelectors.flatMap(function (selector) {
+        return Array.from(document.querySelectorAll(selector));
+      });
+      setFocusTrapShards(Array.from(shardsEls));
+      if (shouldAutoFocus) {
+        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]);
+  (0, _react.useEffect)(function () {
+    // Auto-focus should only happen on initial flyout mount (or when the dependencies change)
+    // because it snaps focus to the flyout wrapper, which steals it from subsequently focused elements.
+    findShards(true);
+    var unsubscribe = _services.focusTrapPubSub.subscribe(function () {
+      return findShards();
+    });
+    return unsubscribe;
+  }, [findShards]);
+  var focusTrapProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+      shards: [].concat((0, _toConsumableArray2.default)(focusTrapShards), (0, _toConsumableArray2.default)((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+    });
+  }, [_focusTrapProps, focusTrapShards]);
+
+  /*
+   * Provide meaningful screen reader instructions/details
+   */
+  var hasOverlayMask = ownFocus && !isPushed;
+  var descriptionId = (0, _services.useGeneratedHtmlId)();
+  var ariaDescribedBy = (0, _classnames.default)(descriptionId, _ariaDescribedBy);
+  var screenReaderDescription = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+      id: descriptionId
+    }, hasOverlayMask ? (0, _react2.jsx)(_i18n.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."
+    }) : (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiFlyout.screenReaderNonModalDialog",
+      default: "You are in a non-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."
+    })));
+  }, [hasOverlayMask, descriptionId, focusTrapShards.length]);
+
+  /*
+   * If the flyout menu is to be rendered, ensure the flyout has aria-labelledby referencing the menu's titleId
+   */
+  var generatedMenuId = (0, _services.useGeneratedHtmlId)();
+  var _ref = _flyoutMenuProps || {},
+    _titleId = _ref.titleId,
+    flyoutMenuProps = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
+  var hasMenu = !!_flyoutMenuProps;
+  var flyoutMenuId = (0, _react.useMemo)(function () {
+    if (!hasMenu) return undefined;
+    return _titleId || generatedMenuId;
+  }, [hasMenu, _titleId, generatedMenuId]);
+
+  // If the flyout level is LEVEL_MAIN, the title should be hidden by default
+  var flyoutMenuHideTitle = (0, _react.useMemo)(function () {
+    if (!hasMenu) return undefined;
+    if ((_flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.hideTitle) !== undefined) {
+      return _flyoutMenuProps.hideTitle;
+    }
+    return (currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId) === flyoutId;
+  }, [hasMenu, _flyoutMenuProps, currentSession, flyoutId]);
+  var ariaLabelledBy = (0, _react.useMemo)(function () {
+    if (flyoutMenuId) {
+      return (0, _classnames.default)(flyoutMenuId, _ariaLabelledBy);
+    }
+    return _ariaLabelledBy;
+  }, [flyoutMenuId, _ariaLabelledBy]);
+
+  /*
+   * 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 = (0, _react.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 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 shouldDeferScrollLock = !isPushed && isInManagedContext && hasPushPaddingInManager;
+  var shouldUseScrollLock = hasOverlayMask && !shouldDeferScrollLock;
+  return (0, _react2.jsx)(_flyout_overlay.EuiFlyoutOverlay, {
+    hasOverlayMask: hasOverlayMask,
+    isPushed: isPushed,
+    maskZIndex: maskZIndex,
+    maskProps: _objectSpread(_objectSpread({}, maskProps), {}, {
+      maskRef: maskCombinedRefs
+    })
+  }, (0, _react2.jsx)(_services.EuiWindowEvent, {
+    event: "keydown",
+    handler: onKeyDown
+  }), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
+    disabled: isPushed,
+    scrollLock: shouldUseScrollLock,
+    clickOutsideDisables: !ownFocus,
+    onClickOutside: onClickOutside
+  }, focusTrapProps), (0, _react2.jsx)(Element, (0, _extends2.default)({
+    className: classes,
+    css: cssStyles,
+    style: inlineStyles,
+    ref: setRef,
+    id: id
+  }, rest, {
+    role: !isPushed ? 'dialog' : rest.role,
+    "aria-modal": !isPushed || 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, (0, _extends2.default)({}, closeButtonProps, {
+    onClose: onClose,
+    closeButtonPosition: closeButtonPosition,
+    side: side
+  })), _flyoutMenuProps && (0, _react2.jsx)(_flyout_menu.EuiFlyoutMenu, (0, _extends2.default)({}, flyoutMenuProps, {
+    hideTitle: flyoutMenuHideTitle,
+    titleId: flyoutMenuId
+  })), resizable && (0, _react2.jsx)(_flyout_resize_button.EuiFlyoutResizeButton, {
+    type: type,
+    side: side,
+    ownFocus: ownFocus,
+    isPushed: isPushed,
+    onMouseDown: onMouseDownResizableButton,
+    onTouchStart: onMouseDownResizableButton,
+    onKeyDown: onKeyDownResizableButton
+  }), (0, _react2.jsx)(_flyout_parent_context.EuiFlyoutParentProvider, null, children))));
+}
+// 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`
+EuiFlyoutComponent.displayName = 'EuiFlyoutComponent';

package/test-env/components/flyout/flyout.styles.js

@@ -4,13 +4,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maxedFlyoutWidth = exports.euiFlyoutStyles = exports.euiFlyoutSlideInRight = exports.euiFlyoutSlideInLeft = exports.composeFlyoutSizing = exports.FLYOUT_BREAKPOINT = void 0;
+exports.maxedFlyoutWidth = exports.euiFlyoutStyles = exports.euiFlyoutSlideOutRight = exports.euiFlyoutSlideOutLeft = exports.euiFlyoutSlideInRight = exports.euiFlyoutSlideInLeft = exports.composeFlyoutSizing = exports.composeFlyoutInlineStyles = exports.FLYOUT_BREAKPOINT = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
+var _const = require("./const");
 var _global_styling = require("../../global_styling");
 var _form = require("../form/form.styles");
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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) { (0, _defineProperty2.default)(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
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,8 +23,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var FLYOUT_BREAKPOINT = exports.FLYOUT_BREAKPOINT = 'm';
-var euiFlyoutSlideInRight = exports.euiFlyoutSlideInRight = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
-var euiFlyoutSlideInLeft = exports.euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
+var euiFlyoutSlideInRight = exports.euiFlyoutSlideInRight = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
+var euiFlyoutSlideOutRight = exports.euiFlyoutSlideOutRight = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
+var euiFlyoutSlideInLeft = exports.euiFlyoutSlideInLeft = (0, _react.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
+var euiFlyoutSlideOutLeft = exports.euiFlyoutSlideOutLeft = (0, _react.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n"])));
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "yokctr-noAnimation",
   styles: "animation-duration:0s!important;label:noAnimation;"
@@ -40,17 +46,18 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), " ", (0, _global_styling.logicalCSS)('height', 'inherit'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyout;"),
+    euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), " ", (0, _global_styling.logicalCSS)('height', 'inherit'), " background:", euiTheme.colors.backgroundBasePlain, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}&.euiFlyout--hasChildBackground{background:", euiTheme.colors.backgroundBaseSubdued, ";}", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyout;"),
     // Flyout sizes
     // When a child flyout is stacked on top of the parent, the parent flyout size will match the child flyout size
     s: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 's'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--m{", composeFlyoutSizing(euiThemeContext, 'm'), ";};label:s;"),
     m: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'm'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--s{", composeFlyoutSizing(euiThemeContext, 's'), ";};label:m;"),
     l: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'l'), ";;label:l;"),
+    fill: /*#__PURE__*/(0, _react.css)(composeFlyoutSizing(euiThemeContext, 'fill'), ";;label:fill;"),
     noMaxWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', 'none'), ";;label:noMaxWidth;"),
     // Side
-    right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", (0, _global_styling.logicalCSS)('right', 0), " ", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
+    right: /*#__PURE__*/(0, _react.css)("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", (0, _global_styling.logicalCSS)('right', 0), "animation:", euiFlyoutSlideInRight, " 0s ", euiTheme.animation.resistance, " forwards;", _global_styling.euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
     // Left-side flyouts should only be used for navigation
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);animation:", euiFlyoutSlideInLeft, " 0s ", euiTheme.animation.resistance, " forwards;", _global_styling.euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";};label:left;"),
     // Type
     overlay: {
       overlay: _ref2,
@@ -106,6 +113,13 @@ var composeFlyoutSizing = exports.composeFlyoutSizing = function composeFlyoutSi
       // 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((0, _global_styling.logicalCSS)('max-width', flyoutSizes[size].max), "\n\n    ").concat((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, FLYOUT_BREAKPOINT), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].min), "\n    }\n    ").concat((0, _global_styling.euiMinBreakpoint)(euiThemeContext, FLYOUT_BREAKPOINT), " {\n      ").concat((0, _global_styling.logicalCSS)('min-width', flyoutSizes[size].min), "\n      ").concat((0, _global_styling.logicalCSS)('width', flyoutSizes[size].width), "\n    }\n  ");
@@ -131,4 +145,85 @@ var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddin
     }), " ").concat(euiTheme.size.l, ";")
   };
   return "\n    .euiFlyoutHeader {\n      ".concat((0, _global_styling.logicalCSS)('padding-horizontal', paddingModifierMap[paddingSize]), "\n      ").concat((0, _global_styling.logicalCSS)('padding-top', paddingModifierMap[paddingSize]), "\n    }\n\n    [class*='euiFlyoutHeader-hasBorder'] {\n      ").concat((0, _global_styling.logicalCSS)('padding-bottom', paddingModifierMap[paddingSize]), "\n    }\n\n    .euiFlyoutBody__overflowContent {\n      padding: ").concat(paddingModifierMap[paddingSize], ";\n    }\n\n    .euiFlyoutBody__banner .euiCallOut {\n      ").concat((0, _global_styling.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 (0, _global_styling.logicalStyles)(overrides);
+};
+
+/**
+ * Composes all inline styles for a flyout based on its configuration
+ */
+var composeFlyoutInlineStyles = exports.composeFlyoutInlineStyles = function composeFlyoutInlineStyles(size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, zIndex) {
+  // Handle custom width values (non-named sizes)
+  var customWidthStyles = !(0, _const.isEuiFlyoutSizeNamed)(size) ? (0, _global_styling.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 ? (0, _global_styling.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 (0, _global_styling.logicalStyles)(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, customWidthStyles), dynamicStyles), minWidthOverride), finalMaxWidth ? {
+    maxWidth: finalMaxWidth
+  } : {}), {}, {
+    zIndex: zIndex
+  }));
 };