@elastic/eui 113.1.0 → 113.2.0

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

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = exports.getWidthFromSize = void 0;
 var _react = require("react");
 var _services = require("../../../services");
+var _component_defaults = require("../../provider/component_defaults");
+var _resize_observer = require("../../observer/resize_observer");
 var _actions = require("./actions");
-var _selectors = require("./selectors");
 var _hooks = require("./hooks");
 var _const = require("./const");
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -25,26 +26,57 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; } /*
 /**
  * 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.
  */
 var useApplyFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = function useApplyFlyoutLayoutMode() {
-  var _context$state;
+  var _ref, _sessions, _state$flyouts$find, _state$flyouts$find2, _context$state;
   var _useEuiTheme = (0, _services.useEuiTheme)(),
     euiTheme = _useEuiTheme.euiTheme;
   var context = (0, _hooks.useFlyoutManager)();
-  var currentSession = (0, _selectors.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 = (0, _component_defaults.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 = (0, _selectors.useCurrentMainFlyout)();
-  var childFlyout = (0, _selectors.useCurrentChildFlyout)();
-  var parentWidth = (0, _selectors.useFlyoutWidth)(parentFlyoutId);
-  var childWidth = (0, _selectors.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 = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
   var _useState = (0, _react.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;
@@ -53,8 +85,10 @@ var useApplyFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = function useAp
       dispatch((0, _actions.setLayoutMode)(layoutMode));
     }
   }, [dispatch]);
+
+  // Only listen to window resize when not using a container
   (0, _react.useEffect)(function () {
-    if (typeof window === 'undefined') {
+    if (typeof window === 'undefined' || container) {
       return;
     }
     var rafId = 0;
@@ -73,7 +107,7 @@ var useApplyFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = function useAp
       }
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [container]);
 
   // Calculate the desired layout mode
   var desiredLayoutMode = (0, _react.useMemo)(function () {
@@ -86,46 +120,58 @@ var useApplyFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = function useAp
     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 _const.LAYOUT_MODE_STACKED;
     }
     if (!childFlyoutId) {
       return _const.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 _const.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 _const.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) ? _const.LAYOUT_MODE_SIDE_BY_SIDE : _const.LAYOUT_MODE_STACKED;
     }
     if (currentLayoutMode === _const.LAYOUT_MODE_STACKED) {
       return combinedWidthPercentage <= THRESHOLD_TO_SIDE_BY_SIDE ? _const.LAYOUT_MODE_SIDE_BY_SIDE : _const.LAYOUT_MODE_STACKED;
     } else {
       return combinedWidthPercentage >= THRESHOLD_TO_STACKED ? _const.LAYOUT_MODE_STACKED : _const.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
   (0, _react.useEffect)(function () {
@@ -133,10 +179,22 @@ var useApplyFlyoutLayoutMode = exports.useApplyFlyoutLayoutMode = function useAp
       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.
+  (0, _react.useEffect)(function () {
+    if (dispatch && hasFlyouts && Number.isFinite(referenceWidth)) {
+      dispatch((0, _actions.setReferenceWidth)(referenceWidth));
+    }
+  }, [dispatch, hasFlyouts, referenceWidth]);
 };
 
-/** Convert a flyout `size` value to a pixel width using theme breakpoints. */
-var getWidthFromSize = exports.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`.
+ */
+var getWidthFromSize = exports.getWidthFromSize = function getWidthFromSize(size, referenceWidth) {
   if (typeof size === 'number') {
     return size;
   }
@@ -145,17 +203,19 @@ var getWidthFromSize = exports.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/lib/components/flyout/manager/reducer.js

@@ -85,7 +85,8 @@ 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) {
@@ -97,6 +98,7 @@ function flyoutManagerReducer() {
           level: level,
           flyoutId: flyoutId,
           size: size,
+          minWidth: minWidth,
           activityStage: _const.STAGE_OPENING
         };
         var newFlyouts = [].concat(_toConsumableArray(state.flyouts), [newFlyoutState]);
@@ -337,6 +339,26 @@ function flyoutManagerReducer() {
           }), {}, _defineProperty({}, side, _width))
         });
       }
+
+    // Store the container element for container-relative layout calculations.
+    case _actions.ACTION_SET_CONTAINER_ELEMENT:
+      {
+        if (state.containerElement === action.element) {
+          return state; // No-op if same element
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          containerElement: action.element
+        });
+      }
+    case _actions.ACTION_SET_REFERENCE_WIDTH:
+      {
+        if (state.referenceWidth === action.width) {
+          return state;
+        }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          referenceWidth: action.width
+        });
+      }
     default:
       return state;
   }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useSession = exports.usePushPaddingOffsets = exports.useParentFlyoutSize = exports.useIsFlyoutRegistered = exports.useIsFlyoutActive = exports.useHasPushPadding = exports.useHasChildFlyout = exports.useHasActiveSession = exports.useFlyoutWidth = exports.useFlyout = exports.useCurrentSession = exports.useCurrentMainFlyout = exports.useCurrentFlyoutZIndexRef = exports.useCurrentChildFlyout = void 0;
+exports.useSession = exports.usePushPaddingOffsets = exports.useParentFlyoutSize = exports.useIsFlyoutRegistered = exports.useIsFlyoutActive = exports.useHasPushPadding = exports.useHasChildFlyout = exports.useHasActiveSession = exports.useFlyoutWidth = exports.useFlyoutMinWidth = exports.useFlyout = exports.useCurrentSession = exports.useCurrentMainFlyout = exports.useCurrentFlyoutZIndexRef = exports.useCurrentChildFlyout = void 0;
 var _provider = require("./provider");
 var _react = require("react");
 /*
@@ -80,6 +80,12 @@ var useFlyoutWidth = exports.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. */
+var useFlyoutMinWidth = exports.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. */
 var useParentFlyoutSize = exports.useParentFlyoutSize = function useParentFlyoutSize(childFlyoutId) {
   var session = useSession(childFlyoutId);

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

@@ -96,8 +96,8 @@ function createStore() {
     subscribe: subscribe,
     subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
-    addFlyout: function addFlyout(flyoutId, title, level, size) {
-      return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size));
+    addFlyout: function addFlyout(flyoutId, title, level, size, minWidth) {
+      return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size, minWidth));
     },
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch((0, _actions.closeFlyout)(flyoutId));
@@ -114,6 +114,9 @@ function createStore() {
     setPushPadding: function setPushPadding(side, width) {
       return dispatch((0, _actions.setPushPadding)(side, width));
     },
+    setContainerElement: function setContainerElement(element) {
+      return dispatch((0, _actions.setContainerElement)(element));
+    },
     goBack: function goBack() {
       return dispatch((0, _actions.goBack)());
     },

package/lib/components/flyout/use_flyout_resizable.js

@@ -27,13 +27,26 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
     _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 = (0, _react.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 = (0, _react.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
     flyoutWidth = _useState2[0],
@@ -56,13 +69,50 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
     }
   }, [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 = (0, _react.useRef)(null);
+
+  // Track the previous reference width so we can scale proportionally when
+  // the container / viewport resizes (both shrink AND grow).
+  var prevReferenceWidthRef = (0, _react.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).
   (0, _react.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 = (0, _react.useRef)(0);
@@ -142,8 +192,12 @@ var useEuiFlyoutResizable = exports.useEuiFlyoutResizable = function useEuiFlyou
     }
   }, [onResize, callOnResize, flyoutWidth, enabled]);
   var size = (0, _react.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/lib/components/flyout/use_flyout_z_index.js

@@ -30,7 +30,8 @@ var calculateZIndex = function calculateZIndex(baseLevel, isChildFlyout) {
  * @internal
  */
 var useEuiFlyoutZIndex = exports.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;
@@ -38,12 +39,9 @@ var useEuiFlyoutZIndex = exports.useEuiFlyoutZIndex = function useEuiFlyoutZInde
     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/lib/components/form/checkbox/checkbox.js

@@ -63,7 +63,7 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
     className: "euiCheckbox__square"
   }, (0, _react2.jsx)(_icon.EuiIcon, {
     css: iconStyles,
-    type: indeterminate ? 'stopFilled' : checked ? 'check' : 'empty'
+    type: indeterminate ? 'stopFill' : checked ? 'check' : 'empty'
   }), (0, _react2.jsx)("input", _extends({
     css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",

package/lib/components/form/field_password/field_password.js

@@ -96,7 +96,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     if (type === 'dual') {
       var isVisible = inputType === 'text';
       return (0, _react2.jsx)(_button.EuiButtonIcon, _extends({
-        iconType: isVisible ? 'eyeClosed' : 'eye',
+        iconType: isVisible ? 'eyeSlash' : 'eye',
         "aria-label": isVisible ? maskPasswordLabel : showPasswordLabel,
         title: isVisible ? maskPasswordLabel : showPasswordLabel,
         disabled: disabled

package/lib/components/form/field_search/field_search.js

@@ -197,7 +197,7 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
         default: "Clear search input"
       }, function (clearSearchButtonLabel) {
         return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
-          icon: "search",
+          icon: "magnify",
           fullWidth: fullWidth,
           isLoading: isLoading,
           isInvalid: isInvalid,

package/lib/components/form/file_picker/file_picker.js

@@ -221,7 +221,7 @@ var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Co
           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"
         }), (0, _react2.jsx)("span", {

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

@@ -114,7 +114,7 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, {
         size: "m",
         disabled: isDisabled,
-        type: "arrowDown"
+        type: "chevronSingleDown"
       });
     }
   }, {

package/lib/components/header/header.a11y.js

@@ -88,7 +88,7 @@ var Header = function Header() {
     popoverButton: (0, _react2.jsx)(_header_section.EuiHeaderSectionItemButton, {
       "aria-label": "Sitewide search"
     }, (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "search",
+      type: "magnify",
       size: "m"
     })),
     emptyMessage: (0, _react2.jsx)(_selectable.EuiSelectableMessage, {

package/lib/components/link/external_link_icon.js

@@ -44,7 +44,7 @@ var EuiExternalLinkIcon = exports.EuiExternalLinkIcon = function EuiExternalLink
   return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, _extends({
     css: iconCssStyle,
     size: "s",
-    type: "popout",
+    type: "external",
     role: "presentation"
   }, rest)), target === '_blank' ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",

package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -59,7 +59,7 @@ var EuiPinnableListGroup = exports.EuiPinnableListGroup = function EuiPinnableLi
       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/lib/components/markdown_editor/markdown_editor_toolbar.js

@@ -30,28 +30,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',
@@ -67,7 +67,7 @@ var quoteCodeLinkButtons = [{
   id: 'mdLink',
   label: 'Link',
   name: 'link',
-  iconType: 'editorLink'
+  iconType: 'link'
 }];
 var EuiMarkdownEditorToolbarButton = function EuiMarkdownEditorToolbarButton(_ref) {
   var selectedNode = _ref.selectedNode,

package/lib/components/pagination/pagination_button_arrow.js

@@ -22,10 +22,10 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  * Side Public License, v 1.
  */
 var typeToIconTypeMap = {
-  first: 'arrowStart',
-  previous: 'arrowLeft',
-  next: 'arrowRight',
-  last: 'arrowEnd'
+  first: 'chevronLimitLeft',
+  previous: 'chevronSingleLeft',
+  next: 'chevronSingleRight',
+  last: 'chevronLimitRight'
 };
 var TYPES = exports.TYPES = (0, _common.keysOf)(typeToIconTypeMap);
 var EuiPaginationButtonArrow = exports.EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {

package/lib/components/provider/component_defaults/component_defaults.js

@@ -64,7 +64,7 @@ EuiComponentDefaultsProvider.propTypes = {
        */
     EuiTablePagination: _propTypes.default.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.
        */
@@ -129,7 +129,7 @@ EuiProviderComponentDefaultsProps.propTypes = {
      */
   EuiTablePagination: _propTypes.default.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/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -302,7 +302,7 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
       }, function (buttonLabelHint) {
         var ariaLabel = "".concat(config.name, " ").concat(buttonLabelHint);
         return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
-          iconType: "arrowDown",
+          iconType: "chevronSingleDown",
           iconSide: "right",
           isSelected: active,
           hasActiveFilters: active,

package/lib/components/selectable/selectable.a11y.js

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

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

@@ -116,7 +116,7 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
   var onFocusBadgeNode = (0, _react.useMemo)(function () {
     var defaultOnFocusBadgeProps = {
       'aria-hidden': true,
-      iconType: 'returnKey',
+      iconType: 'return',
       iconSide: 'left',
       color: 'hollow'
     };

package/lib/components/side_nav/side_nav_item.js

@@ -160,7 +160,7 @@ var EuiSideNavItem = exports.EuiSideNavItem = function EuiSideNavItem(_ref2) {
       })
     }, children);
   }), hasCaret && (0, _react2.jsx)(_icon.EuiIcon, {
-    type: itemIsOpen ? 'arrowDown' : 'arrowRight',
+    type: itemIsOpen ? 'chevronSingleDown' : 'chevronSingleRight',
     size: "s"
   }))), hasChildItems && (0, _react2.jsx)("div", {
     css: itemsStyles,