@elastic/eui 105.0.0 → 106.0.0

package/optimize/es/themes/json/eui_theme_borealis_dark.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "#2B394F",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
   "euiColorBorderBaseFormsControl": "#6A7FA0",
+  "euiColorBorderInteractiveFormsHoverPlain": "#5A6D8C",
+  "euiColorBorderInteractiveFormsHoverDanger": "#EE4C48",
   "euiColorBorderStrongPrimary": "#61A2FF",
   "euiColorBorderStrongAccent": "#EE72A6",
   "euiColorBorderStrongAccentSecondary": "#16C5C0",

package/optimize/es/themes/json/eui_theme_borealis_light.json

@@ -413,13 +413,15 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
   "euiColorBorderBaseFormsControl": "#8E9FBC",
-  "euiColorBorderStrongPrimary": "#1750BA",
-  "euiColorBorderStrongAccent": "#A11262",
-  "euiColorBorderStrongAccentSecondary": "#047471",
-  "euiColorBorderStrongNeutral": "#0F658A",
-  "euiColorBorderStrongSuccess": "#09724D",
-  "euiColorBorderStrongWarning": "#825803",
-  "euiColorBorderStrongRisk": "#9E3A16",
-  "euiColorBorderStrongDanger": "#A71627",
+  "euiColorBorderInteractiveFormsHoverPlain": "#B4C1D5",
+  "euiColorBorderInteractiveFormsHoverDanger": "#DA3737",
+  "euiColorBorderStrongPrimary": "#0B64DD",
+  "euiColorBorderStrongAccent": "#BC1E70",
+  "euiColorBorderStrongAccentSecondary": "#008B87",
+  "euiColorBorderStrongNeutral": "#19799F",
+  "euiColorBorderStrongSuccess": "#008A5E",
+  "euiColorBorderStrongWarning": "#966B03",
+  "euiColorBorderStrongRisk": "#C24411",
+  "euiColorBorderStrongDanger": "#C61E25",
   "euiColorBorderStrongText": "#5A6D8C"
 }

package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -244,66 +244,70 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
       var wrapClasses = (0, _classnames.default)('euiComboBox__inputWrap', {
         'euiComboBox__inputWrap--plainText': this.asPlainText
       });
