@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

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

@@ -0,0 +1,70 @@
+"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.EuiFlyoutMain = EuiFlyoutMain;
+var _react = _interopRequireDefault(require("react"));
+var _flyout_managed = require("./flyout_managed");
+var _hooks = require("./hooks");
+var _flyout_main = require("./flyout_main.styles");
+var _services = require("../../../services");
+var _const = require("../const");
+var _hooks2 = require("../hooks");
+var _const2 = require("./const");
+var _react2 = require("@emotion/react");
+var _excluded = ["id", "pushMinBreakpoint", "type", "side"];
+/*
+ * 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.
+ */
+/**
+ * Props for `EuiFlyoutMain`, the primary managed flyout component.
+ * The `level` prop is fixed internally to `main` and is therefore omitted.
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+/**
+ * Managed main flyout. Handles ID management, child-flyout styling,
+ * and push/overlay behavior based on provided props.
+ */
+function EuiFlyoutMain(_ref) {
+  var id = _ref.id,
+    _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
+    pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _ref$pushMinBreakpoin,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? _const.DEFAULT_TYPE : _ref$type,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? _const.DEFAULT_SIDE : _ref$side,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var flyoutId = (0, _hooks.useFlyoutId)(id);
+  var hasChildFlyout = (0, _hooks.useHasChildFlyout)(flyoutId);
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_main.euiMainFlyoutStyles);
+  var isPushed = (0, _hooks2.useIsPushed)({
+    type: type,
+    pushMinBreakpoint: pushMinBreakpoint
+  });
+  var cssStyles = [hasChildFlyout && !isPushed && styles.hasChildFlyout[side]];
+  var style = {};
+  return (0, _react2.jsx)(_flyout_managed.EuiManagedFlyout, _extends({
+    id: flyoutId,
+    level: _const2.LEVEL_MAIN,
+    style: style,
+    css: cssStyles
+  }, _objectSpread(_objectSpread({}, props), {}, {
+    pushMinBreakpoint: pushMinBreakpoint,
+    type: type,
+    side: side
+  })));
+}

package/lib/components/flyout/manager/flyout_main.styles.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMainFlyoutStyles = void 0;
+var _react = require("@emotion/react");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Emotion styles for the main (parent) managed flyout.
+ * Adds subtle borders when a child flyout is present, depending on side.
+ *
+ * Returns an object with:
+ * - `hasChildFlyout.left` and `.right`: border styles to separate from child.
+ */
+var euiMainFlyoutStyles = exports.euiMainFlyoutStyles = function euiMainFlyoutStyles(euiThemeContext) {
+  var thin = euiThemeContext.euiTheme.border.thin;
+  return {
+    hasChildFlyout: {
+      left: /*#__PURE__*/(0, _react.css)("box-shadow:none;border-inline-end:", thin, ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)("box-shadow:none;border-inline-start:", thin, ";;label:right;")
+    }
+  };
+};

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

