@elastic/eui 113.1.0 → 113.2.0

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

@@ -14,33 +14,65 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useEuiTheme } from '../../../services';
-import { setLayoutMode } from './actions';
-import { useCurrentChildFlyout, useCurrentMainFlyout, useCurrentSession, useFlyoutWidth } from './selectors';
+import { usePropsWithComponentDefaults } from '../../provider/component_defaults';
+import { useResizeObserver } from '../../observer/resize_observer';
+import { setLayoutMode, setReferenceWidth } from './actions';
 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.
+ * the reference width (the reference container's width, defaulting to
+ * document.body when not set) and flyout widths/sizes.
  */
 export var useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
-  var _context$state;
+  var _ref, _sessions, _state$flyouts$find, _state$flyouts$find2, _context$state;
   var _useEuiTheme = useEuiTheme(),
     euiTheme = _useEuiTheme.euiTheme;
   var context = useFlyoutManager();
-  var currentSession = useCurrentSession();
+  var state = context === null || context === void 0 ? void 0 : context.state;
+
+  // Read the container from manager state (set by flyout components when they
+  // receive a container prop), falling back to componentDefaults (used when
+  // the container is configured globally, e.g. by Kibana). Resolve getter
+  // and selector string so defaults can supply () => HTMLElement | null or
+  // a CSS selector to avoid race when the element is not yet in the DOM.
+  var stateContainerElement = state === null || state === void 0 ? void 0 : state.containerElement;
+  var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', {}),
+    defaultContainerRaw = _usePropsWithComponen.container;
+  var defaultContainer = defaultContainerRaw == null ? null : typeof defaultContainerRaw === 'function' ? defaultContainerRaw() : typeof defaultContainerRaw === 'string' ? function () {
+    if (typeof document === 'undefined') return null;
+    var el = document.querySelector(defaultContainerRaw);
+    return el instanceof HTMLElement ? el : null;
+  }() : defaultContainerRaw instanceof HTMLElement ? defaultContainerRaw : null;
+  var container = (_ref = stateContainerElement !== null && stateContainerElement !== void 0 ? stateContainerElement : defaultContainer) !== null && _ref !== void 0 ? _ref : null;
+
+  // Derive all session/flyout data from the single context read above
+  var sessions = state === null || state === void 0 ? void 0 : state.sessions;
+  var currentSession = sessions ? (_sessions = sessions[sessions.length - 1]) !== null && _sessions !== void 0 ? _sessions : null : null;
   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 parentFlyout = parentFlyoutId ? (_state$flyouts$find = state === null || state === void 0 ? void 0 : state.flyouts.find(function (f) {
+    return f.flyoutId === parentFlyoutId;
+  })) !== null && _state$flyouts$find !== void 0 ? _state$flyouts$find : null : null;
+  var childFlyout = childFlyoutId ? (_state$flyouts$find2 = state === null || state === void 0 ? void 0 : state.flyouts.find(function (f) {
+    return f.flyoutId === childFlyoutId;
+  })) !== null && _state$flyouts$find2 !== void 0 ? _state$flyouts$find2 : null : null;
+  var parentWidth = parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.width;
+  var childWidth = childFlyout === null || childFlyout === void 0 ? void 0 : childFlyout.width;
   var hasFlyouts = Boolean(parentFlyoutId);
+
+  // Observe the container element's width (returns { width: 0 } when null)
+  var containerDimensions = useResizeObserver(container !== null && container !== void 0 ? container : null, 'width');
   var _useState = useState(typeof window !== 'undefined' ? window.innerWidth : Infinity),
     _useState2 = _slicedToArray(_useState, 2),
     windowWidth = _useState2[0],
     setWindowWidth = _useState2[1];
 
+  // Use container width when available, otherwise fall back to window width
+  var containerWidth = container ? containerDimensions.width || container.clientWidth : 0;
+  var referenceWidth = containerWidth || windowWidth;
+
   // 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;
@@ -49,8 +81,10 @@ export var useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
       dispatch(setLayoutMode(layoutMode));
     }
   }, [dispatch]);
