@elastic/eui 95.6.0 → 95.7.0

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

@@ -1,108 +1,79 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiComboBoxPill = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _badge = require("../../badge");
 var _i18n = require("../../i18n");
 var _utils = require("../utils");
+var _combo_box_pill = require("./combo_box_pill.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "color", "onClick", "onClickAriaLabel", "onClose", "option"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /*
+/*
  * 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 EuiComboBoxPill = exports.EuiComboBoxPill = /*#__PURE__*/function (_Component) {
-  function EuiComboBoxPill() {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiComboBoxPill);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, EuiComboBoxPill, [].concat(args));
-    (0, _defineProperty2.default)(_this, "onCloseButtonClick", function () {
-      var _this$props = _this.props,
-        onClose = _this$props.onClose,
-        option = _this$props.option;
-      if (onClose) {
-        onClose(option);
-      }
-    });
-    return _this;
-  }
-  (0, _inherits2.default)(EuiComboBoxPill, _Component);
-  return (0, _createClass2.default)(EuiComboBoxPill, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props2 = this.props,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        color = _this$props2.color,
-        onClick = _this$props2.onClick,
-        onClickAriaLabel = _this$props2.onClickAriaLabel,
-        onClose = _this$props2.onClose,
-        option = _this$props2.option,
-        rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      var classes = (0, _classnames.default)('euiComboBoxPill', className);
-      var onClickProps = onClick && onClickAriaLabel ? {
-        onClick: onClick,
-        onClickAriaLabel: onClickAriaLabel
-      } : {};
-      var content = (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
-        option: option,
-        classNamePrefix: "euiComboBoxPill"
-      }, (0, _react2.jsx)("span", {
-        className: "eui-textTruncate"
-      }, children));
-      if (onClose) {
-        return (0, _react2.jsx)(_i18n.EuiI18n, {
-          token: "euiComboBoxPill.removeSelection",
-          default: "Remove {children} from selection in this group",
-          values: {
-            children: children
-          }
-        }, function (removeSelection) {
-          return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
-            className: classes,
-            color: color,
-            "data-test-subj": "euiComboBoxPill",
-            iconOnClick: _this2.onCloseButtonClick,
-            iconOnClickAriaLabel: removeSelection,
-            iconSide: "right",
-            iconType: "cross",
-            title: children
-          }, onClickProps, rest), content);
-        });
+var EuiComboBoxPill = exports.EuiComboBoxPill = function EuiComboBoxPill(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'hollow' : _ref$color,
+    onClick = _ref.onClick,
+    onClickAriaLabel = _ref.onClickAriaLabel,
+    onClose = _ref.onClose,
+    option = _ref.option,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var classes = (0, _classnames.default)('euiComboBoxPill', className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_combo_box_pill.euiComboBoxPillStyles);
+  var cssStyles = styles.euiComboBoxPill;
+  var onClickProps = onClick && onClickAriaLabel ? {
+    onClick: onClick,
+    onClickAriaLabel: onClickAriaLabel
+  } : {};
+  var content = (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
+    option: option,
+    classNamePrefix: "euiComboBoxPill"
+  }, (0, _react2.jsx)("span", {
+    className: "eui-textTruncate"
+  }, children));
+  if (onClose) {
+    return (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiComboBoxPill.removeSelection",
+      default: "Remove {children} from selection in this group",
+      values: {
+        children: children
       }
+    }, function (removeSelection) {
       return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
+        css: cssStyles,
         className: classes,
         color: color,
         "data-test-subj": "euiComboBoxPill",
+        iconOnClick: function iconOnClick() {
+          return onClose(option);
+        },
+        iconOnClickAriaLabel: removeSelection,
+        iconSide: "right",
+        iconType: "cross",
         title: children
-      }, rest, onClickProps), content);
-    }
-  }]);
-}(_react.Component);
-(0, _defineProperty2.default)(EuiComboBoxPill, "defaultProps", {
-  color: 'hollow'
-});
+      }, onClickProps, rest), content);
+    });
+  }
+  return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
+    css: cssStyles,
+    className: classes,
+    color: color,
+    "data-test-subj": "euiComboBoxPill",
+    title: children
+  }, rest, onClickProps), content);
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiComboBoxPillStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+/*
+ * 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 euiComboBoxPillStyles = exports.euiComboBoxPillStyles = function euiComboBoxPillStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+
+  // Ensure the input doesn't drop to the next line when the EuiBadge has a very long text
+  var pillMaxWidth = "calc(100% - ".concat(euiTheme.size.xxs, " - ").concat(euiTheme.size.base, ")");
+  var pillHeight = (0, _global_styling.mathWithUnits)(euiTheme.size.l, function (x) {
+    return x - 2;
+  });
+  var pillLineHeight = (0, _global_styling.mathWithUnits)(pillHeight, function (x) {
+    return x - 2;
+  });
+  return {
+    euiComboBoxPill: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', pillMaxWidth), " ", (0, _global_styling.logicalCSS)('height', pillHeight), " line-height:", pillLineHeight, ";vertical-align:baseline;", (0, _global_styling.logicalCSS)('margin-vertical', '1px'), "&+.euiBadge{", (0, _global_styling.logicalCSS)('margin-left', 0), ";}.euiBadge__text{display:flex;align-items:center;.euiIcon{display:block;}};label:euiComboBoxPill;")
+  };
+};

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

@@ -17,18 +17,20 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactWindow = require("react-window");
+var _services = require("../../../services");
 var _flex = require("../../flex");
 var _highlight = require("../../highlight");
 var _mark = require("../../mark");
 var _text = require("../../text");
 var _loading = require("../../loading");
-var _combo_box_title = require("./combo_box_title");
 var _i18n = require("../../i18n");
 var _filter_select_item = require("../../filter_group/filter_select_item");
 var _badge = require("../../badge");
 var _text_truncate = require("../../text_truncate");
 var _input_popover = require("../../popover/input_popover");
 var _utils = require("../utils");
+var _combo_box_title = require("./combo_box_title");
+var _combo_box_options_list = require("./combo_box_options_list.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children"],
   _excluded2 = ["key", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps"],
@@ -127,7 +129,8 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         className: "euiComboBoxOption__contentWrapper"
       }, (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
         option: option,
-        classNamePrefix: "euiComboBoxOption"
+        classNamePrefix: "euiComboBoxOption",
+        marginSize: "s"
       }, (0, _react2.jsx)("span", {
         className: "euiComboBoxOption__content"
       }, renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : _this.renderTruncatedOption(label, truncationProps))), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
@@ -185,6 +188,7 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
       var _this$props2 = this.props,
         dataTestSubj = _this$props2['data-test-subj'],
         activeOptionIndex = _this$props2.activeOptionIndex,
@@ -303,31 +307,35 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
           default: "You've selected all available options"
         }));
       }
-      var emptyState = emptyStateContent ? (0, _react2.jsx)(_text.EuiText, {
-        size: "xs",
-        className: "euiComboBoxOptionsList__empty"
-      }, emptyStateContent) : undefined;
       var numVisibleOptions = matchingOptions.length < 7 ? matchingOptions.length : 7;
       var height = numVisibleOptions * (rowHeight + 1); // Add one for the border
 
       // bounded by max-height of .euiComboBoxOptionsList
-      var boundedHeight = height > 200 ? 200 : height;
-      var optionsList = (0, _react2.jsx)(_reactWindow.FixedSizeList, {
-        className: "euiComboBoxOptionsList__virtualization",
-        height: boundedHeight,
-        onScroll: onScroll,
-        itemCount: matchingOptions.length,
-        itemSize: rowHeight,
-        itemData: matchingOptions,
-        ref: this.setListRef,
-        innerElementType: this.ListInnerElement,
-        width: this.context
-      }, this.ListRow);
-      return (0, _react2.jsx)("div", (0, _extends2.default)({
-        className: "euiComboBoxOptionsList",
-        "data-test-subj": (0, _classnames.default)('comboBoxOptionsList', dataTestSubj),
-        ref: listRef
-      }, rest), emptyState || optionsList);
+      var boundedHeight = height > _combo_box_options_list.LIST_MAX_HEIGHT ? _combo_box_options_list.LIST_MAX_HEIGHT : height;
+      return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(_combo_box_options_list.euiComboBoxOptionListStyles);
+        return (0, _react2.jsx)("div", (0, _extends2.default)({
+          css: styles.euiComboBoxOptionList,
+          className: "euiComboBoxOptionsList",
+          "data-test-subj": (0, _classnames.default)('comboBoxOptionsList', dataTestSubj),
+          ref: listRef
+        }, rest), emptyStateContent ? (0, _react2.jsx)(_text.EuiText, {
+          size: "xs",
+          css: styles.euiComboBoxOptionsList__empty,
+          className: "euiComboBoxOptionsList__empty"
+        }, emptyStateContent) : (0, _react2.jsx)(_reactWindow.FixedSizeList, {
+          css: styles.euiComboBoxOptionList__virtualization,
+          className: "euiComboBoxOptionsList__virtualization",
+          height: boundedHeight,
+          onScroll: onScroll,
+          itemCount: matchingOptions.length,
+          itemSize: rowHeight,
+          itemData: matchingOptions,
+          ref: _this2.setListRef,
+          innerElementType: _this2.ListInnerElement,
+          width: _this2.context
+        }, _this2.ListRow));
+      });
     }
   }]);
 }(_react.Component);

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiComboBoxOptionListStyles = exports.LIST_MAX_HEIGHT = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _title = require("../../title/title.styles");
+/*
+ * 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 LIST_MAX_HEIGHT = exports.LIST_MAX_HEIGHT = 200;
+var euiComboBoxOptionListStyles = exports.euiComboBoxOptionListStyles = function euiComboBoxOptionListStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiComboBoxOptionList: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', "".concat(LIST_MAX_HEIGHT, "px")), " overflow:hidden;.euiTextTruncate{pointer-events:none;}.euiComboBoxOption__contentWrapper{display:flex;align-items:center;}.euiComboBoxOption__content{flex:1;text-align:start;", (0, _global_styling.euiTextTruncate)(), ";}.euiComboBoxOption__emptyStateText{flex:1;text-align:start;", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";}.euiComboBoxTitle{display:flex;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), (0, _global_styling.logicalCSS)('padding-top', (0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
+      return x + 1;
+    })), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), " ", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), ";};label:euiComboBoxOptionList;"),
+    euiComboBoxOptionList__virtualization: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:euiComboBoxOptionList__virtualization;"),
+    euiComboBoxOptionsList__empty: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";text-align:center;", (0, _global_styling.euiTextBreakWord)(), ";;label:euiComboBoxOptionsList__empty;")
+  };
+};

package/optimize/lib/components/combo_box/combo_box_options_list/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "EuiComboBoxOption", {
-  enumerable: true,
-  get: function get() {
-    return _combo_box_option.EuiComboBoxOption;
-  }
-});
 Object.defineProperty(exports, "EuiComboBoxOptionsList", {
   enumerable: true,
   get: function get() {
@@ -22,5 +16,4 @@ Object.defineProperty(exports, "EuiComboBoxTitle", {
   }
 });
 var _combo_box_options_list = require("./combo_box_options_list");
-var _combo_box_option = require("./combo_box_option");
 var _combo_box_title = require("./combo_box_title");

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

@@ -5,26 +5,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiComboBoxOptionAppendPrepend = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
-/*
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
+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) { (0, _defineProperty2.default)(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; } /*
  * 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.
  */
