@elastic/eui 113.1.0 → 113.2.0

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maxedFlyoutWidth = exports.euiFlyoutStyles = exports.euiFlyoutSlideOutRight = exports.euiFlyoutSlideOutLeft = exports.euiFlyoutSlideInRight = exports.euiFlyoutSlideInLeft = exports.composeFlyoutSizing = exports.composeFlyoutInlineStyles = exports.FLYOUT_BREAKPOINT = exports.EUI_FLYOUT_CONTAINER_NAME = 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");
@@ -22,12 +22,17 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EUI_FLYOUT_CONTAINER_NAME = exports.EUI_FLYOUT_CONTAINER_NAME = 'euiFlyout';
 var FLYOUT_BREAKPOINT = exports.FLYOUT_BREAKPOINT = 'm';
 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"])));
+
+/**
+ * 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;"
@@ -46,14 +51,9 @@ 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'), " 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;"),
+  return _objectSpread(_objectSpread({
+    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;")
+  }, composeFlyoutSizing(euiThemeContext)), {}, {
     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), "animation:", euiFlyoutSlideInRight, " 0s ", euiTheme.animation.resistance, " forwards;", _global_styling.euiCanAnimate, "{animation-duration:", euiTheme.animation.normal, ";}&.euiFlyout--hasChild{clip-path:none;};label:right;"),
@@ -84,21 +84,34 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
       m: /*#__PURE__*/(0, _react.css)(composeFlyoutPadding(euiThemeContext, 'm'), ";;label:m;"),
       l: /*#__PURE__*/(0, _react.css)(composeFlyoutPadding(euiThemeContext, 'l'), ";;label:l;")
     }
-  };
+  });
 };
+
+/**
+ * Applies a max-width constraint at the flyout breakpoint.
+ */
 var maxedFlyoutWidth = exports.maxedFlyoutWidth = function maxedFlyoutWidth(euiThemeContext) {
-  return "\n  ".concat((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, FLYOUT_BREAKPOINT), " {\n    ").concat((0, _global_styling.logicalCSS)('max-width', '90vw !important'), "\n  }\n");
+  return "\n  ".concat((0, _global_styling.euiMaxBreakpoint)(euiThemeContext, FLYOUT_BREAKPOINT), " {\n    ").concat((0, _global_styling.logicalCSS)('max-width', '90% !important'), "\n  }\n");
 };
