@elastic/eui 113.2.0 → 113.3.0

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

@@ -36,6 +36,7 @@ import { EuiFlyoutIsManagedProvider } from './context';
 import { euiManagedFlyoutStyles } from './flyout_managed.styles';
 import { useFlyoutManager as _useFlyoutManager, useFlyoutId } from './hooks';
 import { useIsFlyoutRegistered } from './selectors';
+import { getFlyoutManagerStore } from './store';
 import { createValidationErrorMessage, isNamedSize, validateManagedFlyoutSize, validateSizeCombination } from './validation';
 
 /**
@@ -165,18 +166,23 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // Register with flyout manager context when open, remove when closed
   // Using useLayoutEffect to run synchronously before DOM updates
   useLayoutEffect(function () {
-    addFlyout(flyoutId, title, level, size, typeof minWidth === 'number' ? minWidth : undefined);
+    addFlyout(flyoutId, title, level, size, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, 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
-      if (flyoutExistsInManagerRef.current) {
+      var currentStoreState = getFlyoutManagerStore().getState();
+      var stillInStore = currentStoreState.flyouts.some(function (f) {
+        return f.flyoutId === flyoutId;
+      });
+      if (stillInStore) {
+        // Normal cleanup (deps changed or explicit close via isOpen=false)
         level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+      } else if (wasRegisteredRef.current) {
+        var _onCloseCallbackRef$c;
+        // Cascade close: was registered but removed externally (e.g. main closed)
+        (_onCloseCallbackRef$c = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c === void 0 || _onCloseCallbackRef$c.call(onCloseCallbackRef, new MouseEvent('navigation'));
       }
-
-      // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
     };
-  }, [flyoutId, title, level, size, minWidth, addFlyout, closeFlyout, closeAllFlyouts]);
+  }, [flyoutId, title, level, size, minWidth, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, 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
@@ -188,8 +194,8 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // If flyout was previously registered, is marked as open, but no longer exists in manager state,
     // it was removed via navigation (Back button) - trigger close callback
     if (wasRegisteredRef.current && !flyoutExistsInManager) {
-      var _onCloseCallbackRef$c;
-      (_onCloseCallbackRef$c = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c === void 0 || _onCloseCallbackRef$c.call(onCloseCallbackRef, new MouseEvent('navigation'));
+      var _onCloseCallbackRef$c2;
+      (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, new MouseEvent('navigation'));
       wasRegisteredRef.current = false; // Reset to avoid repeated calls
     }
   }, [flyoutExistsInManager, flyoutId]);
@@ -221,8 +227,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     flushSync(function () {
       level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
     });
-
-    // trigger parent callback, unmounts the component
+    wasRegisteredRef.current = false; // Prevent cleanup from double-firing onClose
     if (onCloseCallbackRef.current) {
       var event = e || new MouseEvent('click');
       onCloseCallbackRef.current(event);
@@ -302,8 +307,14 @@ EuiManagedFlyout.propTypes = {
          */
     title: PropTypes.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
