@elastic/eui 106.1.0 → 106.2.0-snapshot.1757009122780

package/es/components/flyout/flyout_menu.js

@@ -0,0 +1,86 @@
+var _excluded = ["children", "className", "backButton", "popover", "title", "hideCloseButton"];
+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; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import classNames from 'classnames';
+import PropTypes from "prop-types";
+import React, { useContext } from 'react';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiTitle } from '../title';
+import { EuiFlyoutCloseButton } from './_flyout_close_button';
+import { euiFlyoutMenuStyles } from './flyout_menu.styles';
+import { EuiFlyoutMenuContext } from './flyout_menu_context';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var 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 = useContext(EuiFlyoutMenuContext),
+    onClose = _useContext.onClose;
+  var styles = useEuiMemoizedStyles(euiFlyoutMenuStyles);
+  var classes = classNames('euiFlyoutMenu', className);
+  var titleId = useGeneratedHtmlId();
+  var titleNode;
+  if (title) {
+    titleNode = ___EmotionJSX(EuiTitle, {
+      size: "xxs",
+      id: titleId
+    }, ___EmotionJSX("h3", null, title));
+  }
+  var handleClose = function handleClose(event) {
+    onClose === null || onClose === void 0 || onClose(event);
+  };
+  var closeButton;
+  if (!hideCloseButton) {
+    closeButton = ___EmotionJSX(EuiFlyoutCloseButton, {
+      onClose: handleClose,
+      side: "right",
+      closeButtonPosition: "inside"
+    });
+  }
+  return ___EmotionJSX("div", _extends({
+    className: classes,
+    css: styles.euiFlyoutMenu__container
+  }, rest), ___EmotionJSX(EuiFlexGroup, {
+    alignItems: "center",
+    justifyContent: "spaceBetween",
+    gutterSize: "none",
+    responsive: false
+  }, backButton && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, backButton), popover && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, popover), titleNode && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, titleNode), ___EmotionJSX(EuiFlexItem, {
+    grow: true
+  }), children && ___EmotionJSX(EuiFlexItem, {
+    grow: false
+  }, children), ___EmotionJSX(EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__spacer
+  })), closeButton);
+};
+EuiFlyoutMenu.propTypes = {
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
+  backButton: PropTypes.node,
+  popover: PropTypes.node,
+  title: PropTypes.node,
+  hideCloseButton: PropTypes.bool
+};

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

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+export var euiFlyoutMenuStyles = function euiFlyoutMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiFlyoutMenu__container: /*#__PURE__*/css("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";padding-block-start:calc(", euiTheme.size.m, " * 0.8);.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
+    euiFlyoutMenu__spacer: /*#__PURE__*/css("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;")
+  };
+};

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

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

package/es/components/flyout/flyout_resizable.js

@@ -22,6 +22,7 @@ import { EuiResizableButton } from '../resizable_container';
 import { getPosition } from '../resizable_container/helpers';
 import { EuiFlyout } from './flyout';
 import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
+import { DEFAULT_SIDE, DEFAULT_TYPE } from './const';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // If not omitted, the correct props don't show up in the docs prop table
 
@@ -32,9 +33,9 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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 ? DEFAULT_SIDE : _ref$side,
     _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'overlay' : _ref$type,
+    type = _ref$type === void 0 ? DEFAULT_TYPE : _ref$type,
     _ref$ownFocus = _ref.ownFocus,
     ownFocus = _ref$ownFocus === void 0 ? true : _ref$ownFocus,
     children = _ref.children,

package/es/components/flyout/hooks.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useIsWithinMinBreakpoint } from '../../services';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
+import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_TYPE } from './const';
+
+/**
+ * Determines if a flyout should be rendered in a "pushed" state based on its
+ * configuration and the current window size.
+ */
+export var useIsPushed = function useIsPushed(props) {
+  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
+    _usePropsWithComponen2 = _usePropsWithComponen.type,
+    type = _usePropsWithComponen2 === void 0 ? DEFAULT_TYPE : _usePropsWithComponen2,
+    _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
+    pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
+  return type === 'push' && windowIsLargeEnoughToPush;
+};

package/es/components/flyout/index.js

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

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

