@elastic/eui 110.0.0 → 111.1.0

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

@@ -1,14 +1,21 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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 = exports.EUI_FLYOUT_CONTAINER_NAME = void 0;
 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) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
 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
@@ -17,9 +24,12 @@ 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 = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\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 = _taggedTemplateLiteral(["\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;"
@@ -39,17 +49,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,
@@ -105,6 +116,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  ");
@@ -130,4 +148,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
+  }));
 };

package/lib/components/flyout/flyout_menu.js

@@ -0,0 +1,243 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutMenu = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
+var _button = require("../button");
+var _flex = require("../flex");
+var _list_group = require("../list_group");
+var _popover = require("../popover");
+var _title = require("../title");
+var _flyout_close_button = require("./_flyout_close_button");
+var _flyout_menu = require("./flyout_menu.styles");
+var _flyout_menu_context = require("./flyout_menu_context");
+var _i18n = require("../i18n");
+var _react2 = require("@emotion/react");
+var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions"];
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /*
+ * 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.
+ */ /**
+ * History item for the flyout menu history popover
+ */ /**
+ * Custom action item for the flyout menu component
+ */ /**
+ * Props for EuiFlyoutMenu
+ */
+var BackButton = function BackButton(props) {
+  return (0, _react2.jsx)(_button.EuiButtonEmpty, _extends({
+    size: "xs",
+    color: "text",
+    iconType: "editorUndo"
+  }, props), (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyoutMenu.back",
+    default: "Back"
+  }));
+};
+var HistoryPopover = function HistoryPopover(_ref) {
+  var items = _ref.items;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var handlePopoverButtonClick = function handlePopoverButtonClick() {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+  return (0, _react2.jsx)(_popover.EuiPopover, {
+    button: (0, _react2.jsx)(_button.EuiButtonIcon, {
+      iconType: "arrowDown",
+      color: "text",
+      "aria-label": (0, _i18n.useEuiI18n)('euiFlyoutMenu.history', 'History')
+    }),
+    isOpen: isPopoverOpen,
+    onClick: handlePopoverButtonClick,
+    closePopover: function closePopover() {
+      return setIsPopoverOpen(false);
+    },
+    panelPaddingSize: "xs",
+    anchorPosition: "downLeft"
+  }, (0, _react2.jsx)(_list_group.EuiListGroup, {
+    gutterSize: "none"
+  }, items.map(function (item, index) {
+    return (0, _react2.jsx)(_list_group.EuiListGroupItem, {
+      key: "history-item-".concat(index),
+      label: item.title,
+      size: "s",
+      onClick: function onClick() {
+        item.onClick();
+        setIsPopoverOpen(false);
+      }
+    }, item.title);
+  })));
+};
+
+/**
+ * The component for the top menu bar inside a flyout. Since this is a private
+ * component, rendering is controlled using the `flyoutMenuProps` prop on
+ * `EuiFlyout`. In managed session flyouts, the Flyout Manager controls a back
+ * button and history popover for navigating to different flyout sessions
+ * within the managed context.
+ *
+ * @private
+ */
+var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
+  var className = _ref2.className,
+    title = _ref2.title,
+    titleId = _ref2.titleId,
+    hideTitle = _ref2.hideTitle,
+    hideCloseButton = _ref2.hideCloseButton,
+    _ref2$historyItems = _ref2.historyItems,
+    historyItems = _ref2$historyItems === void 0 ? [] : _ref2$historyItems,
+    showBackButton = _ref2.showBackButton,
+    backButtonProps = _ref2.backButtonProps,
+    customActions = _ref2.customActions,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useContext = (0, _react.useContext)(_flyout_menu_context.EuiFlyoutMenuContext),
+    onClose = _useContext.onClose;
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_menu.euiFlyoutMenuStyles);
+  var classes = (0, _classnames.default)('euiFlyoutMenu', className);
+  var titleNode;
+  if (title) {
+    titleNode = (0, _react2.jsx)(_title.EuiTitle, {
+      size: "xxs",
+      id: titleId
+    }, (0, _react2.jsx)("h3", {
+      css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
+    }, title));
+  }
+  var handleClose = function handleClose(event) {
+    onClose === null || onClose === void 0 || onClose(event);
+  };
+  var closeButton = (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
+    onClose: handleClose,
+    side: "right",
+    closeButtonPosition: "inside"
+  });
+  return (0, _react2.jsx)("div", _extends({
+    className: classes,
+    css: styles.euiFlyoutMenu__container
+  }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gutterSize: "none",
+    responsive: false
+  }, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(BackButton, backButtonProps)), historyItems.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(HistoryPopover, {
+    items: historyItems
+  })), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: true
+  }), customActions && customActions.map(function (action, actionIndex) {
+    return (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false,
+      key: "action-index-flex-item-".concat(actionIndex),
+      css: styles.euiFlyoutMenu__actions
+    }, (0, _react2.jsx)(_button.EuiButtonIcon, {
+      key: "action-index-icon-".concat(actionIndex),
+      "aria-label": action['aria-label'],
+      iconType: action.iconType,
+      onClick: action.onClick,
+      color: "text",
+      size: "s"
+    }));
+  }), !hideCloseButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__spacer
+  })), !hideCloseButton && closeButton);
+};
+EuiFlyoutMenu.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  /**
+       * An id to use for the title element. Useful for setting aria-labelledby on the flyout.
+       * Example:
+       * ```jsx
+       * <EuiFlyout
+       *   aria-labelledby="myMenuTitleId"
+       *   flyoutMenuProps={{ title: 'Menu title', titleId: 'myMenuTitleId' }
+       * >
+       *  ...
+       * </EuiFlyout>
+       * ```
+       */
+  titleId: _propTypes.default.string,
+  /**
+       * Title for the menu component. In a managed flyout context, the title is used to indicate the flyout session for history navigation.
+       */
+  title: _propTypes.default.node,
+  /**
+       * Hides the title in the `EuiFlyoutMenu`. This is useful when the title is already shown in an `EuiFlyoutHeader`.
+       * @default true for main flyout in a managed flyout session; false otherwise
+       */
+  hideTitle: _propTypes.default.bool,
+  /**
+       * Hides the close button in the menu component
+       * @default false
+       */
+  hideCloseButton: _propTypes.default.bool,
+  /**
+       * Shows a back button in the menu component
+       * @default false
+       */
+  showBackButton: _propTypes.default.bool,
+  /**
+       * Props to pass to the back button, such as `onClick` handler
+       */
+  backButtonProps: _propTypes.default.any,
+  /**
+       * List of history items for the history popover
+       */
+  historyItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+       * Title for the history item
+       */
+    title: _propTypes.default.string.isRequired,
+    /**
+       * onClick handler for the history item
+       */
+    onClick: _propTypes.default.func.isRequired
+  }).isRequired),
+  /**
+       * List of custom action items for the menu component
+       */
+  customActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+       * Icon type for the action button
+       */
+    iconType: _propTypes.default.string.isRequired,
+    /**
+       * onClick handler for the action button
+       */
+    onClick: _propTypes.default.func.isRequired,
+    /**
+       * Aria label for the action button
+       */
+    "aria-label": _propTypes.default.string.isRequired
+  }).isRequired)
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutMenuStyles = void 0;
+var _react = require("@emotion/react");
+var _accessibility = require("../accessibility");
+/*
+ * 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.
+ */
+
+var euiFlyoutMenuStyles = exports.euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";padding-block-start:calc(", euiTheme.size.m, " * 0.8);.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__spacer: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
+    euiFlyoutMenu__actions: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 1.8);;label:euiFlyoutMenu__actions;"),
+    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiFlyoutMenu__hiddenTitle;")
+  };
+};

