@elastic/eui 91.0.0 → 91.1.0

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

@@ -10,11 +10,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _reactWindow = require("react-window");
 var _auto_sizer = require("../../auto_sizer");
 var _highlight = require("../../highlight");
+var _mark = require("../../mark");
+var _text_truncate = require("../../text_truncate");
 var _selectable_list_item = require("./selectable_list_item");
 var _react2 = require("@emotion/react");
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -93,20 +95,23 @@ 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__*/(0, _react.memo)(function (_ref) {
+      var _option$textWrap;
       var data = _ref.data,
         index = _ref.index,
         style = _ref.style;
@@ -123,19 +128,20 @@ 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 (0, _react2.jsx)("li", _extends({
           role: "presentation",
@@ -145,6 +151,15 @@ 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 (0, _react2.jsx)(_selectable_list_item.EuiSelectableListItem, _extends({
         key: id,
         id: id,
@@ -157,14 +172,14 @@ 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,
@@ -172,16 +187,18 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         searchable: searchable,
         textWrap: textWrap
       }, optionRest), renderOption ? renderOption( // @ts-ignore complex
-      _objectSpread(_objectSpread({}, _option), optionData), _this.props.searchValue) : (0, _react2.jsx)(_highlight.EuiHighlight, {
-        search: searchValue
-      }, label));
+      _objectSpread(_objectSpread({}, _option), optionData), searchValue) : searchValue ? _this.renderSearchedText(label, truncationProps) : truncationProps ? _this.renderTruncatedText(label, truncationProps) : label);
     }, _reactWindow.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,
@@ -189,7 +206,7 @@ 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);
@@ -209,7 +226,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           calculatedHeight = numVisibleOptions * rowHeight;
         }
       }