@@ -0,0 +1,97 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { LEVEL_MAIN } from './const';
+var PREFIX = 'eui/flyoutManager';
+/** Dispatched when a flyout registers itself with the manager. */
+export var ACTION_ADD = "".concat(PREFIX, "/add");
+/** Dispatched to remove a flyout from the manager (usually on close/unmount). */
+export var ACTION_CLOSE = "".concat(PREFIX, "/close");
+/** Dispatched to set which flyout is currently active within the session. */
+export var ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
+/** Dispatched when an active flyout's pixel width changes (for responsive layout). */
+export var ACTION_SET_WIDTH = "".concat(PREFIX, "/setWidth");
+/** Dispatched to switch layout mode between `side-by-side` and `stacked`. */
+export var ACTION_SET_LAYOUT_MODE = "".concat(PREFIX, "/setLayoutMode");
+/** Dispatched to update a flyout's activity stage (e.g., opening -> active). */
+export var ACTION_SET_ACTIVITY_STAGE = "".concat(PREFIX, "/setActivityStage");
+
+/**
+ * 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`).
+ */
+export var addFlyout = function addFlyout(flyoutId) {
+  var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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. */
+export var closeFlyout = function closeFlyout(flyoutId) {
+  return {
+    type: ACTION_CLOSE,
+    flyoutId: flyoutId
+  };
+};
+
+/** Set or clear the active flyout for the current session. */
+export var setActiveFlyout = function setActiveFlyout(flyoutId) {
+  return {
+    type: ACTION_SET_ACTIVE,
+    flyoutId: flyoutId
+  };
+};
+
+/** Record a flyout's current width in pixels. */
+export var setFlyoutWidth = function setFlyoutWidth(flyoutId, width) {
+  return {
+    type: ACTION_SET_WIDTH,
+    flyoutId: flyoutId,
+    width: width
+  };
+};
+
+/** Switch layout mode between `side-by-side` and `stacked`. */
+export var setLayoutMode = function setLayoutMode(layoutMode) {
+  return {
+    type: ACTION_SET_LAYOUT_MODE,
+    layoutMode: layoutMode
+  };
+};
+
+/** Update a flyout's activity stage. */
+export var setActivityStage = function setActivityStage(flyoutId, activityStage) {
+  return {
+    type: ACTION_SET_ACTIVITY_STAGE,
+    flyoutId: flyoutId,
+    activityStage: activityStage
+  };
+};

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

@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_MAIN, STAGE_ACTIVE, STAGE_BACKGROUNDED, STAGE_BACKGROUNDING, STAGE_CLOSING, STAGE_INACTIVE, STAGE_OPENING, STAGE_RETURNING } from './const';
+import { useFlyoutLayoutMode, useHasChildFlyout, useIsFlyoutActive } from './hooks';
+import { setActivityStage } from './actions';
+import { useFlyoutManager } from './provider';
+/**
+ * Encapsulates all activity-stage transitions and animation-driven updates
+ * for managed flyouts.
+ */
+export var useFlyoutActivityStage = function useFlyoutActivityStage(_ref) {
+  var _ctx$state$flyouts$fi;
+  var flyoutId = _ref.flyoutId,
+    level = _ref.level;
+  var isActive = useIsFlyoutActive(flyoutId);
+  var hasChild = useHasChildFlyout(flyoutId);
+  var layoutMode = useFlyoutLayoutMode();
+  var ctx = useFlyoutManager();
+  var stage = (ctx === null || ctx === void 0 || (_ctx$state$flyouts$fi = ctx.state.flyouts.find(function (f) {
+    return f.flyoutId === flyoutId;
+  })) === null || _ctx$state$flyouts$fi === void 0 ? void 0 : _ctx$state$flyouts$fi.activityStage) || (isActive ? STAGE_ACTIVE : STAGE_INACTIVE);
+  var stageRef = useRef(stage);
+  if (stageRef.current !== stage) {
+    stageRef.current = stage;
+  }
+
+  /**
+   * 1. ACTIVE -> CLOSING when no longer the active flyout.
+   * 2. INACTIVE -> RETURNING when it becomes active again (e.g., reopened or brought forward).
+   * 3. (Main flyout only) ACTIVE + stacked + has child -> BACKGROUNDING (begin background animation).
+   * 4. (Main only) BACKGROUNDED/BACKGROUNDING + (child gone OR side-by-side) -> RETURNING (bring main to foreground).
+   *
+   * Any stages that depend on animation end (OPENING, RETURNING, CLOSING, BACKGROUNDING) are finalized in `onAnimationEnd`.
+   */
+  useEffect(function () {
+    var s = stageRef.current;
+    var next = null;
+    if (s === STAGE_ACTIVE && !isActive) next = STAGE_CLOSING;else if (s === STAGE_INACTIVE && isActive) next = STAGE_RETURNING;else if (level === LEVEL_MAIN && isActive && s === STAGE_ACTIVE && hasChild && layoutMode === LAYOUT_MODE_STACKED) next = STAGE_BACKGROUNDING;else if (level === LEVEL_MAIN && (s === STAGE_BACKGROUNDED || s === STAGE_BACKGROUNDING) && (!hasChild || layoutMode === LAYOUT_MODE_SIDE_BY_SIDE)) next = STAGE_RETURNING;
+    if (next && next !== s) {
+      var _ctx$dispatch;
+      ctx === null || ctx === void 0 || (_ctx$dispatch = ctx.dispatch) === null || _ctx$dispatch === void 0 || _ctx$dispatch.call(ctx, setActivityStage(flyoutId, next));
+      stageRef.current = next;
+    }
+  }, [isActive, hasChild, layoutMode, level, ctx, flyoutId, stage]);
+
+  /**
+   * OPENING / RETURNING -> ACTIVE
+   * CLOSING -> INACTIVE
+   * BACKGROUNDING -> BACKGROUNDED
+   */
+  var onAnimationEnd = useCallback(function () {
+    var s = stageRef.current;
+    var next = s === STAGE_OPENING || s === STAGE_RETURNING ? STAGE_ACTIVE : s === STAGE_CLOSING ? STAGE_INACTIVE : s === STAGE_BACKGROUNDING ? 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, setActivityStage(flyoutId, next));
+      stageRef.current = next;
+    }
+  }, [ctx, flyoutId]);
+  return {
+    activityStage: stage,
+    onAnimationEnd: onAnimationEnd
+  };
+};

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

