@elastic/eui 95.7.0 → 95.8.0-backport.0

package/optimize/es/components/form/switch/switch.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange", "className", "css", "showLabel", "type", "labelProps"];
+var _excluded = ["label", "id", "checked", "disabled", "compressed", "mini", "onChange", "className", "showLabel", "type", "labelProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,10 +11,10 @@ var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange",
  */
 
 import React, { useCallback } from 'react';
-import { css } from '@emotion/react';
 import classNames from 'classnames';
-import { useGeneratedHtmlId } from '../../../services/accessibility';
+import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../../services';
 import { EuiIcon } from '../../icon';
+import { euiSwitchStyles } from './switch.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiSwitch = function EuiSwitch(_ref) {
   var label = _ref.label,
@@ -21,9 +22,9 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     checked = _ref.checked,
     disabled = _ref.disabled,
     compressed = _ref.compressed,
+    mini = _ref.mini,
     onChange = _ref.onChange,
     className = _ref.className,
-    customCss = _ref.css,
     _ref$showLabel = _ref.showLabel,
     showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
     _ref$type = _ref.type,
@@ -44,23 +45,26 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     event.target.checked = !checked;
     onChange(event);
   }, [checked, disabled, onChange]);
-  var classes = classNames('euiSwitch', {
-    'euiSwitch--compressed': compressed
-  }, className);
+  var classes = classNames('euiSwitch', className);
   var labelClasses = classNames('euiSwitch__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
   if (showLabel === false && typeof label !== 'string') {
     console.warn('EuiSwitch `label` must be a string when `showLabel` is false.');
   }
-  var styles = {
-    euiSwitch: /*#__PURE__*/css(";label:euiSwitch;")
-  }; // TODO: Emotion conversion
-  var cssStyles = [styles.euiSwitch, customCss];
+  var size = mini ? 'mini' : compressed ? 'compressed' : 'uncompressed';
+  var styles = useEuiMemoizedStyles(euiSwitchStyles);
+  var cssStyles = [styles.euiSwitch, disabled ? styles.disabled : styles.enabled];
+  var buttonStyles = [styles.button.euiSwitch__button, styles.button[size]];
+  var bodyStyles = [styles.body.euiSwitch__body, disabled ? styles.body.disabled[size] : checked ? styles.body.on : styles.body.off];
+  var iconsStyles = [styles.icons.euiSwitch__icons, checked ? styles.icons.on : styles.icons.off, disabled ? styles.icons.disabled : styles.icons.enabled];
+  var thumbStyles = [styles.thumb.euiSwitch__thumb, checked ? styles.thumb.on[size] : styles.thumb.off].concat(_toConsumableArray(disabled ? [styles.thumb.disabled.disabled, styles.thumb.disabled[size]] : [styles.thumb.enabled.enabled, styles.thumb.enabled[size]]));
+  var labelStyles = [styles.label.euiSwitch__label, styles.label[size], disabled && styles.label.disabled, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
   return ___EmotionJSX("div", {
     css: cssStyles,
     className: classes
   }, ___EmotionJSX("button", _extends({
     id: switchId,
     "aria-checked": checked || false,
+    css: buttonStyles,
     className: "euiSwitch__button",
     role: "switch",
     type: type,
@@ -69,24 +73,26 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     "aria-label": showLabel ? undefined : label,
     "aria-labelledby": showLabel ? labelId : undefined
   }, rest), ___EmotionJSX("span", {
+    css: bodyStyles,
     className: "euiSwitch__body"
-  }, ___EmotionJSX("span", {
-    className: "euiSwitch__thumb"
-  }), ___EmotionJSX("span", {
-    className: "euiSwitch__track"
-  }, !compressed && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, {
-    type: "cross",
-    size: "m",
-    className: "euiSwitch__icon"
-  }), ___EmotionJSX(EuiIcon, {
+  }, !(compressed || mini) && ___EmotionJSX("span", {
+    css: iconsStyles,
+    className: "euiSwitch__icons"
+  }, ___EmotionJSX(EuiIcon, {
     type: "check",
-    size: "m",
-    className: "euiSwitch__icon euiSwitch__icon--checked"
-  }))))), showLabel &&
+    size: "m"
+  }), ___EmotionJSX(EuiIcon, {
+    type: "cross",
+    size: "m"
+  }))), ___EmotionJSX("span", {
+    css: thumbStyles,
+    className: "euiSwitch__thumb"
+  })), showLabel &&
   // <button> + <label> has poor screen reader support.
   // Click handler added to simulate natural, secondary <label> interactivity.
   // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   ___EmotionJSX("span", _extends({}, labelProps, {
