@elastic/eui 91.0.0 → 91.2.0

package/es/components/selectable/selectable_list/selectable_list.js

@@ -1,6 +1,6 @@
 var _excluded = ["data"],
-  _excluded2 = ["label", "isGroupLabel", "checked", "disabled", "prepend", "append", "ref", "key", "searchableLabel", "data"],
-  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isVirtualized", "textWrap"];
+  _excluded2 = ["label", "isGroupLabel", "checked", "disabled", "prepend", "append", "ref", "key", "searchableLabel", "data", "truncationProps"],
+  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isVirtualized", "textWrap", "truncationProps"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -34,6 +34,8 @@ import classNames from 'classnames';
 import { FixedSizeList, areEqual } from 'react-window';
 import { EuiAutoSizer } from '../../auto_sizer';
 import { EuiHighlight } from '../../highlight';
+import { EuiMark } from '../../mark';
+import { EuiTextTruncate } from '../../text_truncate';
 import { EuiSelectableListItem } from './selectable_list_item';
 
 // Consumer Configurable Props via `EuiSelectable.listProps`
@@ -88,20 +90,23 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "ariaSetSize", 0);
-    _defineProperty(_assertThisInitialized(_this), "ariaPosInSetMap", {});
+    // This utility is necessary to exclude group labels from the aria set count
     _defineProperty(_assertThisInitialized(_this), "calculateAriaSetAttrs", function (optionArray) {
-      _this.ariaPosInSetMap = {};
+      var ariaPosInSetMap = {};
       var latestAriaPosIndex = 0;
       optionArray.forEach(function (option, index) {
         if (!option.isGroupLabel) {
           latestAriaPosIndex++;
-          _this.ariaPosInSetMap[index] = latestAriaPosIndex;
+          ariaPosInSetMap[index] = latestAriaPosIndex;
         }
       });
-      _this.ariaSetSize = latestAriaPosIndex;
+      return {
+        ariaPosInSetMap: ariaPosInSetMap,
+        ariaSetSize: latestAriaPosIndex
+      };
     });
     _defineProperty(_assertThisInitialized(_this), "ListRow", /*#__PURE__*/memo(function (_ref) {
+      var _option$textWrap;
       var data = _ref.data,
         index = _ref.index,
         style = _ref.style;
@@ -118,19 +123,20 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         key = option.key,
         searchableLabel = option.searchableLabel,
         _data = option.data,
+        _truncationProps = option.truncationProps,
         optionRest = _objectWithoutProperties(option, _excluded2);
       var _this$props2 = _this.props,
         activeOptionIndex = _this$props2.activeOptionIndex,
         allowExclusions = _this$props2.allowExclusions,
         onFocusBadge = _this$props2.onFocusBadge,
         paddingSize = _this$props2.paddingSize,
-        searchValue = _this$props2.searchValue,
         showIcons = _this$props2.showIcons,
         makeOptionId = _this$props2.makeOptionId,
         renderOption = _this$props2.renderOption,
         setActiveOptionIndex = _this$props2.setActiveOptionIndex,
         searchable = _this$props2.searchable,
-        textWrap = _this$props2.textWrap;
+        searchValue = _this$props2.searchValue,
+        isVirtualized = _this$props2.isVirtualized;
       if (isGroupLabel) {
         return ___EmotionJSX("li", _extends({
           role: "presentation",
@@ -140,6 +146,15 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, optionRest), prepend, label, append);
       }
       var id = makeOptionId(index);
+      var isFocused = activeOptionIndex === index;
+
+      // Text wrapping
+      var canWrap = !isVirtualized;
+      var _textWrap = (_option$textWrap = option.textWrap) !== null && _option$textWrap !== void 0 ? _option$textWrap : _this.props.textWrap;
+      var textWrap = canWrap ? _textWrap : 'truncate';
+
+      // Truncation config (if any). If none, CSS truncation is used
+      var truncationProps = textWrap === 'truncate' ? _this.getTruncationProps(option, isFocused) : undefined;
       return ___EmotionJSX(EuiSelectableListItem, _extends({
         key: id,
         id: id,
@@ -152,14 +167,14 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           _this.onAddOrRemoveOption(option, event);
         },
         ref: ref ? ref.bind(null, index) : undefined,
-        isFocused: activeOptionIndex === index,
+        isFocused: isFocused,
         title: searchableLabel || label,
         checked: checked,
         disabled: disabled,
         prepend: prepend,
         append: append,
-        "aria-posinset": _this.ariaPosInSetMap[index],
-        "aria-setsize": _this.ariaSetSize,
+        "aria-posinset": _this.state.ariaPosInSetMap[index],
+        "aria-setsize": _this.state.ariaSetSize,
         onFocusBadge: onFocusBadge,
         allowExclusions: allowExclusions,
         showIcons: showIcons,
@@ -167,16 +182,18 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         searchable: searchable,
         textWrap: textWrap
       }, optionRest), renderOption ? renderOption( // @ts-ignore complex
-      _objectSpread(_objectSpread({}, _option), optionData), _this.props.searchValue) : ___EmotionJSX(EuiHighlight, {
-        search: searchValue
-      }, label));
+      _objectSpread(_objectSpread({}, _option), optionData), searchValue) : searchValue ? _this.renderSearchedText(label, truncationProps) : truncationProps ? _this.renderTruncatedText(label, truncationProps) : label);
     }, areEqual));
