@elastic/eui 122.1.0 → 123.0.0

package/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -1,4 +1,5 @@
-var _excluded = ["children", "style"];
+var _excluded = ["children", "style"],
+  _excluded2 = ["onScroll"];
 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); }
 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; }
 import PropTypes from "prop-types";
@@ -81,40 +82,96 @@ var InnerElement = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, r
   }, rest), headerRow, children), footerRow);
 }));
 InnerElement.displayName = 'EuiDataGridInnerElement';
-export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
-  var leadingControlColumns = _ref3.leadingControlColumns,
-    trailingControlColumns = _ref3.trailingControlColumns,
-    columns = _ref3.columns,
-    visibleColCount = _ref3.visibleColCount,
-    schema = _ref3.schema,
-    schemaDetectors = _ref3.schemaDetectors,
-    rowCount = _ref3.rowCount,
-    _ref3$visibleRows = _ref3.visibleRows,
-    startRow = _ref3$visibleRows.startRow,
-    endRow = _ref3$visibleRows.endRow,
-    visibleRowCount = _ref3$visibleRows.visibleRowCount,
-    renderCellValue = _ref3.renderCellValue,
-    cellContext = _ref3.cellContext,
-    renderCellPopover = _ref3.renderCellPopover,
-    renderFooterCellValue = _ref3.renderFooterCellValue,
-    interactiveCellId = _ref3.interactiveCellId,
-    pagination = _ref3.pagination,
-    sorting = _ref3.sorting,
-    setVisibleColumns = _ref3.setVisibleColumns,
-    switchColumnPos = _ref3.switchColumnPos,
-    onColumnResize = _ref3.onColumnResize,
-    rowHeightsOptions = _ref3.rowHeightsOptions,
-    virtualizationOptions = _ref3.virtualizationOptions,
-    isFullScreen = _ref3.isFullScreen,
-    gridStyles = _ref3.gridStyles,
-    gridWidth = _ref3.gridWidth,
-    gridRef = _ref3.gridRef,
-    gridItemsRendered = _ref3.gridItemsRendered,
-    wrapperRef = _ref3.wrapperRef,
-    className = _ref3.className,
-    canDragAndDropColumns = _ref3.canDragAndDropColumns,
-    _ref3$showHeader = _ref3.showHeader,
-    showHeader = _ref3$showHeader === void 0 ? true : _ref3$showHeader;
+var DataGridOuterElementContext = /*#__PURE__*/createContext({
+  scrollPositionRef: {
+    current: null
+  }
+});
+var clampScrollOffset = function clampScrollOffset(offset, max) {
+  return Math.max(0, Math.min(offset, max));
+};
+var OuterElement = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var onScroll = _ref3.onScroll,
+    rest = _objectWithoutProperties(_ref3, _excluded2);
+  var _useContext2 = useContext(DataGridOuterElementContext),
+    _useContext2$outerEle = _useContext2.outerElementType,
+    Element = _useContext2$outerEle === void 0 ? 'div' : _useContext2$outerEle,
+    direction = _useContext2.direction,
+    scrollPositionRef = _useContext2.scrollPositionRef;
+
+  // react-window compares the raw scroll offsets against its own clamped
+  // offsets, and flags the grid as scrolling (setting `pointer-events: none`
+  // on the inner element) whenever they differ. Firefox can report a
+  // `scrollTop` above the maximum at fractional device pixel ratios, which
+  // makes every scroll event at the bottom of the grid look like a scroll,
+  // so hovered cells lose the pointer and tooltips repeatedly open and close.
+  var onScrollIfMoved = useCallback(function (event) {
+    if (direction !== 'rtl') {
+      var _event$currentTarget = event.currentTarget,
+        scrollTop = _event$currentTarget.scrollTop,
+        scrollLeft = _event$currentTarget.scrollLeft,
+        scrollHeight = _event$currentTarget.scrollHeight,
+        scrollWidth = _event$currentTarget.scrollWidth,
+        clientHeight = _event$currentTarget.clientHeight,
+        clientWidth = _event$currentTarget.clientWidth;
+      var scrollPosition = {
+        scrollTop: clampScrollOffset(scrollTop, scrollHeight - clientHeight),
+        scrollLeft: clampScrollOffset(scrollLeft, scrollWidth - clientWidth)
+      };
+      var previousScrollPosition = scrollPositionRef.current;
+      if (previousScrollPosition && scrollPosition.scrollTop === previousScrollPosition.scrollTop && scrollPosition.scrollLeft === previousScrollPosition.scrollLeft) {
+        return;
+      }
+      // react-window may not have rendered the previous event's position
+      // yet, so the ref must reflect every forwarded event, not only the
+      // positions react-window reports back through its `onScroll` prop.
+      scrollPositionRef.current = scrollPosition;
+    }
+    onScroll(event);
+  }, [onScroll, direction, scrollPositionRef]);
+  return ___EmotionJSX(Element, _extends({
+    ref: ref,
+    onScroll: onScrollIfMoved
+  }, rest));
+});
+OuterElement.propTypes = {
+  onScroll: PropTypes.any.isRequired
+};
+OuterElement.displayName = 'EuiDataGridOuterElement';
+export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref4) {
+  var leadingControlColumns = _ref4.leadingControlColumns,
+    trailingControlColumns = _ref4.trailingControlColumns,
+    columns = _ref4.columns,
+    visibleColCount = _ref4.visibleColCount,
+    schema = _ref4.schema,
+    schemaDetectors = _ref4.schemaDetectors,
+    rowCount = _ref4.rowCount,
+    _ref4$visibleRows = _ref4.visibleRows,
+    startRow = _ref4$visibleRows.startRow,
+    endRow = _ref4$visibleRows.endRow,
+    visibleRowCount = _ref4$visibleRows.visibleRowCount,
+    renderCellValue = _ref4.renderCellValue,
+    cellContext = _ref4.cellContext,
+    renderCellPopover = _ref4.renderCellPopover,
+    renderFooterCellValue = _ref4.renderFooterCellValue,
+    interactiveCellId = _ref4.interactiveCellId,
+    pagination = _ref4.pagination,
+    sorting = _ref4.sorting,
+    setVisibleColumns = _ref4.setVisibleColumns,
+    switchColumnPos = _ref4.switchColumnPos,
+    onColumnResize = _ref4.onColumnResize,
+    rowHeightsOptions = _ref4.rowHeightsOptions,
+    virtualizationOptions = _ref4.virtualizationOptions,
+    isFullScreen = _ref4.isFullScreen,
+    gridStyles = _ref4.gridStyles,
+    gridWidth = _ref4.gridWidth,
+    gridRef = _ref4.gridRef,
+    gridItemsRendered = _ref4.gridItemsRendered,
+    wrapperRef = _ref4.wrapperRef,
+    className = _ref4.className,
+    canDragAndDropColumns = _ref4.canDragAndDropColumns,
+    _ref4$showHeader = _ref4.showHeader,
+    showHeader = _ref4$showHeader === void 0 ? true : _ref4$showHeader;
   /**
    * Grid refs & observers
    */
@@ -310,7 +367,30 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       footerRow: footerRow
     };
   }, [headerRowHeight, headerRow, footerRow, showHeader]);