-
 /**
  * DRY util for rendering an option with its prepend and append properties
  */
 var EuiComboBoxOptionAppendPrepend = exports.EuiComboBoxOptionAppendPrepend = function EuiComboBoxOptionAppendPrepend(_ref) {
   var children = _ref.children,
     option = _ref.option,
-    classNamePrefix = _ref.classNamePrefix;
-  return (0, _react2.jsx)(_react.default.Fragment, null, (option === null || option === void 0 ? void 0 : option.prepend) && (0, _react2.jsx)("span", {
-    className: "".concat(classNamePrefix, "__prepend")
-  }, option.prepend), children, (option === null || option === void 0 ? void 0 : option.append) && (0, _react2.jsx)("span", {
-    className: "".concat(classNamePrefix, "__append")
+    classNamePrefix = _ref.classNamePrefix,
+    _ref$marginSize = _ref.marginSize,
+    marginSize = _ref$marginSize === void 0 ? 'xs' : _ref$marginSize;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var margin = euiTheme.size[marginSize];
+  return (0, _react.jsx)(_react2.default.Fragment, null, (option === null || option === void 0 ? void 0 : option.prepend) && (0, _react.jsx)("span", {
+    className: "".concat(classNamePrefix, "__prepend"),
+    css: /*#__PURE__*/(0, _react.css)(_objectSpread(_objectSpread({}, (0, _global_styling.logicalStyle)('margin-right', margin)), centerIcons), ";label:EuiComboBoxOptionAppendPrepend;")
+  }, option.prepend), children, (option === null || option === void 0 ? void 0 : option.append) && (0, _react.jsx)("span", {
+    className: "".concat(classNamePrefix, "__append"),
+    css: /*#__PURE__*/(0, _react.css)(_objectSpread(_objectSpread({}, (0, _global_styling.logicalStyle)('margin-left', margin)), centerIcons), ";label:EuiComboBoxOptionAppendPrepend;")
   }, option.append));
+};
+
+// Fix vertical alignment of EuiIcons in prepend/append nodes
+var centerIcons = {
+  '.euiIcon': {
+    display: 'block'
+  }
 };

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

@@ -17,10 +17,9 @@ var _form = require("../../../form/form.styles");
 
 var euiQuickSelectPopoverStyles = exports.euiQuickSelectPopoverStyles = function euiQuickSelectPopoverStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
-    maxWidth = _euiFormVariables.maxWidth;
+  var formMaxWidth = (0, _form.euiFormMaxWidth)(euiThemeContext);
   return {
-    euiQuickSelectPopover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', maxWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiQuickSelectPopover;"),
+    euiQuickSelectPopover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', formMaxWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:euiQuickSelectPopover;"),
     euiQuickSelectPopoverButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-right-radius', 0), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 0), ".euiIcon{", (0, _global_styling.logicalCSS)('width', euiTheme.size.base), ";};label:euiQuickSelectPopoverButton;"),
     euiQuickSelectPopoverButton__content: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:euiQuickSelectPopoverButton__content;")
   };

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

@@ -61,7 +61,7 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
 };
 var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
   var euiTheme = euiThemeContext.euiTheme;
-  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  var formMaxWidth = (0, _form.euiFormMaxWidth)(euiThemeContext);
 
   // 1. Calculating the minimum width based on the screen takeover breakpoint
   var flyoutSizes = {
@@ -73,7 +73,7 @@ var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
     },
     m: {
       // Calculated for forms plus padding
-      min: "".concat((0, _global_styling.mathWithUnits)(form.maxWidth, function (x) {
+      min: "".concat((0, _global_styling.mathWithUnits)(formMaxWidth, function (x) {
         return x + 24;
       })),
       width: '50vw',

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.euiCustomControl = void 0;
+exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.euiCustomControl = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
@@ -17,6 +17,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+// There are multiple components that only need the form max-width size &
+// don't need the extra overhead/color computing expense of every form var.
+// For microperf, we're making this its own util
+var euiFormMaxWidth = exports.euiFormMaxWidth = function euiFormMaxWidth(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+    return x * 25;
+  });
+};
 var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
@@ -25,9 +34,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
   var controlHeight = euiTheme.size.xxl;
   var controlCompressedHeight = euiTheme.size.xl;
   var sizes = {
-    maxWidth: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-      return x * 25;
-    }),
+    maxWidth: euiFormMaxWidth(euiThemeContext),
     controlHeight: controlHeight,
     controlCompressedHeight: controlCompressedHeight,
     controlPadding: euiTheme.size.m,
@@ -136,13 +143,13 @@ var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function
   var form = euiFormVariables(euiThemeContext);
   return "\n    /* We use inset box-shadow instead of border to skip extra hight calculations */\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n    background-color: ").concat(form.backgroundColor, ";\n\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ").concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition:\n        box-shadow ").concat(form.animationTiming, ",\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ");
 };
-var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref) {
-  var euiTheme = _ref.euiTheme,
-    colorMode = _ref.colorMode;
+var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme,
+    colorMode = _ref2.colorMode;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
 };
-var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {

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

@@ -32,14 +32,14 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var euiListGroupStyles = exports.euiListGroupStyles = function euiListGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var form = (0, _form.euiFormVariables)(euiThemeContext);
+  var formMaxWidth = (0, _form.euiFormMaxWidth)(euiThemeContext);
   return {
     // Base
     euiListGroup: _ref2,
     // Variants
     flush: _ref,
     bordered: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.thin, ";;label:bordered;"),
-    maxWidthDefault: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";;label:maxWidthDefault;"),
+    maxWidthDefault: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', formMaxWidth), ";;label:maxWidthDefault;"),
     // Gutter sizes
     none: /*#__PURE__*/(0, _react.css)(";label:none;"),
     s: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";gap:", euiTheme.size.s, ";;label:s;"),

package/optimize/lib/components/popover/input_popover.js

@@ -67,7 +67,7 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiInputPopover', className);
   var euiTheme = (0, _services.useEuiTheme)();
-  var form = (0, _form.euiFormVariables)(euiTheme);
+  var formMaxWidth = (0, _form.euiFormMaxWidth)(euiTheme);
 
   /**
    * Ref setup
@@ -187,7 +187,7 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
   }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     className: classes,
-    css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
+    css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', formMaxWidth), ";label:EuiInputPopover;"),
     display: display,
     button: input,
     popoverRef: inputRef,

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

@@ -16,9 +16,7 @@ var _form = require("../form/form.styles");
  */
 
 var euiSearchBar__searchHolder = exports.euiSearchBar__searchHolder = function euiSearchBar__searchHolder(euiThemeContext) {
-  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
-    maxWidth = _euiFormVariables.maxWidth;
-  return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(maxWidth, function (x) {
+  return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)((0, _form.euiFormMaxWidth)(euiThemeContext), function (x) {
     return x / 2;
   })), ";;label:euiSearchBar__searchHolder;");
 };

