@elastic/eui 105.0.0 → 106.0.0

package/lib/services/theme/provider.js

@@ -100,14 +100,16 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
     modifications: modifications
   });
   var isParentTheme = (0, _react2.useRef)(isGlobalTheme ? prevSystemKey.current === _context.DEFAULTS.system.key && colorMode === _context.DEFAULTS.colorMode && highContrastMode === _context.DEFAULTS.highContrastMode && !_modifications : prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && highContrastMode === parentHighContrastMode && (0, _isEqual.default)(parentModifications, modifications));
-  var updateVisColorStore = (0, _react2.useCallback)(function (theme) {
-    var _theme$flags$hasVisCo, _theme$flags;
-    _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
+  var updateVisColorStore = (0, _react2.useCallback)(function (theme, isGlobalTheme) {
+    if (isGlobalTheme) {
+      var _theme$flags$hasVisCo, _theme$flags;
+      _color.EUI_VIS_COLOR_STORE.setVisColors(theme.colors.vis, (_theme$flags$hasVisCo = (_theme$flags = theme.flags) === null || _theme$flags === void 0 ? void 0 : _theme$flags.hasVisColorAdjustment) !== null && _theme$flags$hasVisCo !== void 0 ? _theme$flags$hasVisCo : true);
+    }
   }, []);
   var getInitialTheme = function getInitialTheme() {
     var theme = (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modificationsWithHighContrast, "_".concat(system.key)), colorMode, highContrastMode);
     setTimeout(function () {
-      updateVisColorStore(theme);
+      updateVisColorStore(theme, isGlobalTheme);
     });
     return theme;
   };
@@ -122,9 +124,11 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
       setSystem(newSystem);
       prevSystemKey.current = newSystem.key;
       isParentTheme.current = false;
-      updateVisColorStore(theme);
     }
   }, [_system, parentSystem, theme, updateVisColorStore]);