+  var scrollPositionRef = useRef(null);
+  var outerElementContextValue = useMemo(function () {
+    return {
+      outerElementType: virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.outerElementType,
+      direction: virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.direction,
+      scrollPositionRef: scrollPositionRef
+    };
+  }, [virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.outerElementType, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.direction]);
   var onScroll = useCallback(function (args) {
+    var element = outerGridRef.current;
+    // `scrollTo` reports the requested offset, which can sit past the
+    // end. Storing that would replace the clamped position already
+    // taken from the DOM. Leave the ref unchanged instead of writing
+    // the clamped value: a scroll event that has not arrived yet still
+    // differs from the previous position and is forwarded.
+    var topInRange = element == null || args.scrollTop === clampScrollOffset(args.scrollTop, element.scrollHeight - element.clientHeight);
+    var leftInRange = element == null || args.scrollLeft === clampScrollOffset(args.scrollLeft, element.scrollWidth - element.clientWidth);
+    if (topInRange && leftInRange) {
+      scrollPositionRef.current = {
+        scrollTop: args.scrollTop,
+        scrollLeft: args.scrollLeft
+      };
+    }
+
     // check only if a callback is passed
     if (typeof (virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll) !== 'function') return;
     var enhancedArgs = _objectSpread(_objectSpread({}, args), {}, {
@@ -354,10 +434,13 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
   }, [outerGridRef, virtualizationOptions]);
   return IS_JEST_ENVIRONMENT || finalWidth > 0 ? ___EmotionJSX(DataGridWrapperRowsContext.Provider, {
     value: rowWrapperContextValue
+  }, ___EmotionJSX(DataGridOuterElementContext.Provider, {
+    value: outerElementContextValue
   }, ___EmotionJSX(Grid, _extends({}, virtualizationOptions, {
     ref: gridRef,
     className: classNames('euiDataGrid__virtualized', className, virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.className),
     onItemsRendered: onItemsRendered,
+    outerElementType: OuterElement,
     innerElementType: InnerElement,
     outerRef: outerGridRef,
     innerRef: innerGridRef,
@@ -369,7 +452,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     itemData: itemData,
     rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 || showHeader === false && innerGridRef.current ? visibleRowCount : 0,
     onScroll: onScroll
-  }), Cell), scrollBorderOverlay) : null;
+  }), Cell)), scrollBorderOverlay) : null;
 });
 EuiDataGridBodyVirtualized.propTypes = {
   leadingControlColumns: PropTypes.arrayOf(PropTypes.shape({

package/es/components/datagrid/utils/row_heights.js

@@ -307,7 +307,10 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref3) {
     if (forceRenderRef.current == null) {
       return;
     }
-    requestAnimationFrame(forceRenderRef.current);
+    var frameId = requestAnimationFrame(forceRenderRef.current);
+    return function () {
+      return cancelAnimationFrame(frameId);
+    };
   }, [// Effects that should cause rerendering
   rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.defaultHeight, rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.rowHeights,
   // Dependencies

package/es/components/flyout/flyout.component.js

@@ -1,10 +1,6 @@
 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 = ["className", "children", "as", "hideCloseButton", "flyoutMenuProps", "flyoutMenuDisplayMode", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "hasChildBackground", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "pushAnimation", "hasAnimation", "focusTrapProps", "includeFixedHeadersInFocusTrap", "includeSelectorInFocusTrap", "aria-describedby", "aria-labelledby", "id", "resizable", "minWidth", "onResize", "onAnimationEnd", "container"];
 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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
-function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
 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; }
@@ -12,12 +8,16 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _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; }
 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; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,7 +30,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React, { useEffect, useLayoutEffect, useRef, useMemo, useCallback, useState, forwardRef } from 'react';
 import classnames from 'classnames';
-import { keys, EuiWindowEvent, useCombinedRefs, useEuiTheme, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
+import { keys, EuiWindowEvent, useCombinedRefs, useEuiTheme, useEuiMemoizedStyles, useGeneratedHtmlId, focusTrapPubSub } from '../../services';
 import { useIsInManagedFlyout, useFlyoutId, useFlyoutManager } from './manager';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LAYOUT_MODE_STACKED, LEVEL_MAIN, PROPERTY_LEVEL } from './manager/const';
 import { EuiFocusTrap } from '../focus_trap';
@@ -65,6 +65,52 @@ var resolveContainer = function resolveContainer(raw) {
   if (typeof HTMLElement === 'undefined') return null;
   return raw instanceof HTMLElement ? raw : null;
 };
+
+/**
+ * Per-target push-flyout offset bookkeeping, shared across every flyout React root (they all
+ * render from this one module). Keyed by the element the offset is applied to — a `container` or
+ * `document.body` — so flyouts targeting different elements never contend.
+ *
+ * Instead of a single owner per side, every currently-pushed flyout records its width as a
+ * contribution and the applied offset is derived from the set (the widest contribution). Closing,
+ * resizing, or backgrounding any one flyout just updates its own entry, so the result no longer
+ * depends on open/close order or on cross-root effect ordering. The target's base (pre-flyout)
+ * inline padding is captured when the first contribution arrives and restored when the last one
+ * leaves. See https://github.com/elastic/eui/issues/9788.
+ */
+
+var euiPushPaddingRegistry = new WeakMap();
+var euiSideStyleKey = function euiSideStyleKey(side) {
+  return side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+};
+var euiSideCssVarKey = function euiSideCssVarKey(side) {
+  return side === 'left' ? '--euiPushFlyoutOffsetInlineStart' : '--euiPushFlyoutOffsetInlineEnd';
+};
+var euiGetPushPaddingSideState = function euiGetPushPaddingSideState(target, side) {
+  var state = euiPushPaddingRegistry.get(target);
+  if (!state) {
+    state = {
+      left: {
+        base: '',
+        contributions: new Map()
+      },
+      right: {
+        base: '',
+        contributions: new Map()
+      }
+    };
+    euiPushPaddingRegistry.set(target, state);
+  }
+  return state[side];
+};
+var euiMaxContribution = function euiMaxContribution(contributions) {
+  var filter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {
+    return true;
+  };
+  return Math.max.apply(Math, [0].concat(_toConsumableArray(Array.from(contributions.values(), function (contribution) {
+    return filter(contribution) ? contribution.width : 0;
+  }))));
+};
 var defaultElement = 'div';
 export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var _maskProps$headerZind, _managerSessions, _managerState$layoutM, _managerState$current, _managerState$flyouts, _managerState$pushPad;
@@ -119,8 +165,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var container = resolveContainer(containerProp);
   var hasAnimationDefault = type === 'overlay';
   var hasAnimation = _hasAnimation !== null && _hasAnimation !== void 0 ? _hasAnimation : hasAnimationDefault;
-  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
-    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
   var Element = as || defaultElement;
   var maskRef = useRef(null);
 
@@ -137,10 +181,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     pushMinBreakpoint: pushMinBreakpoint,
     containerWidth: containerReferenceWidth
   });
