@elastic/eui 116.3.0 → 116.3.1-snapshot.1782148316870

package/optimize/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/optimize/lib/components/flyout/manager/flyout_managed.js

@@ -149,10 +149,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);
     }
   };
 
@@ -177,17 +177,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;
     };
@@ -200,11 +203,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]);
@@ -228,7 +236,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
@@ -236,10 +249,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);
     }
   };
 
@@ -268,11 +280,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/optimize/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/optimize/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/optimize/lib/components/flyout/manager/reducer.js

@@ -357,6 +357,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:
       {
@@ -368,14 +392,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
         });
       }
 
@@ -429,7 +453,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) {
@@ -437,7 +461,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
@@ -469,7 +493,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/optimize/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/optimize/lib/components/flyout/manager/store.js

@@ -26,6 +26,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;
   };
@@ -169,6 +176,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));
     },
@@ -176,7 +186,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));
@@ -187,6 +213,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/optimize/lib/components/flyout/use_flyout_menu.js

@@ -45,10 +45,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/optimize/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/optimize/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;"),

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

@@ -209,7 +209,7 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   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  ");
 };
 var euiFormControlAutofillUnsetStyles = exports.euiFormControlAutofillUnsetStyles = "\n\n";
 var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {