@elastic/eui 112.2.0 → 113.0.0

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

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiSuperDatePickerStyles = exports._buttonStyles = void 0;
+exports.euiSuperDatePickerStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _form = require("../../form/form.styles");
@@ -43,8 +42,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   });
 
   // Needs updating colors
-  var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
-  var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
+  var needsUpdatingTextColor = euiTheme.colors.textSuccess;
   return {
     euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
@@ -72,21 +70,17 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     euiSuperDatePicker__prettyDurationTooltip: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', 'min(58ch, 90vw)'), ";;label:euiSuperDatePicker__prettyDurationTooltip;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-        none: "\n              ".concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext), "\n              box-shadow: none;\n            "),
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _high_contrast.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{", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";}&:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.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__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:default;"),
       disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
-      invalid: /*#__PURE__*/(0, _react.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)){", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";}};label:invalid;"),
-      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateColor:", euiTheme.colors.success, ";--euiFormControlStateHoverColor:", euiTheme.colors.success, ";--euiFormControlStateWidth:", euiTheme.border.width.thin, ";color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", _form.euiFormControlHighlightBorderStyles, " &:has(.euiPopover-isOpen),&:focus-within{--euiFormControlStateColor:", forms.borderColor, ";--euiFormControlStateHoverColor:", forms.borderHovered, ";}}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";&:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:transparent;--euiFormControlStateHoverColor:transparent;}&:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)){", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";}};label:invalid;"),
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateColor:", euiTheme.colors.success, ";--euiFormControlStateHoverColor:", euiTheme.colors.success, ";--euiFormControlStateWidth:", euiTheme.border.width.thin, ";color:", needsUpdatingTextColor, ";", _form.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{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
       }), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:needsUpdating;")
     }
   };
-};
-var _buttonStyles = exports._buttonStyles = function _buttonStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:inherit;background-color:inherit;&:disabled{cursor:not-allowed;}");
 };

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

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

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

@@ -12,7 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _flyout_body = require("./flyout_body.styles");
 var _react2 = require("@emotion/react");
-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
@@ -26,6 +26,7 @@ var EuiFlyoutBody = exports.EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     banner = _ref.banner,
     _ref$scrollableTabInd = _ref.scrollableTabIndex,
     scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