-      return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
-        var styles = stylesMemoizer(_combo_box_input.euiComboBoxInputStyles);
-        var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat((0, _toConsumableArray2.default)(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : isInvalid ? styles.invalid : isListOpen ? styles.open : undefined, isInGroup && styles.inGroup]);
-        var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
-        return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, (0, _extends2.default)({
-          icon: icon
-        }, clickProps, {
-          inputId: id,
-          isLoading: isLoading,
-          isInvalid: isInvalid,
-          isDisabled: isDisabled,
-          compressed: compressed,
-          fullWidth: fullWidth,
-          prepend: prepend,
-          append: append,
-          css: formLayoutStyles
-        }), (0, _react2.jsx)("div", {
-          css: cssStyles,
-          className: wrapClasses,
-          "data-test-subj": "comboBoxInput",
-          onClick: onClick,
-          tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-        }, _this2.renderPills(), (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
-          option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
-          classNamePrefix: "euiComboBoxPlainTextSelection",
-          marginSize: "xxs"
-        }, (0, _react2.jsx)("input", {
-          "aria-activedescendant": focusedOptionId,
-          "aria-autocomplete": "list",
-          "aria-controls": isListOpen ? rootId('listbox') : '',
-          "aria-expanded": isListOpen,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledby,
-          "aria-describedby": ariaDescribedby,
-          "aria-invalid": isInvalid,
-          "aria-haspopup": "listbox",
-          css: styles.euiComboBoxInput,
-          className: "euiComboBox__input",
-          "data-test-subj": "comboBoxSearchInput",
-          disabled: isDisabled,
-          id: id,
-          onBlur: _this2.onBlur,
-          onChange: function onChange(event) {
-            return _onChange(event.target.value);
-          },
-          onFocus: _this2.onFocus,
-          onKeyDown: _this2.onKeyDown,
-          ref: _this2.inputRefCallback,
-          role: "combobox",
-          style: {
-            inlineSize: _this2.asPlainText || showPlaceholder ? '100%' : _this2.state.inputWidth
-          },
-          placeholder: showPlaceholder ? placeholder : undefined,
-          value: _this2.searchValue,
-          autoFocus: autoFocus,
-          autoComplete: "off"
-          // Force the menu to re-open on every input click - only necessary when plain text
-          ,
-          onClick: _this2.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
-        })), removeOptionMessage));
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+          var styles = stylesMemoizer(_combo_box_input.euiComboBoxInputStyles);
+          var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+          var stateCss = isRefreshVariant ? isListOpen ? styles.open : isInvalid ? styles.invalid : undefined : isInvalid ? styles.invalid : isListOpen ? styles.open : undefined;
+          var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat((0, _toConsumableArray2.default)(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : stateCss, isInGroup && styles.inGroup]);
+          var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
+          return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, (0, _extends2.default)({
+            icon: icon
+          }, clickProps, {
+            inputId: id,
+            isLoading: isLoading,
+            isInvalid: isInvalid,
+            isDisabled: isDisabled,
+            compressed: compressed,
+            fullWidth: fullWidth,
+            prepend: prepend,
+            append: append,
+            css: formLayoutStyles
+          }), (0, _react2.jsx)("div", {
+            css: cssStyles,
+            className: wrapClasses,
+            "data-test-subj": "comboBoxInput",
+            onClick: onClick,
+            tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
+          }, _this2.renderPills(), (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
+            option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
+            classNamePrefix: "euiComboBoxPlainTextSelection",
+            marginSize: "xxs"
+          }, (0, _react2.jsx)("input", {
+            "aria-activedescendant": focusedOptionId,
+            "aria-autocomplete": "list",
+            "aria-controls": isListOpen ? rootId('listbox') : '',
+            "aria-expanded": isListOpen,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            "aria-invalid": isInvalid,
+            "aria-haspopup": "listbox",
+            css: styles.euiComboBoxInput,
+            className: "euiComboBox__input",
+            "data-test-subj": "comboBoxSearchInput",
+            disabled: isDisabled,
+            id: id,
+            onBlur: _this2.onBlur,
+            onChange: function onChange(event) {
+              return _onChange(event.target.value);
+            },
+            onFocus: _this2.onFocus,
+            onKeyDown: _this2.onKeyDown,
+            ref: _this2.inputRefCallback,
+            role: "combobox",
+            style: {
+              inlineSize: _this2.asPlainText || showPlaceholder ? '100%' : _this2.state.inputWidth
+            },
+            placeholder: showPlaceholder ? placeholder : undefined,
+            value: _this2.searchValue,
+            autoFocus: autoFocus,
+            autoComplete: "off"
+            // Force the menu to re-open on every input click - only necessary when plain text
+            ,
+            onClick: _this2.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
+          })), removeOptionMessage));
+        });
       });
     }
   }]);

package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiComboBoxInputStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _form = require("../../form/form.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
@@ -32,12 +33,13 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var euiComboBoxInputStyles = exports.euiComboBoxInputStyles = function euiComboBoxInputStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
     // Wrapper which visually mimics a form control
-    euiComboBoxInputWrapper: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext), " display:flex;;label:euiComboBoxInputWrapper;"),
+    euiComboBoxInputWrapper: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext), " display:flex;", isRefreshVariant && "\n        &:focus-within {\n          ".concat(formStyles.focus, "\n        }\n      "), ";;label:euiComboBoxInputWrapper;"),
     multiSelect: _ref2,
