@elastic/eui 112.2.0 → 113.0.0

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -8,8 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { makeHighContrastColor } from '../../../services';
-import { euiFontSize, euiMaxBreakpoint, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiMaxBreakpoint, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles, euiFormControlFocusStyles, euiFormControlHighlightBorderStyles } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -39,8 +38,7 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
   });
 
   // Needs updating colors
-  var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
-  var needsUpdatingTextColor = makeHighContrastColor(euiTheme.colors.success)(needsUpdatingBackgroundColor);
+  var needsUpdatingTextColor = euiTheme.colors.textSuccess;
   return {
     euiSuperDatePicker: /*#__PURE__*/css("display:flex;gap:", gap, ";", logicalCSS('max-width', '100%'), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
@@ -68,21 +66,17 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     euiSuperDatePicker__prettyDurationTooltip: /*#__PURE__*/css(logicalCSS('max-width', 'min(58ch, 90vw)'), ";;label:euiSuperDatePicker__prettyDurationTooltip;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", highContrastModeStyles(euiThemeContext, {
-        none: "\n              ".concat(euiFormControlDefaultShadow(euiThemeContext), "\n              box-shadow: none;\n            "),
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", highContrastModeStyles(euiThemeContext, {
+        none: "\n              box-shadow: none;\n            ",
         preferred: 'border: none;'
-      }), ".euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover{outline:none;}.euiPopover{border-radius:", forms.controlBorderRadius, ";&:first-child{", logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-bottom-left-radius', 'inherit'), ";}&:last-child{", logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), ";}}.euiDatePopoverButton{background-color:transparent;border-radius:inherit;}};label:euiSuperDatePicker__formControlLayout;"),
+      }), ".euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover{outline:none;}.euiPopover{border-radius:", forms.controlBorderRadius, ";}.euiDatePopoverButton{background-color:transparent;border-radius:inherit;}};label:euiSuperDatePicker__formControlLayout;"),
       default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", euiFormControlFocusStyles(euiThemeContext), ";};label:default;"),
       disabled: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDisabledStyles(euiThemeContext), ";};label:disabled;"),
-      invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";&:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:", forms.borderColor, ";--euiFormControlStateHoverColor:", forms.borderHovered, ";}&:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)){", euiFormControlInvalidStyles(euiThemeContext), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", euiFormControlFocusStyles(euiThemeContext), ";}};label:invalid;"),
-      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{--euiFormControlStateColor:", euiTheme.colors.success, ";--euiFormControlStateHoverColor:", euiTheme.colors.success, ";--euiFormControlStateWidth:", euiTheme.border.width.thin, ";color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", euiFormControlHighlightBorderStyles, " &:has(.euiPopover-isOpen),&:focus-within{--euiFormControlStateColor:", forms.borderColor, ";--euiFormControlStateHoverColor:", forms.borderHovered, ";}}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
+      invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";&:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:transparent;--euiFormControlStateHoverColor:transparent;}&:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)){", euiFormControlInvalidStyles(euiThemeContext), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", euiFormControlFocusStyles(euiThemeContext), ";}};label:invalid;"),
+      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{--euiFormControlStateColor:", euiTheme.colors.success, ";--euiFormControlStateHoverColor:", euiTheme.colors.success, ";--euiFormControlStateWidth:", euiTheme.border.width.thin, ";color:", needsUpdatingTextColor, ";", euiFormControlHighlightBorderStyles, " &:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:transparent;--euiFormControlStateHoverColor:transparent;}&:has(.euiPopover-isOpen),&:focus-within{--euiFormControlStateColor:", forms.borderColor, ";--euiFormControlStateHoverColor:", forms.borderHovered, ";}}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
       }), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", euiFormControlFocusStyles(euiThemeContext), ";};label:needsUpdating;")
     }
   };
