@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

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

@@ -0,0 +1,66 @@
+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
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { euiCanAnimate, logicalCSS } from '../../../global_styling';
+import { STAGE_ACTIVE, STAGE_BACKGROUNDED, STAGE_BACKGROUNDING, STAGE_CLOSING, STAGE_INACTIVE, STAGE_OPENING, STAGE_RETURNING } from './const';
+import { euiFlyoutSlideInLeft, euiFlyoutSlideInRight } from '../flyout.styles';
+import { DEFAULT_SIDE } from '../const';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "hklg7q-managedFlyout",
+  styles: "perspective:1000px;transform-style:preserve-3d;label:managedFlyout;"
+} : {
+  name: "hklg7q-managedFlyout",
+  styles: "perspective:1000px;transform-style:preserve-3d;label:managedFlyout;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+/**
+ * Emotion styles for managed flyouts.
+ * Provides base 3D context and animations tied to managed flyout stages
+ * via data attributes.
+ */
+export var euiManagedFlyoutStyles = function euiManagedFlyoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    stage: function stage(activeStage) {
+      var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SIDE;
+      // 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 openingTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:", side === 'left' ? euiFlyoutSlideInLeft : euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;};label:openingTransition;");
+      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;");
+      switch (activeStage) {
+        case STAGE_OPENING:
+          return [activeFlyout, openingTransition];
+        case STAGE_ACTIVE:
+          return [activeFlyout, noTransition];
+        case STAGE_CLOSING:
+        case STAGE_BACKGROUNDING:
+          return [inactiveTransition];
+        case STAGE_INACTIVE:
+        case STAGE_BACKGROUNDED:
+          return [inactiveFlyout, noTransition];
+        case STAGE_RETURNING:
+          return [activeFlyout, returningTransition];
+      }
+    },
+    managedFlyout: _ref
+  };
+};

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

@@ -0,0 +1,93 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useCallback, useContext, useReducer, useRef } from 'react';
+import { warnOnce, useGeneratedHtmlId } from '../../../services';
+import { flyoutManagerReducer, initialState } from './reducer';
+import { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction } from './actions';
+import { EuiFlyoutManagerContext } from './provider';
+import { LEVEL_MAIN } from './const';
+import { useIsFlyoutRegistered } from './selectors';
+
+// Ensure uniqueness across multiple hook instances, including in test envs
+var autoGeneratedFlyoutIdCounter = 0;
+export { useIsFlyoutActive, useHasActiveSession, useCurrentSession, useCurrentMainFlyout, useCurrentChildFlyout, useFlyoutWidth, useParentFlyoutSize, useHasChildFlyout } from './selectors';
+export { useFlyoutLayoutMode } from './layout_mode';
+export { useIsInManagedFlyout } from './context';
+
+// Convenience selector for a flyout's activity stage
+
+/**
+ * Hook that provides the flyout manager reducer and bound action creators.
+ * Accepts an optional initial state (mainly for tests or custom setups).
+ */
+export function useFlyoutManagerReducer() {
+  var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var _useReducer = useReducer(flyoutManagerReducer, initial),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var addFlyout = useCallback(function (flyoutId) {
+    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : LEVEL_MAIN;
+    var size = arguments.length > 2 ? arguments[2] : undefined;
+    return dispatch(addFlyoutAction(flyoutId, level, size));
+  }, []);
+  var closeFlyout = useCallback(function (flyoutId) {
+    return dispatch(closeFlyoutAction(flyoutId));
+  }, []);
+  var setActiveFlyout = useCallback(function (flyoutId) {
+    return dispatch(setActiveFlyoutAction(flyoutId));
+  }, []);
+  var setFlyoutWidth = useCallback(function (flyoutId, width) {
+    return dispatch(setFlyoutWidthAction(flyoutId, width));
+  }, []);
+  return {
+    state: state,
+    dispatch: dispatch,
+    addFlyout: addFlyout,
+    closeFlyout: closeFlyout,
+    setActiveFlyout: setActiveFlyout,
+    setFlyoutWidth: setFlyoutWidth
+  };
+}
+
+/** Access the flyout manager context (state and actions). */
+export var useFlyoutManager = function useFlyoutManager() {
+  return useContext(EuiFlyoutManagerContext);
+};
+
+/**
+ * Stable flyout ID utility. Uses the passed `id` if provided and not already registered,
+ * otherwise generates a deterministic ID for the component's lifetime.
+ * The ID remains stable across re-renders to maintain consistency in effects and other hooks.
+ */
+export var useFlyoutId = function useFlyoutId(flyoutId) {
+  var defaultId = useGeneratedHtmlId({
+    prefix: 'flyout-'
+  });
+  var isRegistered = useIsFlyoutRegistered(flyoutId);
+
+  // Use ref to maintain ID stability across re-renders
+  var componentIdRef = useRef(undefined);
+  if (!componentIdRef.current) {
+    // Determine the ID to use
+    if (!flyoutId) {
+      // No ID provided, generate a new one
+      componentIdRef.current = "".concat(defaultId, "-").concat(++autoGeneratedFlyoutIdCounter);
+    } else if (isRegistered) {
+      // ID is provided but already registered, generate a new one
+      warnOnce("flyout-id-".concat(flyoutId), "Flyout with ID ".concat(flyoutId, " already registered; using new ID ").concat(defaultId));
+      componentIdRef.current = "".concat(defaultId, "-").concat(++autoGeneratedFlyoutIdCounter);
+    } else {
+      // ID is provided and not registered, use it
+      componentIdRef.current = flyoutId;
+    }
+  }
+  return componentIdRef.current;
+};

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

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+/**
+ * Convenience re-exports of bound action creators for external usage.
+ */
+export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setActivityStage as setActivityStageAction } from './actions';
+
+/** Reducer and default state for the flyout manager. */
+export { flyoutManagerReducer, initialState } from './reducer';
+
+/** Provider component exposing the Flyout Manager API via context. */
+export { EuiFlyoutManager } from './provider';
+
+/**
+ * Hooks for reading manager state and derived information.
+ */
+/**
+ * Selectors and derived state hooks for managed flyouts.
+ */
+export { useCurrentChildFlyout, useCurrentMainFlyout, useCurrentSession, useFlyoutId, useFlyoutLayoutMode, useFlyoutManager, useFlyoutWidth, useHasChildFlyout, useIsFlyoutActive, useIsInManagedFlyout, useHasActiveSession, useParentFlyoutSize } from './hooks';
+export { EuiFlyoutChild } from './flyout_child';
+export { EuiFlyoutMain } from './flyout_main';
+
+/** Utility functions for flyout sizing and layout. */
+export { getWidthFromSize } from './layout_mode';

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

