@elastic/eui 110.0.0 → 111.0.0

package/test-env/components/flyout/manager/actions.js

@@ -0,0 +1,159 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = 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");
+/** Dispatched to go back one session (remove current session). */
+var ACTION_GO_BACK = exports.ACTION_GO_BACK = "".concat(PREFIX, "/goBack");
+/** Dispatched to navigate to a specific flyout (remove all sessions after it). */
+var ACTION_GO_TO_FLYOUT = exports.ACTION_GO_TO_FLYOUT = "".concat(PREFIX, "/goToFlyout");
+/** Dispatched to set push padding offset for a side. */
+var ACTION_SET_PUSH_PADDING = exports.ACTION_SET_PUSH_PADDING = "".concat(PREFIX, "/setPushPadding");
+var ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD_UNMANAGED_FLYOUT = "".concat(PREFIX, "/addUnmanagedFlyout");
+var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFlyout");
+
+/**
+ * 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. */
+
+/** Go back one session (remove current session from stack). */
+
+/** Navigate to a specific flyout (remove all sessions after it). */
+
+/** Set push padding offset for a specific side. */
+
+/** Union of all flyout manager actions. */
+
+/**
+ * Register a flyout with the manager.
+ * - `title` is used for the flyout menu.
+ * - `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, title) {
+  var level = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _const.LEVEL_MAIN;
+  var size = arguments.length > 3 ? arguments[3] : undefined;
+  return {
+    type: ACTION_ADD,
+    flyoutId: flyoutId,
+    title: title,
+    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
+  };
+};
+
+/** Go back one session (remove current session from stack). */
+var goBack = exports.goBack = function goBack() {
+  return {
+    type: ACTION_GO_BACK
+  };
+};
+
+/** Navigate to a specific flyout (remove all sessions after it). */
+var goToFlyout = exports.goToFlyout = function goToFlyout(flyoutId) {
+  return {
+    type: ACTION_GO_TO_FLYOUT,
+    flyoutId: flyoutId
+  };
+};
+
+/** Set push padding offset for a specific side. */
+var setPushPadding = exports.setPushPadding = function setPushPadding(side, width) {
+  return {
+    type: ACTION_SET_PUSH_PADDING,
+    side: side,
+    width: width
+  };
+};
+
+/** Register an unmanaged flyout for z-index positioning purposes */
+var addUnmanagedFlyout = exports.addUnmanagedFlyout = function addUnmanagedFlyout(flyoutId) {
+  return {
+    type: ACTION_ADD_UNMANAGED_FLYOUT,
+    flyoutId: flyoutId
+  };
+};
+
+/** Unregister an unmanaged flyout */
+var closeUnmanagedFlyout = exports.closeUnmanagedFlyout = function closeUnmanagedFlyout(flyoutId) {
+  return {
+    type: ACTION_CLOSE_UNMANAGED_FLYOUT,
+    flyoutId: flyoutId
+  };
+};

package/test-env/components/flyout/manager/activity_stage.js

@@ -0,0 +1,101 @@
+"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]);
+
+  /**
+   * Get the stage to transition to for given current stage.
+   * Returns `null` if stage should remain unchanged.
+   *
+   * Stage transitions:
+   *  - OPENING / RETURNING -> ACTIVE
+   *  - CLOSING -> INACTIVE
+   *  - BACKGROUNDING -> BACKGROUNDED
+   */
+  var getNextStage = function getNextStage(stage) {
+    switch (stage) {
+      case _const.STAGE_OPENING:
+      case _const.STAGE_RETURNING:
+        return _const.STAGE_ACTIVE;
+      case _const.STAGE_CLOSING:
+        return _const.STAGE_INACTIVE;
+      case _const.STAGE_BACKGROUNDING:
+        return _const.STAGE_BACKGROUNDED;
+    }
+    return null;
+  };
+
+  /**
+   * onAnimationEnd event handler that must be passed to EuiFlyout.
+   * It handles transitions between stages and updates activity stage
+   * in EuiFlyoutManagerContext.
+   */
+  var onAnimationEnd = (0, _react.useCallback)(function () {
+    var currentStage = stageRef.current;
+    var nextStage = getNextStage(currentStage);
+    if (nextStage && nextStage !== currentStage) {
+      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, nextStage));
+      stageRef.current = nextStage;
+    }
+  }, [ctx, flyoutId]);
+  return {
+    activityStage: stage,
+    onAnimationEnd: onAnimationEnd
+  };
+};

package/test-env/components/flyout/manager/const.js

@@ -0,0 +1,62 @@
+"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.SESSION_START = exports.SESSION_NEVER = exports.SESSION_INHERIT = 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.
+ */
+
+/**
+ * Allowed values for `session` prop to control the way the session is managed for a flyout.
+ */
+var SESSION_START = exports.SESSION_START = 'start';
+var SESSION_INHERIT = exports.SESSION_INHERIT = 'inherit';
+var SESSION_NEVER = exports.SESSION_NEVER = 'never';
+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/test-env/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/test-env/components/flyout/manager/flyout_child.js

@@ -0,0 +1,76 @@
+"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_managed = require("./flyout_managed");
+var _hooks = require("./hooks");
+var _const = require("./const");
+var _const2 = require("../const");
+var _react2 = require("@emotion/react");
+var _excluded = ["css", "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.
+ */
+/**
+ * Managed child flyout that renders alongside or stacked over the main flyout,
+ * depending on the current layout mode. Handles required managed flyout props.
+ */
+function EuiFlyoutChild(_ref) {
+  var customCss = _ref.css,
+    _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 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: customCss
+  }));
+}

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