-    uncompressed: "\n      ".concat(formStyles.uncompressed, "\n      ").concat((0, _global_styling.logicalCSS)('height', 'auto'), "\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.s), "\n      ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n      column-gap: ").concat(euiTheme.size.s, ";\n      row-gap: ").concat(euiTheme.size.xs, ";\n    "),
+    uncompressed: "\n      ".concat(formStyles.uncompressed, "\n      ").concat((0, _global_styling.logicalCSS)('height', 'auto'), "\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.s), "\n      ").concat((0, _global_styling.logicalCSS)('padding-left', isRefreshVariant ? euiTheme.size.m : euiTheme.size.s), "\n      column-gap: ").concat(euiTheme.size.s, ";\n      row-gap: ").concat(euiTheme.size.xs, ";\n    "),
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, " ", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xs), " column-gap:", euiTheme.size.xs, ";row-gap:", euiTheme.size.xxs, ";;label:compressed;"),
     plainText: {
       plainText: _ref,
@@ -46,10 +48,10 @@ var euiComboBoxInputStyles = exports.euiComboBoxInputStyles = function euiComboB
     },
     invalid: /*#__PURE__*/(0, _react.css)(formStyles.invalid, ";label:invalid;"),
     disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, ";label:disabled;"),
-    open: /*#__PURE__*/(0, _react.css)(formStyles.focus, ";label:open;"),
+    open: /*#__PURE__*/(0, _react.css)(formStyles.focus, ";;label:open;"),
     inGroup: /*#__PURE__*/(0, _react.css)(formStyles.inGroup, ";label:inGroup;"),
     // Actual input element, which has variable width depending on its value
