@elastic/eui 105.0.0 → 106.0.0

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

@@ -388,6 +388,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 = (0, _slicedToArray2.default)(_ref122, 1),
       primary = _ref123[0];
@@ -680,6 +682,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 = (0, _slicedToArray2.default)(_ref226, 1),
       primary = _ref227[0];
@@ -778,11 +782,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/optimize/lib/themes/amsterdam/global_styling/variables/_forms.js

@@ -45,6 +45,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 = (0, _slicedToArray2.default)(_ref11, 1),
       lightShade = _ref12[0];
@@ -56,99 +57,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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_ref17, 1),
+      primary = _ref18[0];
+    return primary;
+  }, ['colors.primary']),
+  borderInvalid: (0, _utils.computed)(function (_ref19) {
+    var _ref20 = (0, _slicedToArray2.default)(_ref19, 1),
+      danger = _ref20[0];
+    return danger;
+  }, ['colors.danger']),
+  borderHovered: (0, _utils.computed)(function (_ref21) {
+    var _ref22 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_ref23, 1),
+      danger = _ref24[0];
+    return danger;
+  }, ['colors.danger']),
+  borderAutofilled: (0, _utils.computed)(function (_ref25) {
+    var _ref26 = (0, _slicedToArray2.default)(_ref25, 1),
+      primaryText = _ref26[0];
     return (0, _manipulation.transparentize)(primaryText, 0.2);
   }, ['colors.primaryText']),
