@elastic/eui 89.1.0 → 90.0.1

package/optimize/lib/components/popover/input_popover.js

@@ -20,7 +20,7 @@ var _resize_observer = require("../observer/resize_observer");
 var _focus_trap = require("../focus_trap");
 var _form = require("../form/form.styles");
 var _popover = require("./popover");
-var _excluded = ["children", "className", "closePopover", "closeOnScroll", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -40,8 +40,20 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   var children = _ref.children,
     className = _ref.className,
     closePopover = _ref.closePopover,
+    _ref$anchorPosition = _ref.anchorPosition,
+    anchorPosition = _ref$anchorPosition === void 0 ? 'downLeft' : _ref$anchorPosition,
+    _ref$attachToAnchor = _ref.attachToAnchor,
+    attachToAnchor = _ref$attachToAnchor === void 0 ? true : _ref$attachToAnchor,
+    _ref$repositionToCros = _ref.repositionToCrossAxis,
+    repositionToCrossAxis = _ref$repositionToCros === void 0 ? false : _ref$repositionToCros,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$panelPaddingSize = _ref.panelPaddingSize,
+    panelPaddingSize = _ref$panelPaddingSize === void 0 ? 's' : _ref$panelPaddingSize,
     _ref$closeOnScroll = _ref.closeOnScroll,
     closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? false : _ref$ownFocus,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -84,6 +96,11 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
   var panelWidth = (0, _react.useMemo)(function () {
     return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
   }, [panelMinWidth, inputWidth]);
+
+  // Resize callback
+  (0, _react.useEffect)(function () {
+    onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(panelWidth);
+  }, [panelWidth, onPanelResize]);
   (0, _react.useEffect)(function () {
     if (panelEl) {
       // We have to modify the popover panel DOM node directly instead of using
@@ -157,15 +174,19 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    className: classes,
     css: /*#__PURE__*/(0, _react2.css)(fullWidth ? undefined : (0, _global_styling.logicalCSS)('max-width', form.maxWidth), ";label:EuiInputPopover;"),
-    repositionToCrossAxis: false,
-    ownFocus: false,
+    display: display,
     button: input,
     buttonRef: inputRef,
     panelRef: panelRef,
-    className: classes,
     ref: popoverClassRef,
-    closePopover: closePopover
+    closePopover: closePopover,
+    anchorPosition: anchorPosition,
+    attachToAnchor: attachToAnchor,
+    repositionToCrossAxis: repositionToCrossAxis,
+    panelPaddingSize: panelPaddingSize,
+    ownFocus: ownFocus
   }, props, {
     panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
       onKeyDown: onKeyDown
@@ -177,10 +198,4 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     value: panelWidth
   }, children)));
 };
-exports.EuiInputPopover = EuiInputPopover;
-EuiInputPopover.defaultProps = {
-  anchorPosition: 'downLeft',
-  attachToAnchor: true,
-  display: 'block',
-  panelPaddingSize: 's'
-};
+exports.EuiInputPopover = EuiInputPopover;

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

@@ -20,11 +20,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 _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; }
 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; }
@@ -87,20 +89,23 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaSetSize", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaPosInSetMap", {});
+    // This utility is necessary to exclude group labels from the aria set count
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
+      };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ListRow", /*#__PURE__*/(0, _react.memo)(function (_ref) {
+      var _option$textWrap;
       var data = _ref.data,
         index = _ref.index,
         style = _ref.style;
@@ -117,19 +122,20 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         key = option.key,
         searchableLabel = option.searchableLabel,
         _data = option.data,
+        _truncationProps = option.truncationProps,
         optionRest = (0, _objectWithoutProperties2.default)(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", (0, _extends2.default)({
           role: "presentation",
@@ -139,6 +145,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, (0, _extends2.default)({
         key: id,
         id: id,
@@ -151,14 +166,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,
@@ -166,16 +181,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));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderVirtualizedList", function (heightIsFull, optionArray) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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,
@@ -183,7 +200,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);
@@ -203,7 +220,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, (0, _extends2.default)({
@@ -211,7 +230,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, (0, _extends2.default)({
@@ -220,17 +240,106 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }, virtualizationProps), _this.ListRow);
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusBadgeOffset", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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();
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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, (0, _extends2.default)({}, 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));
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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, (0, _extends2.default)({
+          calculationDelayMs: 2
+        }, truncationProps, {
+          text: text
+        }), function (text) {
+          return text;
+        })
+      );
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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) {
@@ -243,10 +352,10 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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)
@@ -265,10 +374,10 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
@@ -281,9 +390,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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);
@@ -295,69 +404,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;
   }
   (0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_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", (0, _extends2.default)({
         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);
       }))));

package/optimize/lib/components/tabs/tab.js

@@ -87,7 +87,7 @@ var EuiTab = function EuiTab(_ref) {
     css: cssTabStyles,
     disabled: disabled
   }, rest), prependNode, (0, _react2.jsx)("span", {
-    className: "euiTab__content",
+    className: "euiTab__content eui-textTruncate",
     css: cssTabContentStyles
   }, children), appendNode);
 };

package/optimize/lib/components/text_truncate/text_truncate.js

@@ -17,7 +17,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
@@ -51,6 +51,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 = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
@@ -61,6 +62,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 = (0, _slicedToArray2.default)(_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;
@@ -85,7 +99,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,
@@ -117,7 +132,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", (0, _extends2.default)({
     className: (0, _classnames.default)('euiTextTruncate', className),
@@ -141,10 +156,10 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,
     props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-  var _useState3 = (0, _react.useState)(0),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var onResize = (0, _react.useCallback)(function (_ref4) {
     var width = _ref4.width;
     setWidth(width);
@@ -156,6 +171,8 @@ var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserv
     return (0, _react2.jsx)(EuiTextTruncateWithWidth, (0, _extends2.default)({
       width: width,
       containerRef: ref
-    }, props));
+    }, props, {
+      "data-resize-observer": "true"
+    }));
   });
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "89.1.0",
+  "version": "90.0.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "18.18.1",
+  "docker_image": "18.18.2",
   "engines": {
     "node": "16.x || 18.x || >=20.0"
   },
@@ -79,8 +79,8 @@
     "react-remove-scroll-bar": "^2.3.4",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
-    "refractor": "^3.5.0",
-    "rehype-raw": "^5.0.0",
+    "refractor": "^3.6.0",
+    "rehype-raw": "^5.1.0",
     "rehype-react": "^6.2.1",
     "rehype-stringify": "^8.0.0",
     "remark-breaks": "^2.0.2",
@@ -93,7 +93,7 @@
     "unist-util-visit": "^2.0.3",
     "url-parse": "^1.5.10",
     "uuid": "^8.3.0",
-    "vfile": "^4.2.0"
+    "vfile": "^4.2.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.5",

package/src/components/datagrid/_data_grid_data_row.scss

@@ -100,7 +100,6 @@
 .euiDataGridRowCell__contentWrapper {
   position: relative; // Needed for .euiDataGridRowCell__actions--overlay
   height: 100%;
-  overflow: hidden;
 }
 
 .euiDataGridRowCell__defaultHeight {

package/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss

@@ -1,4 +1,5 @@
-.euiDatePopoverContent {
+.euiDatePopoverContent,
+.euiDatePopoverContent .react-datepicker {
   width: $euiFormMaxWidth;
   max-width: 100%;
 }