@elastic/eui 112.3.0 → 113.0.0

package/es/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -1,12 +1,6 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["applyTime", "buttonProps"],
-  _excluded2 = ["contentProps", "onClick"];
+  _excluded2 = ["onClick"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-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; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -27,9 +21,8 @@ import React, { useState, useCallback, useMemo } from 'react';
 import PropTypes from "prop-types";
 import { useEuiMemoizedStyles } from '../../../../services';
 import { useEuiI18n } from '../../../i18n';
-import { EuiButtonEmpty } from '../../../button';
-import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
+import { EuiFormPrepend } from '../../../form';
 import { euiQuickSelectPopoverStyles } from './quick_select_popover.styles';
 import { EuiQuickSelectPanel } from './quick_select_panel';
 import { EuiQuickSelect } from './quick_select';
@@ -42,8 +35,7 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
     _ref$buttonProps = _ref.buttonProps,
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
     props = _objectWithoutProperties(_ref, _excluded);
-  var buttonContentProps = buttonProps.contentProps,
-    buttonOnClick = buttonProps.onClick,
+  var buttonOnClick = buttonProps.onClick,
     quickSelectButtonProps = _objectWithoutProperties(buttonProps, _excluded2);
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -79,27 +71,20 @@ export var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
     }
   }, [_applyTime, closePopover]);
   var buttonlabel = useEuiI18n('euiQuickSelectPopover.buttonLabel', 'Date quick select');
-  var styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles);
   var quickSelectButtonOnClick = function quickSelectButtonOnClick(e) {
     togglePopover();
     buttonOnClick === null || buttonOnClick === void 0 || buttonOnClick(e);
   };
-  var quickSelectButton = ___EmotionJSX(EuiButtonEmpty, _extends({
-    css: styles.euiQuickSelectPopoverButton,
-    contentProps: _objectSpread({
-      css: styles.euiQuickSelectPopoverButton__content
-    }, buttonContentProps),
+  var quickSelectButton = ___EmotionJSX(EuiFormPrepend, _extends({
+    element: "button",
+    iconLeft: "calendar",
+    iconRight: "arrowDown",
+    isDisabled: props.isDisabled,
     onClick: quickSelectButtonOnClick,
     "aria-label": buttonlabel,
     title: buttonlabel,
-    size: "xs",
-    iconType: "arrowDown",
-    iconSide: "right",
-    isDisabled: props.isDisabled,
     "data-test-subj": "superDatePickerToggleQuickMenuButton"
-  }, quickSelectButtonProps), ___EmotionJSX(EuiIcon, {
-    type: "calendar"
-  }));
+  }, quickSelectButtonProps));
   return ___EmotionJSX(EuiPopover, {
     button: quickSelectButton,
     isOpen: isOpen,

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

@@ -344,12 +344,14 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       var rangeProps = _objectSpread(_objectSpread({}, _rangeProps), {}, {
         disabled: formControlLayoutProps.isDisabled
       });
+      var hasChangedIcon = hasChanged && !isInvalid;
       return ___EmotionJSX(EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
         return ___EmotionJSX(EuiDatePickerRange, _extends({}, rangeProps, {
           css: rangeCssStyles,
           isCustom: true,
-          iconType: false,
+          iconType: hasChangedIcon ? 'checkCircle' : false,
+          iconSide: hasChangedIcon ? 'right' : undefined,
           delimiter: isQuickSelectOnly ? '' : undefined,
           startDateControl: isQuickSelectOnly ? undefined : ___EmotionJSX(EuiDatePopoverButton, {
             css: styles.euiSuperDatePicker__rangeInput,

package/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/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/es/components/flyout/flyout_body.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex", "scrollContainerRef"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -22,6 +22,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);
@@ -32,7 +33,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
@@ -58,5 +61,9 @@ EuiFlyoutBody.propTypes = {
          * that satisfy keyboard accessibility requirements, you can use this prop
          * to override this default.
          */
-  scrollableTabIndex: PropTypes.number
+  scrollableTabIndex: PropTypes.number,
+  /**
+         * Use to access the flyout's internal scrollable container.
+         */
+  scrollContainerRef: PropTypes.any
 };

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

@@ -80,6 +80,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;
@@ -153,13 +154,13 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
       // Only call closeFlyout if it wasn't already called via onClose
       // This prevents duplicate removal when using Escape/X button
       if (flyoutExistsInManagerRef.current) {
-        closeFlyout(flyoutId);
+        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
@@ -202,7 +203,7 @@ export var EuiManagedFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // and ensures cascade close logic runs before DOM cleanup begins
     // Using flushSync to force synchronous state update completion
     flushSync(function () {
-      closeFlyout(flyoutId);
+      level === LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
     });
 
     // trigger parent callback, unmounts the component

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

@@ -9,7 +9,7 @@
 /**
  * Convenience re-exports of bound action creators for external usage.
  */
-export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, 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';

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

@@ -18,7 +18,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * 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.
@@ -190,6 +190,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/es/components/flyout/manager/store.js

@@ -6,7 +6,7 @@
  * 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';
 
 /**
@@ -96,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/es/components/form/field_password/field_password.js

@@ -1,4 +1,4 @@
-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"];
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -53,6 +53,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
@@ -119,7 +120,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({
@@ -131,7 +133,8 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     css: cssStyles,
     value: value,
     disabled: disabled,
-    ref: setInputRef
+    ref: setInputRef,
+    readOnly: readOnly
   }, rest))));
 };
 EuiFieldPassword.propTypes = {

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

@@ -58,15 +58,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) {
@@ -75,7 +79,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: {
@@ -102,7 +110,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    "),
@@ -152,7 +160,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) {
@@ -186,24 +194,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/es/components/form/form_control_button/form_control_button.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -22,13 +22,14 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React, { isValidElement } from 'react';
+import React, { isValidElement, useContext } from 'react';
 import PropTypes from "prop-types";
 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,
@@ -37,11 +38,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);
@@ -49,9 +52,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]
   });
@@ -74,7 +87,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);
@@ -100,6 +116,13 @@ EuiFormControlButton.propTypes = {
   fullWidth: PropTypes.bool,
   href: PropTypes.string,
   onClick: PropTypes.func,
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  /**
+     * Force disables the button and changes the icon to a loading spinner
+     */
+  isLoading: PropTypes.bool,
   target: PropTypes.string,
   rel: PropTypes.string,
   type: PropTypes.any,

package/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;"),