-};
-export var _buttonStyles = function _buttonStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  return /*#__PURE__*/css(logicalCSS('height', '100%'), " ", logicalCSS('width', '100%'), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:inherit;background-color:inherit;&:disabled{cursor:not-allowed;}");
 };

package/optimize/es/components/filter_group/filter_button.styles.js

@@ -98,7 +98,7 @@ export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiT
       hasIcon: /*#__PURE__*/css("&>.euiIcon:last-child{", logicalCSS('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
-      euiFilterButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), ";;label:euiFilterButton__text;"),
+      euiFilterButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
         return x * 2;
       })), ";;label:hasNotification;")

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex", "scrollContainerRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,6 +20,7 @@ export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     banner = _ref.banner,
     _ref$scrollableTabInd = _ref.scrollableTabIndex,
     scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
+    scrollContainerRef = _ref.scrollContainerRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFlyoutBody', className);
   var styles = useEuiMemoizedStyles(euiFlyoutBodyStyles);
@@ -30,7 +31,9 @@ export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   }, rest), ___EmotionJSX("div", {
     tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
-    css: overflowCssStyles
+    css: overflowCssStyles,
+    ref: scrollContainerRef,
+    "data-test-subj": "euiFlyoutBodyOverflow"
   }, banner && ___EmotionJSX("div", {
     className: "euiFlyoutBody__banner",
     css: styles.euiFlyoutBody__banner

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

@@ -16,4 +16,7 @@ export { EuiFlyoutMenu } from './flyout_menu';
 
 // Hooks for using Manager-based flyouts
 export { useIsInManagedFlyout, useHasActiveSession } from './manager';
-export { useIsInsideParentFlyout } from './flyout_parent_context';
+export { useIsInsideParentFlyout } from './flyout_parent_context';
+
+// Flyout manager store (for cross-root state synchronization)
+export { getFlyoutManagerStore } from './manager';

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

@@ -12,6 +12,8 @@ var PREFIX = 'eui/flyoutManager';
 export var ACTION_ADD = "".concat(PREFIX, "/add");
 /** Dispatched to remove a flyout from the manager (usually on close/unmount). */
 export var ACTION_CLOSE = "".concat(PREFIX, "/close");
+/** Dispatched to remove all flyouts from the manager. */
+export var ACTION_CLOSE_ALL = "".concat(PREFIX, "/closeAll");
 /** Dispatched to set which flyout is currently active within the session. */
 export var ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
 /** Dispatched when an active flyout's pixel width changes (for responsive layout). */
@@ -36,6 +38,8 @@ export var ACTION_CLOSE_UNMANAGED_FLYOUT = "".concat(PREFIX, "/closeUnmanagedFly
 
 /** Remove a flyout from manager state. Also updates the active session. */
 
+/** Remove all flyouts from manager state. */
+
 /** Set the active flyout within the current session (or clear with `null`). */
 
 /** Update a flyout's measured width in pixels. */
@@ -78,6 +82,13 @@ export var closeFlyout = function closeFlyout(flyoutId) {
   };
 };
 
+/** Unregister all flyouts. */
+export var closeAllFlyouts = function closeAllFlyouts() {
+  return {
+    type: ACTION_CLOSE_ALL
+  };
+};
+
 /** Set or clear the active flyout for the current session. */
 export var setActiveFlyout = function setActiveFlyout(flyoutId) {
   return {

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

@@ -13,7 +13,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, forwardRef } from 'react';
+import { flushSync } from 'react-dom';
 import { useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { useResizeObserver } from '../../observer/resize_observer';
@@ -69,6 +70,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useFlyoutManager2 = useFlyoutManager(),
     addFlyout = _useFlyoutManager2.addFlyout,
     closeFlyout = _useFlyoutManager2.closeFlyout,
+    closeAllFlyouts = _useFlyoutManager2.closeAllFlyouts,
     setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth,
     goBack = _useFlyoutManager2.goBack,
     _historyItems = _useFlyoutManager2.historyItems;
@@ -125,16 +127,30 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // Track if flyout was ever registered to avoid false positives on initial mount
   var wasRegisteredRef = useRef(false);
 
-  // Register with flyout manager context when open, remove when closed
+  // Track flyoutExistsInManager in a ref to avoid dependency loop
+  // The cleanup function needs the current value but shouldn't cause re-runs
+  var flyoutExistsInManagerRef = useRef(flyoutExistsInManager);
+
+  // Update ref when flyoutExistsInManager changes
   useEffect(function () {
+    flyoutExistsInManagerRef.current = flyoutExistsInManager;
+  }, [flyoutExistsInManager]);
+
+  // Register with flyout manager context when open, remove when closed
+  // Using useLayoutEffect to run synchronously before DOM updates
+  useLayoutEffect(function () {
     addFlyout(flyoutId, title, level, size);
     return function () {
-      closeFlyout(flyoutId);
+      // Only call closeFlyout if it wasn't already called via onClose
+      // This prevents duplicate removal when using Escape/X button
+      if (flyoutExistsInManagerRef.current) {
+        level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+      }
 
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
     };
-  }, [flyoutId, title, level, size, addFlyout, closeFlyout]);
+  }, [flyoutId, title, level, size, addFlyout, closeFlyout, closeAllFlyouts]);
 
   // Detect when flyout has been removed from manager state (e.g., via Back button)
   // and trigger onClose callback to notify the parent component
@@ -165,12 +181,6 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onActiveCallbackRef.current();
     }
   }, [currentSession, flyoutId, level]);
