@elastic/eui 110.0.0 → 111.0.0

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

@@ -0,0 +1,162 @@
+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"];
+/*
+ * 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 classNames from 'classnames';
+import React, { useContext, useState } from 'react';
+import { useEuiMemoizedStyles } from '../../services';
+import { EuiButtonEmpty, EuiButtonIcon } from '../button';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiListGroup, EuiListGroupItem } from '../list_group';
+import { EuiPopover } from '../popover';
+import { EuiTitle } from '../title';
+import { EuiFlyoutCloseButton } from './_flyout_close_button';
+import { euiFlyoutMenuStyles } from './flyout_menu.styles';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+import { EuiI18n, useEuiI18n } from '../i18n';
+
+/**
+ * History item for the flyout menu history popover
+ */
+
+/**
+ * Custom action item for the flyout menu component
+ */
+
+/**
+ * Props for EuiFlyoutMenu
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var BackButton = function BackButton(props) {
+  return ___EmotionJSX(EuiButtonEmpty, _extends({
+    size: "xs",
+    color: "text",
+    iconType: "editorUndo"
+  }, props), ___EmotionJSX(EuiI18n, {
+    token: "euiFlyoutMenu.back",
+    default: "Back"
+  }));
+};
+var HistoryPopover = function HistoryPopover(_ref) {
+  var items = _ref.items;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var handlePopoverButtonClick = function handlePopoverButtonClick() {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+  return ___EmotionJSX(EuiPopover, {
+    button: ___EmotionJSX(EuiButtonIcon, {
+      iconType: "arrowDown",
+      color: "text",
+      "aria-label": useEuiI18n('euiFlyoutMenu.history', 'History')
+    }),
+    isOpen: isPopoverOpen,
+    onClick: handlePopoverButtonClick,
+    closePopover: function closePopover() {
+      return setIsPopoverOpen(false);
+    },
+    panelPaddingSize: "xs",
+    anchorPosition: "downLeft"
+  }, ___EmotionJSX(EuiListGroup, {
+    gutterSize: "none"
+  }, items.map(function (item, index) {
+    return ___EmotionJSX(EuiListGroupItem, {
+      key: "history-item-".concat(index),
+      label: item.title,
+      size: "s",
+      onClick: function onClick() {
+        item.onClick();
+        setIsPopoverOpen(false);
+      }
+    }, item.title);
+  })));
+};
+
+/**
+ * The component for the top menu bar inside a flyout. Since this is a private
+ * component, rendering is controlled using the `flyoutMenuProps` prop on
+ * `EuiFlyout`. In managed session flyouts, the Flyout Manager controls a back
+ * button and history popover for navigating to different flyout sessions
+ * within the managed context.
+ *
+ * @private
+ */
+export var EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
+  var className = _ref2.className,
+    title = _ref2.title,
+    titleId = _ref2.titleId,
+    hideTitle = _ref2.hideTitle,
+    hideCloseButton = _ref2.hideCloseButton,
+    _ref2$historyItems = _ref2.historyItems,
+    historyItems = _ref2$historyItems === void 0 ? [] : _ref2$historyItems,
+    showBackButton = _ref2.showBackButton,
+    backButtonProps = _ref2.backButtonProps,
+    customActions = _ref2.customActions,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useContext = useContext(EuiFlyoutMenuContext),
+    onClose = _useContext.onClose;
+  var styles = useEuiMemoizedStyles(euiFlyoutMenuStyles);
+  var classes = classNames('euiFlyoutMenu', className);
+  var titleNode;
+  if (title) {
+    titleNode = ___EmotionJSX(EuiTitle, {
+      size: "xxs",
+      id: titleId
+    }, ___EmotionJSX("h3", {
+      css: hideTitle && styles.euiFlyoutMenu__hiddenTitle
+    }, title));
+  }
+  var handleClose = function handleClose(event) {
+    onClose === null || onClose === void 0 || onClose(event);
+  };
+  var closeButton = ___EmotionJSX(EuiFlyoutCloseButton, {
+    onClose: handleClose,
+    side: "right",
+    closeButtonPosition: "inside"
+  });
+  return ___EmotionJSX("div", _extends({
+    className: classes,
+    css: styles.euiFlyoutMenu__container
+  }, rest), ___EmotionJSX(EuiFlexGroup, {
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gutterSize: "none",
+    responsive: false
+  }, showBackButton && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(BackButton, backButtonProps)), historyItems.length > 0 && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, ___EmotionJSX(HistoryPopover, {
+    items: historyItems
+  })), titleNode && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, titleNode), ___EmotionJSX(EuiFlexItem, {
+    grow: true
+  }), customActions && customActions.map(function (action, actionIndex) {
+    return ___EmotionJSX(EuiFlexItem, {
+      grow: false,
+      key: "action-index-flex-item-".concat(actionIndex),
+      css: styles.euiFlyoutMenu__actions
+    }, ___EmotionJSX(EuiButtonIcon, {
+      key: "action-index-icon-".concat(actionIndex),
+      "aria-label": action['aria-label'],
+      iconType: action.iconType,
+      onClick: action.onClick,
+      color: "text",
+      size: "s"
+    }));
+  }), !hideCloseButton && ___EmotionJSX(EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__spacer
+  })), !hideCloseButton && closeButton);
+};

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

