@elastic/eui 116.3.0 → 116.3.1-snapshot.1782148316870

package/lib/components/flyout/flyout_menu.js

@@ -13,13 +13,16 @@ var _button = require("../button");
 var _flex = require("../flex");
 var _list_group = require("../list_group");
 var _popover = require("../popover");
+var _accessibility = require("../accessibility");
+var _text = require("../text");
 var _title = require("../title");
+var _tool_tip = require("../tool_tip");
 var _flyout_close_button = require("./_flyout_close_button");
 var _flyout_menu = require("./flyout_menu.styles");
 var _flyout_menu_context = require("./flyout_menu_context");
 var _i18n = require("../i18n");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions", "iconType"];
+var _excluded = ["className", "title", "titleId", "hideTitle", "hideCloseButton", "historyItems", "showBackButton", "backButtonProps", "customActions", "iconType", "pagination"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -40,6 +43,8 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
  */ /**
  * History item for the flyout menu history popover
  */ /**
+ * Pagination configuration for the flyout menu
+ */ /**
  * Custom action item for the flyout menu component
  */ /**
  * Props for EuiFlyoutMenu
@@ -91,6 +96,73 @@ var HistoryPopover = function HistoryPopover(_ref) {
     }, item.title);
   })));
 };
+var PaginationControls = function PaginationControls(_ref2) {
+  var pagination = _ref2.pagination,
+    styles = _ref2.styles;
+  var currentIndex = pagination.currentIndex,
+    total = pagination.total,
+    onPrevious = pagination.onPrevious,
+    onNext = pagination.onNext;
+  var prevLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.pagination.previous', 'Previous');
+  var nextLabel = (0, _i18n.useEuiI18n)('euiFlyoutMenu.pagination.next', 'Next');
+  var isPrevDisabled = currentIndex === 0;
+  var isNextDisabled = currentIndex === total - 1;
+  var prevButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
+    iconType: "chevronSingleUp",
+    color: "text",
+    size: "xs",
+    "aria-label": prevLabel,
+    onClick: onPrevious,
+    isDisabled: isPrevDisabled,
+    "data-test-subj": "euiFlyoutMenuPaginationPrev"
+  });
+  var nextButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
+    iconType: "chevronSingleDown",
+    color: "text",
+    size: "xs",
+    "aria-label": nextLabel,
+    onClick: onNext,
+    isDisabled: isNextDisabled,
+    "data-test-subj": "euiFlyoutMenuPaginationNext"
+  });
+  return (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "xs",
+    alignItems: "center",
+    responsive: false
+  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, isPrevDisabled ? prevButton : (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: prevLabel,
+    disableScreenReaderOutput: true
+  }, prevButton)), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, (0, _react2.jsx)(_text.EuiText, {
+    size: "s",
+    css: styles.euiFlyoutMenu__paginationCounter,
+    "aria-hidden": "true"
+  }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyoutMenu.pagination.counter",
+    default: "{position} of {total}",
+    values: {
+      position: currentIndex + 1,
+      total: total
+    }
+  })), (0, _react2.jsx)(_accessibility.EuiScreenReaderLive, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiFlyoutMenu.pagination.counter",
+    default: "{position} of {total}",
+    values: {
+      position: currentIndex + 1,
+      total: total
+    }
+  }))), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, isNextDisabled ? nextButton : (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: nextLabel,
+    disableScreenReaderOutput: true
+  }, nextButton))));
+};
 
 /**
  * The component for the top menu bar inside a flyout. Since this is a private
@@ -101,24 +173,26 @@ var HistoryPopover = function HistoryPopover(_ref) {
  *
  * @private
  */
-var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
-  var className = _ref2.className,
-    title = _ref2.title,
-    titleId = _ref2.titleId,
-    _ref2$hideTitle = _ref2.hideTitle,
-    hideTitle = _ref2$hideTitle === void 0 ? true : _ref2$hideTitle,
-    hideCloseButton = _ref2.hideCloseButton,
-    _ref2$historyItems = _ref2.historyItems,
-    historyItems = _ref2$historyItems === void 0 ? [] : _ref2$historyItems,
-    showBackButton = _ref2.showBackButton,
-    backButtonProps = _ref2.backButtonProps,
-    customActions = _ref2.customActions,
-    _iconType = _ref2.iconType,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref3) {
+  var className = _ref3.className,
+    title = _ref3.title,
+    titleId = _ref3.titleId,
+    _ref3$hideTitle = _ref3.hideTitle,
+    hideTitle = _ref3$hideTitle === void 0 ? true : _ref3$hideTitle,
+    hideCloseButton = _ref3.hideCloseButton,
+    _ref3$historyItems = _ref3.historyItems,
+    historyItems = _ref3$historyItems === void 0 ? [] : _ref3$historyItems,
+    showBackButton = _ref3.showBackButton,
+    backButtonProps = _ref3.backButtonProps,
+    customActions = _ref3.customActions,
+    _iconType = _ref3.iconType,
+    pagination = _ref3.pagination,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   var _useContext = (0, _react.useContext)(_flyout_menu_context.EuiFlyoutMenuContext),
     onClose = _useContext.onClose;
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_menu.euiFlyoutMenuStyles);
   var classes = (0, _classnames.default)('euiFlyoutMenu', className);