-  useEffect(function () {
-    return function () {
-      // Only remove from manager on component unmount, don't trigger close callback
-      closeFlyout(flyoutId);
-    };
-  }, [closeFlyout, flyoutId]);
 
   // Track width changes for flyouts
   var _useResizeObserver = useResizeObserver(isActive ? flyoutRef : null, 'width'),
@@ -178,8 +188,19 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   // Pass the stabilized onClose callback to the flyout menu context
   var onClose = function onClose(e) {
-    var _onCloseCallbackRef$c2;
-    (_onCloseCallbackRef$c2 = onCloseCallbackRef.current) === null || _onCloseCallbackRef$c2 === void 0 || _onCloseCallbackRef$c2.call(onCloseCallbackRef, e);
+    // 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
+    // Using flushSync to force synchronous state update completion
+    flushSync(function () {
+      level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
+    });
+
+    // trigger parent callback, unmounts the component
+    if (onCloseCallbackRef.current) {
+      var event = e || new MouseEvent('click');
+      onCloseCallbackRef.current(event);
+    }
   };
 
   // Update width in manager state when it changes

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

@@ -9,11 +9,13 @@
 /**
  * Convenience re-exports of bound action creators for external usage.
  */
-export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, 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, setPushPadding as setPushPaddingAction, setActivityStage as setActivityStageAction } from './actions';
 
 /** Reducer and default state for the flyout manager. */
 export { flyoutManagerReducer, initialState } from './reducer';
 
+/** Flyout manager store singleton and types. */
+export { getFlyoutManagerStore } from './store';
 /** Provider component exposing the Flyout Manager API via context. */
 export { EuiFlyoutManager } from './provider';
 

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_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 } from './actions';
+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 } from './actions';
 import { LAYOUT_MODE_SIDE_BY_SIDE, LEVEL_MAIN, STAGE_OPENING } from './const';
 /**
  * Default flyout manager state used to initialize the reducer.
@@ -182,6 +182,24 @@ export function flyoutManagerReducer() {
         });
       }
 
+    // Unregister all flyouts.
+    case ACTION_CLOSE_ALL:
+      {
+        if (state.sessions.length === 0) {
+          return state;
+        }
+
+        // Reset current z-index to 0 only if no unmanaged flyouts remain.
+        var _newCurrentZIndex2 = state.currentZIndex;
+        if (state.unmanagedFlyouts.length === 0) {
+          _newCurrentZIndex2 = 0;
+        }
+        return _objectSpread(_objectSpread({}, initialState), {}, {
+          currentZIndex: _newCurrentZIndex2,
+          unmanagedFlyouts: state.unmanagedFlyouts
+        });
+      }
+
     // Mark the provided flyout ID as the active child for the latest session.
     case ACTION_SET_ACTIVE:
       {

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

@@ -6,12 +6,18 @@
  * Side Public License, v 1.
  */
 
