@elastic/eui 90.0.0 → 91.1.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,106 @@ 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;
+      _this.setState({
+        defaultOptionWidth: containerWidth - 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 +353,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 +375,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 +391,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 +405,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);
       }))));
@@ -455,6 +578,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 +645,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 +679,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_templates/selectable_template_sitewide.js

@@ -23,7 +23,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { useCombinedRefs, useCurrentEuiBreakpoint } from '../../../services';
@@ -77,9 +77,11 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     setPopoverIsOpen(false);
     _closePopover && _closePopover();
   };
-  var togglePopover = function togglePopover() {
-    setPopoverIsOpen(!popoverIsOpen);
-  };
+  var togglePopover = useCallback(function () {
+    setPopoverIsOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
 
   // Width applied to the internal div
   var popoverWidth = width || 600;
@@ -154,16 +156,16 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
     if (!currentBreakpoint) return false;
     return popoverButtonBreakpoints.includes(currentBreakpoint);
   }, [currentBreakpoint, popoverButtonBreakpoints]);
-  var popoverTrigger;
-  if (popoverButton && canShowPopoverButton) {
-    popoverTrigger = /*#__PURE__*/React.cloneElement(popoverButton, _objectSpread(_objectSpread({}, popoverButton.props), {}, {
+  var popoverTrigger = useMemo(function () {
+    if (!popoverButton || !canShowPopoverButton) return;
+    return ___EmotionJSX("span", {
+      className: "euiSelectableTemplateSitewide__popoverTrigger",
       onClick: togglePopover,
       onKeyDown: function onKeyDown(e) {
-        // Selectable preventsDefault on Enter which kills browser controls for pressing the button
-        e.stopPropagation();
+        return e.stopPropagation();
       }
-    }));
-  }
+    }, popoverButton);
+  }, [popoverButton, canShowPopoverButton, togglePopover]);
   return ___EmotionJSX(EuiSelectable, _extends({
     isLoading: isLoading,
     options: formattedOptions,
@@ -383,7 +385,22 @@ EuiSelectableTemplateSitewide.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,
   /**
      * Override some of the EuiPopover props housing the list.

package/es/components/text/text.styles.js

@@ -54,7 +54,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = mathWithUnits(fontSize, function (x) {
     return x / 4;
   });
-  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    img,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(
+  return "\n    font-size: ".concat(fontSize, ";\n    line-height: ").concat(lineHeight, ";\n\n    h1 {\n      font-size: ").concat(headings.h1.fontSize, ";\n      line-height: ").concat(headings.h1.lineHeight, ";\n    }\n    h1:not(:last-child) {\n      ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n    }\n\n    h2 {\n      font-size: ").concat(headings.h2.fontSize, ";\n      line-height: ").concat(headings.h2.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h3 {\n      font-size: ").concat(headings.h3.fontSize, ";\n      line-height: ").concat(headings.h3.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h4 {\n      font-size: ").concat(headings.h4.fontSize, ";\n      line-height: ").concat(headings.h4.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h5 {\n      font-size: ").concat(headings.h5.fontSize, ";\n      line-height: ").concat(headings.h5.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    h6 {\n      font-size: ").concat(headings.h6.fontSize, ";\n      line-height: ").concat(headings.h6.lineHeight, ";\n\n      &:not(:first-child) {\n        ").concat(logicalCSS('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat(logicalCSS('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat(logicalCSS('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat(logicalCSS('margin-left', lineHeightSize), "\n    }\n\n    /* The styles of the nested ordered lists follow the style of GitHub\n       which is commonly used in Markdown or MDX formatting. */\n    ol ol,\n    ul ol {\n      list-style-type: lower-roman;\n    }\n\n    ul ul ol,\n    ul ol ol,\n    ol ul ol,\n    ol ol ol {\n      list-style-type: lower-alpha;\n    }\n  \n    blockquote {\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    dt,\n    .eui-definitionListReverse dd {\n      font-size: ").concat(fontSize, ";\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .eui-definitionListReverse dt {\n      font-size: ").concat(euiFontSize(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat(euiFontSize(euiThemeContext, 's', options).fontSize, ";\n    }\n\n    pre:not(.euiCodeBlock__pre) {\n      padding: ").concat(lineHeightSize, ";\n    }\n\n    code:not(.euiCode):not(.euiCodeBlock__code)  {\n      font-size: .9em; /* 90% of parent font size */\n    }\n    ").concat(
   // when textSize is 'm', the 'kbd' element gets a line between the text and the border-bottom
   _customScale === 'm' ? "\n    kbd {\n      ".concat(logicalCSS('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat(logicalCSS('min-width', euiTheme.size.l), "\n      ").concat(logicalTextAlignCSS('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat(logicalCSS('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat(logicalCSS('bottom', euiTheme.size.xxs), "\n      ").concat(logicalCSS('left', 0), "\n      ").concat(logicalCSS('width', '100%'), "\n    }") : '', "\n  ");
 };
@@ -65,7 +65,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), "clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote{border-inline-start-color:", euiTheme.border.color, ";border-inline-start-style:solid;}blockquote:not(.euiMarkdownFormat__blockquote){color:", euiTheme.colors.subduedText, ";}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),