-  // When no explicit container is provided, push padding targets
-  // document.body and global push-offset CSS vars are set. When a
-  // container is provided, only that element receives padding.
-  var shouldSetGlobalPushVars = container == null;
   if ('container' in props && ('maskProps' in props || 'includeFixedHeadersInFocusTrap' in props) && process.env.NODE_ENV === 'development') {
     if ('maskProps' in props) {
       console.warn('EuiFlyout: `maskProps` is deprecated. Prefer using the `container` prop to scope flyouts.');
@@ -211,22 +251,33 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [isInManagedContext, flyoutId]);
 
-  // Derive flyout identity and sibling info from the single context read
+  // Derive flyout identity and sibling info from the session this flyout
+  // belongs to. Not the current (top-most) session: a newly opened main
+  // renders once before it registers its own session, and a backgrounded
+  // main is not in the current session at all. Reading the current session
+  // in those cases would treat the other session's main as this flyout's
+  // sibling and clamp the resizable width against it.
+  var ownSession = useMemo(function () {
+    var _managerSessions$find;
+    return (_managerSessions$find = managerSessions === null || managerSessions === void 0 ? void 0 : managerSessions.find(function (session) {
+      return session.mainFlyoutId === flyoutId || session.childFlyoutId === flyoutId;
+    })) !== null && _managerSessions$find !== void 0 ? _managerSessions$find : null;
+  }, [managerSessions, flyoutId]);
   var flyoutIdentity = useMemo(function () {
-    if (!flyoutId || !currentSession) {
+    if (!flyoutId || !ownSession) {
       return {
         isMainFlyout: false,
         siblingFlyoutId: null,
         hasValidSession: false
       };
     }
-    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
+    var siblingFlyoutId = ownSession.mainFlyoutId === flyoutId ? ownSession.childFlyoutId : ownSession.mainFlyoutId;
     return {
-      isMainFlyout: currentSession.mainFlyoutId === flyoutId,
+      isMainFlyout: ownSession.mainFlyoutId === flyoutId,
       siblingFlyoutId: siblingFlyoutId,
       hasValidSession: true
     };
-  }, [flyoutId, currentSession]);
+  }, [flyoutId, ownSession]);
 
   // Destructure for easier use
   var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