@@ -0,0 +1,19 @@
+/*
+ * 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 } from '@emotion/react';
+import { euiScreenReaderOnly } from '../accessibility';
+export var euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutMenu__container: /*#__PURE__*/css("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";padding-block-start:calc(", euiTheme.size.m, " * 0.8);.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__spacer: /*#__PURE__*/css("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
+    euiFlyoutMenu__actions: /*#__PURE__*/css("block-size:calc(", euiTheme.size.m, " * 1.8);;label:euiFlyoutMenu__actions;"),
+    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/css(euiScreenReaderOnly(), ";;label:euiFlyoutMenu__hiddenTitle;")
+  };
+};

package/{es/components/flyout/flyout_context.js → optimize/es/components/flyout/flyout_menu_context.js}

@@ -7,10 +7,4 @@
  */
 
 import { createContext } from 'react';
-
-/**
- * Context shared between the main and child flyouts
- * @internal
- */
-
-export var EuiFlyoutContext = /*#__PURE__*/createContext(null);
+export var EuiFlyoutMenuContext = /*#__PURE__*/createContext({});

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

@@ -0,0 +1,36 @@
+/*
+ * 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';
+
+/**
+ * Context to track if we're inside a parent flyout's children.
+ * This allows nested flyouts to automatically inherit the session
+ * without requiring explicit `session="inherit"` prop.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiFlyoutParentContext = /*#__PURE__*/createContext(false);
+
+/**
+ * Provider that wraps a flyout's children to indicate they're inside a parent flyout.
+ * Nested flyouts can use this to automatically default to session inheritance.
+ */
+export var EuiFlyoutParentProvider = function EuiFlyoutParentProvider(_ref) {
+  var children = _ref.children;
+  return ___EmotionJSX(EuiFlyoutParentContext.Provider, {
+    value: true
+  }, children);
+};
+
+/**
+ * Hook that returns `true` when called within a parent flyout's children.
+ * Used to automatically determine if a nested flyout should inherit the session.
+ */
+export var useIsInsideParentFlyout = function useIsInsideParentFlyout() {
+  return useContext(EuiFlyoutParentContext);
+};

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

@@ -1,7 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,144 +7,16 @@ var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ow
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback } from 'react';
-import { keys, useCombinedRefs, useEuiMemoizedStyles } from '../../services';
-import { EuiResizableButton } from '../resizable_container';
-import { getPosition } from '../resizable_container/helpers';
+import React, { forwardRef } from 'react';
 import { EuiFlyout } from './flyout';
-import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // If not omitted, the correct props don't show up in the docs prop table
 
-export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var size = _ref.size,
-    maxWidth = _ref.maxWidth,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
-    onResize = _ref.onResize,
-    _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'right' : _ref$side,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'overlay' : _ref$type,
-    _ref$ownFocus = _ref.ownFocus,
-    ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var hasOverlay = type === 'overlay' && ownFocus;
-  var styles = useEuiMemoizedStyles(euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
-  var getFlyoutMinMaxWidth = useCallback(function (width) {
-    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
-    );
-  }, [minWidth, maxWidth]);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    flyoutWidth = _useState2[0],
-    setFlyoutWidth = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    callOnResize = _useState4[0],
-    setCallOnResize = _useState4[1];
-
-  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    flyoutRef = _useState6[0],
-    setFlyoutRef = _useState6[1];
-  var setRefs = useCombinedRefs([setFlyoutRef, ref]);
-  useEffect(function () {
-    if (!flyoutWidth && flyoutRef) {
-      setCallOnResize(false); // Don't call `onResize` for non-user width changes
-      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
-    }
-  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
-
-  // Update flyout width when consumers pass in a new `size`
-  useEffect(function () {
-    setCallOnResize(false);
-    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
-    setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
-  }, [size, getFlyoutMinMaxWidth]);
-
-  // Initial numbers to calculate from, on resize drag start
-  var initialWidth = useRef(0);
-  var initialMouseX = useRef(0);
-
-  // Account for flyout side and logical property direction
-  var direction = useMemo(function () {
-    var modifier = side === 'right' ? -1 : 1;
-    if (flyoutRef) {
-      var languageDirection = window.getComputedStyle(flyoutRef).direction;
-      if (languageDirection === 'rtl') modifier *= -1;
-    }
-    return modifier;
-  }, [side, flyoutRef]);
-  var onMouseMove = useCallback(function (e) {
-    var mouseOffset = getPosition(e, true) - initialMouseX.current;
-    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
-    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
-  }, [getFlyoutMinMaxWidth, direction]);
-  var onMouseUp = useCallback(function () {
-    setCallOnResize(true);
-    initialMouseX.current = 0;
-    window.removeEventListener('mousemove', onMouseMove);
-    window.removeEventListener('mouseup', onMouseUp);
-    window.removeEventListener('touchmove', onMouseMove);
-    window.removeEventListener('touchend', onMouseUp);
-  }, [onMouseMove]);
-  var onMouseDown = useCallback(function (e) {
-    var _flyoutRef$offsetWidt;
-    setCallOnResize(false);
-    initialMouseX.current = getPosition(e, true);
-    initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
-
-    // Window event listeners instead of React events are used
-    // in case the user's mouse leaves the component
-    window.addEventListener('mousemove', onMouseMove);
-    window.addEventListener('mouseup', onMouseUp);
-    window.addEventListener('touchmove', onMouseMove);
-    window.addEventListener('touchend', onMouseUp);
-  }, [flyoutRef, onMouseMove, onMouseUp]);
-  var onKeyDown = useCallback(function (e) {
-    setCallOnResize(true);
-    var KEYBOARD_OFFSET = 10;
-    switch (e.key) {
-      case keys.ARROW_RIGHT:
-        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
-        setFlyoutWidth(function (flyoutWidth) {
-          return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
-        });
-        break;
-      case keys.ARROW_LEFT:
-        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
-        setFlyoutWidth(function (flyoutWidth) {
-          return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
-        });
-    }
-  }, [getFlyoutMinMaxWidth, direction]);
-
-  // To reduce unnecessary calls, only fire onResize callback:
-  // 1. After initial mount / on user width change events only
-  // 2. If not currently mouse dragging
-  useEffect(function () {
-    if (callOnResize) {
-      onResize === null || onResize === void 0 || onResize(flyoutWidth);
-    }
-  }, [onResize, callOnResize, flyoutWidth]);
-  return ___EmotionJSX(EuiFlyout, _extends({}, rest, {
-    size: flyoutWidth || size,
-    maxWidth: maxWidth,
-    side: side,
-    type: type,
-    ownFocus: ownFocus,
-    ref: setRefs
-  }), ___EmotionJSX(EuiResizableButton, {
-    isHorizontal: true,
-    indicator: "border",
-    css: cssStyles,
-    onMouseDown: onMouseDown,
-    onTouchStart: onMouseDown,
-    onKeyDown: onKeyDown
-  }), children);
+export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (props, ref) {
+  return ___EmotionJSX(EuiFlyout, _extends({
+    ref: ref
+  }, props, {
+    resizable: true
+  }));
 });
 EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';

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

@@ -0,0 +1,25 @@
+/*
+ * 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 { useIsWithinMinBreakpoint } from '../../services';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
+import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_TYPE } from './const';
+
+/**
+ * Determines if a flyout should be rendered in a "pushed" state based on its
+ * configuration and the current window size.
+ */
+export var useIsPushed = function useIsPushed(props) {
+  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
+    _usePropsWithComponen2 = _usePropsWithComponen.type,
+    type = _usePropsWithComponen2 === void 0 ? DEFAULT_TYPE : _usePropsWithComponen2,
+    _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
+    pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
+  return type === 'push' && windowIsLargeEnoughToPush;
+};

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

@@ -12,5 +12,8 @@ export { EuiFlyoutFooter } from './flyout_footer';
 export { EuiFlyoutHeader } from './flyout_header';
 export { euiFlyoutSlideInRight, euiFlyoutSlideInLeft } from './flyout.styles';
 export { EuiFlyoutResizable } from './flyout_resizable';
-export { EuiFlyoutChild } from './flyout_child';
-export { EuiFlyoutSessionProvider, useEuiFlyoutSession } from './sessions';
+export { EuiFlyoutMenu } from './flyout_menu';
+
+// Hooks for using Manager-based flyouts
+export { useIsInManagedFlyout, useHasActiveSession } from './manager';
+export { useIsInsideParentFlyout } from './flyout_parent_context';

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

@@ -0,0 +1,153 @@
+/*
+ * 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 { LEVEL_MAIN } from './const';
+var PREFIX = 'eui/flyoutManager';
+/** Dispatched when a flyout registers itself with the manager. */
+export var ACTION_ADD = "".concat(PREFIX, "/add");
+/** Dispatched to remove a flyout from the manager (usually on close/unmount). */
+export var ACTION_CLOSE = "".concat(PREFIX, "/close");
+/** Dispatched to set which flyout is currently active within the session. */
+export var ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
+/** Dispatched when an active flyout's pixel width changes (for responsive layout). */
+export var ACTION_SET_WIDTH = "".concat(PREFIX, "/setWidth");
+/** Dispatched to switch layout mode between `side-by-side` and `stacked`. */
+export var ACTION_SET_LAYOUT_MODE = "".concat(PREFIX, "/setLayoutMode");
+/** Dispatched to update a flyout's activity stage (e.g., opening -> active). */
+export var ACTION_SET_ACTIVITY_STAGE = "".concat(PREFIX, "/setActivityStage");
+/** Dispatched to go back one session (remove current session). */
+export var ACTION_GO_BACK = "".concat(PREFIX, "/goBack");
+/** Dispatched to navigate to a specific flyout (remove all sessions after it). */
+export var ACTION_GO_TO_FLYOUT = "".concat(PREFIX, "/goToFlyout");
+/** Dispatched to set push padding offset for a side. */
+export var ACTION_SET_PUSH_PADDING = "".concat(PREFIX, "/setPushPadding");
+export var ACTION_ADD_UNMANAGED_FLYOUT = "".concat(PREFIX, "/addUnmanagedFlyout");
+export var ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFlyout");
+
+/**
+ * Add a flyout to manager state. The manager will create or update
+ * the current session depending on the `level` provided.
+ */
+
+/** Remove a flyout from manager state. Also updates the active session. */
+
+/** Set the active flyout within the current session (or clear with `null`). */
+
+/** Update a flyout's measured width in pixels. */
+
+/** Change how flyouts are arranged: `side-by-side` or `stacked`. */
+
+/** Set a specific flyout's activity stage. */
+
+/** Go back one session (remove current session from stack). */
+
+/** Navigate to a specific flyout (remove all sessions after it). */
+
+/** Set push padding offset for a specific side. */
+
+/** Union of all flyout manager actions. */
+
+/**
+ * Register a flyout with the manager.
+ * - `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`).
+ */
+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;
+  return {
+    type: ACTION_ADD,
+    flyoutId: flyoutId,
+    title: title,
+    level: level,
+    size: size
+  };
+};
+
+/** Unregister a flyout and update the session accordingly. */
+export var closeFlyout = function closeFlyout(flyoutId) {
+  return {
+    type: ACTION_CLOSE,
+    flyoutId: flyoutId
+  };
+};
+
+/** Set or clear the active flyout for the current session. */
+export var setActiveFlyout = function setActiveFlyout(flyoutId) {
+  return {
+    type: ACTION_SET_ACTIVE,
+    flyoutId: flyoutId
+  };
+};
+
+/** Record a flyout's current width in pixels. */
+export var setFlyoutWidth = function setFlyoutWidth(flyoutId, width) {
+  return {
+    type: ACTION_SET_WIDTH,
+    flyoutId: flyoutId,
+    width: width
+  };
+};
+
+/** Switch layout mode between `side-by-side` and `stacked`. */
+export var setLayoutMode = function setLayoutMode(layoutMode) {
+  return {
+    type: ACTION_SET_LAYOUT_MODE,
+    layoutMode: layoutMode
+  };
+};
+
+/** Update a flyout's activity stage. */
+export var setActivityStage = function setActivityStage(flyoutId, activityStage) {
+  return {
+    type: ACTION_SET_ACTIVITY_STAGE,
+    flyoutId: flyoutId,
+    activityStage: activityStage
+  };
+};
+
+/** Go back one session (remove current session from stack). */
+export var goBack = function goBack() {
+  return {
+    type: ACTION_GO_BACK
+  };
+};
+
+/** Navigate to a specific flyout (remove all sessions after it). */
+export var goToFlyout = function goToFlyout(flyoutId) {
+  return {
+    type: ACTION_GO_TO_FLYOUT,
+    flyoutId: flyoutId
+  };
+};
+
+/** Set push padding offset for a specific side. */
+export var setPushPadding = function setPushPadding(side, width) {
+  return {
+    type: ACTION_SET_PUSH_PADDING,
+    side: side,
+    width: width
+  };
+};
+
+/** Register an unmanaged flyout for z-index positioning purposes */
+export var addUnmanagedFlyout = function addUnmanagedFlyout(flyoutId) {
+  return {
+    type: ACTION_ADD_UNMANAGED_FLYOUT,
+    flyoutId: flyoutId
+  };
+};
+
+/** Unregister an unmanaged flyout */
+export var closeUnmanagedFlyout = function closeUnmanagedFlyout(flyoutId) {
+  return {
+    type: ACTION_CLOSE_UNMANAGED_FLYOUT,
+    flyoutId: flyoutId
+  };
+};

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