+  (0, _react2.useEffect)(function () {
+    updateVisColorStore(theme, isGlobalTheme);
+  }, [theme, colorMode, isGlobalTheme, updateVisColorStore]);
   (0, _react2.useEffect)(function () {
     var newModifications = (0, _utils.mergeDeep)(parentModifications, _modifications);
     if (!(0, _isEqual.default)(prevModifications.current, newModifications)) {
@@ -148,12 +152,15 @@ var EuiThemeProvider = exports.EuiThemeProvider = function EuiThemeProvider(_ref
   }, [highContrastMode]);
   (0, _react2.useEffect)(function () {
     if (!isParentTheme.current) {
-      /* Enables recomputation of component colors when flags are overridden on the provider 
+      /* Enables recomputation of component colors when flags are overridden on the provider
       by adding the respective key to modifications to trigger a recomputation. */
       // TODO: remove once visual refresh is completed and flags are obsolete
       var flagsToRecompute = [{
         flag: 'buttonVariant',
         componentKey: 'buttons'
+      }, {
+        flag: 'formVariant',
+        componentKey: 'forms'
       }];
       var keys = {};
       var forceRecomputeComponents = flagsToRecompute.some(function (item) {

package/lib/themes/amsterdam/global_styling/variables/_colors.js

@@ -395,6 +395,8 @@ var border_colors = exports.border_colors = {
       lightestShade = _ref121[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
+  borderInteractiveFormsHoverPlain: 'transparent',
+  borderInteractiveFormsHoverDanger: 'transparent',
   borderStrongPrimary: (0, _utils.computed)(function (_ref122) {
     var _ref123 = _slicedToArray(_ref122, 1),
       primary = _ref123[0];
@@ -687,6 +689,8 @@ var dark_border_colors = exports.dark_border_colors = {
       lightestShade = _ref225[0];
     return (0, _manipulation.tint)(lightestShade, 0.31);
   }, ['colors.lightestShade']),
+  borderInteractiveFormsHoverPlain: 'transparent',
+  borderInteractiveFormsHoverDanger: 'transparent',
   borderStrongPrimary: (0, _utils.computed)(function (_ref226) {
     var _ref227 = _slicedToArray(_ref226, 1),
       primary = _ref227[0];
@@ -785,11 +789,12 @@ var colors = exports.colors = {
   ink: '#000000',
   plainLight: '#FFFFFF',
   plainDark: '#000000',
-  severity: _colors_severity.severityColors,
   LIGHT: _objectSpread(_objectSpread({}, light_colors), {}, {
-    vis: _colors_vis_light.colorVisLight
+    vis: _colors_vis_light.colorVisLight,
+    severity: _colors_severity.severityColors
   }),
   DARK: _objectSpread(_objectSpread({}, dark_colors_ams), {}, {
-    vis: _colors_vis_dark.colorVisDark
+    vis: _colors_vis_dark.colorVisDark,
+    severity: _colors_severity.severityColors
   })
 };

package/lib/themes/amsterdam/global_styling/variables/_forms.js

@@ -52,6 +52,7 @@ var _forms = {
     var background = (0, _manipulation.tint)(primary, 0.8);
     return (0, _manipulation.tint)(background, 0.7);
   }, ['colors.primary']),
+  backgroundDropping: 'transparent',
   prependBackground: (0, _utils.computed)(function (_ref11) {
     var _ref12 = _slicedToArray(_ref11, 1),
       lightShade = _ref12[0];
@@ -63,99 +64,141 @@ var _forms = {
     var color = (0, _manipulation.darken)(lightShade, 4);
     return (0, _manipulation.transparentize)(color, 0.1);
   }, ['colors.lightShade']),
-  borderAutofilled: (0, _utils.computed)(function (_ref15) {
+  borderDisabled: (0, _utils.computed)(function (_ref15) {
     var _ref16 = _slicedToArray(_ref15, 1),
-      primaryText = _ref16[0];
+      lightShade = _ref16[0];
+    var color = (0, _manipulation.darken)(lightShade, 4);
+    return (0, _manipulation.transparentize)(color, 0.1);
+  }, ['colors.lightShade']),
+  borderFocused: (0, _utils.computed)(function (_ref17) {
+    var _ref18 = _slicedToArray(_ref17, 1),
+      primary = _ref18[0];
+    return primary;
+  }, ['colors.primary']),
+  borderInvalid: (0, _utils.computed)(function (_ref19) {
+    var _ref20 = _slicedToArray(_ref19, 1),
+      danger = _ref20[0];
+    return danger;
+  }, ['colors.danger']),
+  borderHovered: (0, _utils.computed)(function (_ref21) {
+    var _ref22 = _slicedToArray(_ref21, 1),
+      lightShade = _ref22[0];
+    var color = (0, _manipulation.darken)(lightShade, 4);
+    return (0, _manipulation.transparentize)(color, 0.1);
+  }, ['colors.lightShade']),
+  borderInvalidHovered: (0, _utils.computed)(function (_ref23) {
+    var _ref24 = _slicedToArray(_ref23, 1),
+      danger = _ref24[0];
+    return danger;
+  }, ['colors.danger']),
+  borderAutofilled: (0, _utils.computed)(function (_ref25) {
+    var _ref26 = _slicedToArray(_ref25, 1),
+      primaryText = _ref26[0];
     return (0, _manipulation.transparentize)(primaryText, 0.2);
   }, ['colors.primaryText']),
-  controlBorder: (0, _utils.computed)(function (_ref17) {
-    var _ref18 = _slicedToArray(_ref17, 1),
-      lightestShade = _ref18[0];
+  borderAutofilledHovered: (0, _utils.computed)(function (_ref27) {
+    var _ref28 = _slicedToArray(_ref27, 1),
+      primaryText = _ref28[0];
+    return (0, _manipulation.transparentize)(primaryText, 0.2);
+  }, ['colors.primaryText']),
+  clearButtonBackground: (0, _utils.computed)(function (_ref29) {
+    var _ref30 = _slicedToArray(_ref29, 1),
+      mediumShade = _ref30[0];
+    return mediumShade;
+  }, ['colors.mediumShade']),
+  controlBorder: (0, _utils.computed)(function (_ref31) {
+    var _ref32 = _slicedToArray(_ref31, 1),
+      lightestShade = _ref32[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBorderSelected: (0, _utils.computed)(function (_ref19) {
-    var _ref20 = _slicedToArray(_ref19, 1),
-      lightestShade = _ref20[0];
+  controlBorderSelected: (0, _utils.computed)(function (_ref33) {
+    var _ref34 = _slicedToArray(_ref33, 1),
+      lightestShade = _ref34[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBorderDisabled: (0, _utils.computed)(function (_ref21) {
-    var _ref22 = _slicedToArray(_ref21, 1),
-      lightestShade = _ref22[0];
+  controlBorderDisabled: (0, _utils.computed)(function (_ref35) {
+    var _ref36 = _slicedToArray(_ref35, 1),
+      lightestShade = _ref36[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBackgroundUnselected: (0, _utils.computed)(function (_ref23) {
-    var _ref24 = _slicedToArray(_ref23, 1),
-      emptyShade = _ref24[0];
+  controlBackgroundUnselected: (0, _utils.computed)(function (_ref37) {
+    var _ref38 = _slicedToArray(_ref37, 1),
+      emptyShade = _ref38[0];
     return emptyShade;
   }, ['colors.emptyShade']),
-  controlBackgroundDisabled: (0, _utils.computed)(function (_ref25) {
-    var _ref26 = _slicedToArray(_ref25, 1),
-      lightShade = _ref26[0];
+  controlBackgroundDisabled: (0, _utils.computed)(function (_ref39) {
+    var _ref40 = _slicedToArray(_ref39, 1),
+      lightShade = _ref40[0];
     return lightShade;
   }, ['colors.lightShade']),
-  colorHasPlaceholder: (0, _utils.computed)(function (_ref27) {
-    var _ref28 = _slicedToArray(_ref27, 1),
-      subduedText = _ref28[0];
+  colorHasPlaceholder: (0, _utils.computed)(function (_ref41) {
+    var _ref42 = _slicedToArray(_ref41, 1),
+      subduedText = _ref42[0];
     return (0, _manipulation.tint)(subduedText, 0.08);
   }, ['colors.subduedText']),
-  colorDisabled: (0, _utils.computed)(function (_ref29) {
-    var _ref30 = _slicedToArray(_ref29, 1),
-      mediumShade = _ref30[0];
+  colorDisabled: (0, _utils.computed)(function (_ref43) {
+    var _ref44 = _slicedToArray(_ref43, 1),
+      mediumShade = _ref44[0];
     return mediumShade;
   }, ['colors.mediumShade']),
-  iconDisabled: (0, _utils.computed)(function (_ref31) {
-    var _ref32 = _slicedToArray(_ref31, 1),
-      darkShade = _ref32[0];
+  iconDisabled: (0, _utils.computed)(function (_ref45) {
+    var _ref46 = _slicedToArray(_ref45, 1),
+      darkShade = _ref46[0];
     return darkShade;
   }, ['colors.darkShade'])
 };
 var _dark_forms = _objectSpread(_objectSpread({}, _forms), {}, {
-  background: (0, _utils.computed)(function (_ref33) {
-    var _ref34 = _slicedToArray(_ref33, 1),
-      lightestShade = _ref34[0];
+  background: (0, _utils.computed)(function (_ref47) {
+    var _ref48 = _slicedToArray(_ref47, 1),
+      lightestShade = _ref48[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  backgroundFocused: (0, _utils.computed)(function (_ref35) {
-    var _ref36 = _slicedToArray(_ref35, 1),
-      emptyShade = _ref36[0];
+  backgroundFocused: (0, _utils.computed)(function (_ref49) {
+    var _ref50 = _slicedToArray(_ref49, 1),
+      emptyShade = _ref50[0];
     return (0, _manipulation.shade)(emptyShade, 0.4);
   }, ['colors.emptyShade']),
-  backgroundAutofilled: (0, _utils.computed)(function (_ref37) {
-    var _ref38 = _slicedToArray(_ref37, 1),
-      primary = _ref38[0];
+  backgroundAutofilled: (0, _utils.computed)(function (_ref51) {
+    var _ref52 = _slicedToArray(_ref51, 1),
+      primary = _ref52[0];
     var background = (0, _manipulation.shade)(primary, 0.7);
     return (0, _manipulation.shade)(background, 0.5);
   }, ['colors.primary']),
-  prependBackground: (0, _utils.computed)(function (_ref39) {
-    var _ref40 = _slicedToArray(_ref39, 1),
-      lightShade = _ref40[0];
+  prependBackground: (0, _utils.computed)(function (_ref53) {
+    var _ref54 = _slicedToArray(_ref53, 1),
+      lightShade = _ref54[0];
     return (0, _manipulation.shade)(lightShade, 0.15);
   }, ['colors.lightShade']),
-  border: (0, _utils.computed)(function (_ref41) {
-    var _ref42 = _slicedToArray(_ref41, 1),
-      ghost = _ref42[0];
+  border: (0, _utils.computed)(function (_ref55) {
+    var _ref56 = _slicedToArray(_ref55, 1),
+      ghost = _ref56[0];
     return (0, _manipulation.transparentize)(ghost, 0.1);
   }, ['colors.ghost']),
-  controlBorder: (0, _utils.computed)(function (_ref43) {
-    var _ref44 = _slicedToArray(_ref43, 1),
-      lightestShade = _ref44[0];
+  clearButtonBackground: (0, _utils.computed)(function (_ref57) {
+    var _ref58 = _slicedToArray(_ref57, 1),
+      darkShade = _ref58[0];
+    return darkShade;
+  }, ['colors.darkShade']),
+  controlBorder: (0, _utils.computed)(function (_ref59) {
+    var _ref60 = _slicedToArray(_ref59, 1),
+      lightestShade = _ref60[0];
     return (0, _manipulation.tint)(lightestShade, 0.31);
   }, ['colors.lightestShade']),
-  controlBorderSelected: (0, _utils.computed)(function (_ref45) {
-    var _ref46 = _slicedToArray(_ref45, 1),
-      lightestShade = _ref46[0];
+  controlBorderSelected: (0, _utils.computed)(function (_ref61) {
+    var _ref62 = _slicedToArray(_ref61, 1),
+      lightestShade = _ref62[0];
     return (0, _manipulation.tint)(lightestShade, 0.31);
   }, ['colors.lightestShade']),
-  controlBorderDisabled: (0, _utils.computed)(function (_ref47) {
-    var _ref48 = _slicedToArray(_ref47, 1),
-      lightestShade = _ref48[0];
+  controlBorderDisabled: (0, _utils.computed)(function (_ref63) {
+    var _ref64 = _slicedToArray(_ref63, 1),
+      lightestShade = _ref64[0];
     return (0, _manipulation.tint)(lightestShade, 0.31);
   }, ['colors.lightestShade'])
 });
 var forms = exports.forms = {
-  maxWidth: (0, _utils.computed)(function (_ref49) {
-    var _ref50 = _slicedToArray(_ref49, 1),
-      base = _ref50[0];
+  maxWidth: (0, _utils.computed)(function (_ref65) {
+    var _ref66 = _slicedToArray(_ref65, 1),
+      base = _ref66[0];
     return (0, _euiThemeCommon.mathWithUnits)(base, function (x) {
       return x * 25;
     });

package/lib/themes/amsterdam/theme.js

@@ -37,7 +37,8 @@ var euiThemeAmsterdam = exports.euiThemeAmsterdam = {
   flags: {
     hasGlobalFocusColor: false,
     hasVisColorAdjustment: true,
-    buttonVariant: 'classic'
+    buttonVariant: 'classic',
+    formVariant: 'classic'
   }
 };
 var EuiThemeAmsterdam = exports.EuiThemeAmsterdam = (0, _utils.buildTheme)(euiThemeAmsterdam, AMSTERDAM_NAME_KEY);

package/lib/themes/json/eui_theme_amsterdam_dark.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255,0.1)",
   "euiColorBorderBaseFormsControl": "#69696f",
+  "euiColorBorderInteractiveFormsHoverPlain": "transparent",
+  "euiColorBorderInteractiveFormsHoverDanger": "transparent",
   "euiColorBorderStrongPrimary": "#36A2EF",
   "euiColorBorderStrongAccent": "#F68FBE",
   "euiColorBorderStrongAccentSecondary": "#7DDED8",

package/lib/themes/json/eui_theme_amsterdam_light.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(0,0,0,0.1)",
   "euiColorBorderBaseFormsControl": "#919296",
+  "euiColorBorderInteractiveFormsHoverPlain": "transparent",
+  "euiColorBorderInteractiveFormsHoverDanger": "transparent",
   "euiColorBorderStrongPrimary": "#0077CC",
   "euiColorBorderStrongAccent": "#F04E98",
   "euiColorBorderStrongAccentSecondary": "#00BFB3",

package/lib/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/lib/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/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -21,7 +21,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { keys, CanvasTextUtils, RenderWithEuiStylesMemoizer } from '../../../services';
+import { keys, CanvasTextUtils, RenderWithEuiStylesMemoizer, isEuiThemeRefreshVariant, RenderWithEuiTheme } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFormControlLayout } from '../../form/form_control_layout';
 import { EuiComboBoxOptionAppendPrepend } from '../utils';
@@ -236,66 +236,70 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       var wrapClasses = classNames('euiComboBox__inputWrap', {
         'euiComboBox__inputWrap--plainText': this.asPlainText
       });
-      return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
-        var styles = stylesMemoizer(euiComboBoxInputStyles);
-        var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(_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 ___EmotionJSX(EuiFormControlLayout, _extends({
-          icon: icon
-        }, clickProps, {
-          inputId: id,
-          isLoading: isLoading,
-          isInvalid: isInvalid,
-          isDisabled: isDisabled,
-          compressed: compressed,
-          fullWidth: fullWidth,
-          prepend: prepend,
-          append: append,
-          css: formLayoutStyles
-        }), ___EmotionJSX("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(), ___EmotionJSX(EuiComboBoxOptionAppendPrepend, {
-          option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
-          classNamePrefix: "euiComboBoxPlainTextSelection",
-          marginSize: "xxs"
-        }, ___EmotionJSX("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 ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
+        return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+          var styles = stylesMemoizer(euiComboBoxInputStyles);
+          var isRefreshVariant = 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(_toConsumableArray(_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 ___EmotionJSX(EuiFormControlLayout, _extends({
+            icon: icon
+          }, clickProps, {
+            inputId: id,
+            isLoading: isLoading,
+            isInvalid: isInvalid,
+            isDisabled: isDisabled,
+            compressed: compressed,
+            fullWidth: fullWidth,
+            prepend: prepend,
+            append: append,
+            css: formLayoutStyles
+          }), ___EmotionJSX("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(), ___EmotionJSX(EuiComboBoxOptionAppendPrepend, {
+            option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
+            classNamePrefix: "euiComboBoxPlainTextSelection",
+            marginSize: "xxs"
+          }, ___EmotionJSX("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/es/components/combo_box/combo_box_input/combo_box_input.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 import { euiFormControlStyles, euiFormControlDefaultShadow, euiFormControlText } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -28,12 +29,13 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 export var euiComboBoxInputStyles = function euiComboBoxInputStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
     // Wrapper which visually mimics a form control
-    euiComboBoxInputWrapper: /*#__PURE__*/css(euiFormControlDefaultShadow(euiThemeContext), " display:flex;;label:euiComboBoxInputWrapper;"),
+    euiComboBoxInputWrapper: /*#__PURE__*/css(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(logicalCSS('height', 'auto'), "\n      ").concat(logicalCSS('padding-vertical', euiTheme.size.s), "\n      ").concat(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(logicalCSS('height', 'auto'), "\n      ").concat(logicalCSS('padding-vertical', euiTheme.size.s), "\n      ").concat(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__*/css(formStyles.compressed, " ", logicalCSS('height', 'auto'), " ", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-left', euiTheme.size.xs), " column-gap:", euiTheme.size.xs, ";row-gap:", euiTheme.size.xxs, ";;label:compressed;"),
     plainText: {
       plainText: _ref,
@@ -42,10 +44,10 @@ export var euiComboBoxInputStyles = function euiComboBoxInputStyles(euiThemeCont
     },
     invalid: /*#__PURE__*/css(formStyles.invalid, ";label:invalid;"),
     disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
-    open: /*#__PURE__*/css(formStyles.focus, ";label:open;"),
+    open: /*#__PURE__*/css(formStyles.focus, ";;label:open;"),
     inGroup: /*#__PURE__*/css(formStyles.inGroup, ";label:inGroup;"),
     // Actual input element, which has variable width depending on its value
-    euiComboBoxInput: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.l), " ", logicalCSS('min-width', '2px'), " ", logicalCSS('max-width', '100%'), 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__*/css(logicalCSS('height', euiTheme.size.l), " ", logicalCSS('min-width', '2px'), " ", logicalCSS('max-width', '100%'), 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__*/css(";label:euiComboBox__formControlLayout;"),

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

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiShadowMedium } from '@elastic/eui-theme-common';
+import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS } from '../../global_styling';
 import { euiFormControlDisabledStyles, euiFormControlReadOnlyStyles, euiFormControlDefaultShadow, euiFormControlInvalidStyles } from '../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -21,10 +22,12 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  var inlineStyles = "\n      /* removes form layout border */\n      &::after {\n        display: none;\n      }\n    ";
   return {
     euiDatePicker: _ref,
     inline: {
-      inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " border:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", logicalCSS('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+      inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " border:none;padding:0;", isRefreshVariant && inlineStyles, ";}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", 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__*/css(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", euiShadowMedium(euiThemeContext, {

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

@@ -13,7 +13,7 @@ import React, { useMemo, cloneElement } from 'react';
 import classNames from 'classnames';
 import { EuiFormControlLayoutDelimited } from '../form';
 import { useEuiMemoizedStyles } from '../../services';
-import { euiDatePickerRangeStyles as styles, euiDatePickerRangeInlineStyles } from './date_picker_range.styles';
+import { euiDatePickerRangeStyles, euiDatePickerRangeInlineStyles } from './date_picker_range.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var children = _ref.children,
@@ -42,6 +42,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var fullWidth = _fullWidth && !inline;
   var compressed = _compressed && !inline;
   var classes = classNames('euiDatePickerRange', className);
+  var styles = useEuiMemoizedStyles(euiDatePickerRangeStyles);
   var inlineStyles = useEuiMemoizedStyles(euiDatePickerRangeInlineStyles);
   var cssStyles = !inline ? styles.euiDatePickerRange : [inlineStyles.euiDatePickerRangeInline,
   // Determine the inline container query to use based on the width of the react-datepicker
@@ -99,7 +100,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     if (iconType === true) return 'calendar';
     return iconType;
   }, [iconType, inline]);
-  return ___EmotionJSX("span", _extends({
+  return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles
   }, rest), ___EmotionJSX(EuiFormControlLayoutDelimited, {