@elastic/eui 122.1.0 → 123.0.0

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiFlyoutComponent = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
@@ -61,6 +61,52 @@ var resolveContainer = function resolveContainer(raw) {
   if (typeof HTMLElement === 'undefined') return null;
   return raw instanceof HTMLElement ? raw : null;
 };
+
+/**
+ * Per-target push-flyout offset bookkeeping, shared across every flyout React root (they all
+ * render from this one module). Keyed by the element the offset is applied to — a `container` or
+ * `document.body` — so flyouts targeting different elements never contend.
+ *
+ * Instead of a single owner per side, every currently-pushed flyout records its width as a
+ * contribution and the applied offset is derived from the set (the widest contribution). Closing,
+ * resizing, or backgrounding any one flyout just updates its own entry, so the result no longer
+ * depends on open/close order or on cross-root effect ordering. The target's base (pre-flyout)
+ * inline padding is captured when the first contribution arrives and restored when the last one
+ * leaves. See https://github.com/elastic/eui/issues/9788.
+ */
+
+var euiPushPaddingRegistry = new WeakMap();
+var euiSideStyleKey = function euiSideStyleKey(side) {
+  return side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+};
+var euiSideCssVarKey = function euiSideCssVarKey(side) {
+  return side === 'left' ? '--euiPushFlyoutOffsetInlineStart' : '--euiPushFlyoutOffsetInlineEnd';
+};
+var euiGetPushPaddingSideState = function euiGetPushPaddingSideState(target, side) {
+  var state = euiPushPaddingRegistry.get(target);
+  if (!state) {
+    state = {
+      left: {
+        base: '',
+        contributions: new Map()
+      },
+      right: {
+        base: '',
+        contributions: new Map()
+      }
+    };
+    euiPushPaddingRegistry.set(target, state);
+  }
+  return state[side];
+};
+var euiMaxContribution = function euiMaxContribution(contributions) {
+  var filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+    return true;
+  };
+  return Math.max.apply(Math, [0].concat((0, _toConsumableArray2.default)(Array.from(contributions.values(), function (contribution) {
+    return filter(contribution) ? contribution.width : 0;
+  }))));
+};
 var defaultElement = 'div';
 var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _maskProps$headerZind, _managerSessions, _managerState$layoutM, _managerState$current, _managerState$flyouts, _managerState$pushPad;
@@ -115,8 +161,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   var container = resolveContainer(containerProp);
   var hasAnimationDefault = type === 'overlay';
   var hasAnimation = _hasAnimation !== null && _hasAnimation !== void 0 ? _hasAnimation : hasAnimationDefault;
-  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
-    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
   var maskRef = (0, _react.useRef)(null);
 
@@ -133,10 +177,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     pushMinBreakpoint: pushMinBreakpoint,
     containerWidth: containerReferenceWidth
   });
-  // When no explicit container is provided, push padding targets
-  // document.body and global push-offset CSS vars are set. When a
-  // container is provided, only that element receives padding.
-  var shouldSetGlobalPushVars = container == null;
   if ('container' in props && ('maskProps' in props || 'includeFixedHeadersInFocusTrap' in props) && process.env.NODE_ENV === 'development') {
     if ('maskProps' in props) {
       console.warn('EuiFlyout: `maskProps` is deprecated. Prefer using the `container` prop to scope flyouts.');
@@ -207,22 +247,33 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
     }
   }, [isInManagedContext, flyoutId]);
 
-  // Derive flyout identity and sibling info from the single context read
+  // Derive flyout identity and sibling info from the session this flyout
+  // belongs to. Not the current (top-most) session: a newly opened main
+  // renders once before it registers its own session, and a backgrounded
+  // main is not in the current session at all. Reading the current session
+  // in those cases would treat the other session's main as this flyout's
+  // sibling and clamp the resizable width against it.
+  var ownSession = (0, _react.useMemo)(function () {
+    var _managerSessions$find;
+    return (_managerSessions$find = managerSessions === null || managerSessions === void 0 ? void 0 : managerSessions.find(function (session) {
+      return session.mainFlyoutId === flyoutId || session.childFlyoutId === flyoutId;
+    })) !== null && _managerSessions$find !== void 0 ? _managerSessions$find : null;
+  }, [managerSessions, flyoutId]);
   var flyoutIdentity = (0, _react.useMemo)(function () {
-    if (!flyoutId || !currentSession) {
+    if (!flyoutId || !ownSession) {
       return {
         isMainFlyout: false,
         siblingFlyoutId: null,
         hasValidSession: false
       };
     }
-    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
+    var siblingFlyoutId = ownSession.mainFlyoutId === flyoutId ? ownSession.childFlyoutId : ownSession.mainFlyoutId;
     return {
-      isMainFlyout: currentSession.mainFlyoutId === flyoutId,
+      isMainFlyout: ownSession.mainFlyoutId === flyoutId,
       siblingFlyoutId: siblingFlyoutId,
       hasValidSession: true
     };
-  }, [flyoutId, currentSession]);
+  }, [flyoutId, ownSession]);
 
   // Destructure for easier use
   var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