+         * An optional icon to display next to the session title in the history menu
+         */
+    iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "alert", "analyzeEvent", "annotation", "anomalyChart", "chartAnomaly", "anomalySwimLane", "apmApp", "apmTrace", "chartWaterfall", "appSearchApp", "apps", "arrowDown", "chevronSingleDown", "arrowLeft", "chevronSingleLeft", "arrowRight", "chevronSingleRight", "arrowUp", "chevronSingleUp", "arrowStart", "chevronLimitLeft", "arrowEnd", "chevronLimitRight", "article", "asterisk", "at", "archive", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "briefcase", "branchUser", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "chartChangePoint", "chartArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "chartBarVerticalStack", "chartGauge", "chartHeatmap", "chartLine", "chartPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkInCircleFilled", "checkCircleFill", "cheer", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "paintBucket", "commandLine", "comment", "compare", "compute", "processor", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "contrastFill", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crossCircle", "crosshair", "crosshairs", "currency", "money", "cut", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "desktop", "display", "devToolsApp", "diff", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "chevronDoubleLeft", "doubleArrowRight", "chevronDoubleRight", "ellipsis", "editorAlignCenter", "textAlignCenter", "editorAlignLeft", "textAlignLeft", "editorAlignRight", "textAlignRight", "editorBold", "textBold", "editorChecklist", "listCheck", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "textHeading", "editorItalic", "textItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "listNumber", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "redo", "editorStrike", "textStrike", "editorTable", "table", "editorUnderline", "textUnderline", "editorUndo", "undo", "editorUnorderedList", "listBullet", "email", "mail", "empty", "emsApp", "endpoint", "eql", "query", "eraser", "error", "errorFilled", "errorFill", "esqlVis", "exit", "logOut", "expand", "maximize", "expandMini", "export", "exportAction", "upload", "external", "eye", "eyeClosed", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "hourglass", "if", "info", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "mapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "tableTime", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "queryField", "kqlFunction", "kqlOperand", "queryOperand", "kqlSelector", "querySelector", "kqlValue", "queryValue", "kubernetesNode", "kubernetesPod", "launch", "rocket", "layers", "lensApp", "lettering", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDashed", "lineDot", "lineDotted", "lineSolid", "link", "linkSlash", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "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", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "queue", "machineLearningApp", "magnet", "magnify", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusInCircle", "minusInCircleFilled", "minusInSquare", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "vectorTriangle", "notebookApp", "number", "offline", "wifiSlash", "online", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusCircle", "plusInCircle", "plusInCircleFilled", "plusInSquare", "plusSquare", "popout", "presentation", "productRobot", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "push", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "server", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starFilledSpace", "starMinusEmpty", "starMinusFill", "starMinusFilled", "starPlusEmpty", "starPlusFill", "starPlusFilled", "stats", "stop", "stopFill", "stopFilled", "stopSlash", "storage", "streamsClassic", "streamsWired", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityHigh", "tableDensityExpanded", "tableDensityLow", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "thermometer", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "refreshTime", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "unarchive", "vector", "vectorSquare", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "chartMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "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", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+    /**
+         * Hides the title in the `EuiFlyoutMenu`.
+         * @default true
+         * @deprecated Use `EuiFlyoutHeader` for visible titles instead.
+         * `hideTitle` is still honored but may be removed in a future major version.
          */
     hideTitle: PropTypes.bool,
     /**

package/es/components/flyout/manager/reducer.js

@@ -19,7 +19,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  */
 
 import { ACTION_ADD, ACTION_CLOSE, ACTION_CLOSE_ALL, ACTION_SET_ACTIVE, ACTION_SET_LAYOUT_MODE, ACTION_SET_WIDTH, ACTION_SET_ACTIVITY_STAGE, ACTION_GO_BACK, ACTION_GO_TO_FLYOUT, ACTION_SET_PUSH_PADDING, ACTION_ADD_UNMANAGED_FLYOUT, ACTION_CLOSE_UNMANAGED_FLYOUT, ACTION_SET_CONTAINER_ELEMENT, ACTION_SET_REFERENCE_WIDTH } from './actions';
-import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_MAIN, STAGE_OPENING } from './const';
+import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_MAIN, LEVEL_CHILD, STAGE_OPENING } from './const';
 /**
  * Default flyout manager state used to initialize the reducer.
  */
