@elastic/eui 113.3.0 → 114.1.0

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

@@ -69,9 +69,9 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     push: {
       push: /*#__PURE__*/css("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
       right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thick), ";;label:right;"),
-      left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thick), ";;label:left;"),
-      noAnimation: _ref
+      left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thick), ";;label:left;")
     },
+    noAnimation: _ref,
     // Padding
     paddingSizes: {
       none: /*#__PURE__*/css(composeFlyoutPadding(euiThemeContext, 'none'), ";;label:none;"),

package/optimize/es/components/flyout/flyout_menu.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
-var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions"];
+var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions", "iconType"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -107,6 +107,7 @@ export var EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
     showBackButton = _ref2.showBackButton,
     backButtonProps = _ref2.backButtonProps,
     customActions = _ref2.customActions,
+    _iconType = _ref2.iconType,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useContext = useContext(EuiFlyoutMenuContext),
     onClose = _useContext.onClose;

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

@@ -69,19 +69,22 @@ export var ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFly
  * - `title` is used for the flyout menu.
  * - `level` determines whether the flyout is `main` or `child`.
  * - Optional `size` is the named EUI size (e.g. `s`, `m`, `l`).
+ * - Optional `historyKey` (Symbol) scopes history; only flyouts with the same reference share Back/history. Omit for a unique group per session.
  * - Optional `iconType` is shown next to the session title in the history menu.
  */
 export var addFlyout = function addFlyout(flyoutId, title) {
   var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : LEVEL_MAIN;
   var size = arguments.length > 3 ? arguments[3] : undefined;
-  var iconType = arguments.length > 4 ? arguments[4] : undefined;
-  var minWidth = arguments.length > 5 ? arguments[5] : undefined;
+  var historyKey = arguments.length > 4 ? arguments[4] : undefined;
+  var iconType = arguments.length > 5 ? arguments[5] : undefined;
+  var minWidth = arguments.length > 6 ? arguments[6] : undefined;
   return {
     type: ACTION_ADD,
     flyoutId: flyoutId,
     title: title,
     level: level,
     size: size,
+    historyKey: historyKey,
     iconType: iconType,
     minWidth: minWidth
   };

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

@@ -10,6 +10,24 @@ import { useCallback, useEffect, useRef } from 'react';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_MAIN, STAGE_ACTIVE, STAGE_BACKGROUNDED, STAGE_BACKGROUNDING, STAGE_CLOSING, STAGE_INACTIVE, STAGE_OPENING, STAGE_RETURNING } from './const';
 import { setActivityStage } from './actions';
 import { useFlyoutManager } from './provider';
+/**
+ * Returns the final stage after an animation completes.
+ * OPENING/RETURNING -> ACTIVE; CLOSING -> INACTIVE; BACKGROUNDING -> BACKGROUNDED.
+ */
+var getNextStage = function getNextStage(stage) {
+  switch (stage) {
+    case STAGE_OPENING:
+    case STAGE_RETURNING:
+      return STAGE_ACTIVE;
+    case STAGE_CLOSING:
+      return STAGE_INACTIVE;
+    case STAGE_BACKGROUNDING:
+      return STAGE_BACKGROUNDED;
+    default:
+      return null;
+  }
+};
+
 /**
  * Encapsulates all activity-stage transitions and animation-driven updates
  * for managed flyouts.
@@ -21,7 +39,9 @@ import { useFlyoutManager } from './provider';
 export var useFlyoutActivityStage = function useFlyoutActivityStage(_ref) {
   var _sessions, _state$sessions$find, _state$layoutMode, _state$flyouts$find;
   var flyoutId = _ref.flyoutId,
-    level = _ref.level;
+    level = _ref.level,
+    _ref$shouldAnimate = _ref.shouldAnimate,
+    shouldAnimate = _ref$shouldAnimate === void 0 ? false : _ref$shouldAnimate;
   var ctx = useFlyoutManager();
   var state = ctx === null || ctx === void 0 ? void 0 : ctx.state;
 
@@ -41,64 +61,46 @@ export var useFlyoutActivityStage = function useFlyoutActivityStage(_ref) {
   if (stageRef.current !== stage) {
     stageRef.current = stage;
   }
+  var transitionTo = useCallback(function (nextStage) {
+    var _ctx$dispatch;
+    ctx === null || ctx === void 0 || (_ctx$dispatch = ctx.dispatch) === null || _ctx$dispatch === void 0 || _ctx$dispatch.call(ctx, setActivityStage(flyoutId, nextStage));
+    stageRef.current = nextStage;
+  }, [ctx, flyoutId]);
 
   /**
-   * 1. ACTIVE -> CLOSING when no longer the active flyout.
-   * 2. INACTIVE -> RETURNING when it becomes active again (e.g., reopened or brought forward).
-   * 3. (Main flyout only) ACTIVE + stacked + has child -> BACKGROUNDING (begin background animation).
-   * 4. (Main only) BACKGROUNDED/BACKGROUNDING + (child gone OR side-by-side) -> RETURNING (bring main to foreground).
-   *
-   * Any stages that depend on animation end (OPENING, RETURNING, CLOSING, BACKGROUNDING) are finalized in `onAnimationEnd`.
+   * 1. ACTIVE -> CLOSING (or INACTIVE when !shouldAnimate) when no longer the active flyout.
+   * 2. INACTIVE -> RETURNING (or ACTIVE when !shouldAnimate) when it becomes active again.
+   * 3. (Main only) ACTIVE + stacked + has child -> BACKGROUNDING (or BACKGROUNDED when !shouldAnimate).
+   * 4. (Main only) BACKGROUNDED/BACKGROUNDING + (child gone OR side-by-side) -> RETURNING (or ACTIVE when !shouldAnimate).
    */
   useEffect(function () {
     var s = stageRef.current;
     var next = null;
-    if (s === STAGE_ACTIVE && !isActive) next = STAGE_CLOSING;else if (s === STAGE_INACTIVE && isActive) {
-      next = STAGE_RETURNING;
-    } else if (level === LEVEL_MAIN && isActive && s === STAGE_ACTIVE && hasChild && layoutMode === LAYOUT_MODE_STACKED) next = STAGE_BACKGROUNDING;else if (level === LEVEL_MAIN && (s === STAGE_BACKGROUNDED || s === STAGE_BACKGROUNDING) && (!hasChild || layoutMode === LAYOUT_MODE_SIDE_BY_SIDE)) next = STAGE_RETURNING;
-    if (next && next !== s) {
-      var _ctx$dispatch;
-      ctx === null || ctx === void 0 || (_ctx$dispatch = ctx.dispatch) === null || _ctx$dispatch === void 0 || _ctx$dispatch.call(ctx, setActivityStage(flyoutId, next));
-      stageRef.current = next;
+    if (s === STAGE_ACTIVE && !isActive) {
+      next = shouldAnimate ? STAGE_CLOSING : STAGE_INACTIVE;
+    } else if (s === STAGE_INACTIVE && isActive) {
+      next = shouldAnimate ? STAGE_RETURNING : STAGE_ACTIVE;
+    } else if (level === LEVEL_MAIN && isActive && s === STAGE_ACTIVE && hasChild && layoutMode === LAYOUT_MODE_STACKED) {
+      next = shouldAnimate ? STAGE_BACKGROUNDING : STAGE_BACKGROUNDED;
+    } else if (level === LEVEL_MAIN && (s === STAGE_BACKGROUNDED || s === STAGE_BACKGROUNDING) && (!hasChild || layoutMode === LAYOUT_MODE_SIDE_BY_SIDE)) {
+      next = shouldAnimate ? STAGE_RETURNING : STAGE_ACTIVE;
     }
-  }, [isActive, hasChild, layoutMode, level, ctx, flyoutId, stage]);
-
-  /**
-   * Get the stage to transition to for given current stage.
-   * Returns `null` if stage should remain unchanged.
-   *
-   * Stage transitions:
-   *  - OPENING / RETURNING -> ACTIVE
-   *  - CLOSING -> INACTIVE
-   *  - BACKGROUNDING -> BACKGROUNDED
-   */
-  var getNextStage = function getNextStage(stage) {
-    switch (stage) {
-      case STAGE_OPENING:
-      case STAGE_RETURNING:
-        return STAGE_ACTIVE;
-      case STAGE_CLOSING:
-        return STAGE_INACTIVE;
-      case STAGE_BACKGROUNDING:
-        return STAGE_BACKGROUNDED;
+    if (next && next !== s) {
+      transitionTo(next);
     }
-    return null;
-  };
+  }, [isActive, hasChild, layoutMode, level, shouldAnimate, transitionTo, stage]);
 
   /**
-   * onAnimationEnd event handler that must be passed to EuiFlyout.
-   * It handles transitions between stages and updates activity stage
-   * in EuiFlyoutManagerContext.
+   * onAnimationEnd: browser signal when a CSS animation completes.
+   * Calls transitionTo to move to the final stage (e.g. CLOSING -> INACTIVE).
    */
   var onAnimationEnd = useCallback(function () {
     var currentStage = stageRef.current;
     var nextStage = getNextStage(currentStage);
     if (nextStage && nextStage !== currentStage) {
-      var _ctx$dispatch2;
-      ctx === null || ctx === void 0 || (_ctx$dispatch2 = ctx.dispatch) === null || _ctx$dispatch2 === void 0 || _ctx$dispatch2.call(ctx, setActivityStage(flyoutId, nextStage));
-      stageRef.current = nextStage;
+      transitionTo(nextStage);
     }
-  }, [ctx, flyoutId]);
+  }, [transitionTo]);
   return {
     activityStage: stage,
     onAnimationEnd: onAnimationEnd

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

@@ -2,9 +2,10 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "onClose", "onActive", "level", "size", "minWidth", "css", "flyoutMenuProps"];
+var _excluded = ["id", "onClose", "onActive", "level", "size", "minWidth", "historyKey", "css", "flyoutMenuProps"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,6 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import { css } from '@emotion/react';
 import { flushSync } from 'react-dom';
 import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
 import { useEuiI18n } from '../../i18n';
@@ -50,17 +52,26 @@ var useFlyoutManager = function useFlyoutManager() {
  * - width tracking for responsive layouts
  * - lifecycle stage transitions and data attributes for styling
  */
-export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _managerSessions, _managerState$layoutM, _managerState$flyouts, _managerState$session, _managerState$flyouts2;
-  var id = _ref.id,
-    onCloseProp = _ref.onClose,
-    onActiveProp = _ref.onActive,
-    level = _ref.level,
-    sizeProp = _ref.size,
-    minWidth = _ref.minWidth,
-    customCss = _ref.css,
-    _flyoutMenuProps = _ref.flyoutMenuProps,
-    props = _objectWithoutProperties(_ref, _excluded);
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1wrw3pf-EuiManagedFlyout",
+  styles: "animation-duration:0s!important;label:EuiManagedFlyout;"
+} : {
+  name: "1wrw3pf-EuiManagedFlyout",
+  styles: "animation-duration:0s!important;label:EuiManagedFlyout;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var _managerSessions, _managerState$layoutM, _managerState$flyouts, _managerState$session, _managerState$flyouts2, _managerSessions$leng, _session$childHistory, _session$childHistory2;
+  var id = _ref2.id,
+    onCloseProp = _ref2.onClose,
+    onActiveProp = _ref2.onActive,
+    level = _ref2.level,
+    sizeProp = _ref2.size,
+    minWidth = _ref2.minWidth,
+    historyKey = _ref2.historyKey,
+    customCss = _ref2.css,
+    _flyoutMenuProps = _ref2.flyoutMenuProps,
+    props = _objectWithoutProperties(_ref2, _excluded);
   var flyoutId = useFlyoutId(id);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -96,6 +107,9 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var parentSize = session !== null && session !== void 0 && session.mainFlyoutId ? managerState === null || managerState === void 0 || (_managerState$flyouts2 = managerState.flyouts.find(function (f) {
     return f.flyoutId === session.mainFlyoutId;
   })) === null || _managerState$flyouts2 === void 0 ? void 0 : _managerState$flyouts2.size : undefined;
+
+  // Animate opening only for the first main flyout (sole session) or first child (no prior child in session).
+  var shouldAnimateOpening = level === LEVEL_MAIN ? ((_managerSessions$leng = managerSessions === null || managerSessions === void 0 ? void 0 : managerSessions.length) !== null && _managerSessions$leng !== void 0 ? _managerSessions$leng : 0) <= 1 && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId) === flyoutId : ((_session$childHistory = session === null || session === void 0 || (_session$childHistory2 = session.childHistory) === null || _session$childHistory2 === void 0 ? void 0 : _session$childHistory2.length) !== null && _session$childHistory !== void 0 ? _session$childHistory : 0) === 0;
   var styles = useEuiMemoizedStyles(euiManagedFlyoutStyles);
 
   // Set default size based on level: main defaults to 'm', child defaults to 's'
@@ -156,7 +170,7 @@ 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, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, typeof minWidth === 'number' ? minWidth : undefined);
+    addFlyout(flyoutId, title, level, size, level === LEVEL_MAIN ? historyKey : undefined, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, typeof minWidth === 'number' ? minWidth : undefined);
     return function () {
       var currentStoreState = getFlyoutManagerStore().getState();
       var stillInStore = currentStoreState.flyouts.some(function (f) {
@@ -172,7 +186,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
       wasRegisteredRef.current = false;
     };
-  }, [flyoutId, title, level, size, minWidth, _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, 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
@@ -232,7 +246,8 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [flyoutId, level, isActive, width, setFlyoutWidth]);
   var _useFlyoutActivitySta = useFlyoutActivityStage({
       flyoutId: flyoutId,
-      level: level
+      level: level,
+      shouldAnimate: false
     }),
     activityStage = _useFlyoutActivitySta.activityStage,
     onAnimationEnd = _useFlyoutActivitySta.onAnimationEnd;
@@ -263,7 +278,9 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, ___EmotionJSX(EuiFlyoutComponent, _extends({
     id: flyoutId,
     ref: combinedRef,
-    css: [styles.managedFlyout, customCss, styles.stage(activityStage, props.side, level), ";label:EuiManagedFlyout;"]
+    css: [styles.managedFlyout, customCss, styles.stage(activityStage, props.side, level),
+    // Suppress EuiFlyout's built-in opening animation for non-initial flyouts.
+    !shouldAnimateOpening && _ref, ";label:EuiManagedFlyout;"]
   }, _objectSpread(_objectSpread({}, props), {}, _defineProperty(_defineProperty(_defineProperty({
     onClose: onClose,
     size: size,

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -9,7 +7,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 
-import { css, keyframes } from '@emotion/react';
+import { css } from '@emotion/react';
 import { euiCanAnimate, logicalCSS } from '../../../global_styling';
 import { LEVEL_MAIN, STAGE_ACTIVE, STAGE_BACKGROUNDED, STAGE_BACKGROUNDING, STAGE_CLOSING, STAGE_INACTIVE, STAGE_OPENING, STAGE_RETURNING } from './const';
 import { DEFAULT_SIDE } from '../const';
@@ -32,16 +30,6 @@ export var euiManagedFlyoutStyles = function euiManagedFlyoutStyles(euiThemeCont
     stage: function stage(activeStage) {
       var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SIDE;
       var level = arguments.length > 2 ? arguments[2] : undefined;
-      // Animation for moving flyout backwards in 3D space (z-axis) when inactive
-      var euiFlyoutSlideBack3D = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        from {\n          transform: translateZ(0) translateX(0) scale(1);\n          filter: blur(0px);\n          opacity: 1;\n        }\n        to {\n          transform: translateZ(-1500px) translateX(", ") scale(0.5);\n          filter: blur(3px);\n          opacity: 0.6;\n        }\n      "])), side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)');
-
-      // Animation for bringing flyout forward from 3D space when transitioning to active
-      var euiFlyoutSlideForward3D = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        from {\n          transform: translateZ(-500px) translateX(", ") scale(0.85);\n          filter: blur(3px);\n          opacity: 0.6;\n        }\n        to {\n          transform: translateZ(0) translateX(0) scale(1);\n          filter: blur(0px);\n          opacity: 1;\n        }\n      "])), side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)');
-      // When flyout is becoming inactive, animate backwards in 3D space
-      var inactiveTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:", euiFlyoutSlideBack3D, " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.resistance, " forwards;pointer-events:none;};label:inactiveTransition;");
-
-      // When flyout is becoming active from a backgrounded state, animate forward in 3D space
-      var returningTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:", euiFlyoutSlideForward3D, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;};label:returningTransition;");
       var noTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:none;opacity:1;};label:noTransition;");
       var activeFlyout = /*#__PURE__*/css("z-index:", parseInt(euiTheme.levels.flyout) + 1, ";pointer-events:auto;;label:activeFlyout;");
       var inactiveFlyout = /*#__PURE__*/css(side === 'left' ? logicalCSS('right', '100vw') : logicalCSS('left', '100vw'), " transform:translateX(", side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)', ");;label:inactiveFlyout;");
@@ -53,15 +41,15 @@ export var euiManagedFlyoutStyles = function euiManagedFlyoutStyles(euiThemeCont
         case STAGE_ACTIVE:
           return [activeFlyout, noTransition];
         case STAGE_BACKGROUNDING:
-          return [inactiveTransition];
+          return [inactiveFlyout, noTransition];
         case STAGE_BACKGROUNDED:
           return [inactiveFlyout, noTransition];
         case STAGE_RETURNING:
-          return [activeFlyout, returningTransition];
+          return [activeFlyout, noTransition];
         case STAGE_INACTIVE:
           return [inactiveFlyout, noTransition];
         case STAGE_CLOSING:
-          return [inactiveTransition];
+          return [inactiveFlyout, noTransition];
       }
     },
     managedFlyout: _ref

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

@@ -26,6 +26,28 @@ export var 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.
@@ -74,6 +96,7 @@ export function flyoutManagerReducer() {
           title = action.title,
           level = action.level,
           size = action.size,
+          historyKey = action.historyKey,
           iconType = action.iconType,
           minWidth = action.minWidth;
         var isDuplicate = state.flyouts.some(function (f) {
@@ -100,7 +123,8 @@ export function flyoutManagerReducer() {
             iconType: iconType,
             childFlyoutId: null,
             childHistory: [],
-            zIndex: state.currentZIndex
+            zIndex: state.currentZIndex,
+            historyKey: historyKey !== null && historyKey !== void 0 ? historyKey : Symbol()
           };
           return _objectSpread(_objectSpread({}, state), {}, {
             sessions: [].concat(_toConsumableArray(state.sessions), [newSession]),
@@ -227,8 +251,8 @@ export function flyoutManagerReducer() {
           });
         }
         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) {
+          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;
           });
         });
@@ -260,21 +284,37 @@ export function flyoutManagerReducer() {
         });
       }
 
-    // Unregister all flyouts.
+    // Unregister all flyouts (within the current history group only).
     case 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
         });
       }
 
