@elastic/eui 110.0.0 → 111.1.0

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

@@ -0,0 +1,227 @@
+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", "onClose", "onActive", "level", "size", "css", "flyoutMenuProps"];
+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, { useEffect, useMemo, useRef } from 'react';
+import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiI18n } from '../../i18n';
+import { useResizeObserver } from '../../observer/resize_observer';
+import { EuiFlyoutComponent } from '../flyout.component';
+import { EuiFlyoutMenuContext } from '../flyout_menu_context';
+import { useFlyoutActivityStage } from './activity_stage';
+import { LEVEL_CHILD, LEVEL_MAIN, PROPERTY_FLYOUT, PROPERTY_LAYOUT_MODE, PROPERTY_LEVEL } from './const';
+import { EuiFlyoutIsManagedProvider } from './context';
+import { euiManagedFlyoutStyles } from './flyout_managed.styles';
+import { useFlyoutManager as _useFlyoutManager, useCurrentSession, useFlyoutId, useFlyoutLayoutMode, useIsFlyoutActive, useParentFlyoutSize } from './hooks';
+import { useCurrentMainFlyout, useIsFlyoutRegistered } from './selectors';
+import { createValidationErrorMessage, isNamedSize, validateManagedFlyoutSize, validateSizeCombination } from './validation';
+
+/**
+ * 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,
+    onActiveProp = _ref.onActive,
+    level = _ref.level,
+    sizeProp = _ref.size,
+    customCss = _ref.css,
+    _flyoutMenuProps = _ref.flyoutMenuProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var flyoutId = useFlyoutId(id);
+  var flyoutRef = useRef(null);
+  var _useFlyoutManager2 = useFlyoutManager(),
+    addFlyout = _useFlyoutManager2.addFlyout,
+    closeFlyout = _useFlyoutManager2.closeFlyout,
+    setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth,
+    goBack = _useFlyoutManager2.goBack,
+    _historyItems = _useFlyoutManager2.historyItems;
+  var parentSize = useParentFlyoutSize(flyoutId);
+  var parentFlyout = useCurrentMainFlyout();
+  var layoutMode = useFlyoutLayoutMode();
+  var styles = useEuiMemoizedStyles(euiManagedFlyoutStyles);
+
+  // Set default size based on level: main defaults to 'm', child defaults to 's'
+  var size = sizeProp !== null && sizeProp !== void 0 ? sizeProp : level === LEVEL_CHILD ? 's' : 'm';
+
+  // Validate size
+  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.parentFlyoutId = parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.flyoutId;
+      combinationError.level = level;
+      throw new Error(createValidationErrorMessage(combinationError));
+    }
+  }
+  var defaultTitle = useEuiI18n('euiFlyoutManaged.defaultTitle', 'Unknown Flyout');
+
+  // Set title from flyoutMenuProps or aria-label
+  // TODO: allow aria-labelledby references to be used
+  var title = (_flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.title) || props['aria-label'];
+  if (process.env.NODE_ENV === 'development' && level === LEVEL_MAIN && !title) {
+    console.warn("Managed flyout \"".concat(flyoutId, "\" requires a title, which can be provided through 'flyoutMenuProps.title' or 'aria-label'. Using default title: \"").concat(defaultTitle, "\""));
+    title = defaultTitle;
+  }
+  var isActive = useIsFlyoutActive(flyoutId);
+  var currentSession = useCurrentSession();
+  var flyoutExistsInManager = useIsFlyoutRegistered(flyoutId);
+
+  // Stabilize the onClose callback
+  var onCloseCallbackRef = useRef();
+  onCloseCallbackRef.current = function (e) {
+    if (onCloseProp) {
+      var event = e || new MouseEvent('click');
+      onCloseProp(event);
+    }
+  };
+
+  // Stabilize the onActive callback
+  var onActiveCallbackRef = useRef();
+  onActiveCallbackRef.current = onActiveProp;
+
+  // Track if flyout was ever registered to avoid false positives on initial mount
+  var wasRegisteredRef = useRef(false);
+
+  // Register with flyout manager context when open, remove when closed
+  useEffect(function () {
+    addFlyout(flyoutId, title, level, size);
+    return function () {
+      closeFlyout(flyoutId);
+
+      // Reset navigation tracking when explicitly closed via isOpen=false
+      wasRegisteredRef.current = false;
+    };
+  }, [flyoutId, title, level, size, addFlyout, closeFlyout]);
+
+  // Detect when flyout has been removed from manager state (e.g., via Back button)
+  // and trigger onClose callback to notify the parent component
+  useEffect(function () {
+    if (flyoutExistsInManager) {
+      wasRegisteredRef.current = true;
+    }
+
+    // If flyout was previously registered, is marked as open, but no longer exists in manager state,
+    // it was removed via navigation (Back button) - trigger close callback
+    if (wasRegisteredRef.current && !flyoutExistsInManager) {
+      var _onCloseCallbackRef$c;
+      (_onCloseCallbackRef$c = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c === void 0 || _onCloseCallbackRef$c.call(onCloseCallbackRef, new MouseEvent('navigation'));
+      wasRegisteredRef.current = false; // Reset to avoid repeated calls
+    }
+  }, [flyoutExistsInManager, flyoutId]);
+
+  // Monitor current session changes and fire onActive callback when this flyout becomes active
+  useEffect(function () {
+    if (!onActiveCallbackRef.current || !currentSession) {
+      return;
+    }
+
+    // Make sure callback is only fired for the flyout that changed
+    var mainChanged = level === LEVEL_MAIN && currentSession.mainFlyoutId === flyoutId;
+    var childChanged = level === LEVEL_CHILD && currentSession.childFlyoutId === flyoutId;
+    if (mainChanged || childChanged) {
+      onActiveCallbackRef.current();
+    }
+  }, [currentSession, flyoutId, level]);
+  useEffect(function () {
+    return function () {
+      // Only remove from manager on component unmount, don't trigger close callback
+      closeFlyout(flyoutId);
+    };
+  }, [closeFlyout, flyoutId]);
+
+  // Track width changes for flyouts
+  var _useResizeObserver = useResizeObserver(isActive ? flyoutRef.current : null, 'width'),
+    width = _useResizeObserver.width;
+
+  // Pass the stabilized onClose callback to the flyout menu context
+  var onClose = function onClose(e) {
+    var _onCloseCallbackRef$c2;
+    (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, e);
+  };
+
+  // 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;
+
+  // Note: history controls are only relevant for main flyouts
+  var historyItems = useMemo(function () {
+    var result = level === LEVEL_MAIN ? _historyItems : undefined;
+    return result;
+  }, [level, _historyItems]);
+  var backButtonProps = useMemo(function () {
+    return level === LEVEL_MAIN ? {
+      onClick: goBack
+    } : undefined;
+  }, [level, goBack]);
+  var showBackButton = historyItems ? historyItems.length > 0 : false;
+  var flyoutMenuProps = _objectSpread(_objectSpread({}, _flyoutMenuProps), {}, {
+    historyItems: historyItems,
+    showBackButton: showBackButton,
+    backButtonProps: backButtonProps,
+    title: title
+  });
+  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, level), ";label:EuiManagedFlyout;"]
+  }, _objectSpread(_objectSpread({}, props), {}, _defineProperty(_defineProperty(_defineProperty({
+    onClose: onClose,
+    size: size,
+    flyoutMenuProps: flyoutMenuProps,
+    onAnimationEnd: onAnimationEnd
+  }, PROPERTY_FLYOUT, true), PROPERTY_LAYOUT_MODE, layoutMode), PROPERTY_LEVEL, level))))));
+};

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

@@ -0,0 +1,69 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * 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, keyframes } from '@emotion/react';
+import { euiCanAnimate, logicalCSS } from '../../../global_styling';
+import { LEVEL_MAIN, STAGE_ACTIVE, STAGE_BACKGROUNDED, STAGE_BACKGROUNDING, STAGE_CLOSING, STAGE_INACTIVE, STAGE_OPENING, STAGE_RETURNING } from './const';
+import { DEFAULT_SIDE } from '../const';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "hklg7q-managedFlyout",
+  styles: "perspective:1000px;transform-style:preserve-3d;label:managedFlyout;"
+} : {
+  name: "hklg7q-managedFlyout",
+  styles: "perspective:1000px;transform-style:preserve-3d;label:managedFlyout;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+/**
+ * Emotion styles for managed flyouts.
+ * Provides base 3D context and animations tied to managed flyout stages
+ * via data attributes.
+ */
+export var euiManagedFlyoutStyles = function euiManagedFlyoutStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    stage: function stage(activeStage) {
+      var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_SIDE;
+      var level = arguments.length > 2 ? arguments[2] : undefined;
+      // Animation for moving flyout backwards in 3D space (z-axis) when inactive
+      var euiFlyoutSlideBack3D = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        from {\n          transform: translateZ(0) translateX(0) scale(1);\n          filter: blur(0px);\n          opacity: 1;\n        }\n        to {\n          transform: translateZ(-1500px) translateX(", ") scale(0.5);\n          filter: blur(3px);\n          opacity: 0.6;\n        }\n      "])), side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)');
+
+      // Animation for bringing flyout forward from 3D space when transitioning to active
+      var euiFlyoutSlideForward3D = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        from {\n          transform: translateZ(-500px) translateX(", ") scale(0.85);\n          filter: blur(3px);\n          opacity: 0.6;\n        }\n        to {\n          transform: translateZ(0) translateX(0) scale(1);\n          filter: blur(0px);\n          opacity: 1;\n        }\n      "])), side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)');
+      // When flyout is becoming inactive, animate backwards in 3D space
+      var inactiveTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:", euiFlyoutSlideBack3D, " ", euiTheme.animation.extraSlow, " ", euiTheme.animation.resistance, " forwards;pointer-events:none;};label:inactiveTransition;");
+
+      // When flyout is becoming active from a backgrounded state, animate forward in 3D space
+      var returningTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:", euiFlyoutSlideForward3D, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, " forwards;};label:returningTransition;");
+      var noTransition = /*#__PURE__*/css(euiCanAnimate, "{animation:none;opacity:1;};label:noTransition;");
+      var activeFlyout = /*#__PURE__*/css("z-index:", parseInt(euiTheme.levels.flyout) + 1, ";pointer-events:auto;;label:activeFlyout;");
+      var inactiveFlyout = /*#__PURE__*/css(side === 'left' ? logicalCSS('right', '100vw') : logicalCSS('left', '100vw'), " transform:translateX(", side === 'left' ? 'calc(-100vw - 100%)' : 'calc(100vw + 100%)', ");;label:inactiveFlyout;");
+      switch (activeStage) {
+        case STAGE_OPENING:
+          // Apply a higher z-index to opening main flyouts for seamless
+          // transitions from previously active main flyouts
+          return [level === LEVEL_MAIN && activeFlyout];
+        case STAGE_ACTIVE:
+          return [activeFlyout, noTransition];
+        case STAGE_BACKGROUNDING:
+          return [inactiveTransition];
+        case STAGE_BACKGROUNDED:
+          return [inactiveFlyout, noTransition];
+        case STAGE_RETURNING:
+          return [activeFlyout, returningTransition];
+        case STAGE_INACTIVE:
+          return [inactiveFlyout, noTransition];
+        case STAGE_CLOSING:
+          return [inactiveTransition];
+      }
+    },
+    managedFlyout: _ref
+  };
+};

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