@@ -307,17 +358,24 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   // the document element so that the child (fill) flyout can track it
   // synchronously during drag resize, avoiding the 1-frame lag that
   // results from the async ResizeObserver → manager-state pipeline.
+  // Only the active session's main publishes: a backgrounded main keeps its
+  // `isMainFlyout` role but must not leave its width behind for the new
+  // session's child to read.
   useLayoutEffect(function () {
-    if (!isMainFlyout) return;
+    if (!isMainFlyout || !isActiveManagedFlyout) return;
 
     // Only set when we have a computed percentage (during active resize)
-    if (typeof size === 'string' && size.endsWith('%')) {
-      document.documentElement.style.setProperty('--euiFlyoutMainWidth', size);
-    }
+    if (typeof size !== 'string' || !size.endsWith('%')) return;
+    var style = document.documentElement.style;
+    style.setProperty('--euiFlyoutMainWidth', size);
     return function () {
-      document.documentElement.style.removeProperty('--euiFlyoutMainWidth');
+      // Flyouts in separate React roots can run this cleanup after another
+      // main has already published its own width; leave that value alone.
+      if (style.getPropertyValue('--euiFlyoutMainWidth') === size) {
+        style.removeProperty('--euiFlyoutMainWidth');
+      }
     };
-  }, [isMainFlyout, size]);
+  }, [isMainFlyout, isActiveManagedFlyout, size]);
 
   /**
    * Setting up the refs on the actual flyout element in order to
@@ -337,45 +395,61 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
    * Uses useLayoutEffect so padding is applied before child render.
    */
   useLayoutEffect(function () {
-    if (!isPushed) {
-      return;
-    }
     var paddingTarget = container !== null && container !== void 0 ? container : document.body;
-    var shouldApplyPadding = !isInManagedContext || isActiveManagedFlyout;
-    var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
-    var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
     var managerSide = side === 'left' ? 'left' : 'right';
+    var styleKey = euiSideStyleKey(managerSide);
+    var state = euiGetPushPaddingSideState(paddingTarget, managerSide);
 
-    // Capture pre-existing inline padding so it can be restored on cleanup
-    var previousPadding = paddingTarget.style[paddingSide];
-    var paddingWidth = layoutMode === LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
-    if (shouldApplyPadding) {
-      paddingTarget.style[paddingSide] = "".concat(paddingWidth, "px");
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
-      }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
-      }
-    } else {
-      paddingTarget.style[paddingSide] = previousPadding;
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
+    // Write the offset derived from all current contributions: the widest pushed flyout on
+    // this target.
+    var apply = function apply() {
+      var total = euiMaxContribution(state.contributions);
+      var isPushing = state.contributions.size > 0;
+      paddingTarget.style[styleKey] = isPushing ? "".concat(total, "px") : state.base;
+      // Without a `container` the offset is also exposed as a global CSS variable. It is
+      // written inline on `<html>` rather than through `EuiProvider`, because every React root
+      // has its own provider rendering its own `:root` block and the last one inserted would
+      // win regardless of which root's flyouts are still open.
+      if (container == null) {
+        var cssVar = euiSideCssVarKey(managerSide);
+        if (isPushing) {
+          document.documentElement.style.setProperty(cssVar, "".concat(total, "px"));
+        } else {
+          document.documentElement.style.removeProperty(cssVar);
+        }
       }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, 0);
+      // The manager only learns about managed flyouts, so it must not be told about a standalone
+      // flyout's width: nothing would ever reset it once that flyout closes.
+      if (isInManagedContext) {
+        var _flyoutManagerRef$cur5;
+        (_flyoutManagerRef$cur5 = flyoutManagerRef.current) === null || _flyoutManagerRef$cur5 === void 0 || _flyoutManagerRef$cur5.setPushPadding(managerSide, euiMaxContribution(state.contributions, function (c) {
+          return c.managed;
+        }));
       }
+    };
+    var paddingWidth = layoutMode === LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
+
+    // A standalone flyout pushes whenever it is in push mode. A managed flyout only pushes while
+    // it is the active session's flyout; a backgrounded push flyout (e.g. under a new overlay
+    // session) withdraws its contribution so the page is not left pushed for it.
+    var shouldPush = isPushed && (!isInManagedContext || isActiveManagedFlyout);
+    if (!shouldPush) {
+      return;
+    }
+    if (state.contributions.size === 0) {
+      // First pushed flyout on this side: capture the app's own inline padding to restore later.
+      state.base = paddingTarget.style[styleKey];
     }
