@elastic/eui 95.6.0 → 95.7.0

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

@@ -18,18 +18,20 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"],
@@ -128,7 +130,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));
@@ -186,6 +189,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,
@@ -304,31 +308,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/test-env/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/test-env/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/test-env/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/test-env/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/test-env/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/test-env/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/test-env/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/test-env/components/popover/input_popover.js

@@ -68,7 +68,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
@@ -188,7 +188,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/test-env/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/test-env/components/selectable/selectable.js

@@ -18,15 +18,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"],
@@ -360,9 +361,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;
@@ -529,6 +529,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/test-env/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;")
+};

package/test-env/components/selectable/selectable_list/selectable_list.js

@@ -19,11 +19,13 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactWindow = require("react-window");
+var _services = require("../../../services");
 var _auto_sizer = require("../../auto_sizer");
 var _highlight = require("../../highlight");
 var _mark = require("../../mark");
 var _text_truncate = require("../../text_truncate");
 var _selectable_list_item = require("./selectable_list_item");
+var _selectable_list = require("./selectable_list.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["data"],
   _excluded2 = ["label", "isGroupLabel", "checked", "disabled", "prepend", "append", "ref", "key", "searchableLabel", "data", "truncationProps"],
@@ -140,12 +142,15 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         isPreFiltered = _this$props2.isPreFiltered,
         isVirtualized = _this$props2.isVirtualized;
       if (isGroupLabel) {
-        return (0, _react2.jsx)("li", (0, _extends2.default)({
-          role: "presentation",
-          className: "euiSelectableList__groupLabel",
-          style: style
-          // @ts-ignore complex
-        }, optionRest), prepend, label, append);
+        return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+          var styles = stylesMemoizer(_selectable_list.euiSelectableListStyles);
+          return (0, _react2.jsx)("li", (0, _extends2.default)({
+            role: "presentation",
+            css: styles.euiSelectableList__groupLabel,
+            className: "euiSelectableList__groupLabel",
+            style: style
+          }, optionRest), prepend, label, append);
+        });
       }
       var id = makeOptionId(index);
       var isFocused = activeOptionIndex === index;
@@ -186,10 +191,11 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         paddingSize: paddingSize,
         searchable: searchable,
         textWrap: textWrap
+        // @ts-ignore complex
       }, optionRest), renderOption ? renderOption( // @ts-ignore complex
       _objectSpread(_objectSpread({}, _option), optionData), searchValue) : highlightSearch ? _this.renderSearchedText(label, truncationProps) : truncationProps ? _this.renderTruncatedText(label, truncationProps) : label);
     }, _reactWindow.areEqual));
-    (0, _defineProperty2.default)(_this, "renderVirtualizedList", function () {
+    (0, _defineProperty2.default)(_this, "renderVirtualizedList", function (listClasses) {
       if (!_this.props.isVirtualized) return null;
       var _this$state = _this.state,
         optionArray = _this$state.optionArray,
@@ -200,7 +206,7 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         rowHeight = _this$props3.rowHeight;
       var heightIsFull = forcedHeight === 'full';
       var virtualizationProps = _objectSpread({
-        className: 'euiSelectableList__list',
+        className: listClasses,
         ref: _this.setListRef,
         outerRef: _this.removeScrollableTabStop,
         innerRef: _this.setListBoxRef,
@@ -540,27 +546,30 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         truncationProps = _this$props11.truncationProps,
         rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded3);
       var heightIsFull = forcedHeight === 'full';
-      var classes = (0, _classnames.default)('euiSelectableList', {
-        'euiSelectableList-fullHeight': heightIsFull,
-        'euiSelectableList-bordered': bordered
-      }, className);
-      return (0, _react2.jsx)("div", (0, _extends2.default)({
-        className: classes
-      }, rest), isVirtualized ? this.renderVirtualizedList() : (0, _react2.jsx)("div", {
-        className: "euiSelectableList__list",
-        style: !heightIsFull ? {
-          blockSize: forcedHeight
-        } : undefined,
-        ref: this.removeScrollableTabStop
-      }, (0, _react2.jsx)("ul", {
-        ref: this.setListBoxRef
-      }, this.state.optionArray.map(function (_, index) {
-        return /*#__PURE__*/_react.default.createElement(_this2.ListRow, {
-          key: "".concat(index, "-").concat(_this2.listRowRerender),
-          data: _this2.state.optionArray,
-          index: index
-        }, null);
-      }))));
+      var classes = (0, _classnames.default)('euiSelectableList', className);
+      return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(_selectable_list.euiSelectableListStyles);
+        var cssStyles = [styles.euiSelectableList, heightIsFull && styles.fullHeight, bordered && styles.bordered];
+        var listClasses = (0, _classnames.default)('euiSelectableList__list', styles.euiSelectableList__list);
+        return (0, _react2.jsx)("div", (0, _extends2.default)({
+          css: cssStyles,
+          className: classes
+        }, rest), isVirtualized ? _this2.renderVirtualizedList(listClasses) : (0, _react2.jsx)("div", {
+          className: listClasses,
+          style: !heightIsFull ? {
+            blockSize: forcedHeight
+          } : undefined,
+          ref: _this2.removeScrollableTabStop
+        }, (0, _react2.jsx)("ul", {
+          ref: _this2.setListBoxRef
+        }, _this2.state.optionArray.map(function (_, index) {
+          return /*#__PURE__*/_react.default.createElement(_this2.ListRow, {
+            key: "".concat(index, "-").concat(_this2.listRowRerender),
+            data: _this2.state.optionArray,
+            index: index
+          }, null);
+        }))));
+      });
     }
   }]);
 }(_react.Component);

package/test-env/components/selectable/selectable_list/selectable_list.styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiSelectableListStyles = void 0;
+var _react = require("@emotion/react");
+var _css = require("@emotion/css");
+var _global_styling = require("../../../global_styling");
+var _title = require("../../title/title.styles");
+var _selectable_list_item = require("./selectable_list_item.styles");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */ // .euiSelectableList__list requires a static vanilla className
+// as it's passed down to react-window's virtualization library
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1giu8j5-fullHeight",
+  styles: "flex-grow:1;label:fullHeight;"
+} : {
+  name: "1giu8j5-fullHeight",
+  styles: "flex-grow:1;label:fullHeight;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiSelectableListStyles = exports.euiSelectableListStyles = function euiSelectableListStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var itemVars = (0, _selectable_list_item.euiSelectableListItemVariables)(euiThemeContext);
+  return {
+    euiSelectableList: /*#__PURE__*/(0, _react.css)("&:has(:focus-visible){", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), ";};label:euiSelectableList;"),
+    fullHeight: _ref,
+    bordered: /*#__PURE__*/(0, _react.css)("overflow:hidden;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";;label:bordered;"),
+    euiSelectableList__list: /*#__PURE__*/(0, _css.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), " &:focus,&>ul:focus{outline:none;};label:euiSelectableList__list;"),
+    euiSelectableList__groupLabel: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxxs'), " display:flex;align-items:center;", (0, _global_styling.logicalCSS)('border-bottom', itemVars.border), " ", (0, _global_styling.logicalCSS)('padding-vertical', itemVars.paddingVertical), " ", (0, _global_styling.logicalCSS)('padding-horizontal', itemVars.paddingHorizontal), ";;label:euiSelectableList__groupLabel;")
+  };
+};