+    css: labelStyles,
     className: labelClasses,
     id: labelId,
     onClick: onClick

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

@@ -0,0 +1,226 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { tint } from '../../../services';
+import { euiCanAnimate, euiFocusRing, euiFontSize, logicalCSS, logicalSizeCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormCustomControlVariables } from '../form.styles';
+var euiSwitchVars = function euiSwitchVars(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formVars = euiFormCustomControlVariables(euiThemeContext);
+  var colors = {
+    on: formVars.colors.selected,
+    off: formVars.colors.unselectedBorder,
+    disabled: formVars.colors.disabled,
+    thumb: formVars.colors.selectedIcon,
+    thumbBorder: formVars.colors.unselectedBorder,
+    thumbBorderDisabled: formVars.colors.unselectedBorder
+  };
+  var sizes = {
+    uncompressed: {
+      height: mathWithUnits(euiTheme.size.base, function (x) {
+        return x * 1.25;
+      }),
+      width: mathWithUnits([euiTheme.size.xxl, euiTheme.size.xs], function (x, y) {
+        return x + y;
+      }),
+      thumbScales: {
+        default: 1,
+        hover: 1.05,
+        active: 0.9
+      }
+    },
+    compressed: {
+      height: euiTheme.size.base,
+      width: mathWithUnits(euiTheme.size.base, function (x) {
+        return x * 1.75;
+      }),
+      thumbScales: {
+        default: 0.9,
+        hover: 0.95,
+        active: 0.8
+      }
+    },
+    get mini() {
+      return {
+        height: mathWithUnits(this.uncompressed.height, function (x) {
+          return x / 2;
+        }),
+        width: mathWithUnits(this.uncompressed.width, function (x) {
+          return x / 2;
+        }),
+        thumbScales: {
+          default: 0.8,
+          hover: undefined,
+          active: undefined
+        }
+      };
+    }
+  };
+  var animation = {
+    speed: euiTheme.animation.normal,
+    easing: euiTheme.animation.bounce
+  };
+  var label = {
+    disabled: formVars.colors.disabledLabel,
+    gap: formVars.sizes.labelGap
+  };
+  return {
+    sizes: sizes,
+    colors: colors,
+    animation: animation,
+    label: label
+  };
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;"
+} : {
+  name: "b86pnw-disabled",
+  styles: "cursor:not-allowed;label:disabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "eg68pp-euiSwitch",
+  styles: "position:relative;display:inline-flex;align-items:flex-start;/* Required for inline-flex CSS to not render an extra 2-3px of strut height\n       * @see https://stackoverflow.com/a/27536461/4294462 */vertical-align:middle;label:euiSwitch;"
+} : {
+  name: "eg68pp-euiSwitch",
+  styles: "position:relative;display:inline-flex;align-items:flex-start;/* Required for inline-flex CSS to not render an extra 2-3px of strut height\n       * @see https://stackoverflow.com/a/27536461/4294462 */vertical-align:middle;label:euiSwitch;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiSwitchStyles = function euiSwitchStyles(euiThemeContext) {
+  var switchVars = euiSwitchVars(euiThemeContext);
+  return {
+    euiSwitch: _ref3,
+    // Skip css`` to avoid generating an extra Emotion className
+    enabled: "\n      cursor: pointer;\n    ",
+    disabled: _ref2,
+    button: buttonStyles(euiThemeContext, switchVars),
+    // The track body must be separate from the button wrapper, because the
+    // icons have their overflow hidden outside the button, but the thumb doesn't
+    body: bodyStyles(euiThemeContext, switchVars),
+    icons: iconStyles(euiThemeContext, switchVars),
+    thumb: thumbStyles(euiThemeContext, switchVars),
+    label: labelStyles(euiThemeContext, switchVars)
+  };
+};
+var buttonStyles = function buttonStyles(euiThemeContext, switchVars) {
+  var _switchVars$sizes = switchVars.sizes,
+    uncompressed = _switchVars$sizes.uncompressed,
+    compressed = _switchVars$sizes.compressed,
+    mini = _switchVars$sizes.mini;
+  return {
+    euiSwitch__button: /*#__PURE__*/css("flex-shrink:0;line-height:0;position:relative;cursor:inherit;", euiFocusRing(euiThemeContext, 'outset'), ";;label:euiSwitch__button;"),
+    // Skip css`` to avoid generating an Emotion className
+    uncompressed: "\n      ".concat(logicalSizeCSS(uncompressed.width, uncompressed.height), "\n      border-radius: ").concat(uncompressed.height, ";\n    "),
+    compressed: /*#__PURE__*/css(logicalSizeCSS(compressed.width, compressed.height), " border-radius:", compressed.height, ";;label:compressed;"),
+    mini: /*#__PURE__*/css(logicalSizeCSS(mini.width, mini.height), " border-radius:", mini.height, ";;label:mini;")
+  };
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "19cwu6v-euiSwitch__body",
+  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;"
+} : {
+  name: "19cwu6v-euiSwitch__body",
+  styles: "position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;label:euiSwitch__body;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var bodyStyles = function bodyStyles(_ref4, _ref5) {
+  var colorMode = _ref4.colorMode;
+  var colors = _ref5.colors;
+  // This is probably very extra, but the visual weight of the default
+  // disabled custom control feels different in light mode depending
+  // on the size of the switch, so I'm tinting it based on that.
+  // Gotta justify my stupidly expensive art degree!
+  var _calculateDisabledColor = function _calculateDisabledColor(tintAmount) {
+    return /*#__PURE__*/css("label:disabled;background-color:", colorMode === 'DARK' ? colors.disabled : tint(colors.disabled, tintAmount), ";");
+  };
+  return {
+    euiSwitch__body: _ref,
+    on: /*#__PURE__*/css("background-color:", colors.on, ";;label:on;"),
+    off: /*#__PURE__*/css("background-color:", colors.off, ";;label:off;"),
+    disabled: {
+      uncompressed: _calculateDisabledColor(0.5),
+      compressed: _calculateDisabledColor(0.25),
+      mini: _calculateDisabledColor(0)
+    }
+  };
+};
+var iconStyles = function iconStyles(_ref6, _ref7) {
+  var euiTheme = _ref6.euiTheme;
+  var colors = _ref7.colors,
+    animation = _ref7.animation;
+  return {
+    euiSwitch__icons: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), " ", logicalCSS('left', '-50%'), " ", logicalCSS('width', '200%'), " display:flex;justify-content:space-around;align-items:center;", logicalCSS('padding-horizontal', euiTheme.size.xs), " ", euiCanAnimate, "{transition-property:inset-inline-start;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__icons;"),
+    on: /*#__PURE__*/css(logicalCSS('left', '-25%'), ";;label:on;"),
+    off: /*#__PURE__*/css(logicalCSS('left', '-75%'), ";;label:off;"),
+    enabled: /*#__PURE__*/css("color:", colors.thumb, ";;label:enabled;"),
+    disabled: /*#__PURE__*/css("color:", colors.thumbBorderDisabled, ";;label:disabled;")
+  };
+};
+var thumbStyles = function thumbStyles(_ref8, switchVars) {
+  var euiTheme = _ref8.euiTheme;
+  var sizes = switchVars.sizes,
+    colors = switchVars.colors,
+    animation = switchVars.animation;
+  var uncompressed = sizes.uncompressed,
+    compressed = sizes.compressed,
+    mini = sizes.mini;
+  var _calculateScale = function _calculateScale(size, hoverActiveStates) {
+    var baseScale = "transform: scale(".concat(sizes[size].thumbScales.default, ");");
+    var states = hoverActiveStates ? "\n      .euiSwitch:hover & {\n        transform: scale(".concat(sizes[size].thumbScales.hover, ");\n      }\n      .euiSwitch:active & {\n        transform: scale(").concat(sizes[size].thumbScales.active, ");\n      }") : '';
+    return "".concat(baseScale).concat(states);
+  };
+  return {
+    euiSwitch__thumb: /*#__PURE__*/css("position:absolute;", logicalCSS('vertical', 0), " aspect-ratio:1;", logicalCSS('width', 'fit-content'), " ", logicalCSS('height', '100%'), " border-radius:50%;pointer-events:none;", euiCanAnimate, "{transition-property:inset-inline-start,transform,background-color,border-color;transition-duration:", animation.speed, ";transition-timing-function:", animation.easing, ";};label:euiSwitch__thumb;"),
+    off: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:off;"),
+    get on() {
+      // right: 0 works but doesn't transition/animate, so we need to
+      // manually calculate the left position per switch size
+      var _calculateLeft = function _calculateLeft(bodyWidth, thumbWidth) {
+        var leftPosition = mathWithUnits([bodyWidth, thumbWidth], function (x, y) {
+          return x - y;
+        });
+        return /*#__PURE__*/css("label:on;", logicalCSS('left', leftPosition), ";");
+      };
+      return {
+        uncompressed: _calculateLeft(uncompressed.width, uncompressed.height),
+        compressed: _calculateLeft(compressed.width, compressed.height),
+        mini: _calculateLeft(mini.width, mini.height)
+      };
+    },
+    enabled: {
+      enabled: "\n        background-color: ".concat(colors.thumb, ";\n        border: ").concat(euiTheme.border.width.thin, " solid ").concat(colors.thumbBorder, ";\n      "),
+      uncompressed: _calculateScale('uncompressed', true),
+      compressed: _calculateScale('compressed', true),
+      mini: _calculateScale('mini', false)
+    },
+    disabled: {
+      disabled: /*#__PURE__*/css("background-color:transparent;border:", euiTheme.border.width.thin, " solid ", colors.thumbBorderDisabled, ";;label:disabled;"),
+      uncompressed: _calculateScale('uncompressed', false),
+      compressed: _calculateScale('compressed', false),
+      mini: _calculateScale('mini', false)
+    }
+  };
+};
+var labelStyles = function labelStyles(euiThemeContext, _ref9) {
+  var sizes = _ref9.sizes,
+    label = _ref9.label;
+  var uncompressed = sizes.uncompressed,
+    compressed = sizes.compressed,
+    mini = sizes.mini;
+  return {
+    euiSwitch__label: /*#__PURE__*/css(logicalCSS('padding-left', label.gap), ";;label:euiSwitch__label;"),
+    // Skip css`` to avoid generating an Emotion className
+    uncompressed: "\n      font-size: ".concat(euiFontSize(euiThemeContext, 's').fontSize, ";\n      line-height: ").concat(uncompressed.height, ";\n    "),
+    compressed: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";line-height:", compressed.height, ";;label:compressed;"),
+    mini: /*#__PURE__*/css("font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", mini.height, ";;label:mini;"),
+    disabled: /*#__PURE__*/css("color:", label.disabled, ";;label:disabled;")
+  };
+};

