@elastic/eui 110.0.0 → 111.0.0

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

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = exports.getWidthFromSize = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _services = require("../../../services");
+var _actions = require("./actions");
+var _selectors = require("./selectors");
+var _hooks = require("./hooks");
+var _const = require("./const");
+/*
+ * 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.
+ */
+
+/**
+ * Hook to handle responsive layout mode for managed flyouts.
+ * Decides whether to place flyouts side-by-side or stacked based on
+ * viewport width and flyout widths/sizes.
+ */
+var useApplyFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
+  var _context$state;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var context = (0, _hooks.useFlyoutManager)();
+  var currentSession = (0, _selectors.useCurrentSession)();
+  var parentFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId;
+  var childFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId;
+  var parentFlyout = (0, _selectors.useCurrentMainFlyout)();
+  var childFlyout = (0, _selectors.useCurrentChildFlyout)();
+  var parentWidth = (0, _selectors.useFlyoutWidth)(parentFlyoutId);
+  var childWidth = (0, _selectors.useFlyoutWidth)(childFlyoutId);
+  var hasFlyouts = Boolean(parentFlyoutId);
+  var _useState = (0, _react.useState)(typeof window !== 'undefined' ? window.innerWidth : Infinity),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    windowWidth = _useState2[0],
+    setWindowWidth = _useState2[1];
+
+  // Extract specific context values
+  var dispatch = context === null || context === void 0 ? void 0 : context.dispatch;
+  var currentLayoutMode = context === null || context === void 0 || (_context$state = context.state) === null || _context$state === void 0 ? void 0 : _context$state.layoutMode;
+  var setMode = (0, _react.useCallback)(function (layoutMode) {
+    if (dispatch) {
+      dispatch((0, _actions.setLayoutMode)(layoutMode));
+    }
+  }, [dispatch]);
+  (0, _react.useEffect)(function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    var rafId = 0;
+    var handleResize = function handleResize() {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(function () {
+        return setWindowWidth(window.innerWidth);
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // Calculate the desired layout mode
+  var desiredLayoutMode = (0, _react.useMemo)(function () {
+    // Skip calculation if no flyouts open
+    if (!hasFlyouts) {
+      return null;
+    }
+
+    // Thresholds to prevent thrashing near the breakpoint.
+    var THRESHOLD_TO_SIDE_BY_SIDE = 85;
+    var THRESHOLD_TO_STACKED = 95;
+
+    // If the window is too small, set the mode to stacked.
+    //
+    // The value is based on the maximum width of a flyout in
+    // `composeFlyoutSizing` in `flyout.styles.ts` multiplied
+    // by 2 (open flyouts side-by-side).
+    if (windowWidth < Math.round(euiTheme.breakpoint.s * 1.4)) {
+      return _const.LAYOUT_MODE_STACKED;
+    }
+    if (!childFlyoutId) {
+      return _const.LAYOUT_MODE_SIDE_BY_SIDE;
+    }
+    var parentWidthValue = parentWidth;
+    var childWidthValue = childWidth;
+    if (!parentWidthValue && parentFlyout !== null && parentFlyout !== void 0 && parentFlyout.size) {
+      parentWidthValue = getWidthFromSize(parentFlyout.size);
+    }
+    if (!childWidthValue && childFlyout !== null && childFlyout !== void 0 && childFlyout.size) {
+      childWidthValue = getWidthFromSize(childFlyout.size);
+    }
+    if (!parentWidthValue || !childWidthValue) {
+      return _const.LAYOUT_MODE_SIDE_BY_SIDE;
+    }
+    var combinedWidth = parentWidthValue + childWidthValue;
+    var combinedWidthPercentage = combinedWidth / windowWidth * 100;
+
+    // Handle fill size flyouts: keep layout as side-by-side when fill flyout is present
+    // This allows fill flyouts to dynamically calculate their width based on the other in the pair
+    if ((parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size) === 'fill' || (childFlyout === null || childFlyout === void 0 ? void 0 : childFlyout.size) === 'fill') {
+      // For fill flyouts, we want to maintain side-by-side layout to enable dynamic width calculation
+      // Only stack if the viewport is too small (below the small breakpoint)
+      if (windowWidth >= Math.round(euiTheme.breakpoint.s * 1.4)) {
+        return _const.LAYOUT_MODE_SIDE_BY_SIDE;
+      }
+    }
+    if (currentLayoutMode === _const.LAYOUT_MODE_STACKED) {
+      return combinedWidthPercentage <= THRESHOLD_TO_SIDE_BY_SIDE ? _const.LAYOUT_MODE_SIDE_BY_SIDE : _const.LAYOUT_MODE_STACKED;
+    } else {
+      return combinedWidthPercentage >= THRESHOLD_TO_STACKED ? _const.LAYOUT_MODE_STACKED : _const.LAYOUT_MODE_SIDE_BY_SIDE;
+    }
+  }, [hasFlyouts, windowWidth, euiTheme, childFlyoutId, parentWidth, childWidth, parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size, childFlyout === null || childFlyout === void 0 ? void 0 : childFlyout.size, currentLayoutMode]);
+
+  // Apply the desired layout mode
+  (0, _react.useEffect)(function () {
+    if (desiredLayoutMode && currentLayoutMode !== desiredLayoutMode) {
+      setMode(desiredLayoutMode);
+    }
+  }, [desiredLayoutMode, currentLayoutMode, setMode]);
+};
+
+/** Convert a flyout `size` value to a pixel width using theme breakpoints. */
+var getWidthFromSize = exports.getWidthFromSize = function getWidthFromSize(size) {
+  if (typeof size === 'number') {
+    return size;
+  }
+  if (typeof size === 'string') {
+    var parsed = parseInt(size, 10);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+
+    // Size is a function of a percentage of `vw`, defined in `composeFlyoutSizing` in `flyout.styles.ts`
+    switch (size) {
+      case 's':
+        return Math.round(window.innerWidth * 0.25);
+      case 'm':
+        return Math.round(window.innerWidth * 0.5);
+      case 'l':
+        return Math.round(window.innerWidth * 0.75);
+      case 'fill':
+        return Math.round(window.innerWidth * 0.9);
+      default:
+        break;
+    }
+  }
+  return 0;
+};
+
+/** Current layout mode for managed flyouts (`side-by-side` or `stacked`). */
+var useFlyoutLayoutMode = exports.useFlyoutLayoutMode = function useFlyoutLayoutMode() {
+  var _context$state2;
+  var context = (0, _hooks.useFlyoutManager)();
+  return (context === null || context === void 0 || (_context$state2 = context.state) === null || _context$state2 === void 0 ? void 0 : _context$state2.layoutMode) || _const.LAYOUT_MODE_SIDE_BY_SIDE;
+};

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

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlyoutManager = exports.EuiFlyoutManagerContext = exports.EuiFlyoutManager = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _shim = require("use-sync-external-store/shim");
+var _layout_mode = require("./layout_mode");
+var _store = require("./store");
+var _react2 = require("@emotion/react");
+var _excluded = ["getState", "subscribe"];
+/*
+ * 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.
+ */
+/**
+ * React context that exposes the Flyout Manager API (state + actions).
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function 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) { (0, _defineProperty2.default)(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; }
+var EuiFlyoutManagerContext = exports.EuiFlyoutManagerContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Provides the Flyout Manager API via context and runs layout-mode logic.
+ */
+var EuiFlyoutManager = exports.EuiFlyoutManager = function EuiFlyoutManager(_ref) {
+  var children = _ref.children;
+  var _getFlyoutManagerStor = (0, _store.getFlyoutManagerStore)(),
+    getState = _getFlyoutManagerStor.getState,
+    subscribe = _getFlyoutManagerStor.subscribe,
+    rest = (0, _objectWithoutProperties2.default)(_getFlyoutManagerStor, _excluded);
+  var state = (0, _shim.useSyncExternalStore)(subscribe, getState, getState);
+  var api = (0, _react.useMemo)(function () {
+    return _objectSpread({
+      state: state
+    }, rest);
+  }, [state, rest]);
+  return (0, _react2.jsx)(EuiFlyoutManagerContext.Provider, {
+    value: api
+  }, (0, _react2.jsx)(EuiFlyoutManagerContainer, null, children));
+};
+var EuiFlyoutManagerContainer = function EuiFlyoutManagerContainer(_ref2) {
+  var children = _ref2.children;
+  (0, _layout_mode.useApplyFlyoutLayoutMode)();
+  return (0, _react2.jsx)(_react.default.Fragment, null, children);
+};
+
+/** Hook to access the Flyout Manager API from context. */
+var useFlyoutManager = exports.useFlyoutManager = function useFlyoutManager() {
+  return (0, _react.useContext)(EuiFlyoutManagerContext);
+};

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

@@ -0,0 +1,318 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.flyoutManagerReducer = flyoutManagerReducer;
+exports.initialState = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("./actions");
+var _const = require("./const");
+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) { (0, _defineProperty2.default)(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; } /*
+ * 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.
+ */
+/**
+ * Default flyout manager state used to initialize the reducer.
+ */
+var initialState = exports.initialState = {
+  sessions: [],
+  flyouts: [],
+  layoutMode: _const.LAYOUT_MODE_SIDE_BY_SIDE,
+  pushPadding: {
+    left: 0,
+    right: 0
+  },
+  currentZIndex: 0,
+  unmanagedFlyouts: []
+};
+
+/**
+ * Reducer handling all flyout manager actions and state transitions.
+ */
+function flyoutManagerReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    case _actions.ACTION_ADD_UNMANAGED_FLYOUT:
+      {
+        if (state.unmanagedFlyouts.includes(action.flyoutId)) {
+          return state;
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          // Increment by 2 for each new unmanaged flyout.
+          // Unmanaged flyouts render on z-index of `n`, and their overlay mask
+          // on `n - 1`.
+          currentZIndex: state.currentZIndex + 2,
+          unmanagedFlyouts: [].concat((0, _toConsumableArray2.default)(state.unmanagedFlyouts), [action.flyoutId])
+        });
+      }
+    case _actions.ACTION_CLOSE_UNMANAGED_FLYOUT:
+      {
+        var newUnmanagedFlyouts = state.unmanagedFlyouts.filter(function (flyoutId) {
+          return flyoutId !== action.flyoutId;
+        });
+        var newCurrentZIndex = state.currentZIndex;
+        if (state.sessions.length === 0 && newUnmanagedFlyouts.length === 0) {
+          newCurrentZIndex = 0;
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          unmanagedFlyouts: newUnmanagedFlyouts,
+          currentZIndex: newCurrentZIndex
+        });
+      }
+
+    // Register a flyout.
+    // - Ignore duplicates by `flyoutId`.
+    // - For a `main` flyout, start a new session { main, child: null }.
+    // - For a `child` flyout, attach it to the most recent session; if no
+    //   session exists, do nothing (invalid child without a parent).
+    case _actions.ACTION_ADD:
+      {
+        var flyoutId = action.flyoutId,
+          title = action.title,
+          level = action.level,
+          size = action.size;
+
+        // Ignore duplicate registrations
+        if (state.flyouts.some(function (f) {
+          return f.flyoutId === flyoutId;
+        })) {
+          return state;
+        }
+        var newFlyoutState = {
+          level: level,
+          flyoutId: flyoutId,
+          size: size,
+          activityStage: _const.STAGE_OPENING
+        };
+        var newFlyouts = [].concat((0, _toConsumableArray2.default)(state.flyouts), [newFlyoutState]);
+        if (level === _const.LEVEL_MAIN) {
+          var newSession = {
+            mainFlyoutId: flyoutId,
+            title: title,
+            childFlyoutId: null,
+            zIndex: state.currentZIndex
+          };
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: [].concat((0, _toConsumableArray2.default)(state.sessions), [newSession]),
+            flyouts: newFlyouts,
+            // Increment by 3 for each new flyout session.
+            // Managed flyouts render main flyouts on z-index of `n`,
+            // child flyouts on `n - 1` and the overlay mask on `n - 2`.
+            currentZIndex: state.currentZIndex + 3
+          });
+        }
+        if (state.sessions.length === 0) {
+          return state;
+        }
+        var updatedSessions = (0, _toConsumableArray2.default)(state.sessions);
+        var currentSessionIndex = updatedSessions.length - 1;
+        updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, updatedSessions[currentSessionIndex]), {}, {
+          childFlyoutId: flyoutId
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: updatedSessions,
+          flyouts: newFlyouts
+        });
+      }
+
+    // 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.
+    case _actions.ACTION_CLOSE:
+      {
+        var removedFlyout = state.flyouts.find(function (f) {
+          return f.flyoutId === action.flyoutId;
+        });
+        if (!removedFlyout) {
+          return state;
+        }
+        if (removedFlyout.level === _const.LEVEL_MAIN) {
+          // Find the session that contains this main flyout
+          var sessionToRemove = state.sessions.find(function (session) {
+            return session.mainFlyoutId === action.flyoutId;
+          });
+          if (sessionToRemove) {
+            // Remove all flyouts associated with this session (main + child)
+            var flyoutsToRemove = new Set([action.flyoutId]);
+            if (sessionToRemove.childFlyoutId) {
+              flyoutsToRemove.add(sessionToRemove.childFlyoutId);
+            }
+            var _newFlyouts = state.flyouts.filter(function (f) {
+              return !flyoutsToRemove.has(f.flyoutId);
+            });
+            var newSessions = state.sessions.filter(function (session) {
+              return session.mainFlyoutId !== action.flyoutId;
+            });
+            var _newCurrentZIndex = state.currentZIndex;
+            if (newSessions.length === 0 && state.unmanagedFlyouts.length === 0) {
+              // Reset to initial value if no flyouts remain open to avoid
+              // the value going too high during the lifecycle of the app
+              _newCurrentZIndex = 0;
+            }
+            return _objectSpread(_objectSpread({}, state), {}, {
+              sessions: newSessions,
+              flyouts: _newFlyouts,
+              currentZIndex: _newCurrentZIndex
+            });
+          }
+        }
+
+        // Handle child flyout closing (existing logic)
+        var _newFlyouts2 = state.flyouts.filter(function (f) {
+          return f.flyoutId !== action.flyoutId;
+        });
+        if (state.sessions.length === 0) {
+          return _objectSpread(_objectSpread({}, state), {}, {
+            flyouts: _newFlyouts2
+          });
+        }
+        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
+          });
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _updatedSessions,
+          flyouts: _newFlyouts2
+        });
+      }
+
+    // Mark the provided flyout ID as the active child for the latest session.
+    case _actions.ACTION_SET_ACTIVE:
+      {
+        // No-op when no session exists.
+        if (state.sessions.length === 0) {
+          return state;
+        }
+        var _updatedSessions2 = (0, _toConsumableArray2.default)(state.sessions);
+        var _currentSessionIndex2 = _updatedSessions2.length - 1;
+        _updatedSessions2[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex2]), {}, {
+          childFlyoutId: action.flyoutId
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _updatedSessions2
+        });
+      }
+
+    // Persist a flyout's measured width (px). Used for responsive layout
+    // calculations, e.g., deciding stacked vs side-by-side.
+    case _actions.ACTION_SET_WIDTH:
+      {
+        var _flyoutId = action.flyoutId,
+          width = action.width;
+        var updatedFlyouts = state.flyouts.map(function (flyout) {
+          return flyout.flyoutId === _flyoutId ? _objectSpread(_objectSpread({}, flyout), {}, {
+            width: width
+          }) : flyout;
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          flyouts: updatedFlyouts
+        });
+      }
+
+    // Switch global layout mode for managed flyouts.
+    case _actions.ACTION_SET_LAYOUT_MODE:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          layoutMode: action.layoutMode
+        });
+      }
+
+    // Update a flyout's activity stage in state
+    case _actions.ACTION_SET_ACTIVITY_STAGE:
+      {
+        var _flyoutId2 = action.flyoutId;
+        var _updatedFlyouts = state.flyouts.map(function (flyout) {
+          return flyout.flyoutId === _flyoutId2 ? _objectSpread(_objectSpread({}, flyout), {}, {
+            activityStage: action.activityStage
+          }) : flyout;
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          flyouts: _updatedFlyouts
+        });
+      }
+
+    // Go back one session (remove current session from stack)
+    case _actions.ACTION_GO_BACK:
+      {
+        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 _newFlyouts3 = state.flyouts.filter(function (f) {
+          return !_flyoutsToRemove.has(f.flyoutId);
+        });
+        var _newSessions = state.sessions.slice(0, _currentSessionIndex3);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _newSessions,
+          flyouts: _newFlyouts3
+        });
+      }
+
+    // Navigate to a specific flyout (remove all sessions after it)
+    case _actions.ACTION_GO_TO_FLYOUT:
+      {
+        var _flyoutId3 = action.flyoutId;
+
+        // Find the session containing the target flyout
+        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();
+        sessionsToClose.forEach(function (session) {
+          _flyoutsToRemove2.add(session.mainFlyoutId);
+          if (session.childFlyoutId) {
+            _flyoutsToRemove2.add(session.childFlyoutId);
+          }
+        });
+        var _newFlyouts4 = state.flyouts.filter(function (f) {
+          return !_flyoutsToRemove2.has(f.flyoutId);
+        });
+        var _newSessions2 = state.sessions.slice(0, targetSessionIndex + 1);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _newSessions2,
+          flyouts: _newFlyouts4
+        });
+      }
+
+    // Set push padding offset for a specific side
+    case _actions.ACTION_SET_PUSH_PADDING:
+      {
+        var _state$pushPadding;
+        var side = action.side,
+          _width = action.width;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          pushPadding: _objectSpread(_objectSpread({}, (_state$pushPadding = state.pushPadding) !== null && _state$pushPadding !== void 0 ? _state$pushPadding : {
+            left: 0,
+            right: 0
+          }), {}, (0, _defineProperty2.default)({}, side, _width))
+        });
+      }
+    default:
+      return state;
+  }
+}

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

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSession = exports.usePushPaddingOffsets = exports.useParentFlyoutSize = exports.useIsFlyoutRegistered = exports.useIsFlyoutActive = exports.useHasPushPadding = exports.useHasChildFlyout = exports.useHasActiveSession = exports.useFlyoutWidth = exports.useFlyout = exports.useCurrentSession = exports.useCurrentMainFlyout = exports.useCurrentFlyoutZIndexRef = exports.useCurrentChildFlyout = void 0;
+var _provider = require("./provider");
+var _react = require("react");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var useSession = exports.useSession = function useSession(flyoutId) {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context) {
+    return null;
+  }
+  return context.state.sessions.find(function (s) {
+    return s.mainFlyoutId === flyoutId || s.childFlyoutId === flyoutId;
+  }) || null;
+};
+
+/** True when any managed flyout session is currently active. */
+var useHasActiveSession = exports.useHasActiveSession = function useHasActiveSession() {
+  return !!useCurrentSession();
+};
+
+/** True if the given `flyoutId` is the main or child flyout in the latest session. */
+var useIsFlyoutActive = exports.useIsFlyoutActive = function useIsFlyoutActive(flyoutId) {
+  var currentSession = useCurrentSession();
+  return (currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId) === flyoutId || (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === flyoutId;
+};
+var useFlyout = exports.useFlyout = function useFlyout(flyoutId) {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context || !flyoutId) {
+    return null;
+  }
+  return context.state.flyouts.find(function (f) {
+    return f.flyoutId === flyoutId;
+  }) || null;
+};
+var useIsFlyoutRegistered = exports.useIsFlyoutRegistered = function useIsFlyoutRegistered(flyoutId) {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context || !flyoutId) {
+    return false;
+  }
+  return context.state.flyouts.some(function (f) {
+    return f.flyoutId === flyoutId;
+  });
+};
+
+/** The most recent flyout session or `null` if none. */
+var useCurrentSession = exports.useCurrentSession = function useCurrentSession() {
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context) return null;
+  return context.state.sessions[context.state.sessions.length - 1] || null;
+};
+
+/** The registered state of the current session's main flyout, if present. */
+var useCurrentMainFlyout = exports.useCurrentMainFlyout = function useCurrentMainFlyout() {
+  var currentSession = useCurrentSession();
+  var mainFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId;
+  return useFlyout(mainFlyoutId);
+};
+
+/** The registered state of the current session's child flyout, if present. */
+var useCurrentChildFlyout = exports.useCurrentChildFlyout = function useCurrentChildFlyout() {
+  var currentSession = useCurrentSession();
+  var childFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId;
+  return useFlyout(childFlyoutId);
+};
+
+/** The measured width (px) of the specified flyout, or `null` if unknown. */
+var useFlyoutWidth = exports.useFlyoutWidth = function useFlyoutWidth(flyoutId) {
+  var _useFlyout;
+  return (_useFlyout = useFlyout(flyoutId)) === null || _useFlyout === void 0 ? void 0 : _useFlyout.width;
+};
+
+/** The configured size of the parent (main) flyout for a given child flyout ID. */
+var useParentFlyoutSize = exports.useParentFlyoutSize = function useParentFlyoutSize(childFlyoutId) {
+  var session = useSession(childFlyoutId);
+  var parentFlyout = useFlyout(session === null || session === void 0 ? void 0 : session.mainFlyoutId);
+  return parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size;
+};
+
+/** True if the provided `flyoutId` is the main flyout and it currently has a child. */
+var useHasChildFlyout = exports.useHasChildFlyout = function useHasChildFlyout(flyoutId) {
+  var session = useSession(flyoutId);
+  return !!(session !== null && session !== void 0 && session.childFlyoutId);
+};
+
+/** Get the current push padding offsets from manager state. */
+var usePushPaddingOffsets = exports.usePushPaddingOffsets = function usePushPaddingOffsets() {
+  var _context$state$pushPa;
+  var context = (0, _provider.useFlyoutManager)();
+  if (!context) {
+    return {
+      left: 0,
+      right: 0
+    };
+  }
+  return (_context$state$pushPa = context.state.pushPadding) !== null && _context$state$pushPa !== void 0 ? _context$state$pushPa : {
+    left: 0,
+    right: 0
+  };
+};
+
+/** True if there's any active push padding (left or right side). */
+var useHasPushPadding = exports.useHasPushPadding = function useHasPushPadding() {
+  var pushPadding = usePushPaddingOffsets();
+  return pushPadding.left > 0 || pushPadding.right > 0;
+};
+
+/** Get the ref for the current flyout z-index to be used */
+var useCurrentFlyoutZIndexRef = exports.useCurrentFlyoutZIndexRef = function useCurrentFlyoutZIndexRef() {
+  var context = (0, _provider.useFlyoutManager)();
+  return (0, _react.useRef)((context === null || context === void 0 ? void 0 : context.state.currentZIndex) || 0);
+};