@@ -286,8 +326,8 @@ export function flyoutManagerReducer() {
           return state;
         }
         var _updatedSessions2 = _toConsumableArray(state.sessions);
-        var _currentSessionIndex = _updatedSessions2.length - 1;
-        _updatedSessions2[_currentSessionIndex] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex]), {}, {
+        var _currentSessionIndex2 = _updatedSessions2.length - 1;
+        _updatedSessions2[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex2]), {}, {
           childFlyoutId: action.flyoutId
         });
         return _objectSpread(_objectSpread({}, state), {}, {
@@ -333,51 +373,50 @@ export function flyoutManagerReducer() {
         });
       }
 
-    // Go back: pop child history when any, else pop current session
+    // Go back: pop child history when any, else pop current session (only within same historyKey).
     case ACTION_GO_BACK:
       {
-        var _currentSession$child3, _currentSession$child4;
+        var _currentSession2$chil;
         if (state.sessions.length === 0) {
           return state;
         }
-        var _currentSessionIndex2 = state.sessions.length - 1;
-        var _currentSession = state.sessions[_currentSessionIndex2];
-        var _childHistory = (_currentSession$child3 = _currentSession.childHistory) !== null && _currentSession$child3 !== void 0 ? _currentSession$child3 : [];
+        var _currentSessionIndex3 = state.sessions.length - 1;
+        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 = _toConsumableArray(state.sessions);
-          _updatedSessions3[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _currentSession), {}, {
+          _updatedSessions3[_currentSessionIndex3] = _objectSpread(_objectSpread({}, _currentSession2), {}, {
             childHistory: newChildHistory,
             childFlyoutId: popped.flyoutId,
             childTitle: popped.title,
             childIconType: popped.iconType
           });
-          var _newFlyouts3 = state.flyouts.filter(function (f) {
-            return f.flyoutId !== _currentSession.childFlyoutId;
+          var _newFlyouts4 = state.flyouts.filter(function (f) {
+            return f.flyoutId !== _currentSession2.childFlyoutId;
           });
           return _objectSpread(_objectSpread({}, state), {}, {
             sessions: _updatedSessions3,
-            flyouts: _newFlyouts3
+            flyouts: _newFlyouts4
           });
         }
 
         // No child history: pop current session (main + all its children)
-        var _flyoutsToRemove = new Set([_currentSession.mainFlyoutId]);
-        if (_currentSession.childFlyoutId) {
-          _flyoutsToRemove.add(_currentSession.childFlyoutId);
-        }
-        ((_currentSession$child4 = _currentSession.childHistory) !== null && _currentSession$child4 !== void 0 ? _currentSession$child4 : []).forEach(function (e) {
-          return _flyoutsToRemove.add(e.flyoutId);
+        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 _newFlyouts4 = state.flyouts.filter(function (f) {
-          return !_flyoutsToRemove.has(f.flyoutId);
+        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, _currentSessionIndex2);
         return _objectSpread(_objectSpread({}, state), {}, {
-          sessions: _newSessions,
-          flyouts: _newFlyouts4
+          sessions: _newSessions2,
+          flyouts: _newFlyouts5
         });
       }
 
@@ -386,11 +425,11 @@ export function flyoutManagerReducer() {
       {
         var _flyoutId3 = action.flyoutId,
           _level = action.level;
-        var _currentSessionIndex3 = state.sessions.length - 1;
+        var _currentSessionIndex4 = 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 _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;
           });
@@ -399,18 +438,18 @@ export function flyoutManagerReducer() {
           }
           var targetEntry = _childHistory2[targetIndex];
           var _newChildHistory = _childHistory2.slice(0, targetIndex);
-          var _flyoutsToRemove2 = new Set();
-          if (_currentSession2.childFlyoutId) {
-            _flyoutsToRemove2.add(_currentSession2.childFlyoutId);
+          var _flyoutsToRemove3 = new Set();
+          if (_currentSession3.childFlyoutId) {
+            _flyoutsToRemove3.add(_currentSession3.childFlyoutId);
           }
           _childHistory2.slice(targetIndex + 1).forEach(function (e) {
-            _flyoutsToRemove2.add(e.flyoutId);
+            _flyoutsToRemove3.add(e.flyoutId);
           });
-          var _newFlyouts5 = state.flyouts.filter(function (f) {
-            return !_flyoutsToRemove2.has(f.flyoutId);
+          var _newFlyouts6 = state.flyouts.filter(function (f) {
+            return !_flyoutsToRemove3.has(f.flyoutId);
           });
           var _updatedSessions4 = _toConsumableArray(state.sessions);
-          _updatedSessions4[_currentSessionIndex3] = _objectSpread(_objectSpread({}, _currentSession2), {}, {
+          _updatedSessions4[_currentSessionIndex4] = _objectSpread(_objectSpread({}, _currentSession3), {}, {
             childHistory: _newChildHistory,
             childFlyoutId: targetEntry.flyoutId,
             childTitle: targetEntry.title,
@@ -418,7 +457,7 @@ export function flyoutManagerReducer() {
           });
           return _objectSpread(_objectSpread({}, state), {}, {
             sessions: _updatedSessions4,
-            flyouts: _newFlyouts5
+            flyouts: _newFlyouts6
           });
         }
 
@@ -429,25 +468,45 @@ export function flyoutManagerReducer() {
         if (targetSessionIndex === -1) {
           return state; // Target flyout not found
         }
+        var _currentSession4 = state.sessions[_currentSessionIndex4];
+        var targetSession = state.sessions[targetSessionIndex];
+
+        // 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 _flyoutsToRemove3 = new Set();
+        var _flyoutsToRemove5 = new Set();
         sessionsToClose.forEach(function (session) {
-          var _session$childHistory2;
-          _flyoutsToRemove3.add(session.mainFlyoutId);
-          if (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);
-          });
+          addSessionFlyoutsToRemove(session, _flyoutsToRemove5);
         });
-        var _newFlyouts6 = state.flyouts.filter(function (f) {
-          return !_flyoutsToRemove3.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: _newFlyouts6
+          sessions: _newSessions3,
+          flyouts: _newFlyouts8
         });
       }