-  controlBorder: (0, _utils.computed)(function (_ref17) {
-    var _ref18 = (0, _slicedToArray2.default)(_ref17, 1),
-      lightestShade = _ref18[0];
+  borderAutofilledHovered: (0, _utils.computed)(function (_ref27) {
+    var _ref28 = (0, _slicedToArray2.default)(_ref27, 1),
+      primaryText = _ref28[0];
+    return (0, _manipulation.transparentize)(primaryText, 0.2);
+  }, ['colors.primaryText']),
+  clearButtonBackground: (0, _utils.computed)(function (_ref29) {
+    var _ref30 = (0, _slicedToArray2.default)(_ref29, 1),
+      mediumShade = _ref30[0];
+    return mediumShade;
+  }, ['colors.mediumShade']),
+  controlBorder: (0, _utils.computed)(function (_ref31) {
+    var _ref32 = (0, _slicedToArray2.default)(_ref31, 1),
+      lightestShade = _ref32[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBorderSelected: (0, _utils.computed)(function (_ref19) {
-    var _ref20 = (0, _slicedToArray2.default)(_ref19, 1),
-      lightestShade = _ref20[0];
+  controlBorderSelected: (0, _utils.computed)(function (_ref33) {
+    var _ref34 = (0, _slicedToArray2.default)(_ref33, 1),
+      lightestShade = _ref34[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBorderDisabled: (0, _utils.computed)(function (_ref21) {
-    var _ref22 = (0, _slicedToArray2.default)(_ref21, 1),
-      lightestShade = _ref22[0];
+  controlBorderDisabled: (0, _utils.computed)(function (_ref35) {
+    var _ref36 = (0, _slicedToArray2.default)(_ref35, 1),
+      lightestShade = _ref36[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  controlBackgroundUnselected: (0, _utils.computed)(function (_ref23) {
-    var _ref24 = (0, _slicedToArray2.default)(_ref23, 1),
-      emptyShade = _ref24[0];
+  controlBackgroundUnselected: (0, _utils.computed)(function (_ref37) {
+    var _ref38 = (0, _slicedToArray2.default)(_ref37, 1),
+      emptyShade = _ref38[0];
     return emptyShade;
   }, ['colors.emptyShade']),
-  controlBackgroundDisabled: (0, _utils.computed)(function (_ref25) {
-    var _ref26 = (0, _slicedToArray2.default)(_ref25, 1),
-      lightShade = _ref26[0];
+  controlBackgroundDisabled: (0, _utils.computed)(function (_ref39) {
+    var _ref40 = (0, _slicedToArray2.default)(_ref39, 1),
+      lightShade = _ref40[0];
     return lightShade;
   }, ['colors.lightShade']),
-  colorHasPlaceholder: (0, _utils.computed)(function (_ref27) {
-    var _ref28 = (0, _slicedToArray2.default)(_ref27, 1),
-      subduedText = _ref28[0];
+  colorHasPlaceholder: (0, _utils.computed)(function (_ref41) {
+    var _ref42 = (0, _slicedToArray2.default)(_ref41, 1),
+      subduedText = _ref42[0];
     return (0, _manipulation.tint)(subduedText, 0.08);
   }, ['colors.subduedText']),
-  colorDisabled: (0, _utils.computed)(function (_ref29) {
-    var _ref30 = (0, _slicedToArray2.default)(_ref29, 1),
-      mediumShade = _ref30[0];
+  colorDisabled: (0, _utils.computed)(function (_ref43) {
+    var _ref44 = (0, _slicedToArray2.default)(_ref43, 1),
+      mediumShade = _ref44[0];
     return mediumShade;
   }, ['colors.mediumShade']),
-  iconDisabled: (0, _utils.computed)(function (_ref31) {
-    var _ref32 = (0, _slicedToArray2.default)(_ref31, 1),
-      darkShade = _ref32[0];
+  iconDisabled: (0, _utils.computed)(function (_ref45) {
+    var _ref46 = (0, _slicedToArray2.default)(_ref45, 1),
+      darkShade = _ref46[0];
     return darkShade;
   }, ['colors.darkShade'])
 };
 var _dark_forms = _objectSpread(_objectSpread({}, _forms), {}, {
-  background: (0, _utils.computed)(function (_ref33) {
-    var _ref34 = (0, _slicedToArray2.default)(_ref33, 1),
-      lightestShade = _ref34[0];
+  background: (0, _utils.computed)(function (_ref47) {
+    var _ref48 = (0, _slicedToArray2.default)(_ref47, 1),
+      lightestShade = _ref48[0];
     return (0, _manipulation.shade)(lightestShade, 0.4);
   }, ['colors.lightestShade']),
-  backgroundFocused: (0, _utils.computed)(function (_ref35) {
-    var _ref36 = (0, _slicedToArray2.default)(_ref35, 1),
-      emptyShade = _ref36[0];
+  backgroundFocused: (0, _utils.computed)(function (_ref49) {
+    var _ref50 = (0, _slicedToArray2.default)(_ref49, 1),
+      emptyShade = _ref50[0];
     return (0, _manipulation.shade)(emptyShade, 0.4);
   }, ['colors.emptyShade']),
-  backgroundAutofilled: (0, _utils.computed)(function (_ref37) {
-    var _ref38 = (0, _slicedToArray2.default)(_ref37, 1),
-      primary = _ref38[0];
+  backgroundAutofilled: (0, _utils.computed)(function (_ref51) {
+    var _ref52 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_ref39, 1),
-      lightShade = _ref40[0];
+  prependBackground: (0, _utils.computed)(function (_ref53) {
+    var _ref54 = (0, _slicedToArray2.default)(_ref53, 1),
+      lightShade = _ref54[0];
     return (0, _manipulation.shade)(lightShade, 0.15);
   }, ['colors.lightShade']),
-  border: (0, _utils.computed)(function (_ref41) {
-    var _ref42 = (0, _slicedToArray2.default)(_ref41, 1),
-      ghost = _ref42[0];
+  border: (0, _utils.computed)(function (_ref55) {
+    var _ref56 = (0, _slicedToArray2.default)(_ref55, 1),
+      ghost = _ref56[0];
     return (0, _manipulation.transparentize)(ghost, 0.1);
   }, ['colors.ghost']),
-  controlBorder: (0, _utils.computed)(function (_ref43) {
-    var _ref44 = (0, _slicedToArray2.default)(_ref43, 1),
-      lightestShade = _ref44[0];
+  clearButtonBackground: (0, _utils.computed)(function (_ref57) {
+    var _ref58 = (0, _slicedToArray2.default)(_ref57, 1),
+      darkShade = _ref58[0];
+    return darkShade;
+  }, ['colors.darkShade']),
+  controlBorder: (0, _utils.computed)(function (_ref59) {
+    var _ref60 = (0, _slicedToArray2.default)(_ref59, 1),
+      lightestShade = _ref60[0];
     return (0, _manipulation.tint)(lightestShade, 0.31);
   }, ['colors.lightestShade']),
-  controlBorderSelected: (0, _utils.computed)(function (_ref45) {
-    var _ref46 = (0, _slicedToArray2.default)(_ref45, 1),
-      lightestShade = _ref46[0];
+  controlBorderSelected: (0, _utils.computed)(function (_ref61) {
+    var _ref62 = (0, _slicedToArray2.default)(_ref61, 1),
+      lightestShade = _ref62[0];
     return (0, _manipulation.tint)(lightestShade, 0.31);
   }, ['colors.lightestShade']),
-  controlBorderDisabled: (0, _utils.computed)(function (_ref47) {
-    var _ref48 = (0, _slicedToArray2.default)(_ref47, 1),
-      lightestShade = _ref48[0];
+  controlBorderDisabled: (0, _utils.computed)(function (_ref63) {
+    var _ref64 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_ref49, 1),
-      base = _ref50[0];
+  maxWidth: (0, _utils.computed)(function (_ref65) {
+    var _ref66 = (0, _slicedToArray2.default)(_ref65, 1),
+      base = _ref66[0];
     return (0, _euiThemeCommon.mathWithUnits)(base, function (x) {
       return x * 25;
     });

package/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "105.0.0",
+  "version": "106.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -17,11 +17,12 @@
   "scripts": {
     "start": "yarn storybook",
     "build:workspaces": "yarn workspaces foreach -Rti --from @elastic/eui-theme-common run build && yarn workspaces foreach -Rti --from @elastic/eui --exclude @elastic/eui --exclude @elastic/eui-theme-common run build",
-    "build": "node ./scripts/compile-i18n-strings.js && node ./scripts/compile-clean.js && node ./scripts/compile-eui.js && yarn compile-scss",
-    "build-pack": "yarn build && npm pack",
+    "build:clean": "rimraf dist lib es optimize test-env eui.d.ts",
+    "build:i18ntokens": "node ./scripts/build_i18ntokens.mjs",
+    "build:copy-assets": "node ./scripts/build_copy_assets.js",
+    "build": "yarn build:clean && yarn build:i18ntokens && node ./scripts/compile-eui.js && yarn build:copy-assets",
+    "build-pack": "yarn build && yarn pack",
     "compile-icons": "node ./scripts/compile-icons.js && prettier --write --loglevel=warn \"./src/components/icon/assets/**/*.tsx\"",
-    "compile-scss": "node ./scripts/compile-scss.js",
-    "extract-i18n-strings": "node ./scripts/babel/fetch-i18n-strings",
     "lint": "yarn tsc --noEmit && yarn lint-es && yarn lint-css-in-js && yarn lint-sass",
     "lint-fix": "yarn lint-es --fix && yarn lint-css-in-js --fix",
     "lint-es": "NODE_OPTIONS=--max-old-space-size=4096 eslint --cache \"src/**/*.{ts,tsx,js}\"",
@@ -43,14 +44,15 @@
     "release-rc": "node ./scripts/release.js --type=prerelease",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "pre-push": "yarn test-staged"
+    "pre-push": "yarn test-staged",
+    "prerelease": "node ./scripts/prerelease.mjs"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/elastic/eui.git"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "2.2.0",
+    "@elastic/eui-theme-common": "3.0.0",
     "@elastic/prismjs-esql": "^1.1.0",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
@@ -104,7 +106,7 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui-theme-borealis": "3.2.0",
+    "@elastic/eui-theme-borealis": "3.3.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -199,7 +201,7 @@
     "findup": "^0.1.5",
     "fork-ts-checker-webpack-plugin": "^5.1.0",
     "get-port": "^5.1.1",
-    "glob": "^7.1.6",
+    "glob": "^11.0.3",
     "html-format": "^1.0.1",
     "html-webpack-plugin": "^5.5.0",
     "inquirer": "^9.1.4",
@@ -257,7 +259,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@elastic/eui-theme-borealis": "3.2.0",
+    "@elastic/eui-theme-borealis": "3.3.0",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^16.9 || ^17.0 || ^18.0",

package/src/themes/amsterdam/_colors_dark.scss

@@ -121,6 +121,9 @@ $euiColorBorderBaseFloating: $euiColorLightShade !default;
 $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default;
 $euiColorBorderBaseFormsControl: tint($euiColorLightestShade, 0.31) !default;
 
+$euiColorBorderInteractiveFormsHoverPlain: 'transparent' !default;
+$euiColorBorderInteractiveFormsHoverDanger: 'transparent' !default;
+
 $euiColorBorderStrongPrimary: $euiColorPrimary !default;
 $euiColorBorderStrongAccent: $euiColorAccent !default;
 $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary !default;

package/src/themes/amsterdam/_colors_light.scss

@@ -121,6 +121,9 @@ $euiColorBorderBaseFloating: 'transparent' !default;
 $euiColorBorderBaseFormsColorSwatch: transparentize($euiColorFullShade, 0.1) !default;
 $euiColorBorderBaseFormsControl: shade($euiColorLightestShade, 0.4) !default;
 
+$euiColorBorderInteractiveFormsHoverPlain: 'transparent' !default;
+$euiColorBorderInteractiveFormsHoverDanger: 'transparent' !default;
+
 $euiColorBorderStrongPrimary: $euiColorPrimary !default;
 $euiColorBorderStrongAccent: $euiColorAccent !default;
 $euiColorBorderStrongAccentSecondary: $euiColorAccentSecondary !default;

package/test-env/components/combo_box/combo_box_input/combo_box_input.js

@@ -245,66 +245,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/test-env/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/test-env/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/test-env/components/date_picker/date_picker_range.js

@@ -52,8 +52,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;
@@ -109,7 +110,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, {