+    state.contributions.set(flyoutId, {
+      width: paddingWidth,
+      managed: isInManagedContext
+    });
+    apply();
     return function () {
-      paddingTarget.style[paddingSide] = previousPadding;
-      if (shouldSetGlobalPushVars) {
-        setGlobalCSSVariables(_defineProperty({}, cssVarName, null));
-      }
-      if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, 0);
-      }
+      state.contributions.delete(flyoutId);
+      apply();
     };
-  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth, shouldSetGlobalPushVars, container]);
+  }, [isPushed, isInManagedContext, isActiveManagedFlyout, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth, container, flyoutId]);
 
   /**
    * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)

package/es/components/flyout/flyout_menu/action_button.js

@@ -1,4 +1,7 @@
+var _excluded = ["toolTipContent", "toolTipProps"];
 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 _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
@@ -13,29 +16,20 @@ import { EuiToolTip } from '../../tool_tip';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var MenuActionButton = function MenuActionButton(_ref) {
   var action = _ref.action;
-  var iconType = action.iconType,
-    onClick = action.onClick,
-    ariaLabel = action['aria-label'],
-    toolTipContent = action.toolTipContent,
+  var toolTipContent = action.toolTipContent,
     toolTipProps = action.toolTipProps,
-    isDisabled = action.isDisabled,
-    isLoading = action.isLoading,
-    href = action.href,
-    target = action.target;
-  var sharedProps = {
-    'aria-label': ariaLabel,
-    iconType: iconType,
-    onClick: onClick,
-    color: 'text',
-    size: 'xs',
-    isDisabled: isDisabled,
-    // Keeps the button focusable so tooltip-on-disabled works for keyboard users
-    isLoading: isLoading,
-    href: href,
-    target: target
-  };
+    buttonProps = _objectWithoutProperties(action, _excluded);
+  var button = ___EmotionJSX(EuiButtonIcon, _extends({}, buttonProps, {
+    // The menu bar sets these props itself so every action looks the same.
+    // Anything set here also belongs in `EuiFlyoutMenuOwnedActionProps`.
+    color: "text",
+    size: "xs",
+    display: "empty",
+    iconSize: "m",
+    isSelected: undefined
+  }));
   return toolTipContent ? ___EmotionJSX(EuiToolTip, _extends({
     content: toolTipContent,
     disableScreenReaderOutput: true
-  }, toolTipProps), ___EmotionJSX(EuiButtonIcon, sharedProps)) : ___EmotionJSX(EuiButtonIcon, sharedProps);
+  }, toolTipProps), button) : button;
 };