-      return heightIsFull ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, null, function (_ref2) {
+      return heightIsFull ? (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
+        onResize: _this.calculateDefaultOptionWidth
+      }, function (_ref2) {
         var width = _ref2.width,
           height = _ref2.height;
         return (0, _react2.jsx)(_reactWindow.FixedSizeList, _extends({
@@ -217,7 +236,8 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           height: height
         }, virtualizationProps), _this.ListRow);
       }) : (0, _react2.jsx)(_auto_sizer.EuiAutoSizer, {
-        disableHeight: true
+        disableHeight: true,
+        onResize: _this.calculateDefaultOptionWidth
       }, function (_ref3) {
         var width = _ref3.width;
         return (0, _react2.jsx)(_reactWindow.FixedSizeList, _extends({
@@ -226,17 +246,106 @@ 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 (0, _react2.jsx)(_highlight.EuiHighlight, {
+          search: searchValue
+        }, text);
+      }
+      var searchPositionStart = text.toLowerCase().indexOf(searchValue.toLowerCase());
+      var searchPositionCenter = searchPositionStart + Math.floor(searchValue.length / 2);
+      return (0, _react2.jsx)(_text_truncate.EuiTextTruncate, _extends({}, truncationProps, {
+        // When searching, don't allow overriding the truncation settings
+        truncation: "startEnd",
+        truncationPosition: searchPositionCenter,
+        text: text
+      }), function (text) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, text.length >= searchValue.length ? (0, _react2.jsx)(_highlight.EuiHighlight, {
+          search: searchValue
+        }, text) :
+        // If the available truncated text is shorter than the full search string,
+        // just highlight the entire truncated text
+        (0, _react2.jsx)(_mark.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
+        (0, _react2.jsx)(_text_truncate.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) {
@@ -249,10 +358,10 @@ 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)
@@ -271,10 +380,10 @@ 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);
@@ -287,9 +396,9 @@ 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);
@@ -301,69 +410,83 @@ 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 = (0, _classnames.default)('euiSelectableList', {
-        'euiSelectableList-fullHeight': heightIsFull,
+        'euiSelectableList-fullHeight': forcedHeight === 'full',
         'euiSelectableList-bordered': bordered
       }, className);
       return (0, _react2.jsx)("div", _extends({
         className: classes
-      }, rest), isVirtualized ? this.renderVirtualizedList(heightIsFull, optionArray) : (0, _react2.jsx)("div", {
+      }, rest), isVirtualized ? this.renderVirtualizedList() : (0, _react2.jsx)("div", {
         className: "euiSelectableList__list",
         ref: this.removeScrollableTabStop
       }, (0, _react2.jsx)("ul", {
         ref: this.setListBoxRef
-      }, optionArray.map(function (_, index) {
+      }, this.state.optionArray.map(function (_, index) {
         return /*#__PURE__*/_react.default.createElement(_this2.ListRow, {
           key: index,
-          data: optionArray,
+          data: _this2.state.optionArray,
           index: index
         }, null);
       }))));
@@ -461,6 +584,15 @@ EuiSelectableList.propTypes = {
        * Wrapping only works if virtualization is off.
        */
   textWrap: _propTypes.default.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.default.any,
   /**
        * Use virtualized rendering for list items with `react-window`.
        * Sets each row's height to the value of `rowHeight`.
@@ -519,7 +651,22 @@ EuiSelectableList.propTypes = {
        * Option data to pass through to the `renderOptions` element.
        * Bypass `EuiSelectableItem` and avoid DOM attribute warnings.
        */
-    data: _propTypes.default.shape({})
+    data: _propTypes.default.shape({}),
+    /**
+       * How to handle long text within the item.
+       * Wrapping only works if `isVirtualization` is false.
+       * @default 'truncate'
+       */
+    textWrap: _propTypes.default.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.default.any
   }).isRequired).isRequired,
   /**
      * Filtered options list (if applicable)
@@ -538,7 +685,9 @@ EuiSelectableList.propTypes = {
     prepend: _propTypes.default.node,
     append: _propTypes.default.node,
     ref: _propTypes.default.func,
-    data: _propTypes.default.shape({})
+    data: _propTypes.default.shape({}),
+    textWrap: _propTypes.default.oneOf(["truncate", "wrap"]),
+    truncationProps: _propTypes.default.any
   }).isRequired),
   /**
      * Search value to highlight on the option render

package/lib/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -399,7 +399,22 @@ EuiSelectableTemplateSitewide.propTypes = {
        * Option data to pass through to the `renderOptions` element.
        * Bypass `EuiSelectableItem` and avoid DOM attribute warnings.
        */
-    data: _propTypes.default.shape({})
+    data: _propTypes.default.shape({}),
+    /**
+       * How to handle long text within the item.
+       * Wrapping only works if `isVirtualization` is false.
+       * @default 'truncate'
+       */
+    textWrap: _propTypes.default.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.default.any
   }).isRequired).isRequired,
   /**
      * Override some of the EuiPopover props housing the list.

package/lib/components/text/text.styles.js

@@ -61,7 +61,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
   var blockQuoteBorderWidth = (0, _global_styling.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((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    img,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.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((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.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((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.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((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('margin-top', headingMarginTop), "\n      }\n\n      &:not(:last-child) {\n        ").concat((0, _global_styling.logicalCSS)('margin-bottom', headingMarginBottom), "\n      }\n    }\n\n    p,\n    dl,\n    blockquote,\n    pre,\n    > ul,\n    > ol {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', lineHeightSize), "\n    }\n\n    ul,\n    ol {\n      ").concat((0, _global_styling.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((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    dd + dt {\n      ").concat((0, _global_styling.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((0, _global_styling.euiFontSize)(euiThemeContext, 'xs', options).fontSize, ";\n      color: ").concat(euiTheme.colors.text, ";\n    }\n\n    small {\n      font-size: ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), "\n      /* Ensures the shape still looks like a square when only one character */\n      ").concat((0, _global_styling.logicalCSS)('min-width', euiTheme.size.l), "\n      ").concat((0, _global_styling.logicalTextAlignCSS)('center'), "\n    }\n    \n    kbd::after {\n      content: '';\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.text)), "\n      position: absolute;\n      ").concat((0, _global_styling.logicalCSS)('bottom', euiTheme.size.xxs), "\n      ").concat((0, _global_styling.logicalCSS)('left', 0), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    }") : '', "\n  ");
 };
