@elastic/eui 106.1.0-amsterdam.0 → 106.2.0-snapshot.1757009122780

package/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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/optimize/es/components/flyout/manager/flyout_child.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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.
+ */
+
+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/optimize/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/optimize/es/components/flyout/manager/flyout_main.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "pushMinBreakpoint", "type", "side"];
+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; }
+/*
+ * 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/optimize/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;")
+    }
+  };
+};

package/optimize/es/components/flyout/manager/flyout_managed.js

@@ -0,0 +1,125 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "onClose", "level", "size", "css"];
+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; }
+/*
+ * 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, { useEffect, useRef } from 'react';
+import { EuiFlyoutComponent } from '../flyout.component';
+import { useFlyoutManager as _useFlyoutManager, useIsFlyoutActive, useParentFlyoutSize, useFlyoutLayoutMode, useFlyoutId } from './hooks';
+import { useEuiMemoizedStyles } from '../../../services';
+import { useResizeObserver } from '../../observer/resize_observer';
+import { euiManagedFlyoutStyles } from './flyout_managed.styles';
+import { EuiFlyoutMenuContext } from '../flyout_menu_context';
+import { validateManagedFlyoutSize, validateSizeCombination, createValidationErrorMessage, isNamedSize } from './validation';
+import { LEVEL_CHILD, PROPERTY_FLYOUT, PROPERTY_LAYOUT_MODE, PROPERTY_LEVEL } from './const';
+import { EuiFlyoutIsManagedProvider } from './context';
+import { useFlyoutActivityStage } from './activity_stage';
+
+/**
+ * Props for `EuiManagedFlyout`, the internal persistent flyout used by
+ * the manager. Extends base flyout props and requires a `level` to
+ * distinguish `main` vs `child` behavior.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var useFlyoutManager = function useFlyoutManager() {
+  var context = _useFlyoutManager();
+  if (!context) {
+    throw new Error('EuiManagedFlyout must be used within an EuiFlyoutManager');
+  }
+  return context;
+};
+
+/**
+ * Persistent managed flyout rendered inside the provider. Handles:
+ * - registration/unregistration with the manager
+ * - size validation and parent/child size compatibility
+ * - width tracking for responsive layouts
+ * - lifecycle stage transitions and data attributes for styling
+ */
+export var EuiManagedFlyout = function EuiManagedFlyout(_ref) {
+  var id = _ref.id,
+    onCloseProp = _ref.onClose,
+    level = _ref.level,
+    size = _ref.size,
+    customCss = _ref.css,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var flyoutId = useFlyoutId(id);
+  var flyoutRef = useRef(null);
+  var _useFlyoutManager2 = useFlyoutManager(),
+    addFlyout = _useFlyoutManager2.addFlyout,
+    closeFlyout = _useFlyoutManager2.closeFlyout,
+    setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth;
+  var isActive = useIsFlyoutActive(flyoutId);
+  var parentSize = useParentFlyoutSize(flyoutId);
+
+  // Get layout mode for responsive behavior
+  var layoutMode = useFlyoutLayoutMode();
+  var styles = useEuiMemoizedStyles(euiManagedFlyoutStyles);
+
+  // Validate size and add flyout
+  useEffect(function () {
+    // Validate that managed flyouts use named sizes (s, m, l)
+    var sizeTypeError = validateManagedFlyoutSize(size, flyoutId, level);
+    if (sizeTypeError) {
+      throw new Error(createValidationErrorMessage(sizeTypeError));
+    }
+
+    // For child flyouts, validate parent-child combinations
+    if (level === LEVEL_CHILD && parentSize && isNamedSize(size) && isNamedSize(parentSize)) {
+      var combinationError = validateSizeCombination(parentSize, size);
+      if (combinationError) {
+        combinationError.flyoutId = flyoutId;
+        combinationError.level = level;
+        throw new Error(createValidationErrorMessage(combinationError));
+      }
+    }
+    addFlyout(flyoutId, level, size);
+    return function () {
+      closeFlyout(flyoutId);
+    };
+  }, [size, flyoutId, level, parentSize, addFlyout, closeFlyout]);
+
+  // Track width changes for flyouts
+  var _useResizeObserver = useResizeObserver(isActive ? flyoutRef.current : null, 'width'),
+    width = _useResizeObserver.width;
+  var onClose = function onClose(event) {
+    onCloseProp(event);
+    closeFlyout(flyoutId);
+  };
+
+  // Update width in manager state when it changes
+  useEffect(function () {
+    if (isActive && width) {
+      setFlyoutWidth(flyoutId, width);
+    }
+  }, [flyoutId, level, isActive, width, setFlyoutWidth]);
+  var _useFlyoutActivitySta = useFlyoutActivityStage({
+      flyoutId: flyoutId,
+      level: level
+    }),
+    activityStage = _useFlyoutActivitySta.activityStage,
+    onAnimationEnd = _useFlyoutActivitySta.onAnimationEnd;
+  return ___EmotionJSX(EuiFlyoutIsManagedProvider, {
+    isManaged: true
+  }, ___EmotionJSX(EuiFlyoutMenuContext.Provider, {
+    value: {
+      onClose: onClose
+    }
+  }, ___EmotionJSX(EuiFlyoutComponent, _extends({
+    id: flyoutId,
+    ref: flyoutRef,
+    css: [styles.managedFlyout, customCss, styles.stage(activityStage, props.side), ";label:EuiManagedFlyout;"]
+  }, _objectSpread(_objectSpread({}, props), {}, _defineProperty(_defineProperty(_defineProperty({
+    onClose: onClose,
+    size: size,
+    onAnimationEnd: onAnimationEnd
+  }, PROPERTY_FLYOUT, true), PROPERTY_LAYOUT_MODE, layoutMode), PROPERTY_LEVEL, level))))));
+};