@elastic/eui 116.3.0 → 116.3.1-snapshot.1782148316870

package/optimize/es/components/flyout/manager/actions.js

@@ -18,6 +18,8 @@ export var ACTION_CLOSE_ALL = "".concat(PREFIX, "/closeAll");
 export var ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
 /** Dispatched when an active flyout's pixel width changes (for responsive layout). */
 export var ACTION_SET_WIDTH = "".concat(PREFIX, "/setWidth");
+/** Dispatched to set a flyout's menu pagination. */
+export var ACTION_SET_PAGINATION = "".concat(PREFIX, "/setPagination");
 /** Dispatched to switch layout mode between `side-by-side` and `stacked`. */
 export var ACTION_SET_LAYOUT_MODE = "".concat(PREFIX, "/setLayoutMode");
 /** Dispatched to update a flyout's activity stage (e.g., opening -> active). */
@@ -48,6 +50,8 @@ export var ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFly
 
 /** Update a flyout's measured width in pixels. */
 
+/** Set the manager pagination value for a flyout. */
+
 /** Change how flyouts are arranged: `side-by-side` or `stacked`. */
 
 /** Set a specific flyout's activity stage. */
@@ -122,6 +126,22 @@ export var setFlyoutWidth = function setFlyoutWidth(flyoutId, width) {
   };
 };
 
