@elastic/eui 113.1.0 → 113.2.0

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

@@ -17,12 +17,17 @@ import { euiShadowXLarge } from '@elastic/eui-theme-common';
 import { isEuiFlyoutSizeNamed } from './const';
 import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, logicalStyles, mathWithUnits } from '../../global_styling';
 import { euiFormMaxWidth } from '../form/form.styles';
-export var EUI_FLYOUT_CONTAINER_NAME = 'euiFlyout';
 export var FLYOUT_BREAKPOINT = 'm';
 export var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 export var euiFlyoutSlideOutRight = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));
 export var euiFlyoutSlideInLeft = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 export var euiFlyoutSlideOutLeft = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  from {\n    opacity: 1;\n    transform: translateX(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n"])));
+
+/**
+ * When a `container` reference element is provided, the flyout's position
+ * and dimensions are constrained to the container's bounding rect via
+ * inline styles computed in JS.
+ */
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "yokctr-noAnimation",
   styles: "animation-duration:0s!important;label:noAnimation;"
@@ -41,14 +46,9 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return {
-    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('bottom', 0), " ", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), " ", 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__*/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;"),
+  return _objectSpread(_objectSpread({
+    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('bottom', 0), " ", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), " ", 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;")
+  }, composeFlyoutSizing(euiThemeContext)), {}, {
     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), "animation:", euiFlyoutSlideInRight, " 0s ", euiTheme.animation.resistance, " forwards;", euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
@@ -79,21 +79,34 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
       m: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'm'), ";;label:m;"),
       l: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'l'), ";;label:l;")
     }
-  };
+  });
 };
+
+/**
+ * Applies a max-width constraint at the flyout breakpoint.
+ */
 export var maxedFlyoutWidth = function maxedFlyoutWidth(euiThemeContext) {
-  return "\n  ".concat(euiMaxBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n    ").concat(logicalCSS('max-width', '90vw !important'), "\n  }\n");
+  return "\n  ".concat(euiMaxBreakpoint(euiThemeContext, FLYOUT_BREAKPOINT), " {\n    ").concat(logicalCSS('max-width', '90% !important'), "\n  }\n");
 };
-export var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
+
+/**
+ * Composes the full set of named size styles (`s`, `m`, `l`, `fill`).
+ *
+ * Uses `%` units for widths. Media queries drive responsive breakpoints.
+ *
+ * When a child flyout is stacked on top of the parent, the parent flyout
+ * size will match the child flyout size. The `s` and `m` sizes include
+ * overrides for this stacked-child behavior.
+ */
+export var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var formMaxWidth = euiFormMaxWidth(euiThemeContext);
 
-  // 1. Calculating the minimum width based on the screen takeover breakpoint
+  // Calculating the minimum width based on the screen takeover breakpoint
   var flyoutSizes = {
     s: {
       min: "".concat(Math.round(euiTheme.breakpoint.m * 0.5), "px"),
-      // 1.
-      width: '25vw',
+      width: '25%',
       max: "".concat(Math.round(euiTheme.breakpoint.s * 0.7), "px")
     },
     m: {
@@ -101,24 +114,31 @@ export var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, s
       min: "".concat(mathWithUnits(formMaxWidth, function (x) {
         return x + 24;
       })),
-      width: '50vw',
+      width: '50%',
       max: "".concat(euiTheme.breakpoint.m, "px")
     },
     l: {
       min: "".concat(Math.round(euiTheme.breakpoint.m * 0.9), "px"),
-      // 1.
-      width: '75vw',
+      width: '75%',
       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'
+      min: '90%',
+      width: '90%',
+      max: '90%'
     }
   };
-  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  ");
+  var sizingRules = function sizingRules(size) {
+    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  ");
+  };
+  return {
+    s: /*#__PURE__*/css(sizingRules('s'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--m{", sizingRules('m'), ";};label:s;"),
+    m: /*#__PURE__*/css(sizingRules('m'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--s{", sizingRules('s'), ";};label:m;"),
+    l: /*#__PURE__*/css(sizingRules('l'), ";;label:l;"),
+    fill: /*#__PURE__*/css(sizingRules('fill'), ";;label:fill;")
+  };
 };
 var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -151,6 +171,7 @@ var composeMaxWidthOverrides = function composeMaxWidthOverrides(maxWidth, isFil
   if (typeof maxWidth === 'boolean') {
     return {};
   }
+  var fillUnit = '90%';
   var overrides = {
     maxWidth: maxWidth
   };
@@ -160,20 +181,25 @@ var composeMaxWidthOverrides = function composeMaxWidthOverrides(maxWidth, isFil
     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.
+    // that sets min-inline-size to the fill unit. We calculate min(maxWidth, fillUnit)
+    // to ensure the flyout respects both constraints.
     if (maxWidth) {
       var maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
-      overrides.minWidth = "min(".concat(maxWidthWithUnits, ", 90vw)");
+      overrides.minWidth = "min(".concat(maxWidthWithUnits, ", ").concat(fillUnit, ")");
     }
   }
   return logicalStyles(overrides);
 };
 
 /**
- * Composes all inline styles for a flyout based on its configuration
+ * Composes all inline styles for a flyout based on its configuration.
+ * Uses a CSS custom property (`--euiFlyoutMainWidth`) for synchronous
+ * tracking of the main flyout width during resize drag, falling back to
+ * the pixel value from manager state when the variable is not set.
  */
 export var composeFlyoutInlineStyles = function composeFlyoutInlineStyles(size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, zIndex) {
+  var fillUnit = '90%';
+
   // Handle custom width values (non-named sizes)
   var customWidthStyles = !isEuiFlyoutSizeNamed(size) ? logicalStyles({
     width: size
@@ -182,23 +208,23 @@ export var composeFlyoutInlineStyles = function composeFlyoutInlineStyles(size,
 
   // 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)"),
+    width: "calc(".concat(fillUnit, " - var(--euiFlyoutMainWidth, ").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
+  // to override the CSS rule that sets min-inline-size to the fill unit
   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))
+      // For fill flyouts with maxWidth and a sibling: min(maxWidth, calc(fillUnit - 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)
+      // For fill flyouts with maxWidth but no sibling: min(maxWidth, fillUnit)
       var maxWidthOverrides = composeMaxWidthOverrides(maxWidth, isFill);
       minWidthOverride = {
         minWidth: maxWidthOverrides.minInlineSize
@@ -209,7 +235,7 @@ export var composeFlyoutInlineStyles = function composeFlyoutInlineStyles(size,
   // 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))
+    // For fill flyouts with maxWidth and a sibling: min(maxWidth, calc(fillUnit - siblingWidth))
     var _dynamicWidth = dynamicStyles.inlineSize;
     var _maxWidthWithUnits = typeof maxWidth === 'number' ? "".concat(maxWidth, "px") : maxWidth;
     finalMaxWidth = "min(".concat(_maxWidthWithUnits, ", ").concat(_dynamicWidth, ")");

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

@@ -39,7 +39,7 @@ var BackButton = function BackButton(props) {
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     size: "xs",
     color: "text",
-    iconType: "editorUndo",
+    iconType: "undo",
     "data-test-subj": "euiFlyoutMenuBackButton"
   }, props), ___EmotionJSX(EuiI18n, {
     token: "euiFlyoutMenu.back",
@@ -57,7 +57,7 @@ var HistoryPopover = function HistoryPopover(_ref) {
   };
   return ___EmotionJSX(EuiPopover, {
     button: ___EmotionJSX(EuiButtonIcon, {
-      iconType: "arrowDown",
+      iconType: "chevronSingleDown",
       color: "text",
       "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History'),
       "data-test-subj": "euiFlyoutMenuHistoryButton"

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

@@ -28,6 +28,10 @@ export var ACTION_GO_BACK = "".concat(PREFIX, "/goBack");
 export var ACTION_GO_TO_FLYOUT = "".concat(PREFIX, "/goToFlyout");
 /** Dispatched to set push padding offset for a side. */
 export var ACTION_SET_PUSH_PADDING = "".concat(PREFIX, "/setPushPadding");
+/** Dispatched to set the container element for container-relative flyouts. */
+export var ACTION_SET_CONTAINER_ELEMENT = "".concat(PREFIX, "/setContainerElement");
+/** Dispatched to set the reference width used for layout and resize clamping. */
+export var ACTION_SET_REFERENCE_WIDTH = "".concat(PREFIX, "/setReferenceWidth");
 export var ACTION_ADD_UNMANAGED_FLYOUT = "".concat(PREFIX, "/addUnmanagedFlyout");
 export var ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFlyout");
 
@@ -54,6 +58,10 @@ export var ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFly
 
 /** Set push padding offset for a specific side. */
 
+/** Set the container element for container-relative positioning. */
+
+/** Set the reference width for layout and resize clamping. */
+
 /** Union of all flyout manager actions. */
 
 /**
@@ -65,12 +73,14 @@ export var ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFly
 export var addFlyout = function addFlyout(flyoutId, title) {
   var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : LEVEL_MAIN;
   var size = arguments.length > 3 ? arguments[3] : undefined;
+  var minWidth = arguments.length > 4 ? arguments[4] : undefined;
   return {
     type: ACTION_ADD,
     flyoutId: flyoutId,
     title: title,
     level: level,
-    size: size
+    size: size,
+    minWidth: minWidth
   };
 };
 
@@ -161,4 +171,20 @@ export var closeUnmanagedFlyout = function closeUnmanagedFlyout(flyoutId) {
     type: ACTION_CLOSE_UNMANAGED_FLYOUT,
     flyoutId: flyoutId
   };
+};
+
+/** Set the container element for container-relative flyout positioning. */
+export var setContainerElement = function setContainerElement(element) {
+  return {
+    type: ACTION_SET_CONTAINER_ELEMENT,
+    element: element
+  };
+};
+
+/** Set the reference width for layout and resize clamping. */
+export var setReferenceWidth = function setReferenceWidth(width) {
+  return {
+    type: ACTION_SET_REFERENCE_WIDTH,
+    width: width
+  };
 };

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

@@ -8,24 +8,35 @@
 
 import { useCallback, useEffect, useRef } from 'react';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_MAIN, STAGE_ACTIVE, STAGE_BACKGROUNDED, STAGE_BACKGROUNDING, STAGE_CLOSING, STAGE_INACTIVE, STAGE_OPENING, STAGE_RETURNING } from './const';
-import { useFlyoutLayoutMode, useHasChildFlyout, useIsFlyoutActive } from './hooks';
 import { setActivityStage } from './actions';
 import { useFlyoutManager } from './provider';
 /**
  * Encapsulates all activity-stage transitions and animation-driven updates
  * for managed flyouts.
+ *
+ * Performance: reads `useFlyoutManager()` once and derives isActive,
+ * hasChild, and layoutMode inline (replaces useIsFlyoutActive,
+ * useHasChildFlyout, useFlyoutLayoutMode hooks).
  */
 export var useFlyoutActivityStage = function useFlyoutActivityStage(_ref) {
-  var _ctx$state$flyouts$fi;
+  var _sessions, _state$sessions$find, _state$layoutMode, _state$flyouts$find;
   var flyoutId = _ref.flyoutId,
     level = _ref.level;
-  var isActive = useIsFlyoutActive(flyoutId);
-  var hasChild = useHasChildFlyout(flyoutId);
-  var layoutMode = useFlyoutLayoutMode();
   var ctx = useFlyoutManager();
-  var stage = (ctx === null || ctx === void 0 || (_ctx$state$flyouts$fi = ctx.state.flyouts.find(function (f) {
+  var state = ctx === null || ctx === void 0 ? void 0 : ctx.state;
+
+  // Derive all needed values from single context read
+  var sessions = state === null || state === void 0 ? void 0 : state.sessions;
+  var currentSession = sessions ? (_sessions = sessions[sessions.length - 1]) !== null && _sessions !== void 0 ? _sessions : null : null;
+  var isActive = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId) === flyoutId || (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === flyoutId;
+  var session = (_state$sessions$find = state === null || state === void 0 ? void 0 : state.sessions.find(function (s) {
+    return s.mainFlyoutId === flyoutId || s.childFlyoutId === flyoutId;
+  })) !== null && _state$sessions$find !== void 0 ? _state$sessions$find : null;
+  var hasChild = !!(session !== null && session !== void 0 && session.childFlyoutId);
+  var layoutMode = (_state$layoutMode = state === null || state === void 0 ? void 0 : state.layoutMode) !== null && _state$layoutMode !== void 0 ? _state$layoutMode : LAYOUT_MODE_SIDE_BY_SIDE;
+  var stage = (state === null || state === void 0 || (_state$flyouts$find = state.flyouts.find(function (f) {
     return f.flyoutId === flyoutId;
-  })) === null || _ctx$state$flyouts$fi === void 0 ? void 0 : _ctx$state$flyouts$fi.activityStage) || (isActive ? STAGE_ACTIVE : STAGE_INACTIVE);
+  })) === null || _state$flyouts$find === void 0 ? void 0 : _state$flyouts$find.activityStage) || (isActive ? STAGE_ACTIVE : STAGE_INACTIVE);
   var stageRef = useRef(stage);
   if (stageRef.current !== stage) {
     stageRef.current = stage;

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

@@ -13,7 +13,7 @@ var _excluded = ["css", "side"];
 import React, { forwardRef } from 'react';
 import { useEuiTheme } from '../../../services';
 import { EuiManagedFlyout } from './flyout_managed';
-import { useCurrentMainFlyout, useFlyoutLayoutMode, useFlyoutWidth } from './hooks';
+import { useFlyoutManager } from './hooks';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_CHILD } from './const';
 import { DEFAULT_SIDE } from '../const';
 
@@ -29,15 +29,25 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  * depending on the current layout mode. Handles required managed flyout props.
  */
 export var EuiFlyoutChild = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _sessions, _state$flyouts$find, _state$layoutMode;
   var customCss = _ref.css,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? DEFAULT_SIDE : _ref$side,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useEuiTheme = useEuiTheme(),
     euiTheme = _useEuiTheme.euiTheme;
-  var mainFlyout = useCurrentMainFlyout();
-  var mainWidth = useFlyoutWidth(mainFlyout === null || mainFlyout === void 0 ? void 0 : mainFlyout.flyoutId);
-  var layoutMode = useFlyoutLayoutMode();
+
+  // Performance: read context once and derive all needed values inline
+  var context = useFlyoutManager();
+  var state = context === null || context === void 0 ? void 0 : context.state;
+  var sessions = state === null || state === void 0 ? void 0 : state.sessions;
+  var currentSession = sessions ? (_sessions = sessions[sessions.length - 1]) !== null && _sessions !== void 0 ? _sessions : null : null;
+  var mainFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId;
+  var mainFlyout = mainFlyoutId ? (_state$flyouts$find = state === null || state === void 0 ? void 0 : state.flyouts.find(function (f) {
+    return f.flyoutId === mainFlyoutId;
+  })) !== null && _state$flyouts$find !== void 0 ? _state$flyouts$find : null : null;
+  var mainWidth = mainFlyout === null || mainFlyout === void 0 ? void 0 : mainFlyout.width;
+  var layoutMode = (_state$layoutMode = state === null || state === void 0 ? void 0 : state.layoutMode) !== null && _state$layoutMode !== void 0 ? _state$layoutMode : LAYOUT_MODE_SIDE_BY_SIDE;
 
   // Runtime validation: prevent orphan child flyouts
   if (!mainFlyout) {
@@ -54,7 +64,10 @@ export var EuiFlyoutChild = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }
   var style = {};
   if (mainWidth && layoutMode === LAYOUT_MODE_SIDE_BY_SIDE) {
-    style = _defineProperty({}, side, mainWidth);
+    // Use the CSS custom property for synchronous tracking during resize.
+    // Falls back to the pixel value from manager state when the variable
+    // is not set (e.g. main flyout is not actively being resized).
+    style = _defineProperty({}, side, "var(--euiFlyoutMainWidth, ".concat(mainWidth, "px)"));
   } else if (layoutMode === LAYOUT_MODE_STACKED) {
     style = {
       zIndex: Number(euiTheme.levels.flyout) + 2

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "onClose", "onActive", "level", "size", "css", "flyoutMenuProps"];
+var _excluded = ["id", "onClose", "onActive", "level", "size", "minWidth", "css", "flyoutMenuProps"];
 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; }
 /*
@@ -21,11 +21,11 @@ import { useResizeObserver } from '../../observer/resize_observer';
 import { EuiFlyoutComponent } from '../flyout.component';
 import { EuiFlyoutMenuContext } from '../flyout_menu_context';
 import { useFlyoutActivityStage } from './activity_stage';
-import { LEVEL_CHILD, LEVEL_MAIN, PROPERTY_FLYOUT, PROPERTY_LAYOUT_MODE, PROPERTY_LEVEL } from './const';
+import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_CHILD, LEVEL_MAIN, PROPERTY_FLYOUT, PROPERTY_LAYOUT_MODE, PROPERTY_LEVEL } from './const';
 import { EuiFlyoutIsManagedProvider } from './context';
 import { euiManagedFlyoutStyles } from './flyout_managed.styles';
-import { useFlyoutManager as _useFlyoutManager, useCurrentSession, useFlyoutId, useFlyoutLayoutMode, useIsFlyoutActive, useParentFlyoutSize } from './hooks';
-import { useCurrentMainFlyout, useIsFlyoutRegistered } from './selectors';
+import { useFlyoutManager as _useFlyoutManager, useFlyoutId } from './hooks';
+import { useIsFlyoutRegistered } from './selectors';
 import { createValidationErrorMessage, isNamedSize, validateManagedFlyoutSize, validateSizeCombination } from './validation';
 
 /**
@@ -50,11 +50,13 @@ var useFlyoutManager = function useFlyoutManager() {
  * - lifecycle stage transitions and data attributes for styling
  */
 export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _managerSessions, _managerState$layoutM, _managerState$flyouts, _managerState$session, _managerState$flyouts2;
   var id = _ref.id,
     onCloseProp = _ref.onClose,
     onActiveProp = _ref.onActive,
     level = _ref.level,
     sizeProp = _ref.size,
+    minWidth = _ref.minWidth,
     customCss = _ref.css,
     _flyoutMenuProps = _ref.flyoutMenuProps,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -73,10 +75,26 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     closeAllFlyouts = _useFlyoutManager2.closeAllFlyouts,
     setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth,
     goBack = _useFlyoutManager2.goBack,
-    _historyItems = _useFlyoutManager2.historyItems;
-  var parentSize = useParentFlyoutSize(flyoutId);
-  var parentFlyout = useCurrentMainFlyout();
-  var layoutMode = useFlyoutLayoutMode();
+    _historyItems = _useFlyoutManager2.historyItems,
+    managerState = _useFlyoutManager2.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 : LAYOUT_MODE_SIDE_BY_SIDE;
+  var isActive = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId) === flyoutId || (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === flyoutId;
+
+  // Derive parentFlyout and parentSize from single state read
+  var parentFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId;
+  var parentFlyout = parentFlyoutId ? (_managerState$flyouts = managerState === null || managerState === void 0 ? void 0 : managerState.flyouts.find(function (f) {
+    return f.flyoutId === parentFlyoutId;
+  })) !== null && _managerState$flyouts !== void 0 ? _managerState$flyouts : null : null;
+
+  // parentSize: the size of the parent (main) flyout for a child flyout
+  var session = (_managerState$session = managerState === null || managerState === void 0 ? void 0 : managerState.sessions.find(function (s) {
+    return s.mainFlyoutId === flyoutId || s.childFlyoutId === flyoutId;
+  })) !== null && _managerState$session !== void 0 ? _managerState$session : null;
+  var parentSize = session !== null && session !== void 0 && session.mainFlyoutId ? managerState === null || managerState === void 0 || (_managerState$flyouts2 = managerState.flyouts.find(function (f) {
+    return f.flyoutId === session.mainFlyoutId;
+  })) === null || _managerState$flyouts2 === void 0 ? void 0 : _managerState$flyouts2.size : undefined;
   var styles = useEuiMemoizedStyles(euiManagedFlyoutStyles);
 
   // Set default size based on level: main defaults to 'm', child defaults to 's'
@@ -107,8 +125,6 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     console.warn("Managed flyout \"".concat(flyoutId, "\" requires a title, which can be provided through 'flyoutMenuProps.title' or 'aria-label'. Using default title: \"").concat(defaultTitle, "\""));
     title = defaultTitle;
   }
-  var isActive = useIsFlyoutActive(flyoutId);
-  var currentSession = useCurrentSession();
   var flyoutExistsInManager = useIsFlyoutRegistered(flyoutId);
 
   // Stabilize the onClose callback
@@ -139,7 +155,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // Register with flyout manager context when open, remove when closed
   // Using useLayoutEffect to run synchronously before DOM updates
   useLayoutEffect(function () {
-    addFlyout(flyoutId, title, level, size);
+    addFlyout(flyoutId, title, level, size, typeof minWidth === 'number' ? minWidth : undefined);
     return function () {
       // Only call closeFlyout if it wasn't already called via onClose
       // This prevents duplicate removal when using Escape/X button
@@ -150,7 +166,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
     };
-  }, [flyoutId, title, level, size, addFlyout, closeFlyout, closeAllFlyouts]);
+  }, [flyoutId, title, level, size, minWidth, addFlyout, closeFlyout, closeAllFlyouts]);
 
   // Detect when flyout has been removed from manager state (e.g., via Back button)
   // and trigger onClose callback to notify the parent component
@@ -246,6 +262,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, _objectSpread(_objectSpread({}, props), {}, _defineProperty(_defineProperty(_defineProperty({
     onClose: onClose,
     size: size,
+    minWidth: minWidth,
     flyoutMenuProps: flyoutMenuProps,
     onAnimationEnd: onAnimationEnd
   }, PROPERTY_FLYOUT, true), PROPERTY_LAYOUT_MODE, layoutMode), PROPERTY_LEVEL, level))))));