@elastic/eui 95.6.0 → 95.7.0

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

@@ -1,30 +1,50 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiComboBoxOptionAppendPrepend = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(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.
  */
-
 /**
  * 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/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/lib/components/flyout/flyout.styles.js

@@ -60,7 +60,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 = {
@@ -72,7 +72,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/lib/components/form/form.styles.js

@@ -3,7 +3,7 @@
 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 _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _mixins = require("../../themes/amsterdam/global_styling/mixins");
@@ -19,6 +19,15 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * 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;
@@ -27,9 +36,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,
@@ -138,13 +145,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/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/lib/components/popover/input_popover.js

@@ -76,7 +76,7 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
     props = _objectWithoutProperties(_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
@@ -196,7 +196,7 @@ var EuiInputPopover = exports.EuiInputPopover = function EuiInputPopover(_ref) {
   }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return (0, _react2.jsx)(_popover.EuiPopover, _extends({
     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/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/lib/components/selectable/selectable.js

@@ -7,15 +7,16 @@ exports.EuiSelectable = void 0;
 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"],
@@ -371,9 +372,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;
@@ -540,6 +540,7 @@ var EuiSelectable = exports.EuiSelectable = /*#__PURE__*/function (_Component) {
       });
       return (0, _react2.jsx)("div", _extends({
         ref: this.containerRef,
+        css: cssStyles,
         className: classes,
         onKeyDown: this.onKeyDown,
         onBlur: this.onContainerBlur,

package/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;")
+};

package/lib/components/selectable/selectable_list/selectable_list.js

@@ -8,11 +8,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"],
@@ -145,12 +147,15 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         isPreFiltered = _this$props2.isPreFiltered,
         isVirtualized = _this$props2.isVirtualized;
       if (isGroupLabel) {
-        return (0, _react2.jsx)("li", _extends({
-          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", _extends({
+            role: "presentation",
+            css: styles.euiSelectableList__groupLabel,
+            className: "euiSelectableList__groupLabel",
+            style: style
+          }, optionRest), prepend, label, append);
+        });
       }
       var id = makeOptionId(index);
       var isFocused = activeOptionIndex === index;
@@ -191,10 +196,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));
-    _defineProperty(_this, "renderVirtualizedList", function () {
+    _defineProperty(_this, "renderVirtualizedList", function (listClasses) {
       if (!_this.props.isVirtualized) return null;
       var _this$state = _this.state,
         optionArray = _this$state.optionArray,
@@ -205,7 +211,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,
@@ -545,27 +551,30 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         truncationProps = _this$props11.truncationProps,
         rest = _objectWithoutProperties(_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", _extends({
-        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", _extends({
+          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/lib/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;")
+  };
+};

package/lib/components/selectable/selectable_list/selectable_list_item.js

@@ -8,12 +8,13 @@ exports.PADDING_SIZES = exports.EuiSelectableListItem = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _common = require("../../common");
+var _services = require("../../../services");
 var _i18n = require("../../i18n");
 var _icon = require("../../icon");
 var _accessibility = require("../../accessibility");
 var _badge = require("../../badge");
 var _tool_tip = require("../../tool_tip");
+var _selectable_list_item = require("./selectable_list_item.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "disabled", "checked", "isFocused", "showIcons", "prepend", "append", "allowExclusions", "onFocusBadge", "paddingSize", "role", "searchable", "textWrap", "toolTipContent", "toolTipProps", "aria-describedby"],
   _excluded2 = ["children", "className"];
@@ -34,9 +35,6 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 function resolveIconAndColor(checked) {
@@ -63,11 +61,7 @@ function resolveIconAndColor(checked) {
       };
   }
 }
-var paddingSizeToClassNameMap = {
-  none: null,
-  s: 'euiSelectableListItem--paddingSmall'
-};
-var PADDING_SIZES = exports.PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
+var PADDING_SIZES = exports.PADDING_SIZES = ['none', 's'];
 var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectableListItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -94,27 +88,31 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiSelectableListItem', {
     'euiSelectableListItem-isFocused': isFocused
-  }, paddingSizeToClassNameMap[paddingSize], className);
-  var textClasses = (0, _classnames.default)('euiSelectableListItem__text', _defineProperty({}, "euiSelectableListItem__text--".concat(textWrap), textWrap));
+  }, className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_selectable_list_item.euiSelectableListItemStyles);
+  var cssStyles = [styles.euiSelectableListItem, styles.padding[paddingSize]];
+  var textStyles = [styles.euiSelectableListItem__text, styles.textWrap[textWrap]];
   var optionIcon = (0, _react.useMemo)(function () {
     if (showIcons) {
       var _resolveIconAndColor = resolveIconAndColor(checked),
         icon = _resolveIconAndColor.icon,
         color = _resolveIconAndColor.color;
       return (0, _react2.jsx)(_icon.EuiIcon, {
+        css: styles.euiSelectableListItem__icon,
         className: "euiSelectableListItem__icon",
         color: color,
         type: icon
       });
     }
-  }, [showIcons, checked]);
+  }, [showIcons, checked, styles]);
   var prependNode = (0, _react.useMemo)(function () {
     if (prepend) {
       return (0, _react2.jsx)("span", {
+        css: styles.euiSelectableListItem__prepend,
         className: "euiSelectableListItem__prepend"
       }, prepend);
     }
-  }, [prepend]);
+  }, [prepend, styles]);
   var onFocusBadgeNode = (0, _react.useMemo)(function () {
     var defaultOnFocusBadgeProps = {
       'aria-hidden': true,
@@ -139,10 +137,11 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
   var appendNode = (0, _react.useMemo)(function () {
     if (append || showOnFocusBadge) {
       return (0, _react2.jsx)("span", {
+        css: styles.euiSelectableListItem__append,
         className: "euiSelectableListItem__append"
       }, append, " ", showOnFocusBadge ? onFocusBadgeNode : null);
     }
-  }, [append, showOnFocusBadge, onFocusBadgeNode]);
+  }, [append, showOnFocusBadge, onFocusBadgeNode, styles]);
   var screenReaderText = (0, _react.useMemo)(function () {
     var state;
     var instructions;
@@ -263,9 +262,11 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
     }
   }, [tooltipRef, _ariaDescribedBy]);
   var content = (0, _react2.jsx)("span", {
+    css: styles.euiSelectableListItem__content,
     className: "euiSelectableListItem__content"
   }, optionIcon, prependNode, (0, _react2.jsx)("span", {
-    className: textClasses
+    css: textStyles,
+    className: "euiSelectableListItem__text"
   }, children, screenReaderText), appendNode);
   return (0, _react2.jsx)("li", _extends({
     role: role,
@@ -274,13 +275,14 @@ var EuiSelectableListItem = exports.EuiSelectableListItem = function EuiSelectab
     ,
     "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
     ,
+    css: cssStyles,
     className: classes
   }, rest, {
     "aria-describedby": ariaDescribedBy
   }), hasToolTip ? (0, _react2.jsx)(_tool_tip.EuiToolTip, _extends({
     ref: setTooltipRef,
     content: toolTipContent,
-    anchorClassName: "euiSelectableListItem__tooltipAnchor",
+    anchorClassName: "eui-fullWidth",
     position: "left"
   }, toolTipProps), content) : content);
 };