@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

package/lib/components/flyout/flyout_menu.js

@@ -0,0 +1,95 @@
+"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.EuiFlyoutMenu = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
+var _flex = require("../flex");
+var _title = require("../title");
+var _flyout_close_button = require("./_flyout_close_button");
+var _flyout_menu = require("./flyout_menu.styles");
+var _flyout_menu_context = require("./flyout_menu_context");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "className", "backButton", "popover", "title", "hideCloseButton"];
+/*
+ * 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 _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 _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 EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    backButton = _ref.backButton,
+    popover = _ref.popover,
+    title = _ref.title,
+    hideCloseButton = _ref.hideCloseButton,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_flyout_menu_context.EuiFlyoutMenuContext),
+    onClose = _useContext.onClose;
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_menu.euiFlyoutMenuStyles);
+  var classes = (0, _classnames.default)('euiFlyoutMenu', className);
+  var titleId = (0, _services.useGeneratedHtmlId)();
+  var titleNode;
+  if (title) {
+    titleNode = (0, _react2.jsx)(_title.EuiTitle, {
+      size: "xxs",
+      id: titleId
+    }, (0, _react2.jsx)("h3", null, title));
+  }
+  var handleClose = function handleClose(event) {
+    onClose === null || onClose === void 0 || onClose(event);
+  };
+  var closeButton;
+  if (!hideCloseButton) {
+    closeButton = (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
+      onClose: handleClose,
+      side: "right",
+      closeButtonPosition: "inside"
+    });
+  }
+  return (0, _react2.jsx)("div", _extends({
+    className: classes,
+    css: styles.euiFlyoutMenu__container
+  }, rest), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gutterSize: "none",
+    responsive: false
+  }, backButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, backButton), popover && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, popover), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: true
+  }), children && (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, children), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__spacer
+  })), closeButton);
+};
+EuiFlyoutMenu.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  backButton: _propTypes.default.node,
+  popover: _propTypes.default.node,
+  title: _propTypes.default.node,
+  hideCloseButton: _propTypes.default.bool
+};

package/lib/components/flyout/flyout_menu.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFlyoutMenuStyles = 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.
+ */
+
+var euiFlyoutMenuStyles = exports.euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutMenu__container: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;")
+  };
+};

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiFlyoutContext = void 0;
+exports.EuiFlyoutMenuContext = void 0;
 var _react = require("react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -13,9 +13,4 @@ var _react = require("react");
  * Side Public License, v 1.
  */
 
-/**
- * Context shared between the main and child flyouts
- * @internal
- */
-
-var EuiFlyoutContext = exports.EuiFlyoutContext = /*#__PURE__*/(0, _react.createContext)(null);
+var EuiFlyoutMenuContext = exports.EuiFlyoutMenuContext = /*#__PURE__*/(0, _react.createContext)({});

package/lib/components/flyout/flyout_resizable.js

@@ -11,6 +11,7 @@ var _resizable_container = require("../resizable_container");
 var _helpers = require("../resizable_container/helpers");
 var _flyout = require("./flyout");
 var _flyout_resizable = require("./flyout_resizable.styles");
+var _const = require("./const");
 var _react2 = require("@emotion/react");
 var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ownFocus", "children"];
 /*
@@ -40,9 +41,9 @@ var EuiFlyoutResizable = exports.EuiFlyoutResizable = /*#__PURE__*/(0, _react.fo
     minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
     onResize = _ref.onResize,
     _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'right' : _ref$side,
+    side = _ref$side === void 0 ? _const.DEFAULT_SIDE : _ref$side,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'overlay' : _ref$type,
+    type = _ref$type === void 0 ? _const.DEFAULT_TYPE : _ref$type,
     _ref$ownFocus = _ref.ownFocus,
     ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
     children = _ref.children,

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,16 @@ 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 _sessions.useEuiFlyoutSession;
+    return _manager.useIsInManagedFlyout;
   }
 });
 var _flyout = require("./flyout");
@@ -69,5 +69,5 @@ 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");

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