-    euiComboBoxInput: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('min-width', '2px'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), (0, _form.euiFormControlText)(euiThemeContext), " background:transparent;&:disabled{color:", euiTheme.colors.disabledText, ";}appearance:none!important;border:none!important;box-shadow:none!important;outline:none!important;;label:euiComboBoxInput;"),
+    euiComboBoxInput: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('min-width', '2px'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), (0, _form.euiFormControlText)(euiThemeContext), " background:transparent;&:disabled{color:", euiTheme.colors.textDisabled, ";}appearance:none!important;border:none!important;box-shadow:none!important;outline:none!important;;label:euiComboBoxInput;"),
     // EuiFormControlLayout overrides
     formLayout: {
       euiComboBox__formControlLayout: /*#__PURE__*/(0, _react.css)(";label:euiComboBox__formControlLayout;"),

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiDatePickerStyles = void 0;
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _form = require("../form/form.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
@@ -25,10 +26,12 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiDatePickerStyles = exports.euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+  var inlineStyles = "\n      /* removes form layout border */\n      &::after {\n        display: none;\n      }\n    ";
   return {
     euiDatePicker: _ref,
     inline: {
-      inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " border:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+      inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " border:none;padding:0;", isRefreshVariant && inlineStyles, ";}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
       // Skip css`` to avoid generating an Emotion className
       noShadow: "\n        .euiFormControlLayout {\n          background-color: transparent;\n        }\n      ",
       shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext, {

package/optimize/lib/components/date_picker/date_picker_range.js

@@ -51,8 +51,9 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
   var fullWidth = _fullWidth && !inline;
   var compressed = _compressed && !inline;
   var classes = (0, _classnames.default)('euiDatePickerRange', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_date_picker_range.euiDatePickerRangeStyles);
   var inlineStyles = (0, _services.useEuiMemoizedStyles)(_date_picker_range.euiDatePickerRangeInlineStyles);
-  var cssStyles = !inline ? _date_picker_range.euiDatePickerRangeStyles.euiDatePickerRange : [inlineStyles.euiDatePickerRangeInline,
+  var cssStyles = !inline ? styles.euiDatePickerRange : [inlineStyles.euiDatePickerRangeInline,
   // Determine the inline container query to use based on the width of the react-datepicker
   startDateControl !== null && startDateControl !== void 0 && startDateControl.props.showTimeSelect || endDateControl !== null && endDateControl !== void 0 && endDateControl.props.showTimeSelect ? inlineStyles.responsiveWithTimeSelect : inlineStyles.responsive, shadow && inlineStyles.shadow];
   var startControl = startDateControl;
@@ -108,7 +109,7 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
     if (iconType === true) return 'calendar';
     return iconType;
   }, [iconType, inline]);
-  return (0, _react2.jsx)("span", (0, _extends2.default)({
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
     css: cssStyles
   }, rest), (0, _react2.jsx)(_form.EuiFormControlLayoutDelimited, {

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

@@ -7,6 +7,8 @@ exports.euiDatePickerRangeStyles = exports.euiDatePickerRangeInlineStyles = void
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
+var _services = require("../../services");
+var _form = require("../form/form.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,8 +16,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = {
-  euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
+var euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+  var refreshStyles = "\n      .euiPopover:last-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n\n        * {\n          ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n        }\n      }\n    ");
+  return {
+    euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;}", isRefreshVariant && refreshStyles, ";;label:euiDatePickerRange;")
+  };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "bicgs9-noShadow",
@@ -27,6 +33,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
 
   // Use a container query to stack date pickers vertically if the container is
   // not wide enough to fit both. We need a fn for this to render two width queries,
@@ -36,12 +43,12 @@ var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = fu
     return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        .euiFormControlLayoutDelimited__delimiter .euiIcon {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
   };
   return {
-    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " border:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " border:none;padding:0;", isRefreshVariant && "\n          &::after {\n            display: none;\n          }\n        ", ";.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/(0, _react.css)(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
     shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), ";};label:shadow;"),
+    }), " ", isRefreshVariant && "\n          /* the form layout is not part of the interactive behavior but rather a container in this variant  */\n          ".concat((0, _form.disableFormControlHoverStyles)(), "\n\n          .euiFormControlLayout__childrenWrapper {\n            box-shadow: none;\n            ").concat((0, _form.disableFormControlHoverStyles)(), "\n          }\n        "), ";};label:shadow;"),
     // Applied directly to EuiFormControlLayout so we can check if `disabled`
     // and allow the disabled background-color to take precedence
     formLayout: {

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

@@ -26,6 +26,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var forms = (0, _form.euiFormVariables)(euiThemeContext);
   var inputWidth = euiTheme.base * 30;
   var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
@@ -45,6 +46,18 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   // Needs updating colors
   var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
   var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
+  var formLayoutStyles = "\n      /* using wrapper hover styles instead */\n      .euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover {\n        outline: none;\n      }\n\n      .euiPopover {\n        /* mimic input border-radius */\n        border-radius: ".concat(forms.controlBorderRadius, ";\n\n        &:first-child {\n          ").concat((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), "\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), "\n        }\n\n        &:last-child {\n          ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n        }\n      }\n\n      .euiDatePopoverButton {\n        background-color: transparent;\n        border-radius: inherit;\n      }\n    ");
+  var popoverButtonFocusStyles = isRefreshVariant ? "\n       ".concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n      ").concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, euiTheme.colors.primary), "\n    ");
+  var invalidStyles = isRefreshVariant ? "\n      &:has(.euiPopover-isOpen, .euiDatePopoverButton:focus) {\n        --euiFormControlStateColor: ".concat(forms.borderColor, ";\n        --euiFormControlStateHoverColor: ").concat(forms.borderHovered, ";\n      }\n\n      &:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)) {\n        ").concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n      }\n\n      .euiDatePopoverButton:focus,\n      .euiPopover-isOpen .euiDatePopoverButton {\n        ").concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n      }\n    ") : "\n      ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n    ");
+  var needsUpdatingStyles = "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      --euiFormControlStateHoverColor: ").concat(euiTheme.colors.success, ";\n      --euiFormControlStateWidth: ").concat(euiTheme.border.width.thin, ";\n      ").concat(_form.euiFormControlHighlightBorderStyles, "\n  \n      &:has(.euiPopover-isOpen),\n      &:focus-within {\n        --euiFormControlStateColor: ").concat(forms.borderColor, ";\n        --euiFormControlStateHoverColor: ").concat(forms.borderHovered, ";\n      }\n    ");
+  var needsUpdatingPopoverButtonFocusStyles = isRefreshVariant ? "\n      ".concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      ").concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, euiTheme.colors.success), "\n\n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    // Force the fill color of all icons/svgs to give a bit more indication of state,
+    // since Windows high contrast themes otherwise override background/text color
+    forced: "\n          svg,\n          & + * svg {\n            fill: ".concat(euiTheme.colors.success, ";\n          }\n        ")
+  }), "\n    ");
+  var prettyFormatStyles = "\n      --euiFormControlStateHoverColor: ".concat(forms.borderHovered, ";\n      ").concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext), "\n      \n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    preferred: "\n          border: none;\n        "
+  }), "\n\n      &:focus {\n        ").concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n      }\n    ");
   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: {
@@ -69,27 +82,23 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
     euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
-    euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
+    euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;", isRefreshVariant && prettyFormatStyles, ";;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
         none: 'box-shadow: none;',
         preferred: 'border: none;'
-      }), ";};label:euiSuperDatePicker__formControlLayout;"),
-      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+      }), " ", isRefreshVariant && formLayoutStyles, ";};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";", !isRefreshVariant && (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";", (0, _form.euiFormControlShowBackgroundUnderline)(euiThemeContext, euiTheme.colors.primary), ";};label:default;"),
+      }), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", popoverButtonFocusStyles, ";};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, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", invalidStyles, ";};label:invalid;"),
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", isRefreshVariant && needsUpdatingStyles, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";", (0, _form.euiFormControlShowBackgroundUnderline)(euiThemeContext, euiTheme.colors.success), ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-        // Force the fill color of all icons/svgs to give a bit more indication of state,
-        // since Windows high contrast themes otherwise override background/text color
-        forced: "\n            svg,\n            & + * svg {\n              fill: ".concat(euiTheme.colors.success, ";\n            }\n          ")
-      }), ";;label:needsUpdating;")
+      }), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", needsUpdatingPopoverButtonFocusStyles, ";};label:needsUpdating;")
     }
   };
 };