-    _defineProperty(_assertThisInitialized(_this), "renderVirtualizedList", function (heightIsFull, optionArray) {
+    _defineProperty(_assertThisInitialized(_this), "renderVirtualizedList", function () {
       if (!_this.props.isVirtualized) return null;
+      var _this$state = _this.state,
+        optionArray = _this$state.optionArray,
+        itemData = _this$state.itemData;
       var _this$props3 = _this.props,
         windowProps = _this$props3.windowProps,
         forcedHeight = _this$props3.height,
         rowHeight = _this$props3.rowHeight;
+      var heightIsFull = forcedHeight === 'full';
       var virtualizationProps = _objectSpread({
         className: 'euiSelectableList__list',
         ref: _this.setListRef,
@@ -184,7 +201,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         innerRef: _this.setListBoxRef,
         innerElementType: 'ul',
         itemCount: optionArray.length,
-        itemData: optionArray,
+        itemData: itemData,
         itemSize: rowHeight,
         'data-skip-axe': 'scrollable-region-focusable'
       }, windowProps);
@@ -204,7 +221,9 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           calculatedHeight = numVisibleOptions * rowHeight;
         }
       }
-      return heightIsFull ? ___EmotionJSX(EuiAutoSizer, null, function (_ref2) {
+      return heightIsFull ? ___EmotionJSX(EuiAutoSizer, {
+        onResize: _this.calculateDefaultOptionWidth
+      }, function (_ref2) {
         var width = _ref2.width,
           height = _ref2.height;
         return ___EmotionJSX(FixedSizeList, _extends({
@@ -212,7 +231,8 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
           height: height
         }, virtualizationProps), _this.ListRow);
       }) : ___EmotionJSX(EuiAutoSizer, {
-        disableHeight: true
+        disableHeight: true,
+        onResize: _this.calculateDefaultOptionWidth
       }, function (_ref3) {
         var width = _ref3.width;
         return ___EmotionJSX(FixedSizeList, _extends({
@@ -221,17 +241,111 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, virtualizationProps), _this.ListRow);
       });
     });
+    _defineProperty(_assertThisInitialized(_this), "forceVirtualizedListRowRerender", function () {
+      _this.setState({
+        itemData: _objectSpread({}, _this.state.optionArray)
+      });
+    });
+    // EuiTextTruncate is expensive perf-wise - we use several utilities here to
+    // offset its performance cost
+    // and creates a resize observer for
+    // each individual item. This logic tries to offset this performance hit by
+    // guesstimating a default width for each option
+    _defineProperty(_assertThisInitialized(_this), "focusBadgeOffset", 0);
+    _defineProperty(_assertThisInitialized(_this), "calculateDefaultOptionWidth", function (_ref4) {
+      var containerWidth = _ref4.width;
+      var _this$props4 = _this.props,
+        truncationProps = _this$props4.truncationProps,
+        searchable = _this$props4.searchable,
+        searchValue = _this$props4.searchValue;
+
+      // If it's not likely we'll need to use EuiTextTruncate, don't set state/rerender on every panel resize
+      var mayTruncate = searchable || truncationProps;
+      if (!mayTruncate) return;
+      var paddingOffset = _this.props.paddingSize === 'none' ? 0 : 24; // Defaults to 's'
+      var checkedIconOffset = _this.props.showIcons === false ? 0 : 28; // Defaults to true
+      _this.focusBadgeOffset = _this.props.onFocusBadge === false ? 0 : 46;
+
+      // Wait a tick for the listbox ref to update before proceeding
+      requestAnimationFrame(function () {
+        var scrollbarOffset = _this.listBoxRef ? containerWidth - _this.listBoxRef.offsetWidth : 0;
+        _this.setState({
+          defaultOptionWidth: containerWidth - scrollbarOffset - paddingOffset - checkedIconOffset
+        });
+
+        // Potentially force list rows to rerender on dynamic resize as well,
+        // but try to do it as lightly as possible
+        if (truncationProps || searchable && searchValue) {
+          _this.forceVirtualizedListRowRerender();
+        }
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "getTruncationProps", function (option, isFocused) {
+      // Individual truncation settings should override component-wide settings
+      var truncationProps = _objectSpread(_objectSpread({}, _this.props.truncationProps), option.truncationProps);
+
+      // If we're not actually using EuiTextTruncate, no need to continue
+      var hasComplexTruncation = _this.props.searchValue || Object.keys(truncationProps).length > 0;
+      if (!hasComplexTruncation) return undefined;
+
+      // Determine whether we can use the optimized default option width
+      var defaultOptionWidth = _this.state.defaultOptionWidth;
+      var useDefaultWidth = !option.append && !option.prepend;
+      var defaultWidth = useDefaultWidth && defaultOptionWidth ? isFocused ? defaultOptionWidth - _this.focusBadgeOffset : defaultOptionWidth : undefined;
+      return _objectSpread({
+        width: defaultWidth
+      }, truncationProps);
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderSearchedText", function (text, truncationProps) {
+      var searchValue = _this.props.searchValue;
+
+      // If truncationProps is undefined, we're using non-virtualized text wrapping
+      if (!truncationProps) {
+        return ___EmotionJSX(EuiHighlight, {
+          search: searchValue
+        }, text);
+      }
+      var searchPositionStart = text.toLowerCase().indexOf(searchValue.toLowerCase());
+      var searchPositionCenter = searchPositionStart + Math.floor(searchValue.length / 2);
+      return ___EmotionJSX(EuiTextTruncate, _extends({}, truncationProps, {
+        // When searching, don't allow overriding the truncation settings
+        truncation: "startEnd",
+        truncationPosition: searchPositionCenter,
+        text: text
+      }), function (text) {
+        return ___EmotionJSX(React.Fragment, null, text.length >= searchValue.length ? ___EmotionJSX(EuiHighlight, {
+          search: searchValue
+        }, text) :
+        // If the available truncated text is shorter than the full search string,
+        // just highlight the entire truncated text
+        ___EmotionJSX(EuiMark, null, text));
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "renderTruncatedText", function (text, truncationProps) {
+      return (
+        // For some bizarre reason, truncation in EuiSelectable is off on initial mount
+        // (but not on rerender) for Safari and _some_ truncation types in Firefox :|
+        // Waiting a tick before calculating truncation seems to smooth over the issue
+        ___EmotionJSX(EuiTextTruncate, _extends({
+          calculationDelayMs: 2
+        }, truncationProps, {
+          text: text
+        }), function (text) {
+          return text;
+        })
+      );
+    });
     _defineProperty(_assertThisInitialized(_this), "onAddOrRemoveOption", function (option, event) {
       if (option.disabled) {
         return;
       }
-      var _this$props4 = _this.props,
-        allowExclusions = _this$props4.allowExclusions,
-        options = _this$props4.options,
-        _this$props4$visibleO = _this$props4.visibleOptions,
-        visibleOptions = _this$props4$visibleO === void 0 ? options : _this$props4$visibleO;
-      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref4) {
-        var label = _ref4.label;
+      var _this$props5 = _this.props,
+        allowExclusions = _this$props5.allowExclusions,
+        options = _this$props5.options,
+        _this$props5$visibleO = _this$props5.visibleOptions,
+        visibleOptions = _this$props5$visibleO === void 0 ? options : _this$props5$visibleO;
+      _this.props.setActiveOptionIndex(visibleOptions.findIndex(function (_ref5) {
+        var label = _ref5.label;
         return label === option.label;
       }), function () {
         if (option.checked === 'on' && allowExclusions) {
@@ -244,10 +358,10 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onAddOption", function (addedOption, event) {
-      var _this$props5 = _this.props,
-        onOptionClick = _this$props5.onOptionClick,
-        options = _this$props5.options,
-        singleSelection = _this$props5.singleSelection;
+      var _this$props6 = _this.props,
+        onOptionClick = _this$props6.onOptionClick,
+        options = _this$props6.options,
+        singleSelection = _this$props6.singleSelection;
       var changedOption = _objectSpread({}, addedOption);
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
@@ -266,10 +380,10 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     _defineProperty(_assertThisInitialized(_this), "onRemoveOption", function (removedOption, event) {
-      var _this$props6 = _this.props,
-        onOptionClick = _this$props6.onOptionClick,
-        singleSelection = _this$props6.singleSelection,
-        options = _this$props6.options;
+      var _this$props7 = _this.props,
+        onOptionClick = _this$props7.onOptionClick,
+        singleSelection = _this$props7.singleSelection,
+        options = _this$props7.options;
       var changedOption = _objectSpread({}, removedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -282,9 +396,9 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     _defineProperty(_assertThisInitialized(_this), "onExcludeOption", function (excludedOption, event) {
-      var _this$props7 = _this.props,
-        onOptionClick = _this$props7.onOptionClick,
-        options = _this$props7.options;
+      var _this$props8 = _this.props,
+        onOptionClick = _this$props8.onOptionClick,
+        options = _this$props8.options;
       var changedOption = _objectSpread({}, excludedOption);
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
@@ -296,69 +410,83 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
       });
       onOptionClick(updatedOptions, event, changedOption);
     });
+    var _optionArray = props.visibleOptions || props.options;
+    _this.state = _objectSpread({
+      defaultOptionWidth: 0,
+      optionArray: _optionArray,
+      itemData: _objectSpread({}, _optionArray)
+    }, _this.calculateAriaSetAttrs(_optionArray));
     return _this;
   }
   _createClass(EuiSelectableList, [{
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var activeOptionIndex = this.props.activeOptionIndex;
+    value: function componentDidUpdate(prevProps) {
+      var _this$props9 = this.props,
+        activeOptionIndex = _this$props9.activeOptionIndex,
+        visibleOptions = _this$props9.visibleOptions,
+        options = _this$props9.options;
       if (this.listBoxRef && this.props.searchable !== true) {
         this.listBoxRef.setAttribute('aria-activedescendant', "".concat(this.props.makeOptionId(activeOptionIndex)));
       }
-      if (this.listRef && typeof this.props.activeOptionIndex !== 'undefined') {
-        this.listRef.scrollToItem(this.props.activeOptionIndex, 'auto');
+      if (this.listRef && typeof activeOptionIndex !== 'undefined') {
+        this.listRef.scrollToItem(activeOptionIndex, 'auto');
+      }
+      if (prevProps.visibleOptions !== visibleOptions || prevProps.options !== options) {
+        var optionArray = visibleOptions || options;
+        this.setState(_objectSpread({
+          optionArray: optionArray,
+          itemData: _objectSpread({}, optionArray)
+        }, this.calculateAriaSetAttrs(optionArray)));
       }
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props8 = this.props,
-        className = _this$props8.className,
-        options = _this$props8.options,
-        searchValue = _this$props8.searchValue,
-        onOptionClick = _this$props8.onOptionClick,
-        renderOption = _this$props8.renderOption,
-        forcedHeight = _this$props8.height,
-        windowProps = _this$props8.windowProps,
-        rowHeight = _this$props8.rowHeight,
-        activeOptionIndex = _this$props8.activeOptionIndex,
-        makeOptionId = _this$props8.makeOptionId,
-        showIcons = _this$props8.showIcons,
-        singleSelection = _this$props8.singleSelection,
-        visibleOptions = _this$props8.visibleOptions,
-        allowExclusions = _this$props8.allowExclusions,
-        bordered = _this$props8.bordered,
-        paddingSize = _this$props8.paddingSize,
-        searchable = _this$props8.searchable,
-        onFocusBadge = _this$props8.onFocusBadge,
-        listId = _this$props8.listId,
-        setActiveOptionIndex = _this$props8.setActiveOptionIndex,
-        ariaLabel = _this$props8['aria-label'],
-        ariaLabelledby = _this$props8['aria-labelledby'],
-        ariaDescribedby = _this$props8['aria-describedby'],
-        role = _this$props8.role,
-        isVirtualized = _this$props8.isVirtualized,
-        textWrap = _this$props8.textWrap,
-        rest = _objectWithoutProperties(_this$props8, _excluded3);
-      var optionArray = visibleOptions || options;
-      this.calculateAriaSetAttrs(optionArray);
-      var heightIsFull = forcedHeight === 'full';
+      var _this$props10 = this.props,
+        className = _this$props10.className,
+        options = _this$props10.options,
+        searchValue = _this$props10.searchValue,
+        onOptionClick = _this$props10.onOptionClick,
+        renderOption = _this$props10.renderOption,
+        forcedHeight = _this$props10.height,
+        windowProps = _this$props10.windowProps,
+        rowHeight = _this$props10.rowHeight,
+        activeOptionIndex = _this$props10.activeOptionIndex,
+        makeOptionId = _this$props10.makeOptionId,
+        showIcons = _this$props10.showIcons,
+        singleSelection = _this$props10.singleSelection,
+        visibleOptions = _this$props10.visibleOptions,
+        allowExclusions = _this$props10.allowExclusions,
+        bordered = _this$props10.bordered,
+        paddingSize = _this$props10.paddingSize,
+        searchable = _this$props10.searchable,
+        onFocusBadge = _this$props10.onFocusBadge,
+        listId = _this$props10.listId,
+        setActiveOptionIndex = _this$props10.setActiveOptionIndex,
+        ariaLabel = _this$props10['aria-label'],
+        ariaLabelledby = _this$props10['aria-labelledby'],
+        ariaDescribedby = _this$props10['aria-describedby'],
+        role = _this$props10.role,
+        isVirtualized = _this$props10.isVirtualized,
+        textWrap = _this$props10.textWrap,
+        truncationProps = _this$props10.truncationProps,
+        rest = _objectWithoutProperties(_this$props10, _excluded3);
       var classes = classNames('euiSelectableList', {
-        'euiSelectableList-fullHeight': heightIsFull,
+        'euiSelectableList-fullHeight': forcedHeight === 'full',
         'euiSelectableList-bordered': bordered
       }, className);
       return ___EmotionJSX("div", _extends({
         className: classes
-      }, rest), isVirtualized ? this.renderVirtualizedList(heightIsFull, optionArray) : ___EmotionJSX("div", {
+      }, rest), isVirtualized ? this.renderVirtualizedList() : ___EmotionJSX("div", {
         className: "euiSelectableList__list",
         ref: this.removeScrollableTabStop
       }, ___EmotionJSX("ul", {
         ref: this.setListBoxRef
-      }, optionArray.map(function (_, index) {
+      }, this.state.optionArray.map(function (_, index) {
         return /*#__PURE__*/React.createElement(_this2.ListRow, {
           key: index,
-          data: optionArray,
+          data: _this2.state.optionArray,
           index: index
         }, null);
       }))));
@@ -405,7 +533,7 @@ EuiSelectableList.propTypes = {
     /**
        * Accepts any string from our icon library
        */
-    iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+    iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
     /**
        * The side of the badge the icon should sit
        */
@@ -455,6 +583,15 @@ EuiSelectableList.propTypes = {
        * Wrapping only works if virtualization is off.
        */
   textWrap: PropTypes.oneOf(["truncate", "wrap"]),
+  /**
+       * If textWrap is set to `truncate`, you can pass a custom truncation configuration
+       * that accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop except for
+       * `text` and `children`.
+       *
+       * Note: when searching, custom truncation props are ignored. The highlighted search
+       * text will always take precedence.
+       */
+  truncationProps: PropTypes.any,
   /**
        * Use virtualized rendering for list items with `react-window`.
        * Sets each row's height to the value of `rowHeight`.
@@ -513,7 +650,22 @@ EuiSelectableList.propTypes = {
        * Option data to pass through to the `renderOptions` element.
        * Bypass `EuiSelectableItem` and avoid DOM attribute warnings.
        */
-    data: PropTypes.shape({})
+    data: PropTypes.shape({}),
+    /**
+       * How to handle long text within the item.
+       * Wrapping only works if `isVirtualization` is false.
+       * @default 'truncate'
+       */
+    textWrap: PropTypes.oneOf(["truncate", "wrap"]),
+    /**
+       * If textWrap is set to `truncate`, you can pass a custom truncation configuration
+       * that accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop except for
+       * `text` and `children`.
+       *
+       * Note: when searching, custom truncation props are ignored. The highlighted search
+       * text will always take precedence.
+       */
+    truncationProps: PropTypes.any
   }).isRequired).isRequired,
   /**
      * Filtered options list (if applicable)
@@ -532,7 +684,9 @@ EuiSelectableList.propTypes = {
     prepend: PropTypes.node,
     append: PropTypes.node,
     ref: PropTypes.func,
-    data: PropTypes.shape({})
+    data: PropTypes.shape({}),
+    textWrap: PropTypes.oneOf(["truncate", "wrap"]),
+    truncationProps: PropTypes.any
   }).isRequired),
   /**
      * Search value to highlight on the option render

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

@@ -285,7 +285,7 @@ EuiSelectableListItem.propTypes = {
     /**
        * Accepts any string from our icon library
        */
-    iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
+    iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "pivot", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "alert", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
     /**
        * The side of the badge the icon should sit
        */