@@ -303,17 +354,24 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   // the document element so that the child (fill) flyout can track it
   // synchronously during drag resize, avoiding the 1-frame lag that
   // results from the async ResizeObserver → manager-state pipeline.
+  // Only the active session's main publishes: a backgrounded main keeps its
+  // `isMainFlyout` role but must not leave its width behind for the new
+  // session's child to read.
   (0, _react.useLayoutEffect)(function () {
-    if (!isMainFlyout) return;
+    if (!isMainFlyout || !isActiveManagedFlyout) return;
 
     // Only set when we have a computed percentage (during active resize)
-    if (typeof size === 'string' && size.endsWith('%')) {
-      document.documentElement.style.setProperty('--euiFlyoutMainWidth', size);
-    }
+    if (typeof size !== 'string' || !size.endsWith('%')) return;
+    var style = document.documentElement.style;
+    style.setProperty('--euiFlyoutMainWidth', size);
     return function () {
-      document.documentElement.style.removeProperty('--euiFlyoutMainWidth');
+      // Flyouts in separate React roots can run this cleanup after another
+      // main has already published its own width; leave that value alone.
+      if (style.getPropertyValue('--euiFlyoutMainWidth') === size) {
+        style.removeProperty('--euiFlyoutMainWidth');
+      }
     };
-  }, [isMainFlyout, size]);
+  }, [isMainFlyout, isActiveManagedFlyout, size]);
 
   /**
    * Setting up the refs on the actual flyout element in order to
@@ -333,45 +391,61 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
    * Uses useLayoutEffect so padding is applied before child render.
    */
   (0, _react.useLayoutEffect)(function () {
-    if (!isPushed) {
-      return;
-    }
     var paddingTarget = container !== null && container !== void 0 ? container : document.body;
-    var shouldApplyPadding = !isInManagedContext || isActiveManagedFlyout;
-    var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
-    var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
     var managerSide = side === 'left' ? 'left' : 'right';
+    var styleKey = euiSideStyleKey(managerSide);
+    var state = euiGetPushPaddingSideState(paddingTarget, managerSide);
 
-    // Capture pre-existing inline padding so it can be restored on cleanup
-    var previousPadding = paddingTarget.style[paddingSide];
-    var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
-    if (shouldApplyPadding) {
-      paddingTarget.style[paddingSide] = "".concat(paddingWidth, "px");
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, "".concat(paddingWidth, "px")));
-      }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
-      }
-    } else {
-      paddingTarget.style[paddingSide] = previousPadding;
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, null));
+    // Write the offset derived from all current contributions: the widest pushed flyout on
+    // this target.
+    var apply = function apply() {
+      var total = euiMaxContribution(state.contributions);
+      var isPushing = state.contributions.size > 0;
+      paddingTarget.style[styleKey] = isPushing ? "".concat(total, "px") : state.base;
+      // Without a `container` the offset is also exposed as a global CSS variable. It is
+      // written inline on `<html>` rather than through `EuiProvider`, because every React root
+      // has its own provider rendering its own `:root` block and the last one inserted would
+      // win regardless of which root's flyouts are still open.
+      if (container == null) {
+        var cssVar = euiSideCssVarKey(managerSide);
+        if (isPushing) {
+          document.documentElement.style.setProperty(cssVar, "".concat(total, "px"));
+        } else {
+          document.documentElement.style.removeProperty(cssVar);
+        }
       }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, 0);
+      // The manager only learns about managed flyouts, so it must not be told about a standalone
+      // flyout's width: nothing would ever reset it once that flyout closes.
+      if (isInManagedContext) {
+        var _flyoutManagerRef$cur5;
+        (_flyoutManagerRef$cur5 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur5 === void 0 || _flyoutManagerRef$cur5.setPushPadding(managerSide, euiMaxContribution(state.contributions, function (c) {
+          return c.managed;
+        }));
       }
+    };
+    var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
+
+    // A standalone flyout pushes whenever it is in push mode. A managed flyout only pushes while
+    // it is the active session's flyout; a backgrounded push flyout (e.g. under a new overlay
+    // session) withdraws its contribution so the page is not left pushed for it.
+    var shouldPush = isPushed && (!isInManagedContext || isActiveManagedFlyout);
+    if (!shouldPush) {
+      return;
     }