-import { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, goBack as goBackAction, goToFlyout as goToFlyoutAction, addUnmanagedFlyout as addUnmanagedFlyoutAction, closeUnmanagedFlyout as closeUnmanagedFlyoutAction } from './actions';
+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 } from './actions';
 import { flyoutManagerReducer, initialState } from './reducer';
+
+/**
+ * Events emitted by the flyout manager store for external consumers.
+ */
+
 function createStore() {
   var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
   var currentState = initial;
   var listeners = new Set();
+  var eventListeners = new Set();
   var getState = function getState() {
     return currentState;
   };
@@ -21,6 +27,17 @@ function createStore() {
       listeners.delete(listener);
     };
   };
+  var subscribeToEvents = function subscribeToEvents(listener) {
+    eventListeners.add(listener);
+    return function () {
+      eventListeners.delete(listener);
+    };
+  };
+  var emitEvent = function emitEvent(event) {
+    eventListeners.forEach(function (listener) {
+      listener(event);
+    });
+  };
 
   // The onClick handlers won't execute until after store is fully assigned.
   // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
@@ -49,6 +66,19 @@ function createStore() {
       // This ensures stable references and avoids stale closures
       if (nextState.sessions !== previousSessions) {
         store.historyItems = computeHistoryItems();
+
+        // Detect removed sessions and emit CLOSE_SESSION events
+        var nextSessionIds = new Set(nextState.sessions.map(function (s) {
+          return s.mainFlyoutId;
+        }));
+        previousSessions.forEach(function (session) {
+          if (!nextSessionIds.has(session.mainFlyoutId)) {
+            emitEvent({
+              type: 'CLOSE_SESSION',
+              session: session
+            });
+          }
+        });
       }
       listeners.forEach(function (l) {
         l();
@@ -58,6 +88,7 @@ function createStore() {
   store = {
     getState: getState,
     subscribe: subscribe,
+    subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
     addFlyout: function addFlyout(flyoutId, title, level, size) {
       return dispatch(addFlyoutAction(flyoutId, title, level, size));
@@ -65,6 +96,9 @@ function createStore() {
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch(closeFlyoutAction(flyoutId));
     },
+    closeAllFlyouts: function closeAllFlyouts() {
+      return dispatch(closeAllFlyoutsAction());
+    },
     setActiveFlyout: function setActiveFlyout(flyoutId) {
       return dispatch(setActiveFlyoutAction(flyoutId));
     },

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

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "id", "name", "placeholder", "value", "disabled", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps"];
+var _excluded = ["className", "id", "name", "placeholder", "value", "disabled", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps", "readOnly"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -43,6 +43,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     _props$type = props.type,
     type = _props$type === void 0 ? 'password' : _props$type,
     dualToggleProps = props.dualToggleProps,
+    readOnly = props.readOnly,
     rest = _objectWithoutProperties(props, _excluded);
 
   // Set the initial input type to `password` if they want dual
@@ -109,7 +110,8 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     isDisabled: disabled,
     compressed: compressed,
     prepend: prepend,
-    append: finalAppend
+    append: finalAppend,
+    readOnly: readOnly
   }, ___EmotionJSX(EuiValidatableControl, {
     isInvalid: isInvalid
   }, ___EmotionJSX("input", _extends({
@@ -121,6 +123,7 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     css: cssStyles,
     value: value,
     disabled: disabled,
-    ref: setInputRef
+    ref: setInputRef,
+    readOnly: readOnly
   }, rest))));
 };

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

@@ -201,7 +201,7 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
           css: iconStyles,
           className: "euiFilePicker__icon",
           color: iconColor,
-          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'importAction',
+          type: isInvalid ? 'alert' : disabled ? 'minusInCircle' : 'upload',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
         }), ___EmotionJSX("span", {

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

@@ -55,15 +55,19 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     backgroundColor: backgroundColor,
     backgroundDisabledColor: euiTheme.components.forms.backgroundDisabled,
     backgroundReadOnlyColor: euiTheme.components.forms.backgroundReadOnly,
+    backgroundAutoFilled: euiTheme.components.forms.backgroundAutofilled,
     borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.forms.border,
     borderHovered: euiTheme.components.forms.borderHovered,
     borderFocused: euiTheme.components.forms.borderFocused,
     borderInvalid: euiTheme.components.forms.borderInvalid,
     borderInvalidHovered: euiTheme.components.forms.borderInvalidHovered,
+    borderAutofilled: euiTheme.components.forms.borderAutofilled,
+    borderAutofilledHovered: euiTheme.components.forms.borderAutofilledHovered,
     controlDisabledColor: euiTheme.components.forms.controlBackgroundDisabled,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: highContrastMode ? makeHighContrastColor(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled,
-    appendPrependBackground: euiTheme.components.forms.prependBackground
+    appendPrependBackground: euiTheme.components.forms.prependBackground,
+    labelColor: euiTheme.colors.textHeading
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: mathWithUnits(controlHeight, function (x) {
@@ -72,7 +76,11 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     controlLayoutGroupInputCompressedHeight: mathWithUnits(controlCompressedHeight, function (x) {
       return x - 2;
     }),
-    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small
+    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small,
+    controlLayoutBorderRadius: euiTheme.border.radius.small,
+    controlLayoutInnerBorderRadius: mathWithUnits(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    })
   };
   var iconSizes = {
     controlIconSize: {
@@ -99,7 +107,7 @@ export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext)
     inGroup: "\n      ".concat(logicalCSS('height', '100%'), "\n      ").concat(highContrastModeStyles(euiThemeContext, {
       none: 'box-shadow: none;',
       preferred: 'border: none;'
-    }), "\n      border-radius: inherit;\n    "),
+    }), "\n    "),
     // Widths
     formWidth: "\n      ".concat(logicalCSS('max-width', form.maxWidth), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat(logicalCSS('max-width', '100%'), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
@@ -149,7 +157,7 @@ export var euiFormControlHoverStyles = function euiFormControlHoverStyles(euiThe
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
   var form = euiFormVariables(euiThemeContext);
-  return "\n    ".concat(hoverSelector, " {\n      --borderWidthBase: var(--euiFormControlStateWidth, ").concat(euiTheme.border.width.thin, ");\n      --borderWidth: ").concat(highContrastMode ? euiTheme.border.width.thick : 'var(--borderWidthBase)', ";\n      --borderColor: var(--euiFormControlStateHoverColor, ").concat(highContrastMode ? euiTheme.border.color : form.borderHovered, ");\n      position: relative;\n      z-index: 1;\n      outline: var(--borderWidth) solid var(--borderColor);\n      outline-offset: calc(-1 * var(--borderWidth));\n    }\n  ");
+  return "\n    ".concat(hoverSelector, " {\n      --borderWidthBase: var(--euiFormControlStateWidth, ").concat(euiTheme.border.width.thin, ");\n      --borderWidth: ").concat(highContrastMode ? euiTheme.border.width.thick : 'var(--borderWidthBase)', ";\n      --borderColor: var(--euiFormControlStateHoverColor, ").concat(highContrastMode ? euiTheme.border.color : form.borderHovered, ");\n      position: relative;\n      outline: var(--borderWidth) solid var(--borderColor);\n      outline-offset: calc(-1 * var(--borderWidth));\n    }\n  ");
 };
 export var euiFormControlHighlightBorderStyles = "\n  position: relative;\n  z-index: 1;\n  box-shadow: none;\n  outline: var(--euiFormControlStateWidth) solid var(--euiFormControlStateColor);\n  outline-offset: calc(-1 * var(--euiFormControlStateWidth));\n";
 export var euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
@@ -183,24 +191,23 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
   var form = euiFormVariables(euiThemeContext);
   // Make the text color slightly less prominent than the default colors.text
   var textColor = euiTheme.colors.darkestShade;
-  var tintedBackgroundColor = euiTheme.components.forms.backgroundAutofilled;
+  var tintedBackgroundColor = form.backgroundAutoFilled;
   // Hacky workaround to background-color, since Chrome doesn't normally allow overriding its styles
   // @see https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#sect1
   var backgroundShadow = "inset 0 0 0 100vw ".concat(tintedBackgroundColor);
 
   // Re-create the border, since the above webkit box shadow overrides the default border box-shadow
   // + change the border color to match states, since the underline background gradient no longer works
-  var borderColor = euiTheme.components.forms.borderAutofilled;
-  var borderHovered = euiTheme.components.forms.borderAutofilledHovered;
+  var borderColor = form.borderAutofilled;
+  var borderHovered = form.borderAutofilledHovered;
   var borderInvalid = form.borderInvalid;
   var borderInvalidHovered = form.borderInvalidHovered;
-  var borderShadow = function borderShadow(color) {
-    return "inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(color);
-  };
+  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    &:-webkit-autofill {\n      -webkit-text-fill-color: ".concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow(borderColor), ", ").concat(backgroundShadow, ";\n\n      &:hover,\n      &:focus {\n        -webkit-box-shadow: ").concat(borderShadow(borderHovered), ", ").concat(backgroundShadow, ";\n      }\n\n      &:invalid {\n        -webkit-box-shadow: ").concat(borderShadow(borderInvalid), ", ").concat(backgroundShadow, ";\n\n        &:hover {\n          -webkit-box-shadow: ").concat(borderShadow(borderInvalidHovered), ", ").concat(backgroundShadow, ";\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      &:invalid {\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) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "value", "placeholder", "className", "contentProps", "textProps", "compressed", "isInvalid", "fullWidth", "href", "rel"];
+var _excluded = ["children", "value", "placeholder", "className", "contentProps", "textProps", "compressed", "isDisabled", "isInvalid", "fullWidth", "iconSide", "isLoading", "href", "rel"];
 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; }
 /*
@@ -13,12 +13,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { isValidElement } from 'react';
+import React, { isValidElement, useContext } from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles } from '../../../services';
 import { EuiButtonEmpty } from '../../button';
 import { euiFormControlButtonStyles } from './form_control_button.styles';
 import { useInnerText } from '../../inner_text';
+import { EuiFormControlLayoutContext } from '../form_control_layout/form_control_layout_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFormControlButton = function EuiFormControlButton(_ref) {
   var children = _ref.children,
@@ -27,11 +28,13 @@ export var EuiFormControlButton = function EuiFormControlButton(_ref) {
     className = _ref.className,
     _contentProps = _ref.contentProps,
     _textProps = _ref.textProps,
-    compressed = _ref.compressed,
-    _ref$isInvalid = _ref.isInvalid,
-    isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
+    _compressed = _ref.compressed,
+    _isDisabled = _ref.isDisabled,
+    _isInvalid = _ref.isInvalid,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? true : _ref$fullWidth,
+    iconSide = _ref.iconSide,
+    _isLoading = _ref.isLoading,
     href = _ref.href,
     rel = _ref.rel,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -39,9 +42,19 @@ export var EuiFormControlButton = function EuiFormControlButton(_ref) {
     _useInnerText2 = _slicedToArray(_useInnerText, 2),
     buttonTextRef = _useInnerText2[0],
     innerText = _useInnerText2[1];
+  var _useContext = useContext(EuiFormControlLayoutContext),
+    formLayoutIsDisabled = _useContext.isDisabled,
+    formLayoutIsInvalid = _useContext.isInvalid,
+    formLayoutIsLoading = _useContext.isLoading,
+    formLayoutReadOnly = _useContext.readOnly,
+    formLayoutCompressed = _useContext.compressed;
+  var isDisabled = _isDisabled !== null && _isDisabled !== void 0 ? _isDisabled : formLayoutIsDisabled;
+  var isInvalid = _isInvalid !== null && _isInvalid !== void 0 ? _isInvalid : formLayoutIsInvalid;
+  var isLoading = formLayoutIsLoading === true ? false : _isLoading;
+  var compressed = _compressed !== null && _compressed !== void 0 ? _compressed : formLayoutCompressed;
   var styles = useEuiMemoizedStyles(euiFormControlButtonStyles);
   var classes = classNames('euiFormControlButton', className);
-  var cssStyles = [styles.euiFormControlButton, isInvalid && styles.isInvalid, compressed && styles.compressed, fullWidth ? styles.fullWidth : styles.formWidth];
+  var cssStyles = [styles.euiFormControlButton, isInvalid && styles.isInvalid, isLoading && styles.isLoading, formLayoutReadOnly && styles.readOnly, compressed && styles.compressed, fullWidth ? styles.fullWidth : styles.formWidth];
   var contentProps = _objectSpread(_objectSpread({}, _contentProps), {}, {
     css: [styles.euiFormControlButton__content, _contentProps === null || _contentProps === void 0 ? void 0 : _contentProps.css]
   });
@@ -64,7 +77,10 @@ export var EuiFormControlButton = function EuiFormControlButton(_ref) {
     className: classes,
     contentProps: contentProps,
     textProps: false,
-    color: "text"
+    color: "text",
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    iconSide: isLoading ? 'right' : iconSide
   }, restProps), hasText && ___EmotionJSX("span", _extends({}, customTextProps, {
     ref: buttonTextRef
   }), value || placeholder), hasText && content && ' ', content);

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

@@ -8,8 +8,8 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS } from '../../../global_styling';
-import { euiFormControlStyles, euiFormPlaceholderStyles } from '../form.styles';
+import { euiDisabledSelector, logicalCSS } from '../../../global_styling';
+import { euiFormControlStyles, euiFormPlaceholderStyles, euiFormVariables } from '../form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "isuld2-textContent",
   styles: "flex:1;text-align:start;label:textContent;"
@@ -20,11 +20,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiFormControlButtonStyles = function euiFormControlButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var form = euiFormVariables(euiThemeContext);
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
     euiFormControlButton: /*#__PURE__*/css(formStyles.shared, " ", formStyles.uncompressed, " font-weight:", euiTheme.font.weight.regular, ";transition:none;&:hover{&::before{display:none;}}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";};label:euiFormControlButton;"),
     isInvalid: /*#__PURE__*/css(formStyles.invalid, " &:disabled{", formStyles.invalid, ";};label:isInvalid;"),
+    readOnly: /*#__PURE__*/css(formStyles.readOnly, ";;label:readOnly;"),
     compressed: /*#__PURE__*/css(formStyles.compressed, ";;label:compressed;"),
+    isLoading: /*#__PURE__*/css("&:is(", euiDisabledSelector, "){background-color:", form.backgroundColor, ";}.euiLoadingSpinner{color:", euiTheme.colors.borderBasePlain, ";};label:isLoading;"),
     formWidth: formStyles.formWidth,
     fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
     euiFormControlButton__content: /*#__PURE__*/css("justify-content:flex-start;", logicalCSS('width', '100%'), ";;label:euiFormControlButton__content;"),