@@ -0,0 +1,103 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setLayoutMode = exports.setFlyoutWidth = exports.setActivityStage = exports.setActiveFlyout = exports.closeFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_CLOSE = 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");
+
+/**
+ * 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. */
+
+/** Union of all flyout manager actions. */
+
+/**
+ * Register a flyout with the manager.
+ * - `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) {
+  var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _const.LEVEL_MAIN;
+  var size = arguments.length > 2 ? arguments[2] : undefined;
+  return {
+    type: ACTION_ADD,
+    flyoutId: flyoutId,
+    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
+  };
+};

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

@@ -0,0 +1,77 @@
+"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]);
+
+  /**
+   * OPENING / RETURNING -> ACTIVE
+   * CLOSING -> INACTIVE
+   * BACKGROUNDING -> BACKGROUNDED
+   */
+  var onAnimationEnd = (0, _react.useCallback)(function () {
+    var s = stageRef.current;
+    var next = s === _const.STAGE_OPENING || s === _const.STAGE_RETURNING ? _const.STAGE_ACTIVE : s === _const.STAGE_CLOSING ? _const.STAGE_INACTIVE : s === _const.STAGE_BACKGROUNDING ? _const.STAGE_BACKGROUNDED : null;
+    if (next && next !== s) {
+      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, next));
+      stageRef.current = next;
+    }
+  }, [ctx, flyoutId]);
+  return {
+    activityStage: stage,
+    onAnimationEnd: onAnimationEnd
+  };
+};

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

@@ -0,0 +1,56 @@
+"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.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.
+ */
+
+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);
+};

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

@@ -0,0 +1,85 @@
+"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.EuiFlyoutChild = EuiFlyoutChild;
+var _react = _interopRequireDefault(require("react"));
+var _services = require("../../../services");
+var _flyout_child = require("./flyout_child.styles");
+var _flyout_managed = require("./flyout_managed");
+var _hooks = require("./hooks");
+var _const = require("./const");
+var _const2 = require("../const");
+var _react2 = require("@emotion/react");
+var _excluded = ["css", "backgroundStyle", "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 `EuiFlyoutChild`, a managed child flyout that pairs with a main flyout.
+ *
+ * Notes:
+ * - `type`, `side`, and `level` are fixed by the component and thus omitted.
+ * - `backgroundStyle` toggles between default and shaded backgrounds.
+ */
+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 _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 child flyout that renders alongside or stacked over the main flyout,
+ * depending on the current layout mode. Handles background styling and required
+ * managed flyout props.
+ */
+function EuiFlyoutChild(_ref) {
+  var customCss = _ref.css,
+    backgroundStyle = _ref.backgroundStyle,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? _const2.DEFAULT_SIDE : _ref$side,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var styles = (0, _services.useEuiMemoizedStyles)(_flyout_child.euiChildFlyoutStyles);
+  var mainFlyout = (0, _hooks.useCurrentMainFlyout)();
+  var mainWidth = (0, _hooks.useFlyoutWidth)(mainFlyout === null || mainFlyout === void 0 ? void 0 : mainFlyout.flyoutId);
+  var layoutMode = (0, _hooks.useFlyoutLayoutMode)();
+
+  // Runtime validation: prevent orphan child flyouts
+  if (!mainFlyout) {
+    var errorMessage = 'EuiFlyoutChild must be used with an EuiFlyoutMain. ' + 'This usually means the main flyout was not rendered before the child flyout.';
+
+    // In development, throw an error to catch the issue early
+    if (process.env.NODE_ENV === 'development') {
+      throw new Error(errorMessage);
+    }
+
+    // In production, log a warning and prevent rendering
+    console.error('EuiFlyoutChild validation failed:', errorMessage);
+    return null;
+  }
+  var style = {};
+  if (mainWidth && layoutMode === _const.LAYOUT_MODE_SIDE_BY_SIDE) {
+    style = _defineProperty({}, side, mainWidth);
+  } else if (layoutMode === _const.LAYOUT_MODE_STACKED) {
+    style = {
+      zIndex: Number(euiTheme.levels.flyout) + 2
+    };
+  }
+  return (0, _react2.jsx)(_flyout_managed.EuiManagedFlyout, _extends({}, props, {
+    style: style,
+    level: _const.LEVEL_CHILD,
+    type: "overlay",
+    ownFocus: false,
+    side: side,
+    css: [backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, customCss, ";label:EuiFlyoutChild;"]
+  }));
+}

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiChildFlyoutStyles = 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 child flyouts.
+ * Provides background variants coordinated with the EUI theme.
+ *
+ * Returns an object with the following CSS snippets:
+ * - `backgroundDefault`: plain background
+ * - `backgroundShaded`: subdued background used to de-emphasize child content
+ */
+var euiChildFlyoutStyles = exports.euiChildFlyoutStyles = function euiChildFlyoutStyles(euiThemeContext) {
+  var _euiThemeContext$euiT = euiThemeContext.euiTheme.colors,
+    backgroundBasePlain = _euiThemeContext$euiT.backgroundBasePlain,
+    backgroundBaseSubdued = _euiThemeContext$euiT.backgroundBaseSubdued;
+  return {
+    backgroundDefault: /*#__PURE__*/(0, _react.css)("background:", backgroundBasePlain, ";;label:backgroundDefault;"),
+    backgroundShaded: /*#__PURE__*/(0, _react.css)("background:", backgroundBaseSubdued, ";;label:backgroundShaded;")
+  };
+};