@@ -0,0 +1,50 @@
+/*
+ * 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.
+ */
+export var PROPERTY_FLYOUT = "".concat(PREFIX);
+
+/**
+ * Data attribute indicating whether the flyout is the `main` or `child` flyout.
+ */
+export var PROPERTY_LEVEL = "".concat(PREFIX, "-level");
+
+/**
+ * Data attribute representing how multiple flyouts are laid out
+ * (`side-by-side` or `stacked`).
+ */
+export var PROPERTY_LAYOUT_MODE = "".concat(PREFIX, "-layout-mode");
+
+/** Stacked layout mode where child flyouts overlay on top of the main flyout. */
+export var LAYOUT_MODE_STACKED = 'stacked';
+/** Side-by-side layout mode where child flyouts render adjacent to the main flyout. */
+export var LAYOUT_MODE_SIDE_BY_SIDE = 'side-by-side';
+
+/** The primary (parent) flyout in a session. */
+export var LEVEL_MAIN = 'main';
+/** The secondary (child) flyout spawned by the main flyout. */
+export var LEVEL_CHILD = 'child';
+
+/** Flyout is mounting and playing its opening animation. */
+export var STAGE_OPENING = 'opening';
+/** Flyout is fully visible and interactive. */
+export var STAGE_ACTIVE = 'active';
+/** Flyout is unmounted or not currently visible/interactable. */
+export var STAGE_INACTIVE = 'inactive';
+/** Main flyout is transitioning behind an active session flyout. */
+export var STAGE_BACKGROUNDING = 'backgrounding';
+/** Main flyout is backgrounded behind an active session flyout. */
+export var STAGE_BACKGROUNDED = 'backgrounded';
+/** Flyout is returning to the foreground from a backgrounded state. */
+export var STAGE_RETURNING = 'returning';
+/** Flyout is playing its closing animation. */
+export var STAGE_CLOSING = 'closing';

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

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { createContext, useContext } from 'react';
+
+// Context to track if we're within a managed flyout
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiFlyoutIsManagedContext = /*#__PURE__*/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.
+ */
+export var EuiFlyoutIsManagedProvider = function EuiFlyoutIsManagedProvider(_ref) {
+  var isManaged = _ref.isManaged,
+    children = _ref.children;
+  return ___EmotionJSX(EuiFlyoutIsManagedContext.Provider, {
+    value: isManaged
+  }, children);
+};
+
+/**
+ * Hook that returns `true` when called within an EUI managed flyout subtree.
+ */
+export var useIsInManagedFlyout = function useIsInManagedFlyout() {
+  return useContext(EuiFlyoutIsManagedContext);
+};

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