@@ -72,7 +72,7 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.euiLinkCSS)(euiThemeContext), ";}img{display:block;", (0, _global_styling.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{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    euiText: /*#__PURE__*/(0, _react.css)(euiText(euiTheme, true), "clear:both;a:not([class]){", (0, _link.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{", (0, _title.euiTitle)(euiThemeContext, 'l'), ";}h2{", (0, _title.euiTitle)(euiThemeContext, 'm'), ";}h3{", (0, _title.euiTitle)(euiThemeContext, 's'), ";}h4,dt{", (0, _title.euiTitle)(euiThemeContext, 'xs'), ";}h5{", (0, _title.euiTitle)(euiThemeContext, 'xxs'), ";}h6{", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", (0, _global_styling.euiBackgroundColor)(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", (0, _global_styling.logicalCSS)('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
       return x / 2;
     }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),

package/lib/components/text_truncate/text_truncate.js

@@ -14,7 +14,7 @@ var _utils = require("./utils");
 var _text_truncate = require("./text_truncate.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["width", "onResize"],
-  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "containerRef", "className"],
+  _excluded2 = ["width", "children", "text", "truncation", "truncationOffset", "truncationPosition", "ellipsis", "calculationDelayMs", "containerRef", "className"],
   _excluded3 = ["onResize"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -108,7 +108,13 @@ EuiTextTruncate.propTypes = {
        * allows for more flexible text rendering, e.g. adding custom markup
        * or highlighting
        */
-  children: _propTypes.default.func
+  children: _propTypes.default.func,
+  /**
+       * For some edge case scenarios, EuiTextTruncate's calculations may be off until
+       * fonts are done loading or layout is done shifting or settling. Adding a delay
+       * may help resolve any rendering issues.
+       */
+  calculationDelayMs: _propTypes.default.number
 };
 var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
   var width = _ref2.width,
@@ -121,6 +127,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     truncationPosition = _ref2.truncationPosition,
     _ref2$ellipsis = _ref2.ellipsis,
     ellipsis = _ref2$ellipsis === void 0 ? '…' : _ref2$ellipsis,
+    calculationDelayMs = _ref2.calculationDelayMs,
     containerRef = _ref2.containerRef,
     className = _ref2.className,
     rest = _objectWithoutProperties(_ref2, _excluded2);
@@ -131,6 +138,19 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     setContainerEl = _useState2[1];
   var refs = (0, _services.useCombinedRefs)([setContainerEl, containerRef]);
 
+  // If necessary, wait a tick on mount before truncating
+  var _useState3 = (0, _react.useState)(!calculationDelayMs),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ready = _useState4[0],
+    setReady = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (calculationDelayMs) {
+      setTimeout(function () {
+        return setReady(true);
+      }, calculationDelayMs);
+    }
+  }, [calculationDelayMs]);
+
   // Handle exceptions where we need to override the passed props
   var _useMemo = (0, _react.useMemo)(function () {
       var truncation = _truncation;
@@ -155,7 +175,8 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     truncationOffset = _useMemo.truncationOffset;
   var truncatedText = (0, _react.useMemo)(function () {
     var truncatedText = '';
-    if (!containerEl || !width) return truncatedText;
+    if (!ready || !containerEl) return text;
+    if (!width) return truncatedText;
     var utils = new _utils.TruncationUtils({
       fullText: text,
       ellipsis: ellipsis,
@@ -187,7 +208,7 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
       }
     }
     return truncatedText;
-  }, [width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
+  }, [ready, width, text, truncation, truncationOffset, truncationPosition, ellipsis, containerEl]);
   var isTruncating = truncatedText !== text;
   return (0, _react2.jsx)("div", _extends({
     className: (0, _classnames.default)('euiTextTruncate', className),
@@ -215,10 +236,10 @@ EuiTextTruncateWithWidth.propTypes = {
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,
     props = _objectWithoutProperties(_ref3, _excluded3);
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var onResize = (0, _react.useCallback)(function (_ref4) {
     var width = _ref4.width;
     setWidth(width);
@@ -230,6 +251,8 @@ var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserv
     return (0, _react2.jsx)(EuiTextTruncateWithWidth, _extends({
       width: width,
       containerRef: ref
-    }, props));
+    }, props, {
+      "data-resize-observer": "true"
+    }));
   });
 };