+
+  // Only listen to window resize when not using a container
   useEffect(function () {
-    if (typeof window === 'undefined') {
+    if (typeof window === 'undefined' || container) {
       return;
     }
     var rafId = 0;
@@ -69,7 +103,7 @@ export var useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
       }
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [container]);
 
   // Calculate the desired layout mode
   var desiredLayoutMode = useMemo(function () {
@@ -82,46 +116,58 @@ export var useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
     var THRESHOLD_TO_SIDE_BY_SIDE = 85;
     var THRESHOLD_TO_STACKED = 95;
 
-    // If the window is too small, set the mode to stacked.
+    // If the reference width 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)) {
+    if (referenceWidth < Math.round(euiTheme.breakpoint.s * 1.4)) {
       return LAYOUT_MODE_STACKED;
     }
     if (!childFlyoutId) {
       return LAYOUT_MODE_SIDE_BY_SIDE;
     }
+    var isFillParent = (parentFlyout === null || parentFlyout === void 0 ? void 0 : parentFlyout.size) === 'fill';
+    var isFillChild = (childFlyout === null || childFlyout === void 0 ? void 0 : childFlyout.size) === 'fill';
+    var hasFill = isFillParent || isFillChild;
     var parentWidthValue = parentWidth;
     var childWidthValue = childWidth;
+
+    // Resolve unmeasured widths. For fill-size flyouts, estimate as
+    // (90% of referenceWidth − sibling width) rather than a flat 90%.
+    // This avoids the combined estimate exceeding 90% and incorrectly
+    // triggering stacked mode on initial mount.
     if (!parentWidthValue && parentFlyout !== null && parentFlyout !== void 0 && parentFlyout.size) {
-      parentWidthValue = getWidthFromSize(parentFlyout.size);
+      if (isFillParent && childWidthValue) {
+        parentWidthValue = Math.max(0, Math.round(referenceWidth * 0.9 - childWidthValue));
+      } else {
+        parentWidthValue = getWidthFromSize(parentFlyout.size, referenceWidth);
+      }
     }
     if (!childWidthValue && childFlyout !== null && childFlyout !== void 0 && childFlyout.size) {
-      childWidthValue = getWidthFromSize(childFlyout.size);
+      if (isFillChild && parentWidthValue) {
+        childWidthValue = Math.max(0, Math.round(referenceWidth * 0.9 - parentWidthValue));
+      } else {
+        childWidthValue = getWidthFromSize(childFlyout.size, referenceWidth);
+      }
     }
     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;
-      }
+    var combinedWidthPercentage = combinedWidth / referenceWidth * 100;
+
+    // Fill flyouts defeat the hysteresis thresholds, so use the
+    // reference-width breakpoint alone to decide the layout mode.
+    if (hasFill) {
+      return referenceWidth >= Math.round(euiTheme.breakpoint.s * 1.4) ? LAYOUT_MODE_SIDE_BY_SIDE : LAYOUT_MODE_STACKED;
     }
     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]);
+  }, [hasFlyouts, referenceWidth, 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 () {
@@ -129,10 +175,22 @@ export var useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
       setMode(desiredLayoutMode);
     }
   }, [desiredLayoutMode, currentLayoutMode, setMode]);
+
+  // Store reference width in manager state when flyouts are open so the resize
+  // clamp uses the same value as layout mode, avoiding resize past the container.
+  useEffect(function () {
+    if (dispatch && hasFlyouts && Number.isFinite(referenceWidth)) {
+      dispatch(setReferenceWidth(referenceWidth));
+    }
+  }, [dispatch, hasFlyouts, referenceWidth]);
 };
 