package/optimize/es/components/form/text_area/text_area.js

@@ -70,6 +70,7 @@ export var EuiTextArea = function EuiTextArea(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: rest.disabled,
     clear: clear,
     icon: icon,
     className: "euiFormControlLayout--euiTextArea",

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

@@ -62,7 +62,7 @@ export var euiTextAreaStyles = function euiTextAreaStyles(euiThemeContext) {
     fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
     // EuiFormControlLayout styles
     formControlLayout: {
-      euiTextArea: /*#__PURE__*/css("&&{", logicalCSS('height', 'auto'), ";}.euiFormControlLayoutIcons{", logicalCSS('top', 'auto'), " ", logicalCSS('bottom', formVars.controlPadding), ";};label:euiTextArea;")
+      euiTextArea: /*#__PURE__*/css(logicalCSS('height', 'auto'), " .euiFormControlLayoutIcons{", logicalCSS('top', 'auto'), " ", logicalCSS('bottom', formVars.controlPadding), ";};label:euiTextArea;")
     }
   };
 };

package/optimize/es/components/header/header_links/header_link.js

@@ -1,8 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isActive", "className"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _excluded = ["isActive", "className", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,14 +16,15 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderLink = function EuiHeaderLink(_ref) {
   var isActive = _ref.isActive,
     className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHeaderLink', {
     'euiHeaderLink-isActive': isActive
   }, className);