@@ -77,16 +77,20 @@ export function flyoutManagerReducer() {
     //   session exists, do nothing (invalid child without a parent).
     case ACTION_ADD:
       {
+        var _currentSession$child;
         var flyoutId = action.flyoutId,
           title = action.title,
           level = action.level,
           size = action.size,
+          iconType = action.iconType,
           minWidth = action.minWidth;
-
-        // Ignore duplicate registrations
-        if (state.flyouts.some(function (f) {
+        var isDuplicate = state.flyouts.some(function (f) {
           return f.flyoutId === flyoutId;
-        })) {
+        });
+        var isIdempotentChild = level === LEVEL_CHILD && state.sessions.length > 0 && state.sessions[state.sessions.length - 1].childFlyoutId === flyoutId;
+
+        // Ignore duplicate registrations (except idempotent child re-registration after goBack)
+        if (isDuplicate && !isIdempotentChild) {
           return state;
         }
         var newFlyoutState = {
@@ -96,12 +100,14 @@ export function flyoutManagerReducer() {
           minWidth: minWidth,
           activityStage: STAGE_OPENING
         };
-        var newFlyouts = [].concat(_toConsumableArray(state.flyouts), [newFlyoutState]);
+        var newFlyouts = isIdempotentChild ? state.flyouts : [].concat(_toConsumableArray(state.flyouts), [newFlyoutState]);
         if (level === LEVEL_MAIN) {
           var newSession = {
             mainFlyoutId: flyoutId,
             title: title,
+            iconType: iconType,
             childFlyoutId: null,
+            childHistory: [],
             zIndex: state.currentZIndex
           };
           return _objectSpread(_objectSpread({}, state), {}, {
@@ -118,8 +124,52 @@ export function flyoutManagerReducer() {
         }
         var updatedSessions = _toConsumableArray(state.sessions);
         var currentSessionIndex = updatedSessions.length - 1;
-        updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, updatedSessions[currentSessionIndex]), {}, {
-          childFlyoutId: flyoutId
+        var currentSession = updatedSessions[currentSessionIndex];
+        var childHistory = (_currentSession$child = currentSession.childHistory) !== null && _currentSession$child !== void 0 ? _currentSession$child : [];
+
+        // Idempotent re-registration (e.g. after goBack): flyout already in flyouts and session already points to it
+        if (state.flyouts.some(function (f) {
+          return f.flyoutId === flyoutId;
+        })) {
+          if (currentSession.childFlyoutId === flyoutId) {
+            updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, currentSession), {}, {
+              childTitle: title,
+              childIconType: iconType,
+              childHistory: childHistory
+            });
+            return _objectSpread(_objectSpread({}, state), {}, {
+              sessions: updatedSessions
+            });
+          }
+          return state; // duplicate registration for a different child, ignore
+        }
+
+        // Session already has a child: push current child to history, then set new child (do not remove previous from flyouts)
+        if (currentSession.childFlyoutId) {
+          var _currentSession$child2;
+          var historyEntry = {
+            flyoutId: currentSession.childFlyoutId,
+            title: (_currentSession$child2 = currentSession.childTitle) !== null && _currentSession$child2 !== void 0 ? _currentSession$child2 : '',
+            iconType: currentSession.childIconType
+          };
+          updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, currentSession), {}, {
+            childHistory: [].concat(_toConsumableArray(childHistory), [historyEntry]),
+            childFlyoutId: flyoutId,
+            childTitle: title,
+            childIconType: iconType
+          });
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: updatedSessions,
+            flyouts: newFlyouts
+          });
+        }
+
+        // First child in session
+        updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, currentSession), {}, {
+          childFlyoutId: flyoutId,
+          childTitle: title,
+          childIconType: iconType,
+          childHistory: childHistory
         });
         return _objectSpread(_objectSpread({}, state), {}, {
           sessions: updatedSessions,
@@ -129,10 +179,11 @@ export function flyoutManagerReducer() {
 
     // Unregister a flyout and update sessions accordingly.
     // - When closing a `main` flyout, drop its entire session and all associated flyouts.
-    // - When closing a `child` flyout, clear the child pointer on the most
-    //   recent session if it matches.
+    // - When closing a `child` flyout, find the session that owns it (childFlyoutId or
+    //   childHistory) and clear that session's child state so navigation back stays consistent.
     case ACTION_CLOSE:
       {
+        var _owningSession$childH;
         var removedFlyout = state.flyouts.find(function (f) {
           return f.flyoutId === action.flyoutId;
         });
@@ -145,11 +196,15 @@ export function flyoutManagerReducer() {
             return session.mainFlyoutId === action.flyoutId;
           });
           if (sessionToRemove) {
-            // Remove all flyouts associated with this session (main + child)
+            var _sessionToRemove$chil;
+            // Remove all flyouts associated with this session (main + current child + child history)
             var flyoutsToRemove = new Set([action.flyoutId]);
             if (sessionToRemove.childFlyoutId) {
               flyoutsToRemove.add(sessionToRemove.childFlyoutId);
             }
+            ((_sessionToRemove$chil = sessionToRemove.childHistory) !== null && _sessionToRemove$chil !== void 0 ? _sessionToRemove$chil : []).forEach(function (entry) {
+              return flyoutsToRemove.add(entry.flyoutId);
+            });
             var _newFlyouts = state.flyouts.filter(function (f) {
               return !flyoutsToRemove.has(f.flyoutId);
             });
@@ -170,22 +225,43 @@ export function flyoutManagerReducer() {
           }
         }
 
-        // Handle child flyout closing (existing logic)
-        var _newFlyouts2 = state.flyouts.filter(function (f) {
-          return f.flyoutId !== action.flyoutId;
-        });
+        // Handle child flyout closing: find the session that owns this child and
+        // clear that session's child state (so we stay consistent when navigating back).
         if (state.sessions.length === 0) {
           return _objectSpread(_objectSpread({}, state), {}, {
-            flyouts: _newFlyouts2
+            flyouts: state.flyouts.filter(function (f) {
+              return f.flyoutId !== action.flyoutId;
+            })
           });
         }
-        var _updatedSessions = _toConsumableArray(state.sessions);
-        var _currentSessionIndex = _updatedSessions.length - 1;
-        if (_updatedSessions[_currentSessionIndex].childFlyoutId === action.flyoutId) {
-          _updatedSessions[_currentSessionIndex] = _objectSpread(_objectSpread({}, _updatedSessions[_currentSessionIndex]), {}, {
-            childFlyoutId: null
+        var owningSessionIndex = state.sessions.findIndex(function (session) {
+          var _session$childHistory;
+          return session.childFlyoutId === action.flyoutId || ((_session$childHistory = session.childHistory) !== null && _session$childHistory !== void 0 ? _session$childHistory : []).some(function (entry) {
+            return entry.flyoutId === action.flyoutId;
+          });
+        });
+        if (owningSessionIndex === -1) {
+          // Closed flyout not in any session's child state; just remove the one flyout
+          return _objectSpread(_objectSpread({}, state), {}, {
+            flyouts: state.flyouts.filter(function (f) {
+              return f.flyoutId !== action.flyoutId;
+            })
           });
         }
+        var owningSession = state.sessions[owningSessionIndex];
+        var childIds = new Set([owningSession.childFlyoutId].concat(_toConsumableArray(((_owningSession$childH = owningSession.childHistory) !== null && _owningSession$childH !== void 0 ? _owningSession$childH : []).map(function (e) {
+          return e.flyoutId;
+        }))).filter(Boolean));
+        var _newFlyouts2 = state.flyouts.filter(function (f) {
+          return !childIds.has(f.flyoutId);
+        });
+        var _updatedSessions = _toConsumableArray(state.sessions);
+        _updatedSessions[owningSessionIndex] = _objectSpread(_objectSpread({}, owningSession), {}, {
+          childFlyoutId: null,
+          childTitle: undefined,
+          childIconType: undefined,
+          childHistory: []
+        });
         return _objectSpread(_objectSpread({}, state), {}, {
           sessions: _updatedSessions,
           flyouts: _newFlyouts2
@@ -218,8 +294,8 @@ export function flyoutManagerReducer() {
           return state;
         }
         var _updatedSessions2 = _toConsumableArray(state.sessions);
-        var _currentSessionIndex2 = _updatedSessions2.length - 1;
-        _updatedSessions2[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex2]), {}, {
+        var _currentSessionIndex = _updatedSessions2.length - 1;
+        _updatedSessions2[_currentSessionIndex] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex]), {}, {
           childFlyoutId: action.flyoutId
         });
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -265,59 +341,121 @@ export function flyoutManagerReducer() {
         });
       }
 
-    // Go back one session (remove current session from stack)
+    // Go back: pop child history when any, else pop current session
     case ACTION_GO_BACK:
       {
+        var _currentSession$child3, _currentSession$child4;
         if (state.sessions.length === 0) {
           return state;
         }
-        var _currentSessionIndex3 = state.sessions.length - 1;
-        var currentSession = state.sessions[_currentSessionIndex3];
+        var _currentSessionIndex2 = state.sessions.length - 1;
+        var _currentSession = state.sessions[_currentSessionIndex2];
+        var _childHistory = (_currentSession$child3 = _currentSession.childHistory) !== null && _currentSession$child3 !== void 0 ? _currentSession$child3 : [];
+        if (_childHistory.length > 0) {
+          // Pop one child: set current child to the last entry in history, remove the current child flyout
+          var popped = _childHistory[_childHistory.length - 1];
+          var newChildHistory = _childHistory.slice(0, -1);
+          var _updatedSessions3 = _toConsumableArray(state.sessions);
+          _updatedSessions3[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _currentSession), {}, {
+            childHistory: newChildHistory,
+            childFlyoutId: popped.flyoutId,
+            childTitle: popped.title,
+            childIconType: popped.iconType
+          });
+          var _newFlyouts3 = state.flyouts.filter(function (f) {
+            return f.flyoutId !== _currentSession.childFlyoutId;
+          });
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: _updatedSessions3,
+            flyouts: _newFlyouts3
+          });
+        }
 
-        // Close all flyouts in the current session
-        var _flyoutsToRemove = new Set([currentSession.mainFlyoutId]);
-        if (currentSession.childFlyoutId) {
-          _flyoutsToRemove.add(currentSession.childFlyoutId);
+        // No child history: pop current session (main + all its children)
+        var _flyoutsToRemove = new Set([_currentSession.mainFlyoutId]);
+        if (_currentSession.childFlyoutId) {
+          _flyoutsToRemove.add(_currentSession.childFlyoutId);
         }
-        var _newFlyouts3 = state.flyouts.filter(function (f) {
+        ((_currentSession$child4 = _currentSession.childHistory) !== null && _currentSession$child4 !== void 0 ? _currentSession$child4 : []).forEach(function (e) {
+          return _flyoutsToRemove.add(e.flyoutId);
+        });
+        var _newFlyouts4 = state.flyouts.filter(function (f) {
           return !_flyoutsToRemove.has(f.flyoutId);
         });
-        var _newSessions = state.sessions.slice(0, _currentSessionIndex3);
+        var _newSessions = state.sessions.slice(0, _currentSessionIndex2);
         return _objectSpread(_objectSpread({}, state), {}, {
           sessions: _newSessions,
-          flyouts: _newFlyouts3
+          flyouts: _newFlyouts4
         });
       }
 
-    // Navigate to a specific flyout (remove all sessions after it)
+    // Navigate to a specific flyout (by main session or by child in current session's history)
     case ACTION_GO_TO_FLYOUT:
       {
-        var _flyoutId3 = action.flyoutId;
+        var _flyoutId3 = action.flyoutId,
+          _level = action.level;
+        var _currentSessionIndex3 = state.sessions.length - 1;
+        if (_level === LEVEL_CHILD && state.sessions.length > 0) {
+          var _currentSession2$chil;
+          var _currentSession2 = state.sessions[_currentSessionIndex3];
+          var _childHistory2 = (_currentSession2$chil = _currentSession2.childHistory) !== null && _currentSession2$chil !== void 0 ? _currentSession2$chil : [];
+          var targetIndex = _childHistory2.findIndex(function (entry) {
+            return entry.flyoutId === _flyoutId3;
+          });
+          if (targetIndex === -1) {
+            return state; // Target child not in history
+          }
+          var targetEntry = _childHistory2[targetIndex];
+          var _newChildHistory = _childHistory2.slice(0, targetIndex);
+          var _flyoutsToRemove2 = new Set();
+          if (_currentSession2.childFlyoutId) {
+            _flyoutsToRemove2.add(_currentSession2.childFlyoutId);
+          }
+          _childHistory2.slice(targetIndex + 1).forEach(function (e) {
+            _flyoutsToRemove2.add(e.flyoutId);
+          });
+          var _newFlyouts5 = state.flyouts.filter(function (f) {
+            return !_flyoutsToRemove2.has(f.flyoutId);
+          });
+          var _updatedSessions4 = _toConsumableArray(state.sessions);
+          _updatedSessions4[_currentSessionIndex3] = _objectSpread(_objectSpread({}, _currentSession2), {}, {
+            childHistory: _newChildHistory,
+            childFlyoutId: targetEntry.flyoutId,
+            childTitle: targetEntry.title,
+            childIconType: targetEntry.iconType
+          });
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: _updatedSessions4,
+            flyouts: _newFlyouts5
+          });
+        }
 
-        // Find the session containing the target flyout
+        // Navigate by main flyout: remove all sessions after the target
         var targetSessionIndex = state.sessions.findIndex(function (session) {
           return session.mainFlyoutId === _flyoutId3;
         });
         if (targetSessionIndex === -1) {
           return state; // Target flyout not found
         }
-
-        // Close all sessions after the target session
         var sessionsToClose = state.sessions.slice(targetSessionIndex + 1);
-        var _flyoutsToRemove2 = new Set();
+        var _flyoutsToRemove3 = new Set();
         sessionsToClose.forEach(function (session) {
-          _flyoutsToRemove2.add(session.mainFlyoutId);
+          var _session$childHistory2;
+          _flyoutsToRemove3.add(session.mainFlyoutId);
           if (session.childFlyoutId) {
-            _flyoutsToRemove2.add(session.childFlyoutId);
+            _flyoutsToRemove3.add(session.childFlyoutId);
           }
+          ((_session$childHistory2 = session.childHistory) !== null && _session$childHistory2 !== void 0 ? _session$childHistory2 : []).forEach(function (e) {
+            return _flyoutsToRemove3.add(e.flyoutId);
+          });
         });
-        var _newFlyouts4 = state.flyouts.filter(function (f) {
-          return !_flyoutsToRemove2.has(f.flyoutId);
+        var _newFlyouts6 = state.flyouts.filter(function (f) {
+          return !_flyoutsToRemove3.has(f.flyoutId);
         });
         var _newSessions2 = state.sessions.slice(0, targetSessionIndex + 1);
         return _objectSpread(_objectSpread({}, state), {}, {
           sessions: _newSessions2,
-          flyouts: _newFlyouts4
+          flyouts: _newFlyouts6
         });
       }
 

package/es/components/flyout/manager/store.js

@@ -1,3 +1,9 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -42,19 +48,68 @@ function createStore() {
   // The onClick handlers won't execute until after store is fully assigned.
   // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
   var store;
-  var computeHistoryItems = function computeHistoryItems() {
+  var computeHistoryItems = function computeHistoryItems(dispatchFn) {
+    var _currentSession$child;
     var currentSessionIndex = currentState.sessions.length - 1;
+    var currentSession = currentSessionIndex >= 0 ? currentState.sessions[currentSessionIndex] : null;
     var previousSessions = currentState.sessions.slice(0, currentSessionIndex);
-    return previousSessions.reverse().map(function (_ref) {
-      var title = _ref.title,
-        mainFlyoutId = _ref.mainFlyoutId;
+    var childHistory = (_currentSession$child = currentSession === null || currentSession === void 0 ? void 0 : currentSession.childHistory) !== null && _currentSession$child !== void 0 ? _currentSession$child : [];
+    var childItems = _toConsumableArray(childHistory).reverse().map(function (entry) {
       return {
-        title: title,
+        title: entry.title,
+        iconType: entry.iconType,
         onClick: function onClick() {
-          store.dispatch(goToFlyoutAction(mainFlyoutId));
+          dispatchFn(goToFlyoutAction(entry.flyoutId, 'child'));
         }
       };
     });
+
+    // Previous sessions: list each session's current child then its child history (so all travelled entries appear)
+    var previousSessionItems = [];
+    var _loop = function _loop() {
+      var _session$childHistory;
+      var session = previousSessions[i];
+      var mainTitle = session.title;
+      var mainFlyoutId = session.mainFlyoutId;
+      var history = (_session$childHistory = session.childHistory) !== null && _session$childHistory !== void 0 ? _session$childHistory : [];
+      var hasChildren = session.childFlyoutId != null && session.childTitle != null || history.length > 0;
+      if (session.childFlyoutId && session.childTitle) {
+        previousSessionItems.push({
+          title: session.childTitle,
+          iconType: session.childIconType,
+          onClick: function onClick() {
+            dispatchFn(goToFlyoutAction(mainFlyoutId, 'main'));
+          }
+        });
+      }
+      var _loop2 = function _loop2() {
+        var entry = history[h];
+        previousSessionItems.push({
+          title: entry.title,
+          iconType: entry.iconType,
+          onClick: function onClick() {
+            dispatchFn(goToFlyoutAction(mainFlyoutId, 'main'));
+            dispatchFn(goToFlyoutAction(entry.flyoutId, 'child'));
+          }
+        });
+      };
+      for (var h = history.length - 1; h >= 0; h--) {
+        _loop2();
+      }
+      if (!hasChildren) {
+        previousSessionItems.push({
+          title: mainTitle,
+          iconType: session.iconType,
+          onClick: function onClick() {
+            dispatchFn(goToFlyoutAction(mainFlyoutId, 'main'));
+          }
+        });
+      }
+    };
+    for (var i = previousSessions.length - 1; i >= 0; i--) {
+      _loop();
+    }
+    return [].concat(_toConsumableArray(childItems), previousSessionItems);
   };
   var dispatch = function dispatch(action) {
     var nextState = flyoutManagerReducer(currentState, action);
@@ -65,7 +120,7 @@ function createStore() {
       // Recompute history items eagerly if sessions changed
       // This ensures stable references and avoids stale closures
       if (nextState.sessions !== previousSessions) {
-        store.historyItems = computeHistoryItems();
+        store.historyItems = computeHistoryItems(dispatch);
 
         // Detect removed sessions and emit CLOSE_SESSION events
         var nextSessionIds = new Set(nextState.sessions.map(function (s) {
@@ -90,8 +145,8 @@ function createStore() {
     subscribe: subscribe,
     subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
-    addFlyout: function addFlyout(flyoutId, title, level, size, minWidth) {
-      return dispatch(addFlyoutAction(flyoutId, title, level, size, minWidth));
+    addFlyout: function addFlyout(flyoutId, title, level, size, iconType, minWidth) {
+      return dispatch(addFlyoutAction(flyoutId, title, level, size, iconType, minWidth));
     },
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch(closeFlyoutAction(flyoutId));
@@ -114,8 +169,8 @@ function createStore() {
     goBack: function goBack() {
       return dispatch(goBackAction());
     },
-    goToFlyout: function goToFlyout(flyoutId) {
-      return dispatch(goToFlyoutAction(flyoutId));
+    goToFlyout: function goToFlyout(flyoutId, level) {
+      return dispatch(goToFlyoutAction(flyoutId, level));
     },
     addUnmanagedFlyout: function addUnmanagedFlyout(flyoutId) {
       return dispatch(addUnmanagedFlyoutAction(flyoutId));
@@ -123,7 +178,7 @@ function createStore() {
     closeUnmanagedFlyout: function closeUnmanagedFlyout(flyoutId) {
       return dispatch(closeUnmanagedFlyoutAction(flyoutId));
     },
-    historyItems: computeHistoryItems() // Initialize with current state
+    historyItems: computeHistoryItems(dispatch) // Initialize with current state
   };
   return store;
 }

package/es/components/flyout/use_flyout_menu.js

@@ -0,0 +1,70 @@
+var _excluded = ["titleId"];
+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; }
+/*
+ * 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.
+ */
+
+import { useGeneratedHtmlId } from '../../services';
+import { MENU_DISPLAY_ALWAYS, MENU_DISPLAY_AUTO } from './const';
+import { useMemo } from 'react';
+import classnames from 'classnames';
+
+/**
+ * @internal
+ */
+
+/**
+ * Hook to manage flyout menu state and rendering logic.
+ * Determines whether the menu should be rendered based on display mode
+ * and menu content, and computes the appropriate aria-labelledby value.
+ *
+ * @internal
+ */
+export var useEuiFlyoutMenu = function useEuiFlyoutMenu(_ref) {
+  var _flyoutMenuProps$hist, _flyoutMenuProps$hist2, _flyoutMenuProps$cust, _flyoutMenuProps$cust2;
+  var _flyoutMenuProps = _ref.flyoutMenuProps,
+    flyoutMenuDisplayMode = _ref.flyoutMenuDisplayMode,
+    _ariaLabelledBy = _ref.ariaLabelledBy;
+  var generatedMenuId = useGeneratedHtmlId();
+  var _ref2 = _flyoutMenuProps || {},
+    _titleId = _ref2.titleId,
+    flyoutMenuProps = _objectWithoutProperties(_ref2, _excluded);
+  var hasMenu = !!_flyoutMenuProps;
+  var flyoutMenuId = useMemo(function () {
+    if (!hasMenu) return undefined;
+    return _titleId || generatedMenuId;
+  }, [hasMenu, _titleId, generatedMenuId]);
+
+  // Determine if the menu has any content
+  // hasBackButton or hasHistory or hasCustomActions or hasVisibleTitle
+  var menuHasContent = hasMenu && (!!flyoutMenuProps.showBackButton || ((_flyoutMenuProps$hist = (_flyoutMenuProps$hist2 = flyoutMenuProps.historyItems) === null || _flyoutMenuProps$hist2 === void 0 ? void 0 : _flyoutMenuProps$hist2.length) !== null && _flyoutMenuProps$hist !== void 0 ? _flyoutMenuProps$hist : 0) > 0 || ((_flyoutMenuProps$cust = (_flyoutMenuProps$cust2 = flyoutMenuProps.customActions) === null || _flyoutMenuProps$cust2 === void 0 ? void 0 : _flyoutMenuProps$cust2.length) !== null && _flyoutMenuProps$cust !== void 0 ? _flyoutMenuProps$cust : 0) > 0 ||
+  // Component defaults to hiding the title, so only explicit false means the title will be visible
+  !!(flyoutMenuProps.title && flyoutMenuProps.hideTitle === false));
+
+  // Determine if the menu should be rendered based on the display mode and menu content
+  var shouldRenderMenu = useMemo(function () {
+    if (!hasMenu) return false;
+    if (flyoutMenuDisplayMode === MENU_DISPLAY_ALWAYS) return true;
+    if (flyoutMenuDisplayMode === MENU_DISPLAY_AUTO) return menuHasContent;
+    return false;
+  }, [hasMenu, flyoutMenuDisplayMode, menuHasContent]);
+
+  // If the flyout menu is to be rendered, ensure the flyout has aria-labelledby referencing the menu's titleId
+  var ariaLabelledBy = useMemo(function () {
+    if (flyoutMenuId && shouldRenderMenu) {
+      return classnames(flyoutMenuId, _ariaLabelledBy);
+    }
+    return _ariaLabelledBy;
+  }, [flyoutMenuId, _ariaLabelledBy, shouldRenderMenu]);
+  return {
+    flyoutMenuId: flyoutMenuId,
+    flyoutMenuProps: flyoutMenuProps,
+    shouldRenderMenu: shouldRenderMenu,
+    ariaLabelledBy: ariaLabelledBy
+  };
+};