package/optimize/lib/components/selectable/selectable.js

@@ -17,15 +17,16 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _selectable_search = require("./selectable_search");
-var _selectable_message = require("./selectable_message");
-var _selectable_list = require("./selectable_list");
+var _services = require("../../services");
 var _loading = require("../loading");
 var _spacer = require("../spacer");
-var _matching_options = require("./matching_options");
-var _services = require("../../services");
 var _accessibility = require("../accessibility");
 var _i18n = require("../i18n");
+var _selectable_search = require("./selectable_search");
+var _selectable_message = require("./selectable_message");
+var _selectable_list = require("./selectable_list");
+var _matching_options = require("./matching_options");
+var _selectable = require("./selectable.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "options", "onChange", "onActiveOptionChange", "searchable", "searchProps", "singleSelection", "isLoading", "listProps", "renderOption", "height", "allowExclusions", "aria-label", "aria-describedby", "loadingMessage", "noMatchesMessage", "emptyMessage", "errorMessage", "selectableScreenReaderText", "isPreFiltered", "optionMatcher"],
   _excluded2 = ["aria-label", "aria-describedby", "onChange", "defaultValue", "inputRef"],
@@ -359,9 +360,8 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
           rowHeight: rowHeight
         };
       }
-      var classes = (0, _classnames.default)('euiSelectable', {
-        'euiSelectable-fullHeight': height === 'full'
-      }, className);
+      var classes = (0, _classnames.default)('euiSelectable', className);
+      var cssStyles = [_selectable.euiSelectableStyles.euiSelectable, height === 'full' && _selectable.euiSelectableStyles.fullHeight];
 
       /** Create message content that replaces the list if no options are available (yet) */
       var messageContent;
@@ -528,6 +528,7 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
       });
       return (0, _react2.jsx)("div", (0, _extends2.default)({
         ref: this.containerRef,
+        css: cssStyles,
         className: classes,
         onKeyDown: this.onKeyDown,
         onBlur: this.onContainerBlur,

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSelectableStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+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 euiSelectableStyles = exports.euiSelectableStyles = {
+  euiSelectable: process.env.NODE_ENV === "production" ? {
+    name: "1sd0qv-euiSelectable",
+    styles: "display:flex;flex-direction:column;label:euiSelectable;"
+  } : {
+    name: "1sd0qv-euiSelectable",
+    styles: "display:flex;flex-direction:column;label:euiSelectable;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  fullHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), ";;label:fullHeight;")
+};