@@ -0,0 +1,136 @@
+"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.EuiManagedFlyout = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _flyout = require("../flyout.component");
+var _hooks = require("./hooks");
+var _services = require("../../../services");
+var _resize_observer = require("../../observer/resize_observer");
+var _flyout_managed = require("./flyout_managed.styles");
+var _flyout_menu_context = require("../flyout_menu_context");
+var _validation = require("./validation");
+var _const = require("./const");
+var _context = require("./context");
+var _activity_stage = require("./activity_stage");
+var _react2 = require("@emotion/react");
+var _excluded = ["id", "onClose", "level", "size", "css"];
+/*
+ * 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.
+ */
+/**
+ * Props for `EuiManagedFlyout`, the internal persistent flyout used by
+ * the manager. Extends base flyout props and requires a `level` to
+ * distinguish `main` vs `child` behavior.
+ */
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+var useFlyoutManager = function useFlyoutManager() {
+  var context = (0, _hooks.useFlyoutManager)();
+  if (!context) {
+    throw new Error('EuiManagedFlyout must be used within an EuiFlyoutManager');
+  }
+  return context;
+};
+
+/**
+ * Persistent managed flyout rendered inside the provider. Handles:
+ * - registration/unregistration with the manager
+ * - size validation and parent/child size compatibility
+ * - width tracking for responsive layouts
+ * - lifecycle stage transitions and data attributes for styling
+ */
+var EuiManagedFlyout = exports.EuiManagedFlyout = function EuiManagedFlyout(_ref) {
+  var id = _ref.id,
+    onCloseProp = _ref.onClose,
+    level = _ref.level,
+    size = _ref.size,
+    customCss = _ref.css,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var flyoutId = (0, _hooks.useFlyoutId)(id);
+  var flyoutRef = (0, _react.useRef)(null);
+  var _useFlyoutManager2 = useFlyoutManager(),
+    addFlyout = _useFlyoutManager2.addFlyout,
+    closeFlyout = _useFlyoutManager2.closeFlyout,
+    setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth;
+  var isActive = (0, _hooks.useIsFlyoutActive)(flyoutId);
+  var parentSize = (0, _hooks.useParentFlyoutSize)(flyoutId);
+
+  // Get layout mode for responsive behavior
+  var layoutMode = (0, _hooks.useFlyoutLayoutMode)();
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_managed.euiManagedFlyoutStyles);
+
+  // Validate size and add flyout
+  (0, _react.useEffect)(function () {
+    // Validate that managed flyouts use named sizes (s, m, l)
+    var sizeTypeError = (0, _validation.validateManagedFlyoutSize)(size, flyoutId, level);
+    if (sizeTypeError) {
+      throw new Error((0, _validation.createValidationErrorMessage)(sizeTypeError));
+    }
+
+    // For child flyouts, validate parent-child combinations
+    if (level === _const.LEVEL_CHILD && parentSize && (0, _validation.isNamedSize)(size) && (0, _validation.isNamedSize)(parentSize)) {
+      var combinationError = (0, _validation.validateSizeCombination)(parentSize, size);
+      if (combinationError) {
+        combinationError.flyoutId = flyoutId;
+        combinationError.level = level;
+        throw new Error((0, _validation.createValidationErrorMessage)(combinationError));
+      }
+    }
+    addFlyout(flyoutId, level, size);
+    return function () {
+      closeFlyout(flyoutId);
+    };
+  }, [size, flyoutId, level, parentSize, addFlyout, closeFlyout]);
+
+  // Track width changes for flyouts
+  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isActive ? flyoutRef.current : null, 'width'),
+    width = _useResizeObserver.width;
+  var onClose = function onClose(event) {
+    onCloseProp(event);
+    closeFlyout(flyoutId);
+  };
+
+  // Update width in manager state when it changes
+  (0, _react.useEffect)(function () {
+    if (isActive && width) {
+      setFlyoutWidth(flyoutId, width);
+    }
+  }, [flyoutId, level, isActive, width, setFlyoutWidth]);
+  var _useFlyoutActivitySta = (0, _activity_stage.useFlyoutActivityStage)({
+      flyoutId: flyoutId,
+      level: level
+    }),
+    activityStage = _useFlyoutActivitySta.activityStage,
+    onAnimationEnd = _useFlyoutActivitySta.onAnimationEnd;
+  return (0, _react2.jsx)(_context.EuiFlyoutIsManagedProvider, {
+    isManaged: true
+  }, (0, _react2.jsx)(_flyout_menu_context.EuiFlyoutMenuContext.Provider, {
+    value: {
+      onClose: onClose
+    }
+  }, (0, _react2.jsx)(_flyout.EuiFlyoutComponent, _extends({
+    id: flyoutId,
+    ref: flyoutRef,
+    css: [styles.managedFlyout, customCss, styles.stage(activityStage, props.side), ";label:EuiManagedFlyout;"]
+  }, _objectSpread(_objectSpread({}, props), {}, _defineProperty(_defineProperty(_defineProperty({
+    onClose: onClose,
+    size: size,
+    onAnimationEnd: onAnimationEnd
+  }, _const.PROPERTY_FLYOUT, true), _const.PROPERTY_LAYOUT_MODE, layoutMode), _const.PROPERTY_LEVEL, level))))));
+};

package/lib/components/flyout/manager/flyout_managed.styles.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiManagedFlyoutStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _const = require("./const");
+var _flyout = require("../flyout.styles");
+var _const2 = require("../const");
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+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.
+ */
+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.
+ */
+var euiManagedFlyoutStyles = exports.euiManagedFlyoutStyles = function euiManagedFlyoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    stage: function stage(activeStage) {
+      var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _const2.DEFAULT_SIDE;
+      // Animation for moving flyout backwards in 3D space (z-axis) when inactive
+      var euiFlyoutSlideBack3D = (0, _react.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 = (0, _react.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__*/(0, _react.css)(_global_styling.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__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideForward3D, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;};label:returningTransition;");
+      var openingTransition = /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", side === 'left' ? _flyout.euiFlyoutSlideInLeft : _flyout.euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;};label:openingTransition;");
+      var noTransition = /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:none;opacity:1;};label:noTransition;");
+      var activeFlyout = /*#__PURE__*/(0, _react.css)("z-index:", parseInt(euiTheme.levels.flyout) + 1, ";pointer-events:auto;;label:activeFlyout;");
+      var inactiveFlyout = /*#__PURE__*/(0, _react.css)(side === 'left' ? (0, _global_styling.logicalCSS)('right', '100vw') : (0, _global_styling.logicalCSS)('left', '100vw'), " transform:translateX(", side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)', ");;label:inactiveFlyout;");
+      switch (activeStage) {
+        case _const.STAGE_OPENING:
+          return [activeFlyout, openingTransition];
+        case _const.STAGE_ACTIVE:
+          return [activeFlyout, noTransition];
+        case _const.STAGE_CLOSING:
+        case _const.STAGE_BACKGROUNDING:
+          return [inactiveTransition];
+        case _const.STAGE_INACTIVE:
+        case _const.STAGE_BACKGROUNDED:
+          return [inactiveFlyout, noTransition];
+        case _const.STAGE_RETURNING:
+          return [activeFlyout, returningTransition];
+      }
+    },
+    managedFlyout: _ref
+  };
+};

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

@@ -0,0 +1,161 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useCurrentChildFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useCurrentChildFlyout;
+  }
+});
+Object.defineProperty(exports, "useCurrentMainFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useCurrentMainFlyout;
+  }
+});
+Object.defineProperty(exports, "useCurrentSession", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useCurrentSession;
+  }
+});
+exports.useFlyoutId = void 0;
+Object.defineProperty(exports, "useFlyoutLayoutMode", {
+  enumerable: true,
+  get: function get() {
+    return _layout_mode.useFlyoutLayoutMode;
+  }
+});
+exports.useFlyoutManager = void 0;
+exports.useFlyoutManagerReducer = useFlyoutManagerReducer;
+Object.defineProperty(exports, "useFlyoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useFlyoutWidth;
+  }
+});
+Object.defineProperty(exports, "useHasActiveSession", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useHasActiveSession;
+  }
+});
+Object.defineProperty(exports, "useHasChildFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useHasChildFlyout;
+  }
+});
+Object.defineProperty(exports, "useIsFlyoutActive", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useIsFlyoutActive;
+  }
+});
+Object.defineProperty(exports, "useIsInManagedFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _context.useIsInManagedFlyout;
+  }
+});
+Object.defineProperty(exports, "useParentFlyoutSize", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useParentFlyoutSize;
+  }
+});
+var _react = require("react");
+var _services = require("../../../services");
+var _reducer = require("./reducer");
+var _actions = require("./actions");
+var _provider = require("./provider");
+var _const = require("./const");
+var _selectors = require("./selectors");
+var _layout_mode = require("./layout_mode");
+var _context = require("./context");
+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; } /*
+ * 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.
+ */
+// Ensure uniqueness across multiple hook instances, including in test envs
+var autoGeneratedFlyoutIdCounter = 0;
+// 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).
+ */
+function useFlyoutManagerReducer() {
+  var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _reducer.initialState;
+  var _useReducer = (0, _react.useReducer)(_reducer.flyoutManagerReducer, initial),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  var addFlyout = (0, _react.useCallback)(function (flyoutId) {
+    var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _const.LEVEL_MAIN;
+    var size = arguments.length > 2 ? arguments[2] : undefined;
+    return dispatch((0, _actions.addFlyout)(flyoutId, level, size));
+  }, []);
+  var closeFlyout = (0, _react.useCallback)(function (flyoutId) {
+    return dispatch((0, _actions.closeFlyout)(flyoutId));
+  }, []);
+  var setActiveFlyout = (0, _react.useCallback)(function (flyoutId) {
+    return dispatch((0, _actions.setActiveFlyout)(flyoutId));
+  }, []);
+  var setFlyoutWidth = (0, _react.useCallback)(function (flyoutId, width) {
+    return dispatch((0, _actions.setFlyoutWidth)(flyoutId, width));
+  }, []);
+  return {
+    state: state,
+    dispatch: dispatch,
+    addFlyout: addFlyout,
+    closeFlyout: closeFlyout,
+    setActiveFlyout: setActiveFlyout,
+    setFlyoutWidth: setFlyoutWidth
+  };
+}
+
+/** Access the flyout manager context (state and actions). */
+var useFlyoutManager = exports.useFlyoutManager = function useFlyoutManager() {
+  return (0, _react.useContext)(_provider.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.
+ */
+var useFlyoutId = exports.useFlyoutId = function useFlyoutId(flyoutId) {
+  var defaultId = (0, _services.useGeneratedHtmlId)({
+    prefix: 'flyout-'
+  });
+  var isRegistered = (0, _selectors.useIsFlyoutRegistered)(flyoutId);
+
+  // Use ref to maintain ID stability across re-renders
+  var componentIdRef = (0, _react.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
+      (0, _services.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/lib/components/flyout/manager/index.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiFlyoutChild", {
+  enumerable: true,
+  get: function get() {
+    return _flyout_child.EuiFlyoutChild;
+  }
+});
+Object.defineProperty(exports, "EuiFlyoutMain", {
+  enumerable: true,
+  get: function get() {
+    return _flyout_main.EuiFlyoutMain;
+  }
+});
+Object.defineProperty(exports, "EuiFlyoutManager", {
+  enumerable: true,
+  get: function get() {
+    return _provider.EuiFlyoutManager;
+  }
+});
+Object.defineProperty(exports, "addFlyoutAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.addFlyout;
+  }
+});
+Object.defineProperty(exports, "closeFlyoutAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.closeFlyout;
+  }
+});
+Object.defineProperty(exports, "flyoutManagerReducer", {
+  enumerable: true,
+  get: function get() {
+    return _reducer.flyoutManagerReducer;
+  }
+});
+Object.defineProperty(exports, "getWidthFromSize", {
+  enumerable: true,
+  get: function get() {
+    return _layout_mode.getWidthFromSize;
+  }
+});
+Object.defineProperty(exports, "initialState", {
+  enumerable: true,
+  get: function get() {
+    return _reducer.initialState;
+  }
+});
+Object.defineProperty(exports, "setActiveFlyoutAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.setActiveFlyout;
+  }
+});
+Object.defineProperty(exports, "setActivityStageAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.setActivityStage;
+  }
+});
+Object.defineProperty(exports, "setFlyoutWidthAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.setFlyoutWidth;
+  }
+});
+Object.defineProperty(exports, "useCurrentChildFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useCurrentChildFlyout;
+  }
+});
+Object.defineProperty(exports, "useCurrentMainFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useCurrentMainFlyout;
+  }
+});
+Object.defineProperty(exports, "useCurrentSession", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useCurrentSession;
+  }
+});
+Object.defineProperty(exports, "useFlyoutId", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useFlyoutId;
+  }
+});
+Object.defineProperty(exports, "useFlyoutLayoutMode", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useFlyoutLayoutMode;
+  }
+});
+Object.defineProperty(exports, "useFlyoutManager", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useFlyoutManager;
+  }
+});
+Object.defineProperty(exports, "useFlyoutWidth", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useFlyoutWidth;
+  }
+});
+Object.defineProperty(exports, "useHasActiveSession", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useHasActiveSession;
+  }
+});
+Object.defineProperty(exports, "useHasChildFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useHasChildFlyout;
+  }
+});
+Object.defineProperty(exports, "useIsFlyoutActive", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useIsFlyoutActive;
+  }
+});
+Object.defineProperty(exports, "useIsInManagedFlyout", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useIsInManagedFlyout;
+  }
+});
+Object.defineProperty(exports, "useParentFlyoutSize", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useParentFlyoutSize;
+  }
+});
+var _actions = require("./actions");
+var _reducer = require("./reducer");
+var _provider = require("./provider");
+var _hooks = require("./hooks");
+var _flyout_child = require("./flyout_child");
+var _flyout_main = require("./flyout_main");
+var _layout_mode = require("./layout_mode");