package/optimize/lib/components/flyout/_flyout_close_button.styles.js

@@ -8,19 +8,26 @@ var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
 var _flyout = require("./flyout.styles");
-/*
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1ffeobd-inside",
+  styles: "background-color:transparent;label:inside;"
+} : {
+  name: "1ffeobd-inside",
+  styles: "background-color:transparent;label:inside;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiFlyoutCloseButtonStyles = exports.euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
-    inside: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.flyoutCloseButtonInsideBackground, ";;label:inside;"),
+    inside: _ref,
     outside: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), "animation:none!important;;label:outside;"),

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

@@ -17,7 +17,7 @@ var _flyout_context = require("./flyout_context");
 var _flyout_body = require("./flyout_body");
 var _focus_trap = require("../focus_trap");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
+var _excluded = ["children", "backgroundStyle", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -36,6 +36,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 var EuiFlyoutChild = exports.EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var children = _ref.children,
+    _ref$backgroundStyle = _ref.backgroundStyle,
+    backgroundStyle = _ref$backgroundStyle === void 0 ? 'default' : _ref$backgroundStyle,
     className = _ref.className,
     banner = _ref.banner,
     _ref$hideCloseButton = _ref.hideCloseButton,
@@ -128,7 +130,7 @@ var EuiFlyoutChild = exports.EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_child.euiFlyoutChildStyles);
   var childLayoutMode = flyoutContext.childLayoutMode,
     parentFlyoutRef = flyoutContext.parentFlyoutRef;
-  var flyoutChildCss = [styles.euiFlyoutChild, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
+  var flyoutChildCss = [styles.euiFlyoutChild, backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
   return (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     returnFocus: function returnFocus() {
       if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
@@ -155,7 +157,6 @@ var EuiFlyoutChild = exports.EuiFlyoutChild = function EuiFlyoutChild(_ref) {
     className: "euiScreenReaderOnly"
   }, flyoutTitleText), !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
     className: "euiFlyoutChild__closeButton",
-    css: styles.closeButton,
     onClose: handleClose,
     side: "right",
     closeButtonPosition: "inside",

package/optimize/lib/components/flyout/flyout_child.styles.js

@@ -19,13 +19,14 @@ var euiFlyoutChildStyles = exports.euiFlyoutChildStyles = function euiFlyoutChil
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base styles for the child flyout
-    euiFlyoutChild: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;background:", euiTheme.colors.backgroundBaseSubdued, ";display:flex;flex-direction:column;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", (0, _flyout.maxedFlyoutWidth)(euiThemeContext), ";;label:euiFlyoutChild;"),
+    euiFlyoutChild: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;display:flex;flex-direction:column;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", (0, _flyout.maxedFlyoutWidth)(euiThemeContext), ";;label:euiFlyoutChild;"),
+    backgroundDefault: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBasePlain, ";;label:backgroundDefault;"),
+    backgroundShaded: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBaseSubdued, ";;label:backgroundShaded;"),
     // Position variants based on screen size
     sidePosition: /*#__PURE__*/(0, _react.css)("transform:translateX(-100%);border-inline-end:", euiTheme.border.thin, ";;label:sidePosition;"),
     stackedPosition: /*#__PURE__*/(0, _react.css)("inset-inline-end:0;inline-size:100%;border-block-end:", euiTheme.border.thin, ";;label:stackedPosition;"),
     s: /*#__PURE__*/(0, _react.css)((0, _flyout.composeFlyoutSizing)(euiThemeContext, 's'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _flyout.composeFlyoutSizing)(euiThemeContext, 'm'), ";;label:m;"),