+/**
+ * Set (or clear) the menu pagination config for a flyout. When set, this
+ * overrides any pagination passed via `flyoutMenuProps.pagination` on the
+ * flyout itself, allowing reactive updates from a different React root.
+ *
+ * Only works for managed flyouts. Unmanaged flyouts (session={false}) must use
+ * the `flyoutMenuProps.pagination` prop instead.
+ */
+export var setPagination = function setPagination(flyoutId, pagination) {
+  return {
+    type: ACTION_SET_PAGINATION,
+    flyoutId: flyoutId,
+    pagination: pagination
+  };
+};
+
 /** Switch layout mode between `side-by-side` and `stacked`. */
 export var setLayoutMode = function setLayoutMode(layoutMode) {
   return {

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

@@ -26,7 +26,7 @@ import { useFlyoutActivityStage } from './activity_stage';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_CHILD, LEVEL_MAIN, PROPERTY_FLYOUT, PROPERTY_LAYOUT_MODE, PROPERTY_LEVEL } from './const';
 import { EuiFlyoutIsManagedProvider } from './context';
 import { euiManagedFlyoutStyles } from './flyout_managed.styles';
-import { useFlyoutManager as _useFlyoutManager, useFlyoutId } from './hooks';
+import { useFlyoutManager as _useFlyoutManager, useFlyoutId, useFlyoutPagination } from './hooks';
 import { useIsFlyoutRegistered } from './selectors';
 import { getFlyoutManagerStore } from './store';
 import { createValidationErrorMessage, isNamedSize, validateManagedFlyoutSize, validateSizeCombination } from './validation';
@@ -144,10 +144,10 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 
   // Stabilize the onClose callback
   var onCloseCallbackRef = useRef();
-  onCloseCallbackRef.current = function (e) {
+  onCloseCallbackRef.current = function (e, meta) {
     if (onCloseProp) {
       var event = e || new MouseEvent('click');
-      onCloseProp(event);
+      onCloseProp(event, meta);
     }
   };
 
@@ -172,17 +172,20 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   useLayoutEffect(function () {
     addFlyout(flyoutId, title, level, size, level === LEVEL_MAIN ? historyKey : undefined, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, typeof minWidth === 'number' ? minWidth : undefined);
     return function () {
-      var currentStoreState = getFlyoutManagerStore().getState();
-      var stillInStore = currentStoreState.flyouts.some(function (f) {
+      var store = getFlyoutManagerStore();
+      var stillInStore = store.getState().flyouts.some(function (f) {
         return f.flyoutId === flyoutId;
       });
       if (stillInStore) {
         // Normal cleanup (deps changed or explicit close via isOpen=false)
         level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
       } else if (wasRegisteredRef.current) {
-        var _onCloseCallbackRef$c;
-        // Cascade close: was registered but removed externally (e.g. main closed)
-        (_onCloseCallbackRef$c = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c === void 0 || _onCloseCallbackRef$c.call(onCloseCallbackRef, new MouseEvent('navigation'));
+        var _onCloseCallbackRef$c, _store$consumeCloseMe;
+        // Removed externally while mounted: forward the store-stamped reason
+        // (e.g. `navigation-back` from goBack), defaulting to cascade.
+        (_onCloseCallbackRef$c = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c === void 0 || _onCloseCallbackRef$c.call(onCloseCallbackRef, new MouseEvent('navigation'), (_store$consumeCloseMe = store.consumeCloseMeta(flyoutId)) !== null && _store$consumeCloseMe !== void 0 ? _store$consumeCloseMe : {
+          reason: 'navigation-cascade'
+        });
       }
       wasRegisteredRef.current = false;
     };
@@ -195,11 +198,16 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       wasRegisteredRef.current = true;
     }
 
-    // If flyout was previously registered, is marked as open, but no longer exists in manager state,
-    // it was removed via navigation (Back button) - trigger close callback
+    // If flyout was previously registered, is marked as open, but no longer
+    // exists in manager state, it was removed externally while still mounted.
+    // Forward the store-stamped reason (e.g. `navigation-back` from goBack);
+    // any other removal (e.g. a closeAllFlyouts cascade reaching a backgrounded
+    // flyout) defaults to `navigation-cascade`.
     if (wasRegisteredRef.current && !flyoutExistsInManager) {
-      var _onCloseCallbackRef$c2;
-      (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, new MouseEvent('navigation'));
+      var _onCloseCallbackRef$c2, _getFlyoutManagerStor;
+      (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, new MouseEvent('navigation'), (_getFlyoutManagerStor = getFlyoutManagerStore().consumeCloseMeta(flyoutId)) !== null && _getFlyoutManagerStor !== void 0 ? _getFlyoutManagerStor : {
+        reason: 'navigation-cascade'
+      });
       wasRegisteredRef.current = false; // Reset to avoid repeated calls
     }
   }, [flyoutExistsInManager, flyoutId]);
@@ -223,7 +231,12 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     width = _useResizeObserver.width;
 
   // Pass the stabilized onClose callback to the flyout menu context
-  var onClose = function onClose(e) {
+  var onClose = function onClose(e, meta) {
+    // Clear before flushSync so that effects flushed synchronously inside it
+    // (the navigation-back detector) see wasRegisteredRef = false and do not
+    // misidentify this user-initiated close as a Back-button navigation.
+    wasRegisteredRef.current = false;
+
     // CRITICAL: Update manager state FIRST before allowing React to unmount
     // This prevents race conditions during portal → inline DOM transitions
     // and ensures cascade close logic runs before DOM cleanup begins
@@ -231,10 +244,9 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     flushSync(function () {
       level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
     });
-    wasRegisteredRef.current = false; // Prevent cleanup from double-firing onClose
     if (onCloseCallbackRef.current) {
       var event = e || new MouseEvent('click');
-      onCloseCallbackRef.current(event);
+      onCloseCallbackRef.current(event, meta);
     }
   };
 
@@ -263,11 +275,23 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     } : undefined;
   }, [level, goBack]);
   var showBackButton = historyItems ? historyItems.length > 0 : false;
+
+  // When the store has a defined pagination value it takes precedence; the
+  // prop acts as a fallback for callers that don't use the cross-root store.
+  // Using both simultaneously is not supported and will log a warning in dev.
+  var storePagination = useFlyoutPagination(flyoutId);
+  var propPagination = _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.pagination;
+  if (process.env.NODE_ENV === 'development' && storePagination != null && propPagination != null) {
+    console.warn("flyout-pagination-dual-source-".concat(flyoutId), "[EuiFlyoutManager] flyout \"".concat(flyoutId, "\" has pagination set both via the store (setPagination) ") + 'and via flyoutMenuProps.pagination. The store value will be used. Remove one source to avoid confusion.');
+  }
+  var pagination = storePagination !== null && storePagination !== void 0 ? storePagination : propPagination;
+  var showPaginationControls = pagination != null && pagination.total > 1;
   var flyoutMenuProps = _objectSpread(_objectSpread({}, _flyoutMenuProps), {}, {
-    historyItems: historyItems,
-    showBackButton: showBackButton,
+    historyItems: showPaginationControls ? [] : historyItems,
+    showBackButton: showPaginationControls ? false : showBackButton,
     backButtonProps: backButtonProps,
-    title: title
+    title: title,
+    pagination: pagination
   });
   return ___EmotionJSX(EuiFlyoutIsManagedProvider, {
     isManaged: true

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

@@ -13,7 +13,7 @@ import { useIsFlyoutRegistered } from './selectors';
 
 // Ensure uniqueness across multiple hook instances, including in test envs
 var autoGeneratedFlyoutIdCounter = 0;
-export { useIsFlyoutActive, useHasActiveSession, useCurrentSession, useCurrentMainFlyout, useCurrentChildFlyout, useFlyoutWidth, useParentFlyoutSize, useHasChildFlyout, usePushPaddingOffsets, useHasPushPadding } from './selectors';
+export { useIsFlyoutActive, useHasActiveSession, useCurrentSession, useCurrentMainFlyout, useCurrentChildFlyout, useFlyoutWidth, useFlyoutPagination, useParentFlyoutSize, useHasChildFlyout, usePushPaddingOffsets, useHasPushPadding } from './selectors';
 export { useFlyoutLayoutMode } from './layout_mode';
 export { useIsInManagedFlyout } from './context';
 

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

@@ -9,7 +9,7 @@
 /**
  * Convenience re-exports of bound action creators for external usage.
  */
-export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, closeAllFlyouts as closeAllFlyoutsAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, setActivityStage as setActivityStageAction } from './actions';
+export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, closeAllFlyouts as closeAllFlyoutsAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPagination as setPaginationAction, setPushPadding as setPushPaddingAction, setActivityStage as setActivityStageAction } from './actions';
 
 /** Reducer and default state for the flyout manager. */
 export { flyoutManagerReducer, initialState } from './reducer';
@@ -25,7 +25,7 @@ export { EuiFlyoutManager } from './provider';
 /**
  * Selectors and derived state hooks for managed flyouts.
  */
-export { useCurrentChildFlyout, useCurrentMainFlyout, useCurrentSession, useFlyoutId, useFlyoutLayoutMode, useFlyoutManager, useFlyoutWidth, useHasChildFlyout, useIsFlyoutActive, useIsInManagedFlyout, useHasActiveSession, useParentFlyoutSize, usePushPaddingOffsets, useHasPushPadding } from './hooks';
+export { useCurrentChildFlyout, useCurrentMainFlyout, useCurrentSession, useFlyoutId, useFlyoutLayoutMode, useFlyoutManager, useFlyoutPagination, useFlyoutWidth, useHasChildFlyout, useIsFlyoutActive, useIsInManagedFlyout, useHasActiveSession, useParentFlyoutSize, usePushPaddingOffsets, useHasPushPadding } from './hooks';
 export { EuiFlyoutChild } from './flyout_child';
 export { EuiFlyoutMain } from './flyout_main';
 

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

@@ -10,7 +10,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * 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, ACTION_SET_CONTAINER_ELEMENT, ACTION_SET_REFERENCE_WIDTH } from './actions';
+import { ACTION_ADD, ACTION_CLOSE, ACTION_CLOSE_ALL, ACTION_SET_ACTIVE, ACTION_SET_LAYOUT_MODE, ACTION_SET_WIDTH, ACTION_SET_PAGINATION, 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, LEVEL_CHILD, STAGE_OPENING } from './const';
 /**
  * Default flyout manager state used to initialize the reducer.
@@ -351,6 +351,30 @@ export function flyoutManagerReducer() {
         });
       }
 
+    // Update a flyout's menu pagination. No-op if unchanged or missing.
+    case ACTION_SET_PAGINATION:
+      {
+        var _flyoutId2 = action.flyoutId,
+          pagination = action.pagination;
+        var target = state.flyouts.find(function (f) {
+          return f.flyoutId === _flyoutId2;
+        });
+        if (!target) {
+          return state;
+        }
+        if (target.pagination === pagination) {
+          return state;
+        }
+        var _updatedFlyouts = state.flyouts.map(function (flyout) {
+          return flyout.flyoutId === _flyoutId2 ? _objectSpread(_objectSpread({}, flyout), {}, {
+            pagination: pagination
+          }) : flyout;
+        });
+        return _objectSpread(_objectSpread({}, state), {}, {
+          flyouts: _updatedFlyouts
+        });
+      }
+
     // Switch global layout mode for managed flyouts.
     case ACTION_SET_LAYOUT_MODE:
       {
@@ -362,14 +386,14 @@ export function flyoutManagerReducer() {
     // Update a flyout's activity stage in state
     case ACTION_SET_ACTIVITY_STAGE:
       {
-        var _flyoutId2 = action.flyoutId;
-        var _updatedFlyouts = state.flyouts.map(function (flyout) {
-          return flyout.flyoutId === _flyoutId2 ? _objectSpread(_objectSpread({}, flyout), {}, {
+        var _flyoutId3 = action.flyoutId;
+        var _updatedFlyouts2 = state.flyouts.map(function (flyout) {
+          return flyout.flyoutId === _flyoutId3 ? _objectSpread(_objectSpread({}, flyout), {}, {
             activityStage: action.activityStage
           }) : flyout;
         });
         return _objectSpread(_objectSpread({}, state), {}, {
-          flyouts: _updatedFlyouts
+          flyouts: _updatedFlyouts2
         });
       }
 
@@ -423,7 +447,7 @@ export function flyoutManagerReducer() {
     // Navigate to a specific flyout (by main session or by child in current session's history)
     case ACTION_GO_TO_FLYOUT:
       {
-        var _flyoutId3 = action.flyoutId,
+        var _flyoutId4 = action.flyoutId,
           _level = action.level;
         var _currentSessionIndex4 = state.sessions.length - 1;
         if (_level === LEVEL_CHILD && state.sessions.length > 0) {
@@ -431,7 +455,7 @@ export function flyoutManagerReducer() {
           var _currentSession3 = state.sessions[_currentSessionIndex4];
           var _childHistory2 = (_currentSession3$chil = _currentSession3.childHistory) !== null && _currentSession3$chil !== void 0 ? _currentSession3$chil : [];
           var targetIndex = _childHistory2.findIndex(function (entry) {
-            return entry.flyoutId === _flyoutId3;
+            return entry.flyoutId === _flyoutId4;
           });
           if (targetIndex === -1) {
             return state; // Target child not in history
@@ -463,7 +487,7 @@ export function flyoutManagerReducer() {
 
         // Navigate by main flyout: remove all sessions after the target
         var targetSessionIndex = state.sessions.findIndex(function (session) {
-          return session.mainFlyoutId === _flyoutId3;
+          return session.mainFlyoutId === _flyoutId4;
         });
         if (targetSessionIndex === -1) {
           return state; // Target flyout not found

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

@@ -74,10 +74,16 @@ export var useFlyoutWidth = function useFlyoutWidth(flyoutId) {
   return (_useFlyout = useFlyout(flyoutId)) === null || _useFlyout === void 0 ? void 0 : _useFlyout.width;
 };
 
+/** Returns the store pagination override for a flyout, if set. */
+export var useFlyoutPagination = function useFlyoutPagination(flyoutId) {
+  var _useFlyout2;
+  return (_useFlyout2 = useFlyout(flyoutId)) === null || _useFlyout2 === void 0 ? void 0 : _useFlyout2.pagination;
+};
+
 /** 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;
+  var _useFlyout3;
+  return (_useFlyout3 = useFlyout(flyoutId)) === null || _useFlyout3 === void 0 ? void 0 : _useFlyout3.minWidth;
 };
 
 /** The configured size of the parent (main) flyout for a given child flyout ID. */

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

@@ -7,7 +7,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * 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, setContainerElement as setContainerElementAction } from './actions';
+import { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, closeAllFlyouts as closeAllFlyoutsAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPagination as setPaginationAction, 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';
 
 /**
@@ -19,6 +19,13 @@ function createStore() {
   var currentState = initial;
   var listeners = new Set();
   var eventListeners = new Set();
+
+  // Transient, one-shot close annotations keyed by flyoutId. `goBack` stamps the
+  // flyouts it removes so the managed flyout can report `navigation-back`; any
+  // other removal (e.g. closeAllFlyouts cascade) leaves no stamp and defaults to
+  // `navigation-cascade`. Kept off reducer state because it is a per-close
+  // annotation, not persistent state.
+  var pendingCloseMeta = new Map();
   var getState = function getState() {
     return currentState;
   };
@@ -162,6 +169,9 @@ function createStore() {
     setFlyoutWidth: function setFlyoutWidth(flyoutId, width) {
       return dispatch(setFlyoutWidthAction(flyoutId, width));
     },
+    setPagination: function setPagination(flyoutId, pagination) {
+      return dispatch(setPaginationAction(flyoutId, pagination));
+    },
     setPushPadding: function setPushPadding(side, width) {
       return dispatch(setPushPaddingAction(side, width));
     },
@@ -169,7 +179,23 @@ function createStore() {
       return dispatch(setContainerElementAction(element));
     },
     goBack: function goBack() {
-      return dispatch(goBackAction());
+      // Stamp the flyouts goBack removes as `navigation-back` (vs. the default
+      // `navigation-cascade`) BEFORE dispatching. dispatch synchronously flushes
+      // subscribers, which can consume the meta during unmount, so peek the pure
+      // reducer to learn which flyouts go away and stamp them first.
+      var action = goBackAction();
+      var nextState = flyoutManagerReducer(currentState, action);
+      var remaining = new Set(nextState.flyouts.map(function (f) {
+        return f.flyoutId;
+      }));
+      currentState.flyouts.forEach(function (f) {
+        if (!remaining.has(f.flyoutId)) {
+          pendingCloseMeta.set(f.flyoutId, {
+            reason: 'navigation-back'
+          });
+        }
+      });
+      dispatch(action);
     },
     goToFlyout: function goToFlyout(flyoutId, level) {
       return dispatch(goToFlyoutAction(flyoutId, level));
@@ -180,6 +206,13 @@ function createStore() {
     closeUnmanagedFlyout: function closeUnmanagedFlyout(flyoutId) {
       return dispatch(closeUnmanagedFlyoutAction(flyoutId));
     },
+    consumeCloseMeta: function consumeCloseMeta(flyoutId) {
+      var meta = pendingCloseMeta.get(flyoutId);
+      if (meta) {
+        pendingCloseMeta.delete(flyoutId);
+      }
+      return meta;
+    },
     historyItems: computeHistoryItems(dispatch) // Initialize with current state
   };
   return store;

package/optimize/es/components/flyout/use_flyout_menu.js

@@ -40,10 +40,10 @@ export var useEuiFlyoutMenu = function useEuiFlyoutMenu(_ref) {
   }, [hasMenu, _titleId, generatedMenuId]);
 
   // Determine if the menu has any content
-  // hasBackButton or hasHistory or hasCustomActions or hasVisibleTitle
+  // hasBackButton or hasHistory or hasCustomActions or hasVisibleTitle or hasPagination
   var menuHasContent = hasMenu && (!!flyoutMenuProps.showBackButton || ((_flyoutMenuProps$hist = (_flyoutMenuProps$hist2 = flyoutMenuProps.historyItems) === null || _flyoutMenuProps$hist2 === void 0 ? void 0 : _flyoutMenuProps$hist2.length) !== null && _flyoutMenuProps$hist !== void 0 ? _flyoutMenuProps$hist : 0) > 0 || ((_flyoutMenuProps$cust = (_flyoutMenuProps$cust2 = flyoutMenuProps.customActions) === null || _flyoutMenuProps$cust2 === void 0 ? void 0 : _flyoutMenuProps$cust2.length) !== null && _flyoutMenuProps$cust !== void 0 ? _flyoutMenuProps$cust : 0) > 0 ||
   // Component defaults to hiding the title, so only explicit false means the title will be visible
-  !!(flyoutMenuProps.title && flyoutMenuProps.hideTitle === false));
+  !!(flyoutMenuProps.title && flyoutMenuProps.hideTitle === false) || !!(flyoutMenuProps.pagination && flyoutMenuProps.pagination.total > 1));
 
   // Determine if the menu should be rendered based on the display mode and menu content
   var shouldRenderMenu = useMemo(function () {

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

@@ -20,7 +20,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 export var euiFieldPasswordStyles = function euiFieldPasswordStyles(euiThemeContext) {
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
-    euiFieldPassword: /*#__PURE__*/css(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
+    euiFieldPassword: /*#__PURE__*/css(formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
     // Only remove Edge's internal reveal button if we're providing a custom one
     // This pseudo-element is still supported in Chromium-based Edge.
     withToggle: _ref,

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

@@ -11,7 +11,7 @@ import { euiFormControlStyles } from '../form.styles';
 export var euiFieldSearchStyles = function euiFieldSearchStyles(euiThemeContext) {
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
-    euiFieldSearch: /*#__PURE__*/css("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
+    euiFieldSearch: /*#__PURE__*/css("-webkit-appearance:textfield;&::-webkit-search-decoration,&::-webkit-search-cancel-button{-webkit-appearance:none;}", formStyles.shared, " &:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldSearch;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),

package/optimize/es/components/form/form.styles.js

@@ -205,7 +205,7 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
   var borderShadow = "inset 0 0 0 var(--euiFormControlStateAutofillWidth) var(--euiFormControlStateAutofillColor), ".concat(backgroundShadow);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
-  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:invalid {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
+  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:is(:invalid, [aria-invalid='true']) {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
 };
 export var euiFormControlAutofillUnsetStyles = "\n\n";
 export var euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {