@elastic/eui 113.2.1 → 114.0.0

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

@@ -32,6 +32,28 @@ var initialState = exports.initialState = {
   currentZIndex: 0,
   unmanagedFlyouts: []
 };
+var addSessionFlyoutsToRemove = function addSessionFlyoutsToRemove(session, flyoutsToRemove) {
+  var _session$childHistory;
+  flyoutsToRemove.add(session.mainFlyoutId);
+  if (session.childFlyoutId) {
+    flyoutsToRemove.add(session.childFlyoutId);
+  }
+  ((_session$childHistory = session.childHistory) !== null && _session$childHistory !== void 0 ? _session$childHistory : []).forEach(function (e) {
+    return flyoutsToRemove.add(e.flyoutId);
+  });
+};
+var moveHistoryGroupToTop = function moveHistoryGroupToTop(sessions, historyKey) {
+  var groupSessions = [];
+  var otherSessions = [];
+  sessions.forEach(function (session) {
+    if (session.historyKey === historyKey) {
+      groupSessions.push(session);
+    } else {
+      otherSessions.push(session);
+    }
+  });
+  return [].concat(otherSessions, groupSessions);
+};
 
 /**
  * Reducer handling all flyout manager actions and state transitions.
@@ -75,16 +97,21 @@ function flyoutManagerReducer() {
     //   session exists, do nothing (invalid child without a parent).
     case _actions.ACTION_ADD:
       {
+        var _currentSession$child;
         var flyoutId = action.flyoutId,
           title = action.title,
           level = action.level,
           size = action.size,
+          historyKey = action.historyKey,
+          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 === _const.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 = {
@@ -94,13 +121,16 @@ function flyoutManagerReducer() {
           minWidth: minWidth,
           activityStage: _const.STAGE_OPENING
         };
-        var newFlyouts = [].concat((0, _toConsumableArray2.default)(state.flyouts), [newFlyoutState]);
+        var newFlyouts = isIdempotentChild ? state.flyouts : [].concat((0, _toConsumableArray2.default)(state.flyouts), [newFlyoutState]);
         if (level === _const.LEVEL_MAIN) {
           var newSession = {
             mainFlyoutId: flyoutId,
             title: title,
+            iconType: iconType,
             childFlyoutId: null,
-            zIndex: state.currentZIndex
+            childHistory: [],
+            zIndex: state.currentZIndex,
+            historyKey: historyKey !== null && historyKey !== void 0 ? historyKey : Symbol()
           };
           return _objectSpread(_objectSpread({}, state), {}, {
             sessions: [].concat((0, _toConsumableArray2.default)(state.sessions), [newSession]),
@@ -116,8 +146,52 @@ function flyoutManagerReducer() {
         }
         var updatedSessions = (0, _toConsumableArray2.default)(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((0, _toConsumableArray2.default)(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,
@@ -127,10 +201,11 @@ 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 _actions.ACTION_CLOSE:
       {
+        var _owningSession$childH;
         var removedFlyout = state.flyouts.find(function (f) {
           return f.flyoutId === action.flyoutId;
         });
@@ -143,11 +218,15 @@ 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);
             });
@@ -168,43 +247,80 @@ 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 = (0, _toConsumableArray2.default)(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$childHistory2;
+          return session.childFlyoutId === action.flyoutId || ((_session$childHistory2 = session.childHistory) !== null && _session$childHistory2 !== void 0 ? _session$childHistory2 : []).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((0, _toConsumableArray2.default)(((_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 = (0, _toConsumableArray2.default)(state.sessions);
+        _updatedSessions[owningSessionIndex] = _objectSpread(_objectSpread({}, owningSession), {}, {
+          childFlyoutId: null,
+          childTitle: undefined,
+          childIconType: undefined,
+          childHistory: []
+        });
         return _objectSpread(_objectSpread({}, state), {}, {
           sessions: _updatedSessions,
           flyouts: _newFlyouts2
         });
       }
 
-    // Unregister all flyouts.
+    // Unregister all flyouts (within the current history group only).
     case _actions.ACTION_CLOSE_ALL:
       {
         if (state.sessions.length === 0) {
           return state;
         }
+        var _currentSessionIndex = state.sessions.length - 1;
+        var _currentSession = state.sessions[_currentSessionIndex];
+        var currentKey = _currentSession.historyKey;
 
-        // Reset current z-index to 0 only if no unmanaged flyouts remain.
+        // Remove all sessions that have the current historyKey (entire group)
+        var _newSessions = state.sessions.filter(function (s) {
+          return s.historyKey !== currentKey;
+        });
+        var _flyoutsToRemove = new Set();
+        state.sessions.forEach(function (session) {
+          if (session.historyKey === currentKey) {
+            addSessionFlyoutsToRemove(session, _flyoutsToRemove);
+          }
+        });
+        var _newFlyouts3 = state.flyouts.filter(function (f) {
+          return !_flyoutsToRemove.has(f.flyoutId);
+        });
         var _newCurrentZIndex2 = state.currentZIndex;
-        if (state.unmanagedFlyouts.length === 0) {
+        if (_newSessions.length === 0 && state.unmanagedFlyouts.length === 0) {
           _newCurrentZIndex2 = 0;
         }
-        return _objectSpread(_objectSpread({}, initialState), {}, {
-          currentZIndex: _newCurrentZIndex2,
-          unmanagedFlyouts: state.unmanagedFlyouts
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _newSessions,
+          flyouts: _newFlyouts3,
+          currentZIndex: _newCurrentZIndex2
         });
       }
 
@@ -263,59 +379,140 @@ function flyoutManagerReducer() {
         });
       }
 
-    // Go back one session (remove current session from stack)
+    // Go back: pop child history when any, else pop current session (only within same historyKey).
     case _actions.ACTION_GO_BACK:
       {
+        var _currentSession2$chil;
         if (state.sessions.length === 0) {
           return state;
         }
         var _currentSessionIndex3 = state.sessions.length - 1;
-        var currentSession = state.sessions[_currentSessionIndex3];
-
-        // Close all flyouts in the current session
-        var _flyoutsToRemove = new Set([currentSession.mainFlyoutId]);
-        if (currentSession.childFlyoutId) {
-          _flyoutsToRemove.add(currentSession.childFlyoutId);
+        var _currentSession2 = state.sessions[_currentSessionIndex3];
+        var _childHistory = (_currentSession2$chil = _currentSession2.childHistory) !== null && _currentSession2$chil !== void 0 ? _currentSession2$chil : [];
+        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 = (0, _toConsumableArray2.default)(state.sessions);
+          _updatedSessions3[_currentSessionIndex3] = _objectSpread(_objectSpread({}, _currentSession2), {}, {
+            childHistory: newChildHistory,
+            childFlyoutId: popped.flyoutId,
+            childTitle: popped.title,
+            childIconType: popped.iconType
+          });
+          var _newFlyouts4 = state.flyouts.filter(function (f) {
+            return f.flyoutId !== _currentSession2.childFlyoutId;
+          });
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: _updatedSessions3,
+            flyouts: _newFlyouts4
+          });
         }
-        var _newFlyouts3 = state.flyouts.filter(function (f) {
-          return !_flyoutsToRemove.has(f.flyoutId);
+
+        // No child history: pop current session (main + all its children)
+        var _flyoutsToRemove2 = new Set();
+        addSessionFlyoutsToRemove(_currentSession2, _flyoutsToRemove2);
+        var sessionsWithoutCurrent = state.sessions.slice(0, _currentSessionIndex3);
+        var hasRemainingInCurrentGroup = sessionsWithoutCurrent.some(function (s) {
+          return s.historyKey === _currentSession2.historyKey;
+        });
+        var _newSessions2 = hasRemainingInCurrentGroup ? moveHistoryGroupToTop(sessionsWithoutCurrent, _currentSession2.historyKey) : sessionsWithoutCurrent;
+        var _newFlyouts5 = state.flyouts.filter(function (f) {
+          return !_flyoutsToRemove2.has(f.flyoutId);
         });
-        var _newSessions = state.sessions.slice(0, _currentSessionIndex3);
         return _objectSpread(_objectSpread({}, state), {}, {
-          sessions: _newSessions,
-          flyouts: _newFlyouts3
+          sessions: _newSessions2,
+          flyouts: _newFlyouts5
         });
       }
 
-    // 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 _actions.ACTION_GO_TO_FLYOUT:
       {
-        var _flyoutId3 = action.flyoutId;
+        var _flyoutId3 = action.flyoutId,
+          _level = action.level;
+        var _currentSessionIndex4 = state.sessions.length - 1;
+        if (_level === _const.LEVEL_CHILD && state.sessions.length > 0) {
+          var _currentSession3$chil;
+          var _currentSession3 = state.sessions[_currentSessionIndex4];
+          var _childHistory2 = (_currentSession3$chil = _currentSession3.childHistory) !== null && _currentSession3$chil !== void 0 ? _currentSession3$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 _flyoutsToRemove3 = new Set();
+          if (_currentSession3.childFlyoutId) {
+            _flyoutsToRemove3.add(_currentSession3.childFlyoutId);
+          }
+          _childHistory2.slice(targetIndex + 1).forEach(function (e) {
+            _flyoutsToRemove3.add(e.flyoutId);
+          });
+          var _newFlyouts6 = state.flyouts.filter(function (f) {
+            return !_flyoutsToRemove3.has(f.flyoutId);
+          });
+          var _updatedSessions4 = (0, _toConsumableArray2.default)(state.sessions);
+          _updatedSessions4[_currentSessionIndex4] = _objectSpread(_objectSpread({}, _currentSession3), {}, {
+            childHistory: _newChildHistory,
+            childFlyoutId: targetEntry.flyoutId,
+            childTitle: targetEntry.title,
+            childIconType: targetEntry.iconType
+          });
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: _updatedSessions4,
+            flyouts: _newFlyouts6
+          });
+        }
 
-        // 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
         }
+        var _currentSession4 = state.sessions[_currentSessionIndex4];
+        var targetSession = state.sessions[targetSessionIndex];
 
-        // Close all sessions after the target session
+        // Group-local navigation: keep other history groups, remove only newer sessions in target's group,
+        // then bring that group to the top.
+        if (targetSession.historyKey === _currentSession4.historyKey) {
+          var _flyoutsToRemove4 = new Set();
+          var sessionsAfterTargetInGroup = state.sessions.filter(function (session, index) {
+            return index > targetSessionIndex && session.historyKey === targetSession.historyKey;
+          });
+          sessionsAfterTargetInGroup.forEach(function (session) {
+            addSessionFlyoutsToRemove(session, _flyoutsToRemove4);
+          });
+          var sessionsWithoutRemoved = state.sessions.filter(function (session) {
+            return !sessionsAfterTargetInGroup.some(function (removed) {
+              return removed.mainFlyoutId === session.mainFlyoutId;
+            });
+          });
+          var reorderedSessions = moveHistoryGroupToTop(sessionsWithoutRemoved, targetSession.historyKey);
+          var _newFlyouts7 = state.flyouts.filter(function (f) {
+            return !_flyoutsToRemove4.has(f.flyoutId);
+          });
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: reorderedSessions,
+            flyouts: _newFlyouts7
+          });
+        }
         var sessionsToClose = state.sessions.slice(targetSessionIndex + 1);
-        var _flyoutsToRemove2 = new Set();
+        var _flyoutsToRemove5 = new Set();
         sessionsToClose.forEach(function (session) {
-          _flyoutsToRemove2.add(session.mainFlyoutId);
-          if (session.childFlyoutId) {
-            _flyoutsToRemove2.add(session.childFlyoutId);
-          }
+          addSessionFlyoutsToRemove(session, _flyoutsToRemove5);
         });
-        var _newFlyouts4 = state.flyouts.filter(function (f) {
-          return !_flyoutsToRemove2.has(f.flyoutId);
+        var _newFlyouts8 = state.flyouts.filter(function (f) {
+          return !_flyoutsToRemove5.has(f.flyoutId);
         });
-        var _newSessions2 = state.sessions.slice(0, targetSessionIndex + 1);
+        var _newSessions3 = state.sessions.slice(0, targetSessionIndex + 1);
         return _objectSpread(_objectSpread({}, state), {}, {
-          sessions: _newSessions2,
-          flyouts: _newFlyouts4
+          sessions: _newSessions3,
+          flyouts: _newFlyouts8
         });
       }
 

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

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports._resetFlyoutManagerStore = _resetFlyoutManagerStore;
 exports.getFlyoutManagerStore = getFlyoutManagerStore;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _actions = require("./actions");
 var _reducer = require("./reducer");
 /*
@@ -48,19 +50,75 @@ 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;
+    if (!currentSession) {
+      return [];
+    }
     var previousSessions = currentState.sessions.slice(0, currentSessionIndex);
-    return previousSessions.reverse().map(function (_ref) {
-      var title = _ref.title,
-        mainFlyoutId = _ref.mainFlyoutId;
+    // Only include sessions in the same history group (same historyKey reference)
+    var previousSessionsInGroup = previousSessions.filter(function (session) {
+      return session.historyKey === currentSession.historyKey;
+    });
+    var childHistory = (_currentSession$child = currentSession.childHistory) !== null && _currentSession$child !== void 0 ? _currentSession$child : [];
+    var childItems = (0, _toConsumableArray2.default)(childHistory).reverse().map(function (entry) {
       return {
-        title: title,
+        title: entry.title,
+        iconType: entry.iconType,
         onClick: function onClick() {
-          store.dispatch((0, _actions.goToFlyout)(mainFlyoutId));
+          dispatchFn((0, _actions.goToFlyout)(entry.flyoutId, 'child'));
         }
       };
     });
+
+    // Previous sessions (same group): list each session's current child then its child history
+    var previousSessionItems = [];
+    var _loop = function _loop() {
+      var _session$childHistory;
+      var session = previousSessionsInGroup[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((0, _actions.goToFlyout)(mainFlyoutId, 'main'));
+          }
+        });
+      }
+      var _loop2 = function _loop2() {
+        var entry = history[h];
+        previousSessionItems.push({
+          title: entry.title,
+          iconType: entry.iconType,
+          onClick: function onClick() {
+            dispatchFn((0, _actions.goToFlyout)(mainFlyoutId, 'main'));
+            dispatchFn((0, _actions.goToFlyout)(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((0, _actions.goToFlyout)(mainFlyoutId, 'main'));
+          }
+        });
+      }
+    };
+    for (var i = previousSessionsInGroup.length - 1; i >= 0; i--) {
+      _loop();
+    }
+    return [].concat((0, _toConsumableArray2.default)(childItems), previousSessionItems);
   };
   var dispatch = function dispatch(action) {
     var nextState = (0, _reducer.flyoutManagerReducer)(currentState, action);
@@ -71,7 +129,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) {
@@ -96,8 +154,8 @@ function createStore() {
     subscribe: subscribe,
     subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
-    addFlyout: function addFlyout(flyoutId, title, level, size, minWidth) {
-      return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size, minWidth));
+    addFlyout: function addFlyout(flyoutId, title, level, size, historyKey, iconType, minWidth) {
+      return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size, historyKey, iconType, minWidth));
     },
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch((0, _actions.closeFlyout)(flyoutId));
@@ -120,8 +178,8 @@ function createStore() {
     goBack: function goBack() {
       return dispatch((0, _actions.goBack)());
     },
-    goToFlyout: function goToFlyout(flyoutId) {
-      return dispatch((0, _actions.goToFlyout)(flyoutId));
+    goToFlyout: function goToFlyout(flyoutId, level) {
+      return dispatch((0, _actions.goToFlyout)(flyoutId, level));
     },
     addUnmanagedFlyout: function addUnmanagedFlyout(flyoutId) {
       return dispatch((0, _actions.addUnmanagedFlyout)(flyoutId));
@@ -129,7 +187,7 @@ function createStore() {
     closeUnmanagedFlyout: function closeUnmanagedFlyout(flyoutId) {
       return dispatch((0, _actions.closeUnmanagedFlyout)(flyoutId));
     },
-    historyItems: computeHistoryItems() // Initialize with current state
+    historyItems: computeHistoryItems(dispatch) // Initialize with current state
   };
   return store;
 }

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiFlyoutMenu = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _services = require("../../services");
+var _const = require("./const");
+var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _excluded = ["titleId"];
+/*
+ * 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.
+ */
+/**
+ * @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
+ */
+var useEuiFlyoutMenu = exports.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 = (0, _services.useGeneratedHtmlId)();
+  var _ref2 = _flyoutMenuProps || {},
+    _titleId = _ref2.titleId,
+    flyoutMenuProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var hasMenu = !!_flyoutMenuProps;
+  var flyoutMenuId = (0, _react.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 = (0, _react.useMemo)(function () {
+    if (!hasMenu) return false;
+    if (flyoutMenuDisplayMode === _const.MENU_DISPLAY_ALWAYS) return true;
+    if (flyoutMenuDisplayMode === _const.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 = (0, _react.useMemo)(function () {
+    if (flyoutMenuId && shouldRenderMenu) {
+      return (0, _classnames.default)(flyoutMenuId, _ariaLabelledBy);
+    }
+    return _ariaLabelledBy;
+  }, [flyoutMenuId, _ariaLabelledBy, shouldRenderMenu]);
+  return {
+    flyoutMenuId: flyoutMenuId,
+    flyoutMenuProps: flyoutMenuProps,
+    shouldRenderMenu: shouldRenderMenu,
+    ariaLabelledBy: ariaLabelledBy
+  };
+};