-    closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:", euiTheme.size.s, ";inset-inline-end:", euiTheme.size.s, ";z-index:1;;label:closeButton;"),
     overflow: {
       overflow: /*#__PURE__*/(0, _react.css)("flex-grow:1;display:flex;flex-direction:column;", (0, _global_styling.euiYScroll)(euiThemeContext), ";;label:overflow;"),
       wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;flex-grow:1;", (0, _global_styling.logicalCSS)('overflow-x', 'auto'), ";;label:wrapper;")

package/optimize/lib/components/flyout/sessions/flyout_provider.js

@@ -49,7 +49,8 @@ var useEuiFlyoutSessionContext = exports.useEuiFlyoutSessionContext = function u
 var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   var children = _ref.children,
     renderMainFlyoutContent = _ref.renderMainFlyoutContent,
-    renderChildFlyoutContent = _ref.renderChildFlyoutContent;
+    renderChildFlyoutContent = _ref.renderChildFlyoutContent,
+    onUnmount = _ref.onUnmount;
   var _useReducer = (0, _react.useReducer)(_flyout_reducer.flyoutReducer, _flyout_reducer.initialFlyoutState),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     state = _useReducer2[0],
@@ -68,29 +69,13 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
   var mainFlyoutContentNode = null;
   var childFlyoutContentNode = null;
   if (activeFlyoutGroup) {
-    var mainRenderContext = {
-      flyoutProps: activeFlyoutGroup.config.mainFlyoutProps || {},
-      flyoutSize: activeFlyoutGroup.config.mainSize,
-      flyoutType: 'main',
-      dispatch: dispatch,
+    var renderContext = {
       activeFlyoutGroup: activeFlyoutGroup,
-      onCloseFlyout: handleClose,
-      onCloseChildFlyout: handleCloseChild,
       meta: activeFlyoutGroup.meta
     };
-    mainFlyoutContentNode = renderMainFlyoutContent(mainRenderContext);
+    mainFlyoutContentNode = renderMainFlyoutContent(renderContext);
     if (activeFlyoutGroup.isChildOpen && renderChildFlyoutContent) {
-      var childRenderContext = {
-        flyoutProps: activeFlyoutGroup.config.childFlyoutProps || {},
-        flyoutSize: activeFlyoutGroup.config.childSize,
-        flyoutType: 'child',
-        dispatch: dispatch,
-        activeFlyoutGroup: activeFlyoutGroup,
-        onCloseFlyout: handleClose,
-        onCloseChildFlyout: handleCloseChild,
-        meta: activeFlyoutGroup.meta
-      };
-      childFlyoutContentNode = renderChildFlyoutContent(childRenderContext);
+      childFlyoutContentNode = renderChildFlyoutContent(renderContext);
     } else if (activeFlyoutGroup.isChildOpen && !renderChildFlyoutContent) {
       console.warn('EuiFlyoutSessionProvider: A child flyout is open, but renderChildFlyoutContent was not provided.');
     }
@@ -101,7 +86,8 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
   return (0, _react2.jsx)(EuiFlyoutSessionContext.Provider, {
     value: {
       state: state,
-      dispatch: dispatch
+      dispatch: dispatch,
+      onUnmount: onUnmount
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && (0, _react2.jsx)(_index.EuiFlyout, (0, _extends2.default)({
     onClose: handleClose,