@@ -0,0 +1,55 @@
+/*
+ * 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 { useContext, useRef } from 'react';
+import { warnOnce, useGeneratedHtmlId } from '../../../services';
+import { EuiFlyoutManagerContext } from './provider';
+import { useIsFlyoutRegistered } from './selectors';
+
+// Ensure uniqueness across multiple hook instances, including in test envs
+var autoGeneratedFlyoutIdCounter = 0;
+export { useIsFlyoutActive, useHasActiveSession, useCurrentSession, useCurrentMainFlyout, useCurrentChildFlyout, useFlyoutWidth, useParentFlyoutSize, useHasChildFlyout, usePushPaddingOffsets, useHasPushPadding } from './selectors';
+export { useFlyoutLayoutMode } from './layout_mode';
+export { useIsInManagedFlyout } from './context';
+
+// Convenience selector for a flyout's activity stage
+
+/** Access the flyout manager context (state and actions). */
+export var useFlyoutManager = function useFlyoutManager() {
+  return useContext(EuiFlyoutManagerContext);
+};
+
+/**
+ * Stable flyout ID utility. Uses the passed `id` if provided and not already registered,
+ * otherwise generates a deterministic ID for the component's lifetime.
+ * The ID remains stable across re-renders to maintain consistency in effects and other hooks.
+ */
+export var useFlyoutId = function useFlyoutId(flyoutId) {
+  var defaultId = useGeneratedHtmlId({
+    prefix: 'flyout-'
+  });
+  var isRegistered = useIsFlyoutRegistered(flyoutId);
+
+  // Use ref to maintain ID stability across re-renders
+  var componentIdRef = useRef(undefined);
+  if (!componentIdRef.current) {
+    // Determine the ID to use
+    if (!flyoutId) {
+      // No ID provided, generate a new one
+      componentIdRef.current = "".concat(defaultId, "-").concat(++autoGeneratedFlyoutIdCounter);
+    } else if (isRegistered) {
+      // ID is provided but already registered, generate a new one
+      warnOnce("flyout-id-".concat(flyoutId), "Flyout with ID ".concat(flyoutId, " already registered; using new ID ").concat(defaultId));
+      componentIdRef.current = "".concat(defaultId, "-").concat(++autoGeneratedFlyoutIdCounter);
+    } else {
+      // ID is provided and not registered, use it
+      componentIdRef.current = flyoutId;
+    }
+  }
+  return componentIdRef.current;
+};

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

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+/**
+ * Convenience re-exports of bound action creators for external usage.
+ */
+export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, setActivityStage as setActivityStageAction } from './actions';
+
+/** Reducer and default state for the flyout manager. */
+export { flyoutManagerReducer, initialState } from './reducer';
+
+/** Provider component exposing the Flyout Manager API via context. */
+export { EuiFlyoutManager } from './provider';
+
+/**
+ * Hooks for reading manager state and derived information.
+ */
+/**
+ * Selectors and derived state hooks for managed flyouts.
+ */
+export { useCurrentChildFlyout, useCurrentMainFlyout, useCurrentSession, useFlyoutId, useFlyoutLayoutMode, useFlyoutManager, useFlyoutWidth, useHasChildFlyout, useIsFlyoutActive, useIsInManagedFlyout, useHasActiveSession, useParentFlyoutSize, usePushPaddingOffsets, useHasPushPadding } from './hooks';
+export { EuiFlyoutChild } from './flyout_child';
+export { EuiFlyoutMain } from './flyout_main';
+
+/** Utility functions for flyout sizing and layout. */
+export { getWidthFromSize } from './layout_mode';

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

