@elastic/eui 110.0.0 → 111.0.0

package/lib/components/flyout/flyout_resizable.js

@@ -6,162 +6,51 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiFlyoutResizable = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _services = require("../../services");
-var _resizable_container = require("../resizable_container");
-var _helpers = require("../resizable_container/helpers");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _flyout = require("./flyout");
-var _flyout_resizable = require("./flyout_resizable.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
-/*
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /*
  * 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.
  */
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 // If not omitted, the correct props don't show up in the docs prop table
 
-var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.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 = (0, _services.useEuiMemoizedStyles)(_flyout_resizable.euiFlyoutResizableButtonStyles);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side], !hasOverlay && styles.noOverlay.noOverlay, !hasOverlay && styles.noOverlay[side]];
-  var getFlyoutMinMaxWidth = (0, _react.useCallback)(function (width) {
-    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
-    );
-  }, [minWidth, maxWidth]);
-  var _useState = (0, _react.useState)(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    flyoutWidth = _useState2[0],
-    setFlyoutWidth = _useState2[1];
-  var _useState3 = (0, _react.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 = (0, _react.useState)(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    flyoutRef = _useState6[0],
-    setFlyoutRef = _useState6[1];
-  var setRefs = (0, _services.useCombinedRefs)([setFlyoutRef, ref]);
-  (0, _react.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`
-  (0, _react.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 = (0, _react.useRef)(0);
-  var initialMouseX = (0, _react.useRef)(0);
-
-  // Account for flyout side and logical property direction
-  var direction = (0, _react.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 = (0, _react.useCallback)(function (e) {
-    var mouseOffset = (0, _helpers.getPosition)(e, true) - initialMouseX.current;
-    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
-    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
-  }, [getFlyoutMinMaxWidth, direction]);
-  var onMouseUp = (0, _react.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 = (0, _react.useCallback)(function (e) {
-    var _flyoutRef$offsetWidt;
-    setCallOnResize(false);
-    initialMouseX.current = (0, _helpers.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 = (0, _react.useCallback)(function (e) {
-    setCallOnResize(true);
-    var KEYBOARD_OFFSET = 10;
-    switch (e.key) {
-      case _services.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 _services.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
-  (0, _react.useEffect)(function () {
-    if (callOnResize) {
-      onResize === null || onResize === void 0 || onResize(flyoutWidth);
-    }
-  }, [onResize, callOnResize, flyoutWidth]);
-  return (0, _react2.jsx)(_flyout.EuiFlyout, _extends({}, rest, {
-    size: flyoutWidth || size,
-    maxWidth: maxWidth,
-    side: side,
-    type: type,
-    ownFocus: ownFocus,
-    ref: setRefs
-  }), (0, _react2.jsx)(_resizable_container.EuiResizableButton, {
-    isHorizontal: true,
-    indicator: "border",
-    css: cssStyles,
-    onMouseDown: onMouseDown,
-    onTouchStart: onMouseDown,
-    onKeyDown: onKeyDown
-  }), children);
+var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_flyout.EuiFlyout, _extends({
+    ref: ref
+  }, props, {
+    resizable: true
+  }));
 });
+EuiFlyoutResizable.propTypes = {
+  maxWidth: _propTypes.default.number,
+  /**
+     * Controls the way the session is managed for this flyout.
+     * - `start`: Creates a new flyout session. Use this for the main flyout.
+     * - `inherit`: Inherits an existing session if one is active, otherwise functions as a standard flyout.
+     * - `never`: Disregards session management and always functions as a standard flyout.
+     *
+     * When the `session` prop is undefined (not set), the flyout will automatically inherit from
+     * a parent flyout if it's nested inside one. Otherwise, it defaults to `never`.
+     *
+     * Check out [EuiFlyout session management](https://eui.elastic.co/docs/components/containers/flyout/session-management)
+     * documentation to learn more.
+     * @default undefined (auto-inherit when nested, otherwise 'never')
+     */
+  session: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
+  /**
+     * Callback fired when the flyout becomes active/visible, which may happen programmatically from history navigation.
+     */
+  onActive: _propTypes.default.func,
+  /**
+     * The HTML element to render as the flyout container.
+     */
+  as: _propTypes.default.any
+};
 EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';

package/lib/components/flyout/hooks.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsPushed = void 0;
+var _services = require("../../services");
+var _component_defaults = require("../provider/component_defaults");
+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.
+ */
+
+/**
+ * Determines if a flyout should be rendered in a "pushed" state based on its
+ * configuration and the current window size.
+ */
+var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
+  var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
+    _usePropsWithComponen2 = _usePropsWithComponen.type,
+    type = _usePropsWithComponen2 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen2,
+    _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
+    pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
+  return type === 'push' && windowIsLargeEnoughToPush;
+};

package/lib/components/flyout/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "EuiFlyoutBody", {
     return _flyout_body.EuiFlyoutBody;
   }
 });
-Object.defineProperty(exports, "EuiFlyoutChild", {
-  enumerable: true,
-  get: function get() {
-    return _flyout_child.EuiFlyoutChild;
-  }
-});
 Object.defineProperty(exports, "EuiFlyoutFooter", {
   enumerable: true,
   get: function get() {
@@ -33,16 +27,16 @@ Object.defineProperty(exports, "EuiFlyoutHeader", {
     return _flyout_header.EuiFlyoutHeader;
   }
 });
-Object.defineProperty(exports, "EuiFlyoutResizable", {
+Object.defineProperty(exports, "EuiFlyoutMenu", {
   enumerable: true,
   get: function get() {
-    return _flyout_resizable.EuiFlyoutResizable;
+    return _flyout_menu.EuiFlyoutMenu;
   }
 });
-Object.defineProperty(exports, "EuiFlyoutSessionProvider", {
+Object.defineProperty(exports, "EuiFlyoutResizable", {
   enumerable: true,
   get: function get() {
-    return _sessions.EuiFlyoutSessionProvider;
+    return _flyout_resizable.EuiFlyoutResizable;
   }
 });
 Object.defineProperty(exports, "euiFlyoutSlideInLeft", {
@@ -57,10 +51,22 @@ Object.defineProperty(exports, "euiFlyoutSlideInRight", {
     return _flyout2.euiFlyoutSlideInRight;
   }
 });
-Object.defineProperty(exports, "useEuiFlyoutSession", {
+Object.defineProperty(exports, "useHasActiveSession", {
+  enumerable: true,
+  get: function get() {
+    return _manager.useHasActiveSession;
+  }
+});
+Object.defineProperty(exports, "useIsInManagedFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _manager.useIsInManagedFlyout;
+  }
+});
+Object.defineProperty(exports, "useIsInsideParentFlyout", {
   enumerable: true,
   get: function get() {
-    return _sessions.useEuiFlyoutSession;
+    return _flyout_parent_context.useIsInsideParentFlyout;
   }
 });
 var _flyout = require("./flyout");
@@ -69,5 +75,6 @@ var _flyout_footer = require("./flyout_footer");
 var _flyout_header = require("./flyout_header");
 var _flyout2 = require("./flyout.styles");
 var _flyout_resizable = require("./flyout_resizable");
-var _flyout_child = require("./flyout_child");
-var _sessions = require("./sessions");
+var _flyout_menu = require("./flyout_menu");
+var _manager = require("./manager");
+var _flyout_parent_context = require("./flyout_parent_context");

package/lib/components/flyout/manager/actions.js

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
+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.
+ */
+
+var PREFIX = 'eui/flyoutManager';
+/** Dispatched when a flyout registers itself with the manager. */
+var ACTION_ADD = exports.ACTION_ADD = "".concat(PREFIX, "/add");
+/** Dispatched to remove a flyout from the manager (usually on close/unmount). */
+var ACTION_CLOSE = exports.ACTION_CLOSE = "".concat(PREFIX, "/close");
+/** Dispatched to set which flyout is currently active within the session. */
+var ACTION_SET_ACTIVE = exports.ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
+/** Dispatched when an active flyout's pixel width changes (for responsive layout). */
+var ACTION_SET_WIDTH = exports.ACTION_SET_WIDTH = "".concat(PREFIX, "/setWidth");
+/** Dispatched to switch layout mode between `side-by-side` and `stacked`. */
+var ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_LAYOUT_MODE = "".concat(PREFIX, "/setLayoutMode");
+/** Dispatched to update a flyout's activity stage (e.g., opening -> active). */
+var ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVITY_STAGE = "".concat(PREFIX, "/setActivityStage");
+/** Dispatched to go back one session (remove current session). */
+var ACTION_GO_BACK = exports.ACTION_GO_BACK = "".concat(PREFIX, "/goBack");
+/** Dispatched to navigate to a specific flyout (remove all sessions after it). */
+var ACTION_GO_TO_FLYOUT = exports.ACTION_GO_TO_FLYOUT = "".concat(PREFIX, "/goToFlyout");
+/** Dispatched to set push padding offset for a side. */
+var ACTION_SET_PUSH_PADDING = exports.ACTION_SET_PUSH_PADDING = "".concat(PREFIX, "/setPushPadding");
+var ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD_UNMANAGED_FLYOUT = "".concat(PREFIX, "/addUnmanagedFlyout");
+var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.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`).
+ */
+var addFlyout = exports.addFlyout = function addFlyout(flyoutId, title) {
+  var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _const.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. */
+var closeFlyout = exports.closeFlyout = function closeFlyout(flyoutId) {
+  return {
+    type: ACTION_CLOSE,
+    flyoutId: flyoutId
+  };
+};
+
+/** Set or clear the active flyout for the current session. */
+var setActiveFlyout = exports.setActiveFlyout = function setActiveFlyout(flyoutId) {
+  return {
+    type: ACTION_SET_ACTIVE,
+    flyoutId: flyoutId
+  };
+};
+
+/** Record a flyout's current width in pixels. */
+var setFlyoutWidth = exports.setFlyoutWidth = function setFlyoutWidth(flyoutId, width) {
+  return {
+    type: ACTION_SET_WIDTH,
+    flyoutId: flyoutId,
+    width: width
+  };
+};
+
+/** Switch layout mode between `side-by-side` and `stacked`. */
+var setLayoutMode = exports.setLayoutMode = function setLayoutMode(layoutMode) {
+  return {
+    type: ACTION_SET_LAYOUT_MODE,
+    layoutMode: layoutMode
+  };
+};
+
+/** Update a flyout's activity stage. */
+var setActivityStage = exports.setActivityStage = function setActivityStage(flyoutId, activityStage) {
+  return {
+    type: ACTION_SET_ACTIVITY_STAGE,
+    flyoutId: flyoutId,
+    activityStage: activityStage
+  };
+};
+
+/** Go back one session (remove current session from stack). */
+var goBack = exports.goBack = function goBack() {
+  return {
+    type: ACTION_GO_BACK
+  };
+};
+
+/** Navigate to a specific flyout (remove all sessions after it). */
+var goToFlyout = exports.goToFlyout = function goToFlyout(flyoutId) {
+  return {
+    type: ACTION_GO_TO_FLYOUT,
+    flyoutId: flyoutId
+  };
+};
+
+/** Set push padding offset for a specific side. */
+var setPushPadding = exports.setPushPadding = function setPushPadding(side, width) {
+  return {
+    type: ACTION_SET_PUSH_PADDING,
+    side: side,
+    width: width
+  };
+};
+
+/** Register an unmanaged flyout for z-index positioning purposes */
+var addUnmanagedFlyout = exports.addUnmanagedFlyout = function addUnmanagedFlyout(flyoutId) {
+  return {
+    type: ACTION_ADD_UNMANAGED_FLYOUT,
+    flyoutId: flyoutId
+  };
+};
+
+/** Unregister an unmanaged flyout */
+var closeUnmanagedFlyout = exports.closeUnmanagedFlyout = function closeUnmanagedFlyout(flyoutId) {
+  return {
+    type: ACTION_CLOSE_UNMANAGED_FLYOUT,
+    flyoutId: flyoutId
+  };
+};

package/lib/components/flyout/manager/activity_stage.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlyoutActivityStage = void 0;
+var _react = require("react");
+var _const = require("./const");
+var _hooks = require("./hooks");
+var _actions = require("./actions");
+var _provider = require("./provider");
+/*
+ * 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.
+ */
+
+/**
+ * Encapsulates all activity-stage transitions and animation-driven updates
+ * for managed flyouts.
+ */
+var useFlyoutActivityStage = exports.useFlyoutActivityStage = function useFlyoutActivityStage(_ref) {
+  var _ctx$state$flyouts$fi;
+  var flyoutId = _ref.flyoutId,
+    level = _ref.level;
+  var isActive = (0, _hooks.useIsFlyoutActive)(flyoutId);
+  var hasChild = (0, _hooks.useHasChildFlyout)(flyoutId);
+  var layoutMode = (0, _hooks.useFlyoutLayoutMode)();
+  var ctx = (0, _provider.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 ? _const.STAGE_ACTIVE : _const.STAGE_INACTIVE);
+  var stageRef = (0, _react.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`.
+   */
+  (0, _react.useEffect)(function () {
+    var s = stageRef.current;
+    var next = null;
+    if (s === _const.STAGE_ACTIVE && !isActive) next = _const.STAGE_CLOSING;else if (s === _const.STAGE_INACTIVE && isActive) {
+      next = _const.STAGE_RETURNING;
+    } else if (level === _const.LEVEL_MAIN && isActive && s === _const.STAGE_ACTIVE && hasChild && layoutMode === _const.LAYOUT_MODE_STACKED) next = _const.STAGE_BACKGROUNDING;else if (level === _const.LEVEL_MAIN && (s === _const.STAGE_BACKGROUNDED || s === _const.STAGE_BACKGROUNDING) && (!hasChild || layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE)) next = _const.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, (0, _actions.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 _const.STAGE_OPENING:
+      case _const.STAGE_RETURNING:
+        return _const.STAGE_ACTIVE;
+      case _const.STAGE_CLOSING:
+        return _const.STAGE_INACTIVE;
+      case _const.STAGE_BACKGROUNDING:
+        return _const.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 = (0, _react.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, (0, _actions.setActivityStage)(flyoutId, nextStage));
+      stageRef.current = nextStage;
+    }
+  }, [ctx, flyoutId]);
+  return {
+    activityStage: stage,
+    onAnimationEnd: onAnimationEnd
+  };
+};

package/lib/components/flyout/manager/const.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STAGE_RETURNING = exports.STAGE_OPENING = exports.STAGE_INACTIVE = exports.STAGE_CLOSING = exports.STAGE_BACKGROUNDING = exports.STAGE_BACKGROUNDED = exports.STAGE_ACTIVE = exports.SESSION_START = exports.SESSION_NEVER = exports.SESSION_INHERIT = exports.PROPERTY_LEVEL = exports.PROPERTY_LAYOUT_MODE = exports.PROPERTY_FLYOUT = exports.LEVEL_MAIN = exports.LEVEL_CHILD = exports.LAYOUT_MODE_STACKED = exports.LAYOUT_MODE_SIDE_BY_SIDE = void 0;
+/*
+ * 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.
+ */
+
+/**
+ * Allowed values for `session` prop to control the way the session is managed for a flyout.
+ */
+var SESSION_START = exports.SESSION_START = 'start';
+var SESSION_INHERIT = exports.SESSION_INHERIT = 'inherit';
+var SESSION_NEVER = exports.SESSION_NEVER = 'never';
+var PREFIX = 'data-managed-flyout';
+
+/**
+ * Data attribute applied to a managed flyout element to help identify it as a managed flyout.
+ */
+var PROPERTY_FLYOUT = exports.PROPERTY_FLYOUT = "".concat(PREFIX);
+
+/**
+ * Data attribute indicating whether the flyout is the `main` or `child` flyout.
+ */
+var PROPERTY_LEVEL = exports.PROPERTY_LEVEL = "".concat(PREFIX, "-level");
+
+/**
+ * Data attribute representing how multiple flyouts are laid out
+ * (`side-by-side` or `stacked`).
+ */
+var PROPERTY_LAYOUT_MODE = exports.PROPERTY_LAYOUT_MODE = "".concat(PREFIX, "-layout-mode");
+
+/** Stacked layout mode where child flyouts overlay on top of the main flyout. */
+var LAYOUT_MODE_STACKED = exports.LAYOUT_MODE_STACKED = 'stacked';
+/** Side-by-side layout mode where child flyouts render adjacent to the main flyout. */
+var LAYOUT_MODE_SIDE_BY_SIDE = exports.LAYOUT_MODE_SIDE_BY_SIDE = 'side-by-side';
+
+/** The primary (parent) flyout in a session. */
+var LEVEL_MAIN = exports.LEVEL_MAIN = 'main';
+/** The secondary (child) flyout spawned by the main flyout. */
+var LEVEL_CHILD = exports.LEVEL_CHILD = 'child';
+
+/** Flyout is mounting and playing its opening animation. */
+var STAGE_OPENING = exports.STAGE_OPENING = 'opening';
+/** Flyout is fully visible and interactive. */
+var STAGE_ACTIVE = exports.STAGE_ACTIVE = 'active';
+/** Flyout is unmounted or not currently visible/interactable. */
+var STAGE_INACTIVE = exports.STAGE_INACTIVE = 'inactive';
+/** Main flyout is transitioning behind an active session flyout. */
+var STAGE_BACKGROUNDING = exports.STAGE_BACKGROUNDING = 'backgrounding';
+/** Main flyout is backgrounded behind an active session flyout. */
+var STAGE_BACKGROUNDED = exports.STAGE_BACKGROUNDED = 'backgrounded';
+/** Flyout is returning to the foreground from a backgrounded state. */
+var STAGE_RETURNING = exports.STAGE_RETURNING = 'returning';
+/** Flyout is playing its closing animation. */
+var STAGE_CLOSING = exports.STAGE_CLOSING = 'closing';

package/lib/components/flyout/manager/context.js

@@ -0,0 +1,41 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsInManagedFlyout = exports.EuiFlyoutIsManagedProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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; }
+/*
+ * 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.
+ */
+
+// Context to track if we're within a managed flyout
+var EuiFlyoutIsManagedContext = /*#__PURE__*/(0, _react.createContext)(false);
+
+/**
+ * React provider that marks descendants as being rendered inside
+ * an EUI managed flyout. Used by hooks/components to alter behavior
+ * (e.g., focus handling) when inside a managed flyout tree.
+ */
+var EuiFlyoutIsManagedProvider = exports.EuiFlyoutIsManagedProvider = function EuiFlyoutIsManagedProvider(_ref) {
+  var isManaged = _ref.isManaged,
+    children = _ref.children;
+  return (0, _react2.jsx)(EuiFlyoutIsManagedContext.Provider, {
+    value: isManaged
+  }, children);
+};
+
+/**
+ * Hook that returns `true` when called within an EUI managed flyout subtree.
+ */
+var useIsInManagedFlyout = exports.useIsInManagedFlyout = function useIsInManagedFlyout() {
+  return (0, _react.useContext)(EuiFlyoutIsManagedContext);
+};