package/lib/components/flyout/{flyout_context.js → flyout_menu_context.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiFlyoutContext = void 0;
+exports.EuiFlyoutMenuContext = void 0;
 var _react = require("react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -13,9 +13,4 @@ var _react = require("react");
  * Side Public License, v 1.
  */
 
-/**
- * Context shared between the main and child flyouts
- * @internal
- */
-
-var EuiFlyoutContext = exports.EuiFlyoutContext = /*#__PURE__*/(0, _react.createContext)(null);
+var EuiFlyoutMenuContext = exports.EuiFlyoutMenuContext = /*#__PURE__*/(0, _react.createContext)({});

package/lib/components/flyout/flyout_parent_context.js

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsInsideParentFlyout = exports.EuiFlyoutParentProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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; }
+/*
+ * 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.
+ */
+
+/**
+ * Context to track if we're inside a parent flyout's children.
+ * This allows nested flyouts to automatically inherit the session
+ * without requiring explicit `session="inherit"` prop.
+ */var EuiFlyoutParentContext = /*#__PURE__*/(0, _react.createContext)(false);
+
+/**
+ * Provider that wraps a flyout's children to indicate they're inside a parent flyout.
+ * Nested flyouts can use this to automatically default to session inheritance.
+ */
+var EuiFlyoutParentProvider = exports.EuiFlyoutParentProvider = function EuiFlyoutParentProvider(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)(EuiFlyoutParentContext.Provider, {
+    value: true
+  }, children);
+};
+
+/**
+ * Hook that returns `true` when called within a parent flyout's children.
+ * Used to automatically determine if a nested flyout should inherit the session.
+ */
+var useIsInsideParentFlyout = exports.useIsInsideParentFlyout = function useIsInsideParentFlyout() {
+  return (0, _react.useContext)(EuiFlyoutParentContext);
+};