+  var showPaginationControls = pagination != null && pagination.total > 1;
   var titleNode;
   if (title) {
     titleNode = (0, _react2.jsx)(_title.EuiTitle, {
@@ -129,7 +203,9 @@ var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
     }, title));
   }
   var handleClose = function handleClose(event) {
-    onClose === null || onClose === void 0 || onClose(event);
+    onClose === null || onClose === void 0 || onClose(event, {
+      reason: 'close-button'
+    });
   };
   var closeButton = (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
     onClose: handleClose,
@@ -145,13 +221,16 @@ var EuiFlyoutMenu = exports.EuiFlyoutMenu = function EuiFlyoutMenu(_ref2) {
     justifyContent: "spaceBetween",
     gutterSize: "none",
     responsive: false
-  }, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
+  }, showPaginationControls ? (0, _react2.jsx)(PaginationControls, {
+    pagination: pagination,
+    styles: styles
+  }) : (0, _react2.jsx)(_react.default.Fragment, null, showBackButton && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)(BackButton, backButtonProps)), historyItems.length > 0 && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)(HistoryPopover, {
     items: historyItems
-  })), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
+  }))), titleNode && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, titleNode), (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: true
@@ -253,5 +332,27 @@ EuiFlyoutMenu.propTypes = {
        * Aria label for the action button
        */
     "aria-label": _propTypes.default.string.isRequired
-  }).isRequired)
+  }).isRequired),
+  /**
+       * Enables Prev/Next navigation controls and a position counter in the menu bar.
+       * Pagination replaces back/history navigation in the left menu slot.
+       */
+  pagination: _propTypes.default.shape({
+    /**
+       * Zero-based index of the currently displayed item
+       */
+    currentIndex: _propTypes.default.number.isRequired,
+    /**
+       * Total number of items
+       */
+    total: _propTypes.default.number.isRequired,
+    /**
+       * Called when the user clicks the Previous button
+       */
+    onPrevious: _propTypes.default.func.isRequired,
+    /**
+       * Called when the user clicks the Next button
+       */
+    onNext: _propTypes.default.func.isRequired
+  })
 };

package/lib/components/flyout/flyout_menu.styles.js

@@ -20,6 +20,7 @@ var euiFlyoutMenuStyles = exports.euiFlyoutMenuStyles = function euiFlyoutMenuSt
     euiFlyoutMenu__container: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 3.5);flex-shrink:0;padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.s, ";border-block-end:", euiTheme.border.width.thin, " solid ", euiTheme.border.color, ";padding-block-start:calc(", euiTheme.size.m, " * 0.8);.euiTitle{padding-inline:", euiTheme.size.s, ";};label:euiFlyoutMenu__container;"),
     euiFlyoutMenu__spacer: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.m, ";;label:euiFlyoutMenu__spacer;"),
     euiFlyoutMenu__actions: /*#__PURE__*/(0, _react.css)("block-size:calc(", euiTheme.size.m, " * 1.8);;label:euiFlyoutMenu__actions;"),
-    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiFlyoutMenu__hiddenTitle;")
+    euiFlyoutMenu__hiddenTitle: /*#__PURE__*/(0, _react.css)((0, _accessibility.euiScreenReaderOnly)(), ";;label:euiFlyoutMenu__hiddenTitle;"),
+    euiFlyoutMenu__paginationCounter: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.textSubdued, ";white-space:nowrap;;label:euiFlyoutMenu__paginationCounter;")
   };
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setReferenceWidth = exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setContainerElement = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.closeAllFlyouts = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_REFERENCE_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_CONTAINER_ELEMENT = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_ALL = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
+exports.setReferenceWidth = exports.setPushPadding = exports.setPagination = exports.setLayoutMode = exports.setFlyoutWidth = exports.setContainerElement = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.closeAllFlyouts = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_REFERENCE_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_PAGINATION = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_CONTAINER_ELEMENT = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_ALL = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
 var _const = require("./const");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -24,6 +24,8 @@ var ACTION_CLOSE_ALL = exports.ACTION_CLOSE_ALL = "".concat(PREFIX, "/closeAll")
 var ACTION_SET_ACTIVE = exports.ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
 /** Dispatched when an active flyout's pixel width changes (for responsive layout). */
 var ACTION_SET_WIDTH = exports.ACTION_SET_WIDTH = "".concat(PREFIX, "/setWidth");