-var composeFlyoutSizing = exports.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.
+ */
+var composeFlyoutSizing = exports.composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var formMaxWidth = (0, _form.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: {
@@ -106,24 +119,31 @@ var composeFlyoutSizing = exports.composeFlyoutSizing = function composeFlyoutSi
       min: "".concat((0, _global_styling.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((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  ");
+  var sizingRules = function sizingRules(size) {
+    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  ");
+  };
+  return {
+    s: /*#__PURE__*/(0, _react.css)(sizingRules('s'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--m{", sizingRules('m'), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)(sizingRules('m'), " &.euiFlyout--hasChild--stacked.euiFlyout--hasChild--s{", sizingRules('s'), ";};label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(sizingRules('l'), ";;label:l;"),
+    fill: /*#__PURE__*/(0, _react.css)(sizingRules('fill'), ";;label:fill;")
+  };
 };
 var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -156,6 +176,7 @@ var composeMaxWidthOverrides = function composeMaxWidthOverrides(maxWidth, isFil
   if (typeof maxWidth === 'boolean') {
     return {};
   }
+  var fillUnit = '90%';
   var overrides = {
     maxWidth: maxWidth
   };
@@ -165,20 +186,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 (0, _global_styling.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.
  */
 var composeFlyoutInlineStyles = exports.composeFlyoutInlineStyles = function composeFlyoutInlineStyles(size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, zIndex) {
+  var fillUnit = '90%';
+
   // Handle custom width values (non-named sizes)
   var customWidthStyles = !(0, _const.isEuiFlyoutSizeNamed)(size) ? (0, _global_styling.logicalStyles)({
     width: size
@@ -187,23 +213,23 @@ var composeFlyoutInlineStyles = exports.composeFlyoutInlineStyles = function com
 
   // 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)"),
+    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
@@ -214,7 +240,7 @@ var composeFlyoutInlineStyles = exports.composeFlyoutInlineStyles = function com
   // 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/lib/components/flyout/flyout_menu.js

@@ -45,7 +45,7 @@ var BackButton = function BackButton(props) {
   return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
     size: "xs",
     color: "text",
-    iconType: "editorUndo",
+    iconType: "undo",
     "data-test-subj": "euiFlyoutMenuBackButton"
   }, props), (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiFlyoutMenu.back",
@@ -63,7 +63,7 @@ var HistoryPopover = function HistoryPopover(_ref) {
   };
   return (0, _react2.jsx)(_popover.EuiPopover, {
     button: (0, _react2.jsx)(_button.EuiButtonIcon, {
-      iconType: "arrowDown",
+      iconType: "chevronSingleDown",
       color: "text",
       "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History'),
       "data-test-subj": "euiFlyoutMenuHistoryButton"

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.closeAllFlyouts = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_ALL = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
+exports.setReferenceWidth = exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setContainerElement = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.closeAllFlyouts = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_REFERENCE_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_CONTAINER_ELEMENT = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_ALL = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
 var _const = require("./const");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -34,6 +34,10 @@ var ACTION_GO_BACK = exports.ACTION_GO_BACK = "".concat(PREFIX, "/goBack");
 var ACTION_GO_TO_FLYOUT = exports.ACTION_GO_TO_FLYOUT = "".concat(PREFIX, "/goToFlyout");
 /** Dispatched to set push padding offset for a side. */
 var ACTION_SET_PUSH_PADDING = exports.ACTION_SET_PUSH_PADDING = "".concat(PREFIX, "/setPushPadding");
+/** Dispatched to set the container element for container-relative flyouts. */
+var ACTION_SET_CONTAINER_ELEMENT = exports.ACTION_SET_CONTAINER_ELEMENT = "".concat(PREFIX, "/setContainerElement");
+/** Dispatched to set the reference width used for layout and resize clamping. */
+var ACTION_SET_REFERENCE_WIDTH = exports.ACTION_SET_REFERENCE_WIDTH = "".concat(PREFIX, "/setReferenceWidth");
 var ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD_UNMANAGED_FLYOUT = "".concat(PREFIX, "/addUnmanagedFlyout");
 var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFlyout");
 
@@ -60,6 +64,10 @@ var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = "".c
 
 /** 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. */
 
 /**
@@ -71,12 +79,14 @@ var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = "".c
 var addFlyout = exports.addFlyout = function addFlyout(flyoutId, title) {
   var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _const.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
   };
 };
 
@@ -167,4 +177,20 @@ var closeUnmanagedFlyout = exports.closeUnmanagedFlyout = function closeUnmanage
     type: ACTION_CLOSE_UNMANAGED_FLYOUT,
     flyoutId: flyoutId
   };
+};
+
+/** Set the container element for container-relative flyout positioning. */
+var setContainerElement = exports.setContainerElement = function setContainerElement(element) {
+  return {
+    type: ACTION_SET_CONTAINER_ELEMENT,
+    element: element
+  };
+};
+
+/** Set the reference width for layout and resize clamping. */
+var setReferenceWidth = exports.setReferenceWidth = function setReferenceWidth(width) {
+  return {
+    type: ACTION_SET_REFERENCE_WIDTH,
+    width: width
+  };
 };

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFlyoutActivityStage = void 0;
 var _react = require("react");
 var _const = require("./const");
-var _hooks = require("./hooks");
 var _actions = require("./actions");
 var _provider = require("./provider");
 /*
@@ -20,18 +19,30 @@ var _provider = require("./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).
  */
 var useFlyoutActivityStage = exports.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 = (0, _hooks.useIsFlyoutActive)(flyoutId);
-  var hasChild = (0, _hooks.useHasChildFlyout)(flyoutId);
-  var layoutMode = (0, _hooks.useFlyoutLayoutMode)();
   var ctx = (0, _provider.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 : _const.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 ? _const.STAGE_ACTIVE : _const.STAGE_INACTIVE);
+  })) === null || _state$flyouts$find === void 0 ? void 0 : _state$flyouts$find.activityStage) || (isActive ? _const.STAGE_ACTIVE : _const.STAGE_INACTIVE);
   var stageRef = (0, _react.useRef)(stage);
   if (stageRef.current !== stage) {
     stageRef.current = stage;

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

@@ -37,15 +37,25 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * depending on the current layout mode. Handles required managed flyout props.
  */
 var EuiFlyoutChild = exports.EuiFlyoutChild = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _sessions, _state$flyouts$find, _state$layoutMode;
   var customCss = _ref.css,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? _const2.DEFAULT_SIDE : _ref$side,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useEuiTheme = (0, _services.useEuiTheme)(),
     euiTheme = _useEuiTheme.euiTheme;
-  var mainFlyout = (0, _hooks.useCurrentMainFlyout)();
-  var mainWidth = (0, _hooks.useFlyoutWidth)(mainFlyout === null || mainFlyout === void 0 ? void 0 : mainFlyout.flyoutId);
-  var layoutMode = (0, _hooks.useFlyoutLayoutMode)();
+
+  // Performance: read context once and derive all needed values inline
+  var context = (0, _hooks.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 : _const.LAYOUT_MODE_SIDE_BY_SIDE;
 
   // Runtime validation: prevent orphan child flyouts
   if (!mainFlyout) {
@@ -62,7 +72,10 @@ var EuiFlyoutChild = exports.EuiFlyoutChild = /*#__PURE__*/(0, _react.forwardRef
   }
   var style = {};
   if (mainWidth && layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE) {
-    style = (0, _defineProperty2.default)({}, 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 = (0, _defineProperty2.default)({}, side, "var(--euiFlyoutMainWidth, ".concat(mainWidth, "px)"));
   } else if (layoutMode === _const.LAYOUT_MODE_STACKED) {
     style = {
       zIndex: Number(euiTheme.levels.flyout) + 2

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

@@ -25,7 +25,7 @@ var _hooks = require("./hooks");
 var _selectors = require("./selectors");
 var _validation = require("./validation");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "onClose", "onActive", "level", "size", "css", "flyoutMenuProps"];
+var _excluded = ["id", "onClose", "onActive", "level", "size", "minWidth", "css", "flyoutMenuProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -58,11 +58,13 @@ var useFlyoutManager = function useFlyoutManager() {
  * - lifecycle stage transitions and data attributes for styling
  */
 var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -81,10 +83,26 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     closeAllFlyouts = _useFlyoutManager2.closeAllFlyouts,
     setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth,
     goBack = _useFlyoutManager2.goBack,
-    _historyItems = _useFlyoutManager2.historyItems;
-  var parentSize = (0, _hooks.useParentFlyoutSize)(flyoutId);
-  var parentFlyout = (0, _selectors.useCurrentMainFlyout)();
-  var layoutMode = (0, _hooks.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 : _const.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 = (0, _services.useEuiMemoizedStyles)(_flyout_managed.euiManagedFlyoutStyles);
 
   // Set default size based on level: main defaults to 'm', child defaults to 's'
@@ -115,8 +133,6 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     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 = (0, _hooks.useIsFlyoutActive)(flyoutId);
-  var currentSession = (0, _hooks.useCurrentSession)();
   var flyoutExistsInManager = (0, _selectors.useIsFlyoutRegistered)(flyoutId);
 
   // Stabilize the onClose callback
@@ -147,7 +163,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   // Register with flyout manager context when open, remove when closed
   // Using useLayoutEffect to run synchronously before DOM updates
   (0, _react.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
@@ -158,7 +174,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       // 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
@@ -254,6 +270,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   }, _objectSpread(_objectSpread({}, props), {}, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
     onClose: onClose,
     size: size,
+    minWidth: minWidth,
     flyoutMenuProps: flyoutMenuProps,
     onAnimationEnd: onAnimationEnd
   }, _const.PROPERTY_FLYOUT, true), _const.PROPERTY_LAYOUT_MODE, layoutMode), _const.PROPERTY_LEVEL, level))))));