@@ -0,0 +1,159 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useEuiTheme } from '../../../services';
+import { setLayoutMode } from './actions';
+import { useCurrentChildFlyout, useCurrentMainFlyout, useCurrentSession, useFlyoutWidth } from './selectors';
+import { useFlyoutManager } from './hooks';
+import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED } from './const';
+/**
+ * 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.
+ */
+export var useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var context = useFlyoutManager();
+  var currentSession = useCurrentSession();
+  var parentFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.main;
+  var childFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.child;
+  var parentFlyout = useCurrentMainFlyout();
+  var childFlyout = useCurrentChildFlyout();
+  var parentWidth = useFlyoutWidth(parentFlyoutId);
+  var childWidth = useFlyoutWidth(childFlyoutId);
+  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : Infinity),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowWidth = _useState2[0],
+    setWindowWidth = _useState2[1];
+  var setMode = React.useCallback(function (layoutMode) {
+    if (context !== null && context !== void 0 && context.dispatch && layoutMode !== context.state.layoutMode) {
+      context.dispatch(setLayoutMode(layoutMode));
+    }
+  }, [context]);
+  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);
+    };
+  }, []);
+  useEffect(function () {
+    if (!context) {
+      return;
+    }
+    var currentLayoutMode = context.state.layoutMode;
+
+    // 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)) {
+      if (currentLayoutMode !== LAYOUT_MODE_STACKED) {
+        setMode(LAYOUT_MODE_STACKED);
+      }
+      return;
+    }
+    if (!childFlyoutId) {
+      if (currentLayoutMode !== LAYOUT_MODE_SIDE_BY_SIDE) setMode(LAYOUT_MODE_SIDE_BY_SIDE);
+      return;
+    }
+    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) {
+      if (currentLayoutMode !== LAYOUT_MODE_SIDE_BY_SIDE) setMode(LAYOUT_MODE_SIDE_BY_SIDE);
+      return;
+    }
+    var combinedWidth = parentWidthValue + childWidthValue;
+    var combinedWidthPercentage = combinedWidth / windowWidth * 100;
+    var newLayoutMode;
+
+    // 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 sibling
+    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)) {
+        if (currentLayoutMode !== LAYOUT_MODE_SIDE_BY_SIDE) {
+          setMode(LAYOUT_MODE_SIDE_BY_SIDE);
+        }
+        return;
+      }
+    }
+    if (currentLayoutMode === LAYOUT_MODE_STACKED) {
+      newLayoutMode = combinedWidthPercentage <= THRESHOLD_TO_SIDE_BY_SIDE ? LAYOUT_MODE_SIDE_BY_SIDE : LAYOUT_MODE_STACKED;
+    } else {
+      newLayoutMode = combinedWidthPercentage >= THRESHOLD_TO_STACKED ? LAYOUT_MODE_STACKED : LAYOUT_MODE_SIDE_BY_SIDE;
+    }
+    if (currentLayoutMode !== newLayoutMode) {
+      setMode(newLayoutMode);
+    }
+  }, [windowWidth, context, parentWidth, setMode, childWidth, childFlyoutId, parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size, childFlyout === null || childFlyout === void 0 ? void 0 : childFlyout.size, euiTheme]);
+};
+
+/** Convert a flyout `size` value to a pixel width using theme breakpoints. */
+export var 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`). */
+export var useFlyoutLayoutMode = function useFlyoutLayoutMode() {
+  var _context$state;
+  var context = useFlyoutManager();
+  return (context === null || context === void 0 || (_context$state = context.state) === null || _context$state === void 0 ? void 0 : _context$state.layoutMode) || LAYOUT_MODE_SIDE_BY_SIDE;
+};

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

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { createContext, useContext } from 'react';
+import { useFlyoutManagerReducer } from './hooks';
+import { useApplyFlyoutLayoutMode } from './layout_mode';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * React context that exposes the Flyout Manager API (state + actions).
+ */
+export var EuiFlyoutManagerContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Provides the Flyout Manager API via context and runs layout-mode logic.
+ */
+export var EuiFlyoutManager = function EuiFlyoutManager(_ref) {
+  var children = _ref.children;
+  var api = useFlyoutManagerReducer();
+  return ___EmotionJSX(EuiFlyoutManagerContext.Provider, {
+    value: api
+  }, ___EmotionJSX(EuiFlyoutManagerContainer, null, children));
+};
+var EuiFlyoutManagerContainer = function EuiFlyoutManagerContainer(_ref2) {
+  var children = _ref2.children;
+  useApplyFlyoutLayoutMode();
+  return ___EmotionJSX(React.Fragment, null, children);
+};
+
+/** Hook to access the Flyout Manager API from context. */
+export var useFlyoutManager = function useFlyoutManager() {
+  return useContext(EuiFlyoutManagerContext);
+};

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

@@ -0,0 +1,192 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+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; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ACTION_ADD, ACTION_CLOSE, ACTION_SET_ACTIVE, ACTION_SET_LAYOUT_MODE, ACTION_SET_WIDTH, ACTION_SET_ACTIVITY_STAGE } from './actions';
+import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_MAIN, STAGE_OPENING } from './const';
+/**
+ * Default flyout manager state used to initialize the reducer.
+ */
+export var initialState = {
+  sessions: [],
+  flyouts: [],
+  layoutMode: LAYOUT_MODE_SIDE_BY_SIDE
+};
+
+/**
+ * Reducer handling all flyout manager actions and state transitions.
+ */
+export function flyoutManagerReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  switch (action.type) {
+    // 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 ACTION_ADD:
+      {
+        var flyoutId = action.flyoutId,
+          level = action.level,
+          size = action.size;
+        if (state.flyouts.some(function (f) {
+          return f.flyoutId === flyoutId;
+        })) {
+          return state;
+        }
+        var newFlyoutState = {
+          level: level,
+          flyoutId: flyoutId,
+          size: size,
+          activityStage: STAGE_OPENING
+        };
+        var newFlyouts = [].concat(_toConsumableArray(state.flyouts), [newFlyoutState]);
+        if (level === LEVEL_MAIN) {
+          var newSession = {
+            main: flyoutId,
+            child: null
+          };
+          return _objectSpread(_objectSpread({}, state), {}, {
+            sessions: [].concat(_toConsumableArray(state.sessions), [newSession]),
+            flyouts: newFlyouts
+          });
+        }
+        if (state.sessions.length === 0) {
+          return state;
+        }
+        var updatedSessions = _toConsumableArray(state.sessions);
+        var currentSessionIndex = updatedSessions.length - 1;
+        updatedSessions[currentSessionIndex] = _objectSpread(_objectSpread({}, updatedSessions[currentSessionIndex]), {}, {
+          child: 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 ACTION_CLOSE:
+      {
+        var removedFlyout = state.flyouts.find(function (f) {
+          return f.flyoutId === action.flyoutId;
+        });
+        if (!removedFlyout) {
+          return state;
+        }
+        if (removedFlyout.level === LEVEL_MAIN) {
+          // Find the session that contains this main flyout
+          var sessionToRemove = state.sessions.find(function (session) {
+            return session.main === action.flyoutId;
+          });
+          if (sessionToRemove) {
+            // Remove all flyouts associated with this session (main + child)
+            var flyoutsToRemove = new Set([action.flyoutId]);
+            if (sessionToRemove.child) {
+              flyoutsToRemove.add(sessionToRemove.child);
+            }
+            var _newFlyouts = state.flyouts.filter(function (f) {
+              return !flyoutsToRemove.has(f.flyoutId);
+            });
+            var newSessions = state.sessions.filter(function (session) {
+              return session.main !== action.flyoutId;
+            });
+            return _objectSpread(_objectSpread({}, state), {}, {
+              sessions: newSessions,
+              flyouts: _newFlyouts
+            });
+          }
+        }
+
+        // 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 = _toConsumableArray(state.sessions);
+        var _currentSessionIndex = _updatedSessions.length - 1;
+        if (_updatedSessions[_currentSessionIndex].child === action.flyoutId) {
+          _updatedSessions[_currentSessionIndex] = _objectSpread(_objectSpread({}, _updatedSessions[_currentSessionIndex]), {}, {
+            child: null
+          });
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          sessions: _updatedSessions,
+          flyouts: _newFlyouts2
+        });
+      }
+
+    // Mark the provided flyout ID as the active child for the latest session.
+    case ACTION_SET_ACTIVE:
+      {
+        // No-op when no session exists.
+        if (state.sessions.length === 0) {
+          return state;
+        }
+        var _updatedSessions2 = _toConsumableArray(state.sessions);
+        var _currentSessionIndex2 = _updatedSessions2.length - 1;
+        _updatedSessions2[_currentSessionIndex2] = _objectSpread(_objectSpread({}, _updatedSessions2[_currentSessionIndex2]), {}, {
+          child: 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 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 ACTION_SET_LAYOUT_MODE:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          layoutMode: action.layoutMode
+        });
+      }
+
+    // Update a flyout's activity stage in state
+    case 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
+        });
+      }
+    default:
+      return state;
+  }
+}

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

@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useFlyoutManager } from './provider';
+export var useSession = function useSession(flyoutId) {
+  var context = useFlyoutManager();
+  if (!context) {
+    return null;
+  }
+  return context.state.sessions.find(function (s) {
+    return s.main === flyoutId || s.child === flyoutId;
+  }) || null;
+};
+
+/** True when any managed flyout session is currently active. */
+export var useHasActiveSession = function useHasActiveSession() {
+  return !!useCurrentSession();
+};
+
+/** True if the given `flyoutId` is the main or child flyout in the latest session. */
+export var useIsFlyoutActive = function useIsFlyoutActive(flyoutId) {
+  var currentSession = useCurrentSession();
+  return (currentSession === null || currentSession === void 0 ? void 0 : currentSession.main) === flyoutId || (currentSession === null || currentSession === void 0 ? void 0 : currentSession.child) === flyoutId;
+};
+export var useFlyout = function useFlyout(flyoutId) {
+  var context = useFlyoutManager();
+  if (!context || !flyoutId) {
+    return null;
+  }
+  return context.state.flyouts.find(function (f) {
+    return f.flyoutId === flyoutId;
+  }) || null;
+};
+export var useIsFlyoutRegistered = function useIsFlyoutRegistered(flyoutId) {
+  var context = 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. */
+export var useCurrentSession = function useCurrentSession() {
+  var context = 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. */
+export var useCurrentMainFlyout = function useCurrentMainFlyout() {
+  var currentSession = useCurrentSession();
+  var mainFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.main;
+  return useFlyout(mainFlyoutId);
+};
+
+/** The registered state of the current session's child flyout, if present. */
+export var useCurrentChildFlyout = function useCurrentChildFlyout() {
+  var currentSession = useCurrentSession();
+  var childFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.child;
+  return useFlyout(childFlyoutId);
+};
+
+/** The measured width (px) of the specified flyout, or `null` if unknown. */
+export var 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. */
+export var useParentFlyoutSize = function useParentFlyoutSize(childFlyoutId) {
+  var session = useSession(childFlyoutId);
+  var parentFlyout = useFlyout(session === null || session === void 0 ? void 0 : session.main);
+  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. */
+export var useHasChildFlyout = function useHasChildFlyout(flyoutId) {
+  var session = useSession(flyoutId);
+  return !!(session !== null && session !== void 0 && session.child);
+};