@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

package/optimize/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/{lib/components/flyout/flyout_context.js → optimize/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/optimize/lib/components/flyout/flyout_resizable.js

@@ -15,6 +15,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"];
 /*
@@ -35,9 +36,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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/lib/components/flyout/manager/context.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+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/optimize/lib/components/flyout/manager/flyout_child.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutChild = EuiFlyoutChild;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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.
+ */
+/**
+ * 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 = (0, _objectWithoutProperties2.default)(_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 = (0, _defineProperty2.default)({}, side, mainWidth);
+  } else if (layoutMode === _const.LAYOUT_MODE_STACKED) {
+    style = {
+      zIndex: Number(euiTheme.levels.flyout) + 2
+    };
+  }
+  return (0, _react2.jsx)(_flyout_managed.EuiManagedFlyout, (0, _extends2.default)({}, props, {
+    style: style,
+    level: _const.LEVEL_CHILD,
+    type: "overlay",
+    ownFocus: false,
+    side: side,
+    css: [backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, customCss, ";label:EuiFlyoutChild;"]
+  }));
+}

package/optimize/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;")
+  };
+};

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiFlyoutMain = EuiFlyoutMain;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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 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) { (0, _defineProperty2.default)(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; }
+/**
+ * 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 = (0, _objectWithoutProperties2.default)(_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, (0, _extends2.default)({
+    id: flyoutId,
+    level: _const2.LEVEL_MAIN,
+    style: style,
+    css: cssStyles
+  }, _objectSpread(_objectSpread({}, props), {}, {
+    pushMinBreakpoint: pushMinBreakpoint,
+    type: type,
+    side: side
+  })));
+}

package/optimize/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;")
+    }
+  };
+};