@@ -0,0 +1,95 @@
+/*
+ * 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, 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 { useFlyoutLayoutMode, useHasChildFlyout, useIsFlyoutActive } from './hooks';
+import { setActivityStage } from './actions';
+import { useFlyoutManager } from './provider';
+/**
+ * Encapsulates all activity-stage transitions and animation-driven updates
+ * for managed flyouts.
+ */
+export var useFlyoutActivityStage = function useFlyoutActivityStage(_ref) {
+  var _ctx$state$flyouts$fi;
+  var flyoutId = _ref.flyoutId,
+    level = _ref.level;
+  var isActive = useIsFlyoutActive(flyoutId);
+  var hasChild = useHasChildFlyout(flyoutId);
+  var layoutMode = useFlyoutLayoutMode();
+  var ctx = useFlyoutManager();
+  var stage = (ctx === null || ctx === void 0 || (_ctx$state$flyouts$fi = ctx.state.flyouts.find(function (f) {
+    return f.flyoutId === flyoutId;
+  })) === null || _ctx$state$flyouts$fi === void 0 ? void 0 : _ctx$state$flyouts$fi.activityStage) || (isActive ? STAGE_ACTIVE : STAGE_INACTIVE);
+  var stageRef = useRef(stage);
+  if (stageRef.current !== stage) {
+    stageRef.current = stage;
+  }
+
+  /**
+   * 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`.
+   */
+  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;
+    }
+  }, [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;
+    }
+    return null;
+  };
+
+  /**
+   * onAnimationEnd event handler that must be passed to EuiFlyout.
+   * It handles transitions between stages and updates activity stage
+   * in EuiFlyoutManagerContext.
+   */
+  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;
+    }
+  }, [ctx, flyoutId]);
+  return {
+    activityStage: stage,
+    onAnimationEnd: onAnimationEnd
+  };
+};