@@ -0,0 +1,80 @@
+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); }
+var _excluded = ["css", "backgroundStyle", "side"];
+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; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../../services';
+import { euiChildFlyoutStyles } from './flyout_child.styles';
+import { EuiManagedFlyout } from './flyout_managed';
+import { useCurrentMainFlyout, useFlyoutLayoutMode, useFlyoutWidth } from './hooks';
+import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_CHILD } from './const';
+import { DEFAULT_SIDE } from '../const';
+
+/**
+ * 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.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * 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.
+ */
+export function EuiFlyoutChild(_ref) {
+  var customCss = _ref.css,
+    backgroundStyle = _ref.backgroundStyle,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? DEFAULT_SIDE : _ref$side,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var styles = useEuiMemoizedStyles(euiChildFlyoutStyles);
+  var mainFlyout = useCurrentMainFlyout();
+  var mainWidth = useFlyoutWidth(mainFlyout === null || mainFlyout === void 0 ? void 0 : mainFlyout.flyoutId);
+  var layoutMode = 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 === LAYOUT_MODE_SIDE_BY_SIDE) {
+    style = _defineProperty({}, side, mainWidth);
+  } else if (layoutMode === LAYOUT_MODE_STACKED) {
+    style = {
+      zIndex: Number(euiTheme.levels.flyout) + 2
+    };
+  }
+  return ___EmotionJSX(EuiManagedFlyout, _extends({}, props, {
+    style: style,
+    level: LEVEL_CHILD,
+    type: "overlay",
+    ownFocus: false,
+    side: side,
+    css: [backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, customCss, ";label:EuiFlyoutChild;"]
+  }));
+}

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

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+/**
+ * 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
+ */
+export var euiChildFlyoutStyles = function euiChildFlyoutStyles(euiThemeContext) {
+  var _euiThemeContext$euiT = euiThemeContext.euiTheme.colors,
+    backgroundBasePlain = _euiThemeContext$euiT.backgroundBasePlain,
+    backgroundBaseSubdued = _euiThemeContext$euiT.backgroundBaseSubdued;
+  return {
+    backgroundDefault: /*#__PURE__*/css("background:", backgroundBasePlain, ";;label:backgroundDefault;"),
+    backgroundShaded: /*#__PURE__*/css("background:", backgroundBaseSubdued, ";;label:backgroundShaded;")
+  };
+};

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

@@ -0,0 +1,65 @@
+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); }
+var _excluded = ["id", "pushMinBreakpoint", "type", "side"];
+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; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiManagedFlyout } from './flyout_managed';
+import { useHasChildFlyout, useFlyoutId } from './hooks';
+import { euiMainFlyoutStyles } from './flyout_main.styles';
+import { useEuiMemoizedStyles } from '../../../services';
+import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_SIDE, DEFAULT_TYPE } from '../const';
+import { useIsPushed } from '../hooks';
+import { LEVEL_MAIN } from './const';
+
+/**
+ * Props for `EuiFlyoutMain`, the primary managed flyout component.
+ * The `level` prop is fixed internally to `main` and is therefore omitted.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * Managed main flyout. Handles ID management, child-flyout styling,
+ * and push/overlay behavior based on provided props.
+ */
+export function EuiFlyoutMain(_ref) {
+  var id = _ref.id,
+    _ref$pushMinBreakpoin = _ref.pushMinBreakpoint,
+    pushMinBreakpoint = _ref$pushMinBreakpoin === void 0 ? DEFAULT_PUSH_MIN_BREAKPOINT : _ref$pushMinBreakpoin,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? DEFAULT_TYPE : _ref$type,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? DEFAULT_SIDE : _ref$side,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var flyoutId = useFlyoutId(id);
+  var hasChildFlyout = useHasChildFlyout(flyoutId);
+  var styles = useEuiMemoizedStyles(euiMainFlyoutStyles);
+  var isPushed = useIsPushed({
+    type: type,
+    pushMinBreakpoint: pushMinBreakpoint
+  });
+  var cssStyles = [hasChildFlyout && !isPushed && styles.hasChildFlyout[side]];
+  var style = {};
+  return ___EmotionJSX(EuiManagedFlyout, _extends({
+    id: flyoutId,
+    level: LEVEL_MAIN,
+    style: style,
+    css: cssStyles
+  }, _objectSpread(_objectSpread({}, props), {}, {
+    pushMinBreakpoint: pushMinBreakpoint,
+    type: type,
+    side: side
+  })));
+}

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+/**
+ * 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.
+ */
+export var euiMainFlyoutStyles = function euiMainFlyoutStyles(euiThemeContext) {
+  var thin = euiThemeContext.euiTheme.border.thin;
+  return {
+    hasChildFlyout: {
+      left: /*#__PURE__*/css("box-shadow:none;border-inline-end:", thin, ";;label:left;"),
+      right: /*#__PURE__*/css("box-shadow:none;border-inline-start:", thin, ";;label:right;")
+    }
+  };
+};