-/** Convert a flyout `size` value to a pixel width using theme breakpoints. */
-export var getWidthFromSize = function getWidthFromSize(size) {
+/**
+ * Convert a flyout `size` value to a pixel width.
+ * When `referenceWidth` is provided, named sizes are calculated as a percentage
+ * of that width (container-relative). Otherwise falls back to `window.innerWidth`.
+ */
+export var getWidthFromSize = function getWidthFromSize(size, referenceWidth) {
   if (typeof size === 'number') {
     return size;
   }
@@ -141,17 +199,19 @@ export var getWidthFromSize = function getWidthFromSize(size) {
     if (!Number.isNaN(parsed)) {
       return parsed;
     }
+    var refWidth = referenceWidth !== null && referenceWidth !== void 0 ? referenceWidth : typeof window !== 'undefined' ? window.innerWidth : 0;
 
-    // Size is a function of a percentage of `vw`, defined in `composeFlyoutSizing` in `flyout.styles.ts`
+    // Size is a function of a percentage of the reference width,
+    // matching the proportions defined in `composeFlyoutSizing`
     switch (size) {
       case 's':
-        return Math.round(window.innerWidth * 0.25);
+        return Math.round(refWidth * 0.25);
       case 'm':
-        return Math.round(window.innerWidth * 0.5);
+        return Math.round(refWidth * 0.5);
       case 'l':
-        return Math.round(window.innerWidth * 0.75);
+        return Math.round(refWidth * 0.75);
       case 'fill':
-        return Math.round(window.innerWidth * 0.9);
+        return Math.round(refWidth * 0.9);
       default:
         break;
     }

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

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 
-import { ACTION_ADD, ACTION_CLOSE, ACTION_CLOSE_ALL, ACTION_SET_ACTIVE, ACTION_SET_LAYOUT_MODE, ACTION_SET_WIDTH, ACTION_SET_ACTIVITY_STAGE, ACTION_GO_BACK, ACTION_GO_TO_FLYOUT, ACTION_SET_PUSH_PADDING, ACTION_ADD_UNMANAGED_FLYOUT, ACTION_CLOSE_UNMANAGED_FLYOUT } from './actions';
+import { ACTION_ADD, ACTION_CLOSE, ACTION_CLOSE_ALL, ACTION_SET_ACTIVE, ACTION_SET_LAYOUT_MODE, ACTION_SET_WIDTH, ACTION_SET_ACTIVITY_STAGE, ACTION_GO_BACK, ACTION_GO_TO_FLYOUT, ACTION_SET_PUSH_PADDING, ACTION_ADD_UNMANAGED_FLYOUT, ACTION_CLOSE_UNMANAGED_FLYOUT, ACTION_SET_CONTAINER_ELEMENT, ACTION_SET_REFERENCE_WIDTH } from './actions';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_MAIN, STAGE_OPENING } from './const';
 /**
  * Default flyout manager state used to initialize the reducer.
@@ -80,7 +80,8 @@ export function flyoutManagerReducer() {
         var flyoutId = action.flyoutId,
           title = action.title,
           level = action.level,
-          size = action.size;
+          size = action.size,
+          minWidth = action.minWidth;
 
         // Ignore duplicate registrations
         if (state.flyouts.some(function (f) {
@@ -92,6 +93,7 @@ export function flyoutManagerReducer() {
           level: level,
           flyoutId: flyoutId,
           size: size,
+          minWidth: minWidth,
           activityStage: STAGE_OPENING
         };
         var newFlyouts = [].concat(_toConsumableArray(state.flyouts), [newFlyoutState]);
@@ -332,6 +334,26 @@ export function flyoutManagerReducer() {
           }), {}, _defineProperty({}, side, _width))
         });
       }
+
+    // Store the container element for container-relative layout calculations.
+    case ACTION_SET_CONTAINER_ELEMENT:
+      {
+        if (state.containerElement === action.element) {
+          return state; // No-op if same element
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          containerElement: action.element
+        });
+      }
+    case ACTION_SET_REFERENCE_WIDTH:
+      {
+        if (state.referenceWidth === action.width) {
+          return state;
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          referenceWidth: action.width
+        });
+      }
     default:
       return state;
   }

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

@@ -74,6 +74,12 @@ export var useFlyoutWidth = function useFlyoutWidth(flyoutId) {
   return (_useFlyout = useFlyout(flyoutId)) === null || _useFlyout === void 0 ? void 0 : _useFlyout.width;
 };
 
+/** The configured minWidth (px) of the specified flyout, or `undefined` if not set. */
+export var useFlyoutMinWidth = function useFlyoutMinWidth(flyoutId) {
+  var _useFlyout2;
+  return (_useFlyout2 = useFlyout(flyoutId)) === null || _useFlyout2 === void 0 ? void 0 : _useFlyout2.minWidth;
+};
+
 /** The configured size of the parent (main) flyout for a given child flyout ID. */
 export var useParentFlyoutSize = function useParentFlyoutSize(childFlyoutId) {
   var session = useSession(childFlyoutId);

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, closeAllFlyouts as closeAllFlyoutsAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, goBack as goBackAction, goToFlyout as goToFlyoutAction, addUnmanagedFlyout as addUnmanagedFlyoutAction, closeUnmanagedFlyout as closeUnmanagedFlyoutAction } from './actions';
+import { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, closeAllFlyouts as closeAllFlyoutsAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, goBack as goBackAction, goToFlyout as goToFlyoutAction, addUnmanagedFlyout as addUnmanagedFlyoutAction, closeUnmanagedFlyout as closeUnmanagedFlyoutAction, setContainerElement as setContainerElementAction } from './actions';
 import { flyoutManagerReducer, initialState } from './reducer';
 
 /**
@@ -90,8 +90,8 @@ function createStore() {
     subscribe: subscribe,
     subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
-    addFlyout: function addFlyout(flyoutId, title, level, size) {
-      return dispatch(addFlyoutAction(flyoutId, title, level, size));
+    addFlyout: function addFlyout(flyoutId, title, level, size, minWidth) {
+      return dispatch(addFlyoutAction(flyoutId, title, level, size, minWidth));
     },
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch(closeFlyoutAction(flyoutId));
@@ -108,6 +108,9 @@ function createStore() {
     setPushPadding: function setPushPadding(side, width) {
       return dispatch(setPushPaddingAction(side, width));
     },
+    setContainerElement: function setContainerElement(element) {
+      return dispatch(setContainerElementAction(element));
+    },
     goBack: function goBack() {
       return dispatch(goBackAction());
     },

package/es/components/flyout/use_flyout_resizable.js

@@ -23,13 +23,26 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
     _ref$minWidth = _ref.minWidth,
     minWidth = _ref$minWidth === void 0 ? 0 : _ref$minWidth,
     maxWidth = _ref.maxWidth,
+    siblingFlyoutWidth = _ref.siblingFlyoutWidth,
+    referenceWidth = _ref.referenceWidth,
     onResize = _ref.onResize,
     side = _ref.side,
     _size = _ref.size;
+  // Use container width when provided. When referenceWidth is 0 (e.g. container
+  // not yet measured by ResizeObserver), do not fall back to viewport — that
+  // would allow resizing beyond the container (e.g. over a sidebar). Use 0 so
+  // the clamp keeps the flyout at minWidth until the real width is available.
+  var _referenceWidth = referenceWidth !== undefined ? referenceWidth : typeof window !== 'undefined' ? window.innerWidth : Infinity;
   var getFlyoutMinMaxWidth = useCallback(function (width) {
-    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
-    );
-  }, [minWidth, maxWidth]);
+    var maxResizeWidth = siblingFlyoutWidth ? _referenceWidth * 0.9 - siblingFlyoutWidth : _referenceWidth * 0.9;
+
+    // Clamp between minWidth and the maximum allowed width.
+    // minWidth always takes precedence — if the available space
+    // (maxResizeWidth) is smaller than minWidth, the flyout stays
+    // at minWidth. The fill sibling's CSS will adjust accordingly.
+    var upperBound = Math.min(maxWidth || Infinity, maxResizeWidth);
+    return Math.max(minWidth, Math.min(width, upperBound));
+  }, [minWidth, maxWidth, siblingFlyoutWidth, _referenceWidth]);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     flyoutWidth = _useState2[0],
@@ -52,13 +65,50 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
     }
   }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
 
-  // Update flyout width when consumers pass in a new `size`
+  // Track the previous `_size` prop to distinguish between a consumer size
+  // change (which should reset the width) and a reference-width / constraint
+  // change (which should re-clamp the existing width).
+  // Initialized to `null` so the first render always takes the "reset" path.
+  var prevSizeRef = useRef(null);
+
+  // Track the previous reference width so we can scale proportionally when
+  // the container / viewport resizes (both shrink AND grow).
+  var prevReferenceWidthRef = useRef(_referenceWidth);
+
+  // Update flyout width when consumers pass in a new `size`, or scale
+  // proportionally and re-clamp when constraints change (e.g. container
+  // resize, sibling width change).
   useEffect(function () {
     if (!enabled) return; // Don't update width when resizing is disabled
-    setCallOnResize(false);
-    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
-    setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
-  }, [_size, getFlyoutMinMaxWidth, enabled]);
+
+    if (prevSizeRef.current !== _size) {
+      // The consumer's `size` prop actually changed — reset so the new size takes effect
+      prevSizeRef.current = _size;
+      prevReferenceWidthRef.current = _referenceWidth;
+      setCallOnResize(false);
+      setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
+    } else {
+      var _prevReferenceWidthRe;
+      // Only constraints changed (referenceWidth, sibling width, etc.) —
+      // scale the pixel width proportionally to the reference width change
+      // and then clamp. This preserves the flyout's percentage position in
+      // both directions (viewport shrink AND grow).
+      var prevRefWidth = (_prevReferenceWidthRe = prevReferenceWidthRef.current) !== null && _prevReferenceWidthRe !== void 0 ? _prevReferenceWidthRe : _referenceWidth;
+      prevReferenceWidthRef.current = _referenceWidth;
+      setFlyoutWidth(function (currentWidth) {
+        if (currentWidth && prevRefWidth > 0 && _referenceWidth > 0) {
+          var scaleFactor = _referenceWidth / prevRefWidth;
+          return getFlyoutMinMaxWidth(currentWidth * scaleFactor);
+        }
+        // When reference width was 0 (e.g. container not yet measured), now
+        // that we have a real width, reset from the size prop instead of scaling.
+        if (_referenceWidth > 0) {
+          return typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0;
+        }
+        return currentWidth;
+      });
+    }
+  }, [_size, getFlyoutMinMaxWidth, enabled, _referenceWidth]);
 
   // Initial numbers to calculate from, on resize drag start
   var initialWidth = useRef(0);
@@ -138,8 +188,12 @@ export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
     }
   }, [onResize, callOnResize, flyoutWidth, enabled]);
   var size = useMemo(function () {
-    return enabled ? flyoutWidth || _size : _size;
-  }, [enabled, flyoutWidth, _size]);
+    if (enabled && flyoutWidth && _referenceWidth > 0) {
+      var pctValue = flyoutWidth / _referenceWidth * 100;
+      return "".concat(pctValue, "%");
+    }
+    return _size;
+  }, [enabled, flyoutWidth, _referenceWidth, _size]);
   return {
     onKeyDown: onKeyDown,
     onMouseDown: onMouseDown,

package/es/components/flyout/use_flyout_z_index.js

@@ -25,7 +25,8 @@ var calculateZIndex = function calculateZIndex(baseLevel, isChildFlyout) {
  * @internal
  */
 export var useEuiFlyoutZIndex = function useEuiFlyoutZIndex(_ref) {
-  var maskProps = _ref.maskProps,
+  var _ref$headerZindexLoca = _ref.headerZindexLocation,
+    headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'below' : _ref$headerZindexLoca,
     isPushed = _ref.isPushed,
     managedFlyoutIndex = _ref.managedFlyoutIndex,
     isChildFlyout = _ref.isChildFlyout;
@@ -33,12 +34,9 @@ export var useEuiFlyoutZIndex = function useEuiFlyoutZIndex(_ref) {
     euiTheme = _useEuiTheme.euiTheme;
   var baseLevel = Number(euiTheme.levels.flyout);
 
-  // The default headerZindexLocation for EuiFlyout is "below"
-  // which is different from what EuiOverlayMask fallbacks to - see
-  // _flyout_overlay.tsx.
-  // We set z-index to mask level only when explicitly overridden
-  // via the maskProps prop
-  if (!isPushed && (maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) === 'above') {
+  // headerZindexLocation 'above' uses mask-level z-index so the flyout stacks
+  // above fixed headers (which typically use a high z-index).
+  if (!isPushed && headerZindexLocation === 'above') {
     baseLevel = Number(euiTheme.levels.mask);
   }
   baseLevel += managedFlyoutIndex;

package/es/components/form/checkbox/checkbox.js

@@ -54,7 +54,7 @@ export var EuiCheckbox = function EuiCheckbox(_ref) {
     className: "euiCheckbox__square"
   }, ___EmotionJSX(EuiIcon, {
     css: iconStyles,
-    type: indeterminate ? 'stopFilled' : checked ? 'check' : 'empty'
+    type: indeterminate ? 'stopFill' : checked ? 'check' : 'empty'
   }), ___EmotionJSX("input", _extends({
     css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",

package/es/components/form/field_password/field_password.js

@@ -87,7 +87,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     if (type === 'dual') {
       var isVisible = inputType === 'text';
       return ___EmotionJSX(EuiButtonIcon, _extends({
-        iconType: isVisible ? 'eyeClosed' : 'eye',
+        iconType: isVisible ? 'eyeSlash' : 'eye',
         "aria-label": isVisible ? maskPasswordLabel : showPasswordLabel,
         title: isVisible ? maskPasswordLabel : showPasswordLabel,
         disabled: disabled

package/es/components/form/field_search/field_search.js

@@ -190,7 +190,7 @@ export var EuiFieldSearchClass = /*#__PURE__*/function (_Component) {
         default: "Clear search input"
       }, function (clearSearchButtonLabel) {
         return ___EmotionJSX(EuiFormControlLayout, {
-          icon: "search",
+          icon: "magnify",
           fullWidth: fullWidth,
           isLoading: isLoading,
           isInvalid: isInvalid,

package/es/components/form/file_picker/file_picker.js

@@ -214,7 +214,7 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
           css: iconStyles,
           className: "euiFilePicker__icon",
           color: iconColor,
-          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'upload',
+          type: isInvalid ? 'warning' : disabled ? 'minusCircle' : 'upload',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), ___EmotionJSX("span", {

package/es/components/form/form_control_layout/form_control_layout_icons.js

@@ -107,7 +107,7 @@ export var EuiFormControlLayoutIcons = /*#__PURE__*/function (_Component) {
       return ___EmotionJSX(EuiFormControlLayoutCustomIcon, {
         size: "m",
         disabled: isDisabled,
-        type: "arrowDown"
+        type: "chevronSingleDown"
       });
     }
   }, {

package/es/components/header/header.a11y.js

@@ -87,7 +87,7 @@ var Header = function Header() {
     popoverButton: ___EmotionJSX(EuiHeaderSectionItemButton, {
       "aria-label": "Sitewide search"
     }, ___EmotionJSX(EuiIcon, {
-      type: "search",
+      type: "magnify",
       size: "m"
     })),
     emptyMessage: ___EmotionJSX(EuiSelectableMessage, {

package/es/components/link/external_link_icon.js

@@ -39,7 +39,7 @@ export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, _extends({
     css: iconCssStyle,
     size: "s",
-    type: "popout",
+    type: "external",
     role: "presentation"
   }, rest)), target === '_blank' ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {
     token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",

package/es/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -51,7 +51,7 @@ export var EuiPinnableListGroup = function EuiPinnableListGroup(_ref) {
       if (pinnable && !itemProps.extraAction) {
         // Different displays for pinned vs unpinned
         var sharedProps = {
-          iconType: 'pinFilled',
+          iconType: 'pinFill',
           iconSize: 's',
           css: [styles.euiPinnableListGroup__itemExtraAction, pinned && styles.pinned]
         };

package/es/components/markdown_editor/markdown_editor_toolbar.js

@@ -22,28 +22,28 @@ var boldItalicButtons = [{
   id: 'mdBold',
   label: 'Bold',
   name: 'strong',
-  iconType: 'editorBold'
+  iconType: 'textBold'
 }, {
   id: 'mdItalic',
   label: 'Italic',
   name: 'emphasis',
-  iconType: 'editorItalic'
+  iconType: 'textItalic'
 }];
 var listButtons = [{
   id: 'mdUl',
   label: 'Unordered list',
   name: 'ul',
-  iconType: 'editorUnorderedList'
+  iconType: 'listBullet'
 }, {
   id: 'mdOl',
   label: 'Ordered list',
   name: 'ol',
-  iconType: 'editorOrderedList'
+  iconType: 'listNumber'
 }, {
   id: 'mdTl',
   label: 'Task list',
   name: 'tl',
-  iconType: 'editorChecklist'
+  iconType: 'listCheck'
 }];
 var quoteCodeLinkButtons = [{
   id: 'mdQuote',
@@ -59,7 +59,7 @@ var quoteCodeLinkButtons = [{
   id: 'mdLink',
   label: 'Link',
   name: 'link',
-  iconType: 'editorLink'
+  iconType: 'link'
 }];
 var EuiMarkdownEditorToolbarButton = function EuiMarkdownEditorToolbarButton(_ref) {
   var selectedNode = _ref.selectedNode,

package/es/components/pagination/pagination_button_arrow.js

@@ -17,10 +17,10 @@ import { useEuiTheme } from '../../services';
 import { euiPaginationButtonStyles } from './pagination_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var typeToIconTypeMap = {
-  first: 'arrowStart',
-  previous: 'arrowLeft',
-  next: 'arrowRight',
-  last: 'arrowEnd'
+  first: 'chevronLimitLeft',
+  previous: 'chevronSingleLeft',
+  next: 'chevronSingleRight',
+  last: 'chevronLimitRight'
 };
 export var TYPES = keysOf(typeToIconTypeMap);
 export var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {

package/es/components/provider/component_defaults/component_defaults.js

@@ -57,7 +57,7 @@ EuiComponentDefaultsProvider.propTypes = {
        */
     EuiTablePagination: PropTypes.any,
     /**
-       * Provide a global configuration for EuiTable's `responsiveBreakpoint` prop. Defaults to `'s'`.
+       * Provide a global configuration for EuiTable's.
        *
        * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
        */
@@ -122,7 +122,7 @@ EuiProviderComponentDefaultsProps.propTypes = {
      */
   EuiTablePagination: PropTypes.any,
   /**
-     * Provide a global configuration for EuiTable's `responsiveBreakpoint` prop. Defaults to `'s'`.
+     * Provide a global configuration for EuiTable's.
      *
      * Defaults will be inherited by all `EuiBasicTable`s and `EuiInMemoryTable`s.
      */

package/es/components/search_bar/filters/field_value_selection_filter.js

@@ -295,7 +295,7 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       }, function (buttonLabelHint) {
         var ariaLabel = "".concat(config.name, " ").concat(buttonLabelHint);
         return ___EmotionJSX(EuiFilterButton, {
-          iconType: "arrowDown",
+          iconType: "chevronSingleDown",
           iconSide: "right",
           isSelected: active,
           hasActiveFilters: active,

package/es/components/selectable/selectable.a11y.js

@@ -92,7 +92,7 @@ describe('EuiSelectable', function () {
         setIsPopoverOpen(!isPopoverOpen);
       };
       var button = ___EmotionJSX(EuiButton, {
-        iconType: "arrowDown",
+        iconType: "chevronSingleDown",
         iconSide: "right",
         onClick: onButtonClick
       }, "Show popover");

package/es/components/selectable/selectable_list/selectable_list_item.js

@@ -107,7 +107,7 @@ export var EuiSelectableListItem = function EuiSelectableListItem(_ref) {
   var onFocusBadgeNode = useMemo(function () {
     var defaultOnFocusBadgeProps = {
       'aria-hidden': true,
-      iconType: 'returnKey',
+      iconType: 'return',
       iconSide: 'left',
       color: 'hollow'
     };