+/** Dispatched to set a flyout's menu pagination. */
+var ACTION_SET_PAGINATION = exports.ACTION_SET_PAGINATION = "".concat(PREFIX, "/setPagination");
 /** Dispatched to switch layout mode between `side-by-side` and `stacked`. */
 var ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_LAYOUT_MODE = "".concat(PREFIX, "/setLayoutMode");
 /** Dispatched to update a flyout's activity stage (e.g., opening -> active). */
@@ -54,6 +56,8 @@ var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = "".c
 
 /** 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. */
@@ -128,6 +132,22 @@ var setFlyoutWidth = exports.setFlyoutWidth = function setFlyoutWidth(flyoutId,
   };
 };
 
+/**
+ * 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.
+ */
+var setPagination = exports.setPagination = function setPagination(flyoutId, pagination) {
+  return {
+    type: ACTION_SET_PAGINATION,
+    flyoutId: flyoutId,
+    pagination: pagination
+  };
+};
+
 /** Switch layout mode between `side-by-side` and `stacked`. */
 var setLayoutMode = exports.setLayoutMode = function setLayoutMode(layoutMode) {
   return {

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

@@ -155,7 +155,29 @@ EuiFlyoutChild.propTypes = {
          * Aria label for the action button
          */
       "aria-label": _propTypes.default.string.isRequired
-    }).isRequired)
+    }).isRequired),
+    /**
+         * Enables Prev/Next navigation controls and a position counter in the menu bar.
+         * Pagination replaces back/history navigation in the left menu slot.
+         */
+    pagination: _propTypes.default.shape({
+      /**
+         * Zero-based index of the currently displayed item
+         */
+      currentIndex: _propTypes.default.number.isRequired,
+      /**
+         * Total number of items
+         */
+      total: _propTypes.default.number.isRequired,
+      /**
+         * Called when the user clicks the Previous button
+         */
+      onPrevious: _propTypes.default.func.isRequired,
+      /**
+         * Called when the user clicks the Next button
+         */
+      onNext: _propTypes.default.func.isRequired
+    })
   }),
   onActive: _propTypes.default.func
 };

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

@@ -158,10 +158,10 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
 
   // Stabilize the onClose callback
   var onCloseCallbackRef = (0, _react.useRef)();
-  onCloseCallbackRef.current = function (e) {
+  onCloseCallbackRef.current = function (e, meta) {
     if (onCloseProp) {
       var event = e || new MouseEvent('click');
-      onCloseProp(event);
+      onCloseProp(event, meta);
     }
   };
 
@@ -186,17 +186,20 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   (0, _react.useLayoutEffect)(function () {
     addFlyout(flyoutId, title, level, size, level === _const.LEVEL_MAIN ? historyKey : undefined, _flyoutMenuProps === null || _flyoutMenuProps === void 0 ? void 0 : _flyoutMenuProps.iconType, typeof minWidth === 'number' ? minWidth : undefined);
     return function () {
-      var currentStoreState = (0, _store.getFlyoutManagerStore)().getState();
-      var stillInStore = currentStoreState.flyouts.some(function (f) {
+      var store = (0, _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 === _const.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;
     };
@@ -209,11 +212,16 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       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 = (0, _store.getFlyoutManagerStore)().consumeCloseMeta(flyoutId)) !== null && _getFlyoutManagerStor !== void 0 ? _getFlyoutManagerStor : {
+        reason: 'navigation-cascade'
+      });
       wasRegisteredRef.current = false; // Reset to avoid repeated calls
     }
   }, [flyoutExistsInManager, flyoutId]);
@@ -237,7 +245,12 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     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
@@ -245,10 +258,9 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     (0, _reactDom.flushSync)(function () {
       level === _const.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);
     }
   };
 