-  var props = _objectSpread(_objectSpread({
-    color: isActive ? 'primary' : 'text'
-  }, rest), {}, {
-    className: classes
-  });
-  return ___EmotionJSX(EuiButtonEmpty, props);
+  return ___EmotionJSX(EuiButtonEmpty, _extends({
+    className: classes,
+    color: isActive ? 'primary' : 'text',
+    size: size
+  }, rest));
 };

package/optimize/es/components/header/header_links/header_links.js

@@ -92,7 +92,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       isOpen: mobileMenuIsOpen,
       anchorPosition: "downRight",
       closePopover: closeMenu,
-      panelPaddingSize: "none",
+      panelPaddingSize: "s",
       repositionOnScroll: true
     }, popoverProps), ___EmotionJSX("div", {
       className: "euiHeaderLinks__mobileList",

package/optimize/es/components/header/header_links/header_links.styles.js

@@ -36,6 +36,6 @@ export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
       m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
       l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;")
     },
-    euiHeaderLinks__mobileList: /*#__PURE__*/css(".euiHeaderLink{display:block;", logicalCSS('width', '100%'), " padding:", euiTheme.size.s, ";&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
+    euiHeaderLinks__mobileList: /*#__PURE__*/css(".euiHeaderLink{display:block;", logicalCSS('width', '100%'), "&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
   };
 };

package/optimize/es/services/emotion/clone_element.js

@@ -17,14 +17,16 @@ import { jsx } from '@emotion/react';
  * See https://github.com/emotion-js/emotion/issues/1404
  */
 export var cloneElementWithCss = function cloneElementWithCss(element, props) {
+  var cssOrder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'after';
   var clonedElement = element.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ || element.type; // EMOTION_TYPE handles non-React elements (native JSX/HTML nodes)
 
-  var clonedProps = _objectSpread(_objectSpread({
-    key: element.key,
+  var clonedProps = _objectSpread(_objectSpread(_objectSpread({}, element.key ? {
+    key: element.key
+  } : {}), {}, {
     ref: element.ref
   }, element.props), props);
   if (props.css || element.props.css) {
-    clonedProps.css = [element.props.css, props.css];
+    clonedProps.css = cssOrder === 'before' ? [props.css, element.props.css] : [element.props.css, props.css];
   }
   return jsx(clonedElement, clonedProps);
 };

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

@@ -246,13 +246,14 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
       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, isInGroup && !append && styles.formLayout.prependOnly, isInGroup && !prepend && styles.formLayout.appendOnly];
+        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,

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

@@ -54,11 +54,7 @@ var euiComboBoxInputStyles = exports.euiComboBoxInputStyles = function euiComboB
     formLayout: {
       euiComboBox__formControlLayout: /*#__PURE__*/(0, _react.css)(";label:euiComboBox__formControlLayout;"),
       // Allow the form control to expand to any height to accommodate multiple rows of pills
-      // TODO: Remove && specificity override once EuiFormControlLayout is on Emotion
-      multiSelect: /*#__PURE__*/(0, _react.css)("&&{", (0, _global_styling.logicalCSS)('height', 'auto'), ";};label:multiSelect;"),
-      // Fix overflowing input wrapper background
-      prependOnly: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:prependOnly;"),
-      appendOnly: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";};label:appendOnly;")
+      multiSelect: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', 'auto'), ";;label:multiSelect;")
     }
   };
 };

package/optimize/lib/components/datagrid/controls/column_selector.js

@@ -161,8 +161,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
           label: displayValues[id] || id,
           showLabel: false,
           checked: visibleColumnIds.has(id),
-          compressed: true,
-          className: "euiSwitch--mini",
+          mini: true,
           onChange: function onChange(event) {
             var checked = event.target.checked;
             var nextVisibleColumns = sortedColumns.filter(function (columnId) {

package/optimize/lib/components/datagrid/data_grid.a11y.js

@@ -180,7 +180,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations when the columns reorder searchbox returns multiple results', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.get('input[data-test-subj="dataGridColumnSelectorSearch"]').type('a');
-      cy.get('div.euiSwitch--compressed').should(function ($s) {
+      cy.get('.euiSwitch').should(function ($s) {
         expect($s).to.have.length(5);
       });
       cy.checkAxe();
@@ -188,7 +188,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations when the columns reorder searchbox returns 1 result', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.get('input[data-test-subj="dataGridColumnSelectorSearch"]').type('favorite');
-      cy.get('div.euiSwitch--compressed').should(function ($s) {
+      cy.get('.euiSwitch').should(function ($s) {
         expect($s).to.have.length(1);
       });
       cy.checkAxe();

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiDatePickerDefaultTimeFormat = exports.euiDatePickerDefaultDateFormat = exports.EuiDatePicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -108,14 +109,13 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     timeFormat = _ref$timeFormat === void 0 ? euiDatePickerDefaultTimeFormat : _ref$timeFormat,
     utcOffset = _ref.utcOffset,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // Check for whether the passed `selected` moment date is valid
+  var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
   var styles = (0, _services.useEuiMemoizedStyles)(_date_picker.euiDatePickerStyles);
-  var cssStyles = [styles.euiDatePicker, inline && styles.inline, inline && shadow && styles.shadow];
+  var cssStyles = [styles.euiDatePicker].concat((0, _toConsumableArray2.default)(inline ? [styles.inline.inline, isInvalid && !(disabled || readOnly) && styles.inline.invalid, shadow ? styles.inline.shadow : styles.inline.noShadow, disabled && styles.inline.disabled, readOnly && styles.inline.readOnly] : []));
   var calendarStyles = (0, _services.useEuiMemoizedStyles)(_react_date_picker.euiReactDatePickerStyles);
   var classes = (0, _classnames.default)('euiDatePicker', className);
 
-  // Check for whether the passed `selected` moment date is valid
-  var isInvalid = _isInvalid || ((selected === null || selected === void 0 ? void 0 : selected.isValid()) === false ? true : undefined);
-
   // Passed to the default EuiFieldText input, not passed to custom inputs
   var defaultInputProps = !inline && !customInput ? {
     compressed: compressed,
@@ -206,11 +206,8 @@ var EuiDatePicker = exports.EuiDatePicker = function EuiDatePicker(_ref) {
     isInvalid: isInvalid,
     isDisabled: disabled,
     readOnly: readOnly,
-    className: (0, _classnames.default)({
-      // Take advantage of `euiFormControlLayoutDelimited`'s replacement input styling
-      euiFormControlLayoutDelimited: inline,
-      'euiFormControlLayoutDelimited--isInvalid': inline && isInvalid && !disabled && !readOnly
-    }),
+    isDelimited: inline // Styling shortcut for inline calendars
+    ,
     iconsPosition: inline ? 'static' : undefined
   }, control));
 };

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

@@ -7,6 +7,7 @@ exports.euiDatePickerStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+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
@@ -26,7 +27,18 @@ var euiDatePickerStyles = exports.euiDatePickerStyles = function euiDatePickerSt
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiDatePicker: _ref,
-    inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " background-color:transparent;box-shadow:none;padding:0;}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:transparent;flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
-    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _mixins.euiShadowMedium)(euiThemeContext), ";}.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";};label:shadow;")
+    inline: {
+      inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " box-shadow:none;padding:0;}.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, _mixins.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
+      // Needs to come before shadow CSS so that it doesn't override their background-colors
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+        withBorder: false
+      }), " ", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
+      // Should come after shadow CSS to override their background-colors
+      disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
+      readOnly: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), ";};label:readOnly;")
+    }
   };
 };

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

@@ -121,6 +121,7 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
     isInvalid: isInvalid,
     isLoading: isLoading,
     append: inline ? undefined : append,
-    prepend: inline ? undefined : prepend
+    prepend: inline ? undefined : prepend,
+    css: inline && !disabled && (shadow ? inlineStyles.formLayout.shadow : inlineStyles.formLayout.noShadow)
   }));
 };

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

@@ -7,17 +7,24 @@ exports.euiDatePickerRangeStyles = exports.euiDatePickerRangeInlineStyles = void
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
-/*
+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 euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = {
   euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:euiDatePickerRange;")
 };
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "bicgs9-noShadow",
+  styles: "background-color:transparent;label:noShadow;"
+} : {
+  name: "bicgs9-noShadow",
+  styles: "background-color:transparent;label:noShadow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
 
@@ -29,9 +36,15 @@ 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%'), " background-color:transparent;box-shadow:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}&.euiFormControlLayout--group{&>*,.euiFormControlLayoutDelimited__delimiter{", (0, _global_styling.logicalCSS)('height', 'auto'), ";}}.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%'), " box-shadow: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;"),
     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, _mixins.euiShadowMedium)(euiThemeContext), " .euiFormControlLayout__childrenWrapper{background-color:", euiTheme.colors.emptyShade, ";}};label:shadow;")
+    shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _mixins.euiShadowMedium)(euiThemeContext), ";};label:shadow;"),
+    // Applied directly to EuiFormControlLayout so we can check if `disabled`
+    // and allow the disabled background-color to take precedence
+    formLayout: {
+      noShadow: _ref,
+      shadow: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:shadow;")
+    }
   };
 };