+    if (state.contributions.size === 0) {
+      // First pushed flyout on this side: capture the app's own inline padding to restore later.
+      state.base = paddingTarget.style[styleKey];
+    }
+    state.contributions.set(flyoutId, {
+      width: paddingWidth,
+      managed: isInManagedContext
+    });
+    apply();
     return function () {
-      paddingTarget.style[paddingSide] = previousPadding;
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, null));
-      }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, 0);
-      }
+      state.contributions.delete(flyoutId);
+      apply();
     };
-  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth, shouldSetGlobalPushVars, container]);
+  }, [isPushed, isInManagedContext, isActiveManagedFlyout, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth, container, flyoutId]);
 
   /**
    * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)

package/test-env/components/flyout/flyout_menu/action_button.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MenuActionButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _button = require("../../button");
 var _tool_tip = require("../../tool_tip");
 var _react2 = require("@emotion/react");
+var _excluded = ["toolTipContent", "toolTipProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,32 +19,22 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
 var MenuActionButton = exports.MenuActionButton = function MenuActionButton(_ref) {
   var action = _ref.action;
-  var iconType = action.iconType,
-    onClick = action.onClick,
-    ariaLabel = action['aria-label'],
-    toolTipContent = action.toolTipContent,
+  var toolTipContent = action.toolTipContent,
     toolTipProps = action.toolTipProps,
-    isDisabled = action.isDisabled,
-    isLoading = action.isLoading,
-    href = action.href,
-    target = action.target;
-  var sharedProps = {
-    'aria-label': ariaLabel,
-    iconType: iconType,
-    onClick: onClick,
-    color: 'text',
-    size: 'xs',
-    isDisabled: isDisabled,
-    // Keeps the button focusable so tooltip-on-disabled works for keyboard users
-    isLoading: isLoading,
-    href: href,
-    target: target
-  };
+    buttonProps = (0, _objectWithoutProperties2.default)(action, _excluded);
+  var button = (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({}, buttonProps, {
+    // The menu bar sets these props itself so every action looks the same.
+    // Anything set here also belongs in `EuiFlyoutMenuOwnedActionProps`.
+    color: "text",
+    size: "xs",
+    display: "empty",
+    iconSize: "m",
+    isSelected: undefined
+  }));
   return toolTipContent ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
     content: toolTipContent,
     disableScreenReaderOutput: true
-  }, toolTipProps), (0, _react2.jsx)(_button.EuiButtonIcon, sharedProps)) : (0, _react2.jsx)(_button.EuiButtonIcon, sharedProps);
+  }, toolTipProps), button) : button;
 };

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

@@ -251,97 +251,91 @@ EuiFlyoutMenu.propTypes = {
   /**
        * List of action items rendered at the start (inline-start) of the menu bar.
        */
-  leadingActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+  leadingActions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     /**
-       * Icon type for the action button
+       * Aria label for the action button
        */
-    iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "addToChat", "addToDashboard", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "analyzeEvent", "annotation", "chartAnomaly", "anomalySwimLane", "apmApp", "chartWaterfall", "appSearchApp", "apps", "chevronSingleDown", "chevronSingleLeft", "chevronSingleRight", "chevronSingleUp", "chevronLimitLeft", "chevronLimitRight", "asterisk", "at", "archive", "article", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudBolt", "cloudDrizzle", "cloudRain", "cloudStormy", "cloudSun", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "continuityWithin", "contrast", "contrastFill", "controls", "copy", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossCircle", "crosshair", "cursorDefault", "money", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "display", "devToolsApp", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "document", "documentation", "documents", "dot", "dotInCircle", "chevronDoubleLeft", "chevronDoubleRight", "ellipsis", "textAlignCenter", "textAlignLeft", "textAlignRight", "textBold", "listCheck", "textHeading", "textItalic", "listNumber", "redo", "textStrike", "table", "visTable", "textUnderline", "undo", "listBullet", "list", "mail", "empty", "emsApp", "endpoint", "query", "eraser", "error", "errorFill", "esqlVis", "logIn", "logOut", "maximize", "export", "upload", "external", "eye", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "tableSparkles", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNamespace", "kubernetesNode", "kubernetesPod", "cube", "rocket", "layers", "lensApp", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDot", "lineSolid", "link", "linkSlash", "lock", "lockOpen", "pattern", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVectorDB", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashInput", "logstashOutput", "queue", "machineLearningApp", "magnify", "search", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "vectorTriangle", "notebookApp", "number", "wifiSlash", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "productTimelion", "productTSVB", "push", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "routeSplit", "save", "scale", "savedObjectsApp", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "server", "sessionViewer", "shard", "share", "significantEvents", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starMinusEmpty", "starMinusFill", "starPlusEmpty", "starPlusFill", "stats", "stop", "stopFill", "stopSlash", "storage", "string", "sun", "swatchInput", "symlink", "tableDensityHigh", "tableDensityLow", "tableOfContents", "tag", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionRightIn", "transitionRightOut", "transitionTopIn", "transitionTopOut", "translate", "trash", "unfold", "upgradeAssistantApp", "uptimeApp", "user", "users", "usersRolesApp", "unarchive", "vectorSquare", "videoPlayer", "visGoal", "chartMetric", "visTimelion", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
+    "aria-label": _propTypes.default.string.isRequired,
     /**
        * onClick handler for the action button
        */
     onClick: _propTypes.default.func,
     /**
-       * Aria label for the action button
-       */
-    "aria-label": _propTypes.default.string.isRequired,
-    /**
-       * Optional tooltip content shown on hover/focus of the action button.
-       * When `isDisabled` is `true`, the action uses `aria-disabled` so the tooltip
-       * remains reachable via hover/focus (unless overridden via `toolTipProps`).
+       * Tooltip text shown on hover or focus.
+       * When the action is disabled, also set `hasAriaDisabled`. This keeps
+       * the button focusable so the tooltip remains reachable.
        */
     toolTipContent: _propTypes.default.node,
     /**
        * Optional props to pass to the underlying {@link EuiToolTip}.
        * Only used when `toolTipContent` is also provided.
        */
-    toolTipProps: _propTypes.default.any,
+    toolTipProps: _propTypes.default.any
+  }).isRequired, _propTypes.default.shape({
     /**
-       * Disables the action button. Pair with `toolTipContent` to explain why
-       * the action is unavailable.
+       * Aria label for the action button
        */
-    isDisabled: _propTypes.default.bool,
+    "aria-label": _propTypes.default.string.isRequired,
     /**
-       * Replaces the button icon with a loading spinner and disables the button.
+       * onClick handler for the action button
        */
-    isLoading: _propTypes.default.bool,
+    onClick: _propTypes.default.func,
     /**
-       * Renders the action as an anchor tag with the given URL, allowing users to
-       * right-click and open in a new tab. When `isDisabled` or `isLoading` is
-       * `true`, the element renders as a `<button>` regardless of this prop.
+       * Tooltip text shown on hover or focus.
+       * When the action is disabled, also set `hasAriaDisabled`. This keeps
+       * the button focusable so the tooltip remains reachable.
        */
-    href: _propTypes.default.string,
+    toolTipContent: _propTypes.default.node,
     /**
-       * Target for the anchor tag. Only used when `href` is provided.
+       * Optional props to pass to the underlying {@link EuiToolTip}.
+       * Only used when `toolTipContent` is also provided.
        */
-    target: _propTypes.default.string
-  }).isRequired),
+    toolTipProps: _propTypes.default.any
+  }).isRequired]).isRequired),
   /**
        * List of action items rendered at the end (inline-end) of the menu bar.
        */
-  trailingActions: _propTypes.default.arrayOf(_propTypes.default.shape({
+  trailingActions: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     /**
-       * Icon type for the action button
+       * Aria label for the action button
        */
-    iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "addToChat", "addToDashboard", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "analyzeEvent", "annotation", "chartAnomaly", "anomalySwimLane", "apmApp", "chartWaterfall", "appSearchApp", "apps", "chevronSingleDown", "chevronSingleLeft", "chevronSingleRight", "chevronSingleUp", "chevronLimitLeft", "chevronLimitRight", "asterisk", "at", "archive", "article", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "bell", "bellSlash", "beta", "bolt", "boxesVertical", "branch", "briefcase", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "chartChangePoint", "chartArea", "visArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "visBarVertical", "chartBarVerticalStack", "chartGauge", "visGauge", "chartHeatmap", "chartLine", "visLine", "chartPie", "visPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkCircleFill", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudBolt", "cloudDrizzle", "cloudRain", "cloudStormy", "cloudSun", "cloudSunny", "cluster", "code", "codeApp", "paintBucket", "commandLine", "comment", "editorComment", "compare", "processor", "compute", "consoleApp", "container", "continuityAbove", "continuityWithin", "contrast", "contrastFill", "controls", "copy", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossCircle", "crosshair", "cursorDefault", "money", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "display", "devToolsApp", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "document", "documentation", "documents", "dot", "dotInCircle", "chevronDoubleLeft", "chevronDoubleRight", "ellipsis", "textAlignCenter", "textAlignLeft", "textAlignRight", "textBold", "listCheck", "textHeading", "textItalic", "listNumber", "redo", "textStrike", "table", "visTable", "textUnderline", "undo", "listBullet", "list", "mail", "empty", "emsApp", "endpoint", "query", "eraser", "error", "errorFill", "esqlVis", "logIn", "logOut", "maximize", "export", "upload", "external", "eye", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "gear", "gisApp", "globe", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "help", "home", "hourglass", "if", "info", "image", "index", "indexClose", "tableCross", "tableSparkles", "indexEdit", "tablePencil", "indexManagementApp", "mapping", "indexOpen", "tablePlus", "indexPatternApp", "indexRollupApp", "indexRuntime", "tablePlay", "indexSettings", "tableGear", "tableTime", "infinity", "inputOutput", "inspect", "ip", "key", "keyboard", "queryField", "kqlFunction", "queryOperand", "querySelector", "queryValue", "kubernetesNamespace", "kubernetesNode", "kubernetesPod", "cube", "rocket", "layers", "lensApp", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDot", "lineSolid", "link", "linkSlash", "lock", "lockOpen", "pattern", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVectorDB", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashInput", "logstashOutput", "queue", "machineLearningApp", "magnify", "search", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "vectorTriangle", "notebookApp", "number", "wifiSlash", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pagesSelect", "documentsCheck", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipelineApp", "pivot", "play", "plugs", "plus", "plusCircle", "plusSquare", "presentation", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "productTimelion", "productTSVB", "push", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "routeSplit", "save", "scale", "savedObjectsApp", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignalDetected", "server", "sessionViewer", "shard", "share", "significantEvents", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starMinusEmpty", "starMinusFill", "starPlusEmpty", "starPlusFill", "stats", "stop", "stopFill", "stopSlash", "storage", "string", "sun", "swatchInput", "symlink", "tableDensityHigh", "tableDensityLow", "tableOfContents", "tag", "thermometer", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelinePointer", "timelionApp", "refreshTime", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionRightIn", "transitionRightOut", "transitionTopIn", "transitionTopOut", "translate", "trash", "unfold", "upgradeAssistantApp", "uptimeApp", "user", "users", "usersRolesApp", "unarchive", "vectorSquare", "videoPlayer", "visGoal", "chartMetric", "visTimelion", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
+    "aria-label": _propTypes.default.string.isRequired,
     /**
        * onClick handler for the action button
        */
     onClick: _propTypes.default.func,
     /**
-       * Aria label for the action button
-       */
-    "aria-label": _propTypes.default.string.isRequired,
-    /**
-       * Optional tooltip content shown on hover/focus of the action button.
-       * When `isDisabled` is `true`, the action uses `aria-disabled` so the tooltip
-       * remains reachable via hover/focus (unless overridden via `toolTipProps`).
+       * Tooltip text shown on hover or focus.
+       * When the action is disabled, also set `hasAriaDisabled`. This keeps
+       * the button focusable so the tooltip remains reachable.
        */
     toolTipContent: _propTypes.default.node,
     /**
        * Optional props to pass to the underlying {@link EuiToolTip}.
        * Only used when `toolTipContent` is also provided.
        */
-    toolTipProps: _propTypes.default.any,
+    toolTipProps: _propTypes.default.any
+  }).isRequired, _propTypes.default.shape({
     /**
-       * Disables the action button. Pair with `toolTipContent` to explain why
-       * the action is unavailable.
+       * Aria label for the action button
        */
-    isDisabled: _propTypes.default.bool,
+    "aria-label": _propTypes.default.string.isRequired,
     /**
-       * Replaces the button icon with a loading spinner and disables the button.
+       * onClick handler for the action button
        */
-    isLoading: _propTypes.default.bool,
+    onClick: _propTypes.default.func,
     /**
-       * Renders the action as an anchor tag with the given URL, allowing users to
-       * right-click and open in a new tab. When `isDisabled` or `isLoading` is
-       * `true`, the element renders as a `<button>` regardless of this prop.
+       * Tooltip text shown on hover or focus.
+       * When the action is disabled, also set `hasAriaDisabled`. This keeps
+       * the button focusable so the tooltip remains reachable.
        */
-    href: _propTypes.default.string,
+    toolTipContent: _propTypes.default.node,
     /**
-       * Target for the anchor tag. Only used when `href` is provided.
+       * Optional props to pass to the underlying {@link EuiToolTip}.
+       * Only used when `toolTipContent` is also provided.
        */
-    target: _propTypes.default.string
-  }).isRequired),
+    toolTipProps: _propTypes.default.any
+  }).isRequired]).isRequired),
   /**
        * List of custom action items for the menu component
        * @deprecated Use `trailingActions` instead. If both are supplied, `trailingActions` takes precedence.

package/test-env/components/flyout/manager/flyout_managed.js

@@ -173,6 +173,24 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     flyoutExistsInManagerRef.current = flyoutExistsInManager;
   }, [flyoutExistsInManager]);
 
+  // Closing a main closes its whole history group via `closeAllFlyouts`, which always targets
+  // the *current* session. A main that has been backgrounded by a newer session (e.g. closed
+  // programmatically from another React root) must only remove its own session, otherwise it
+  // tears down the foreground session and leaves its own stale session behind.
+  var closeOwnFlyouts = (0, _react.useCallback)(function () {
+    if (level !== _const.LEVEL_MAIN) {
+      closeFlyout(flyoutId);
+      return;
+    }
+    var _getFlyoutManagerStor = (0, _store.getFlyoutManagerStore)().getState(),
+      sessions = _getFlyoutManagerStor.sessions;
+    var ownSession = sessions.find(function (session) {
+      return session.mainFlyoutId === flyoutId;
+    });
+    var isBackgroundedMain = ownSession != null && ownSession !== sessions[sessions.length - 1];
+    isBackgroundedMain ? closeFlyout(flyoutId) : closeAllFlyouts();
+  }, [level, flyoutId, closeFlyout, closeAllFlyouts]);
+
   // Register with flyout manager context when open, remove when closed
   // Using useLayoutEffect to run synchronously before DOM updates
   (0, _react.useLayoutEffect)(function () {
@@ -184,7 +202,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       });
       if (stillInStore) {
         // Normal cleanup (deps changed or explicit close via isOpen=false)
-        level === _const.LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+        closeOwnFlyouts();
       } else if (wasRegisteredRef.current) {
         var _onCloseCallbackRef$c, _store$consumeCloseMe;
         // Removed externally while mounted: forward the store-stamped reason
@@ -195,7 +213,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       }
       wasRegisteredRef.current = false;
     };
-  }, [flyoutId, title, level, size, minWidth, historyKey, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, addFlyout, closeFlyout, closeAllFlyouts]);
+  }, [flyoutId, title, level, size, minWidth, historyKey, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, addFlyout, closeOwnFlyouts]);
 
   // Detect when flyout has been removed from manager state (e.g., via Back button)
   // and trigger onClose callback to notify the parent component
@@ -210,8 +228,8 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     // any other removal (e.g. a closeAllFlyouts cascade reaching a backgrounded
     // flyout) defaults to `navigation-cascade`.
     if (wasRegisteredRef.current && !flyoutExistsInManager) {
-      var _onCloseCallbackRef$c2, _getFlyoutManagerStor;
-      (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, new MouseEvent('navigation'), (_getFlyoutManagerStor = (0, _store.getFlyoutManagerStore)().consumeCloseMeta(flyoutId)) !== null && _getFlyoutManagerStor !== void 0 ? _getFlyoutManagerStor : {
+      var _onCloseCallbackRef$c2, _getFlyoutManagerStor2;
+      (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, new MouseEvent('navigation'), (_getFlyoutManagerStor2 = (0, _store.getFlyoutManagerStore)().consumeCloseMeta(flyoutId)) !== null && _getFlyoutManagerStor2 !== void 0 ? _getFlyoutManagerStor2 : {
         reason: 'navigation-cascade'
       });
       wasRegisteredRef.current = false; // Reset to avoid repeated calls
@@ -248,7 +266,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     // and ensures cascade close logic runs before DOM cleanup begins
     // Using flushSync to force synchronous state update completion
     (0, _reactDom.flushSync)(function () {
-      level === _const.LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+      closeOwnFlyouts();
     });
     if (onCloseCallbackRef.current) {
       var event = e || new MouseEvent('click');