@@ -277,11 +289,23 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     } : 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 = (0, _hooks.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 (0, _react2.jsx)(_context.EuiFlyoutIsManagedProvider, {
     isManaged: true

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

@@ -29,6 +29,12 @@ Object.defineProperty(exports, "useFlyoutLayoutMode", {
   }
 });
 exports.useFlyoutManager = void 0;
+Object.defineProperty(exports, "useFlyoutPagination", {
+  enumerable: true,
+  get: function get() {
+    return _selectors.useFlyoutPagination;
+  }
+});
 Object.defineProperty(exports, "useFlyoutWidth", {
   enumerable: true,
   get: function get() {

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

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "setFlyoutWidthAction", {
     return _actions.setFlyoutWidth;
   }
 });
+Object.defineProperty(exports, "setPaginationAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.setPagination;
+  }
+});
 Object.defineProperty(exports, "setPushPaddingAction", {
   enumerable: true,
   get: function get() {
@@ -123,6 +129,12 @@ Object.defineProperty(exports, "useFlyoutManager", {
     return _hooks.useFlyoutManager;
   }
 });
+Object.defineProperty(exports, "useFlyoutPagination", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useFlyoutPagination;
+  }
+});
 Object.defineProperty(exports, "useFlyoutWidth", {
   enumerable: true,
   get: function get() {

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

@@ -364,6 +364,30 @@ function flyoutManagerReducer() {
         });
       }
 
+    // Update a flyout's menu pagination. No-op if unchanged or missing.
+    case _actions.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 _actions.ACTION_SET_LAYOUT_MODE:
       {
@@ -375,14 +399,14 @@ function flyoutManagerReducer() {
     // Update a flyout's activity stage in state
     case _actions.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
         });
       }
 
@@ -436,7 +460,7 @@ function flyoutManagerReducer() {
     // Navigate to a specific flyout (by main session or by child in current session's history)
     case _actions.ACTION_GO_TO_FLYOUT:
       {
-        var _flyoutId3 = action.flyoutId,
+        var _flyoutId4 = action.flyoutId,
           _level = action.level;
         var _currentSessionIndex4 = state.sessions.length - 1;
         if (_level === _const.LEVEL_CHILD && state.sessions.length > 0) {
@@ -444,7 +468,7 @@ 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
@@ -476,7 +500,7 @@ 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/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.useFlyoutMinWidth = 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.useFlyoutPagination = exports.useFlyoutMinWidth = exports.useFlyout = exports.useCurrentSession = exports.useCurrentMainFlyout = exports.useCurrentFlyoutZIndexRef = exports.useCurrentChildFlyout = void 0;
 var _provider = require("./provider");
 var _react = require("react");
 /*
@@ -80,10 +80,16 @@ var useFlyoutWidth = exports.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. */
+var useFlyoutPagination = exports.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. */
 var useFlyoutMinWidth = exports.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/lib/components/flyout/manager/store.js

@@ -28,6 +28,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;
   };
@@ -171,6 +178,9 @@ function createStore() {
     setFlyoutWidth: function setFlyoutWidth(flyoutId, width) {
       return dispatch((0, _actions.setFlyoutWidth)(flyoutId, width));
     },
+    setPagination: function setPagination(flyoutId, pagination) {
+      return dispatch((0, _actions.setPagination)(flyoutId, pagination));
+    },
     setPushPadding: function setPushPadding(side, width) {
       return dispatch((0, _actions.setPushPadding)(side, width));
     },
@@ -178,7 +188,23 @@ function createStore() {
       return dispatch((0, _actions.setContainerElement)(element));
     },
     goBack: function goBack() {
-      return dispatch((0, _actions.goBack)());
+      // 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 = (0, _actions.goBack)();
+      var nextState = (0, _reducer.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((0, _actions.goToFlyout)(flyoutId, level));
@@ -189,6 +215,13 @@ function createStore() {
     closeUnmanagedFlyout: function closeUnmanagedFlyout(flyoutId) {
       return dispatch((0, _actions.closeUnmanagedFlyout)(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/lib/components/flyout/use_flyout_menu.js

@@ -46,10 +46,10 @@ var useEuiFlyoutMenu = exports.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 = (0, _react.useMemo)(function () {

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

@@ -24,7 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 var euiFieldPasswordStyles = exports.euiFieldPasswordStyles = function euiFieldPasswordStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldPassword: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldPassword;"),
+    euiFieldPassword: /*#__PURE__*/(0, _react.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/lib/components/form/field_search/field_search.styles.js

@@ -17,7 +17,7 @@ var _form = require("../form.styles");
 var euiFieldSearchStyles = exports.euiFieldSearchStyles = function euiFieldSearchStyles(euiThemeContext) {
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
-    euiFieldSearch: /*#__PURE__*/(0, _react.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__*/(0, _react.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__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),