@@ -0,0 +1,167 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/*
+ * 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, useMemo, useState } from 'react';
+import { useEuiTheme } from '../../../services';
+import { setLayoutMode } from './actions';
+import { useCurrentChildFlyout, useCurrentMainFlyout, useCurrentSession, useFlyoutWidth } from './selectors';
+import { useFlyoutManager } from './hooks';
+import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED } from './const';
+/**
+ * Hook to handle responsive layout mode for managed flyouts.
+ * Decides whether to place flyouts side-by-side or stacked based on
+ * viewport width and flyout widths/sizes.
+ */
+export var useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
+  var _context$state;
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var context = useFlyoutManager();
+  var currentSession = useCurrentSession();
+  var parentFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.mainFlyoutId;
+  var childFlyoutId = currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId;
+  var parentFlyout = useCurrentMainFlyout();
+  var childFlyout = useCurrentChildFlyout();
+  var parentWidth = useFlyoutWidth(parentFlyoutId);
+  var childWidth = useFlyoutWidth(childFlyoutId);
+  var hasFlyouts = Boolean(parentFlyoutId);
+  var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : Infinity),
+    _useState2 = _slicedToArray(_useState, 2),
+    windowWidth = _useState2[0],
+    setWindowWidth = _useState2[1];
+
+  // Extract specific context values
+  var dispatch = context === null || context === void 0 ? void 0 : context.dispatch;
+  var currentLayoutMode = context === null || context === void 0 || (_context$state = context.state) === null || _context$state === void 0 ? void 0 : _context$state.layoutMode;
+  var setMode = useCallback(function (layoutMode) {
+    if (dispatch) {
+      dispatch(setLayoutMode(layoutMode));
+    }
+  }, [dispatch]);
+  useEffect(function () {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    var rafId = 0;
+    var handleResize = function handleResize() {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      rafId = requestAnimationFrame(function () {
+        return setWindowWidth(window.innerWidth);
+      });
+    };
+    window.addEventListener('resize', handleResize);
+    return function () {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // Calculate the desired layout mode
+  var desiredLayoutMode = useMemo(function () {
+    // Skip calculation if no flyouts open
+    if (!hasFlyouts) {
+      return null;
+    }
+
+    // Thresholds to prevent thrashing near the breakpoint.
+    var THRESHOLD_TO_SIDE_BY_SIDE = 85;
+    var THRESHOLD_TO_STACKED = 95;
+
+    // If the window is too small, set the mode to stacked.
+    //
+    // The value is based on the maximum width of a flyout in
+    // `composeFlyoutSizing` in `flyout.styles.ts` multiplied
+    // by 2 (open flyouts side-by-side).
+    if (windowWidth < Math.round(euiTheme.breakpoint.s * 1.4)) {
+      return LAYOUT_MODE_STACKED;
+    }
+    if (!childFlyoutId) {
+      return LAYOUT_MODE_SIDE_BY_SIDE;
+    }
+    var parentWidthValue = parentWidth;
+    var childWidthValue = childWidth;
+    if (!parentWidthValue && parentFlyout !== null && parentFlyout !== void 0 && parentFlyout.size) {
+      parentWidthValue = getWidthFromSize(parentFlyout.size);
+    }
+    if (!childWidthValue && childFlyout !== null && childFlyout !== void 0 && childFlyout.size) {
+      childWidthValue = getWidthFromSize(childFlyout.size);
+    }
+    if (!parentWidthValue || !childWidthValue) {
+      return LAYOUT_MODE_SIDE_BY_SIDE;
+    }
+    var combinedWidth = parentWidthValue + childWidthValue;
+    var combinedWidthPercentage = combinedWidth / windowWidth * 100;
+
+    // Handle fill size flyouts: keep layout as side-by-side when fill flyout is present
+    // This allows fill flyouts to dynamically calculate their width based on the other in the pair
+    if ((parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size) === 'fill' || (childFlyout === null || childFlyout === void 0 ? void 0 : childFlyout.size) === 'fill') {
+      // For fill flyouts, we want to maintain side-by-side layout to enable dynamic width calculation
+      // Only stack if the viewport is too small (below the small breakpoint)
+      if (windowWidth >= Math.round(euiTheme.breakpoint.s * 1.4)) {
+        return LAYOUT_MODE_SIDE_BY_SIDE;
+      }
+    }
+    if (currentLayoutMode === LAYOUT_MODE_STACKED) {
+      return combinedWidthPercentage <= THRESHOLD_TO_SIDE_BY_SIDE ? LAYOUT_MODE_SIDE_BY_SIDE : LAYOUT_MODE_STACKED;
+    } else {
+      return combinedWidthPercentage >= THRESHOLD_TO_STACKED ? LAYOUT_MODE_STACKED : LAYOUT_MODE_SIDE_BY_SIDE;
+    }
+  }, [hasFlyouts, windowWidth, euiTheme, childFlyoutId, parentWidth, childWidth, parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size, childFlyout === null || childFlyout === void 0 ? void 0 : childFlyout.size, currentLayoutMode]);
+
+  // Apply the desired layout mode
+  useEffect(function () {
+    if (desiredLayoutMode && currentLayoutMode !== desiredLayoutMode) {
+      setMode(desiredLayoutMode);
+    }
+  }, [desiredLayoutMode, currentLayoutMode, setMode]);
+};
+
+/** Convert a flyout `size` value to a pixel width using theme breakpoints. */
+export var getWidthFromSize = function getWidthFromSize(size) {
+  if (typeof size === 'number') {
+    return size;
+  }
+  if (typeof size === 'string') {
+    var parsed = parseInt(size, 10);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+
+    // Size is a function of a percentage of `vw`, defined in `composeFlyoutSizing` in `flyout.styles.ts`
+    switch (size) {
+      case 's':
+        return Math.round(window.innerWidth * 0.25);
+      case 'm':
+        return Math.round(window.innerWidth * 0.5);
+      case 'l':
+        return Math.round(window.innerWidth * 0.75);
+      case 'fill':
+        return Math.round(window.innerWidth * 0.9);
+      default:
+        break;
+    }
+  }
+  return 0;
+};
+
+/** Current layout mode for managed flyouts (`side-by-side` or `stacked`). */
+export var useFlyoutLayoutMode = function useFlyoutLayoutMode() {
+  var _context$state2;
+  var context = useFlyoutManager();
+  return (context === null || context === void 0 || (_context$state2 = context.state) === null || _context$state2 === void 0 ? void 0 : _context$state2.layoutMode) || LAYOUT_MODE_SIDE_BY_SIDE;
+};

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

@@ -0,0 +1,57 @@
+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 = ["getState", "subscribe"];
+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, { createContext, useContext, useMemo } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { useApplyFlyoutLayoutMode } from './layout_mode';
+import { getFlyoutManagerStore } from './store';
+
+/**
+ * React context that exposes the Flyout Manager API (state + actions).
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiFlyoutManagerContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Provides the Flyout Manager API via context and runs layout-mode logic.
+ */
+export var EuiFlyoutManager = function EuiFlyoutManager(_ref) {
+  var children = _ref.children;
+  var _getFlyoutManagerStor = getFlyoutManagerStore(),
+    getState = _getFlyoutManagerStor.getState,
+    subscribe = _getFlyoutManagerStor.subscribe,
+    rest = _objectWithoutProperties(_getFlyoutManagerStor, _excluded);
+  var state = useSyncExternalStore(subscribe, getState, getState);
+  var api = useMemo(function () {
+    return _objectSpread({
+      state: state
+    }, rest);
+  }, [state, rest]);
+  return ___EmotionJSX(EuiFlyoutManagerContext.Provider, {
+    value: api
+  }, ___EmotionJSX(EuiFlyoutManagerContainer, null, children));
+};
+var EuiFlyoutManagerContainer = function EuiFlyoutManagerContainer(_ref2) {
+  var children = _ref2.children;
+  useApplyFlyoutLayoutMode();
+  return ___EmotionJSX(React.Fragment, null, children);
+};
+
+/** Hook to access the Flyout Manager API from context. */
+export var useFlyoutManager = function useFlyoutManager() {
+  return useContext(EuiFlyoutManagerContext);
+};