+    scrollContainerRef = _ref.scrollContainerRef,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutBody', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_body.euiFlyoutBodyStyles);
@@ -36,7 +37,9 @@ var EuiFlyoutBody = exports.EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   }, rest), (0, _react2.jsx)("div", {
     tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
-    css: overflowCssStyles
+    css: overflowCssStyles,
+    ref: scrollContainerRef,
+    "data-test-subj": "euiFlyoutBodyOverflow"
   }, banner && (0, _react2.jsx)("div", {
     className: "euiFlyoutBody__banner",
     css: styles.euiFlyoutBody__banner

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

@@ -51,6 +51,12 @@ Object.defineProperty(exports, "euiFlyoutSlideInRight", {
     return _flyout2.euiFlyoutSlideInRight;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _manager.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "useHasActiveSession", {
   enumerable: true,
   get: function get() {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = 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 = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
+exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = 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_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = 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
@@ -18,6 +18,8 @@ var PREFIX = 'eui/flyoutManager';
 var ACTION_ADD = exports.ACTION_ADD = "".concat(PREFIX, "/add");
 /** Dispatched to remove a flyout from the manager (usually on close/unmount). */
 var ACTION_CLOSE = exports.ACTION_CLOSE = "".concat(PREFIX, "/close");
+/** Dispatched to remove all flyouts from the manager. */
+var ACTION_CLOSE_ALL = exports.ACTION_CLOSE_ALL = "".concat(PREFIX, "/closeAll");
 /** Dispatched to set which flyout is currently active within the session. */
 var ACTION_SET_ACTIVE = exports.ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
 /** Dispatched when an active flyout's pixel width changes (for responsive layout). */
@@ -42,6 +44,8 @@ var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = "".c
 
 /** 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. */
@@ -84,6 +88,13 @@ var closeFlyout = exports.closeFlyout = function closeFlyout(flyoutId) {
   };
 };
 
+/** Unregister all flyouts. */
+var closeAllFlyouts = exports.closeAllFlyouts = function closeAllFlyouts() {
+  return {
+    type: ACTION_CLOSE_ALL
+  };
+};
+
 /** Set or clear the active flyout for the current session. */
 var setActiveFlyout = exports.setActiveFlyout = function setActiveFlyout(flyoutId) {
   return {

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

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
 var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _resize_observer = require("../../observer/resize_observer");
@@ -77,6 +78,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   var _useFlyoutManager2 = useFlyoutManager(),
     addFlyout = _useFlyoutManager2.addFlyout,
     closeFlyout = _useFlyoutManager2.closeFlyout,
+    closeAllFlyouts = _useFlyoutManager2.closeAllFlyouts,
     setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth,
     goBack = _useFlyoutManager2.goBack,
     _historyItems = _useFlyoutManager2.historyItems;
@@ -133,16 +135,30 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   // Track if flyout was ever registered to avoid false positives on initial mount
   var wasRegisteredRef = (0, _react.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 = (0, _react.useRef)(flyoutExistsInManager);
+
+  // Update ref when flyoutExistsInManager changes
   (0, _react.useEffect)(function () {
+    flyoutExistsInManagerRef.current = flyoutExistsInManager;
+  }, [flyoutExistsInManager]);
+
+  // Register with flyout manager context when open, remove when closed
+  // Using useLayoutEffect to run synchronously before DOM updates
+  (0, _react.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 === _const.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
@@ -173,12 +189,6 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       onActiveCallbackRef.current();
     }
   }, [currentSession, flyoutId, level]);
-  (0, _react.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 = (0, _resize_observer.useResizeObserver)(isActive ? flyoutRef : null, 'width'),
@@ -186,8 +196,19 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
 
   // 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
+    (0, _reactDom.flushSync)(function () {
+      level === _const.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/lib/components/flyout/manager/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "addFlyoutAction", {
     return _actions.addFlyout;
   }
 });
+Object.defineProperty(exports, "closeAllFlyoutsAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.closeAllFlyouts;
+  }
+});
 Object.defineProperty(exports, "closeFlyoutAction", {
   enumerable: true,
   get: function get() {
@@ -39,6 +45,12 @@ Object.defineProperty(exports, "flyoutManagerReducer", {
     return _reducer.flyoutManagerReducer;
   }
 });
+Object.defineProperty(exports, "getFlyoutManagerStore", {
+  enumerable: true,
+  get: function get() {
+    return _store.getFlyoutManagerStore;
+  }
+});
 Object.defineProperty(exports, "getWidthFromSize", {
   enumerable: true,
   get: function get() {
@@ -161,6 +173,7 @@ Object.defineProperty(exports, "usePushPaddingOffsets", {
 });
 var _actions = require("./actions");
 var _reducer = require("./reducer");
+var _store = require("./store");
 var _provider = require("./provider");
 var _hooks = require("./hooks");
 var _flyout_child = require("./flyout_child");

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

@@ -188,6 +188,24 @@ function flyoutManagerReducer() {
         });
       }
 
+    // Unregister all flyouts.
+    case _actions.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 _actions.ACTION_SET_ACTIVE:
       {

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

@@ -15,10 +15,15 @@ var _reducer = require("./reducer");
  * Side Public License, v 1.
  */
 
+/**
+ * Events emitted by the flyout manager store for external consumers.
+ */
+
 function createStore() {
   var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _reducer.initialState;
   var currentState = initial;
   var listeners = new Set();
+  var eventListeners = new Set();
   var getState = function getState() {
     return currentState;
   };
@@ -28,6 +33,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'
@@ -56,6 +72,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();
@@ -65,6 +94,7 @@ function createStore() {
   store = {
     getState: getState,
     subscribe: subscribe,
+    subscribeToEvents: subscribeToEvents,
     dispatch: dispatch,
     addFlyout: function addFlyout(flyoutId, title, level, size) {
       return dispatch((0, _actions.addFlyout)(flyoutId, title, level, size));
@@ -72,6 +102,9 @@ function createStore() {
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch((0, _actions.closeFlyout)(flyoutId));
     },
+    closeAllFlyouts: function closeAllFlyouts() {
+      return dispatch((0, _actions.closeAllFlyouts)());
+    },
     setActiveFlyout: function setActiveFlyout(flyoutId) {
       return dispatch((0, _actions.setActiveFlyout)(flyoutId));
     },

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

@@ -20,7 +20,7 @@ var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _field_password = require("./field_password.styles");
 var _react2 = require("@emotion/react");
-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
@@ -52,6 +52,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     _props$type = props.type,
     type = _props$type === void 0 ? 'password' : _props$type,
     dualToggleProps = props.dualToggleProps,
+    readOnly = props.readOnly,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   // Set the initial input type to `password` if they want dual
@@ -118,7 +119,8 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     isDisabled: disabled,
     compressed: compressed,
     prepend: prepend,
-    append: finalAppend
+    append: finalAppend,
+    readOnly: readOnly
   }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
     isInvalid: isInvalid
   }, (0, _react2.jsx)("input", (0, _extends2.default)({
@@ -130,6 +132,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     css: cssStyles,
     value: value,
     disabled: disabled,
-    ref: setInputRef
+    ref: setInputRef,
+    readOnly: readOnly
   }, rest))));
 };

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

@@ -209,7 +209,7 @@ var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Co
           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"
         }), (0, _react2.jsx)("span", {

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormPlaceholderStyles = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlShowBackgroundLine = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlHoverStyles = exports.euiFormControlHighlightBorderStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.disableFormControlHoverStyles = void 0;
+exports.euiFormVariables = exports.euiFormPlaceholderStyles = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlShowBackgroundLine = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlHoverStyles = exports.euiFormControlHighlightBorderStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutofillUnsetStyles = exports.euiFormControlAutoFillStyles = exports.disableFormControlHoverStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
@@ -59,15 +59,19 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     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 ? (0, _services.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: (0, _global_styling.mathWithUnits)(controlHeight, function (x) {
@@ -76,7 +80,11 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     controlLayoutGroupInputCompressedHeight: (0, _global_styling.mathWithUnits)(controlCompressedHeight, function (x) {
       return x - 2;
     }),
-    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small
+    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small,
+    controlLayoutBorderRadius: euiTheme.border.radius.small,
+    controlLayoutInnerBorderRadius: (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    })
   };
   var iconSizes = {
     controlIconSize: {
@@ -103,7 +111,7 @@ var euiFormControlStyles = exports.euiFormControlStyles = function euiFormContro
     inGroup: "\n      ".concat((0, _global_styling.logicalCSS)('height', '100%'), "\n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: 'box-shadow: none;',
       preferred: 'border: none;'
-    }), "\n      border-radius: inherit;\n    "),
+    }), "\n    "),
     // Widths
     formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
@@ -153,7 +161,7 @@ var euiFormControlHoverStyles = exports.euiFormControlHoverStyles = function eui
   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  ");
 };
 var euiFormControlHighlightBorderStyles = exports.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";
 var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
@@ -187,24 +195,23 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   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  ");
 };
+var euiFormControlAutofillUnsetStyles = exports.euiFormControlAutofillUnsetStyles = "\n\n";
 var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;

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

@@ -16,8 +16,9 @@ var _services = require("../../../services");
 var _button = require("../../button");
 var _form_control_button = require("./form_control_button.styles");
 var _inner_text = require("../../inner_text");
+var _form_control_layout_context = require("../form_control_layout/form_control_layout_context");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -36,11 +37,13 @@ var EuiFormControlButton = exports.EuiFormControlButton = function EuiFormContro
     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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -48,9 +51,19 @@ var EuiFormControlButton = exports.EuiFormControlButton = function EuiFormContro
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
     buttonTextRef = _useInnerText2[0],
     innerText = _useInnerText2[1];
+  var _useContext = (0, _react.useContext)(_form_control_layout_context.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 = (0, _services.useEuiMemoizedStyles)(_form_control_button.euiFormControlButtonStyles);
   var classes = (0, _classnames.default)('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]
   });
@@ -73,7 +86,10 @@ var EuiFormControlButton = exports.EuiFormControlButton = function EuiFormContro
     className: classes,
     contentProps: contentProps,
     textProps: false,
-    color: "text"
+    color: "text",
+    isDisabled: isDisabled,
+    isLoading: isLoading,
+    iconSide: isLoading ? 'right' : iconSide
   }, restProps), hasText && (0, _react2.jsx)("span", (0, _extends2.default)({}, customTextProps, {
     ref: buttonTextRef
   }), value || placeholder), hasText && content && ' ', content);

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

@@ -24,11 +24,14 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiFormControlButtonStyles = exports.euiFormControlButtonStyles = function euiFormControlButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var form = (0, _form.euiFormVariables)(euiThemeContext);
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
     euiFormControlButton: /*#__PURE__*/(0, _react.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__*/(0, _react.css)(formStyles.invalid, " &:disabled{", formStyles.invalid, ";};label:isInvalid;"),
+    readOnly: /*#__PURE__*/(0, _react.css)(formStyles.readOnly, ";;label:readOnly;"),
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";;label:compressed;"),
+    isLoading: /*#__PURE__*/(0, _react.css)("&:is(", _global_styling.euiDisabledSelector, "){background-color:", form.backgroundColor, ";}.euiLoadingSpinner{color:", euiTheme.colors.borderBasePlain, ";};label:isLoading;"),
     formWidth: formStyles.formWidth,
     fullWidth: /*#__PURE__*/(0, _react.css)(formStyles.fullWidth, ";label:fullWidth;"),
     euiFormControlButton__content: /*#__PURE__*/(0, _react.css)("justify-content:flex-start;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiFormControlButton__content;"),