@elastic/eui 90.0.0 → 91.1.0

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

@@ -8,8 +8,8 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -27,6 +27,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`
@@ -81,20 +83,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;
@@ -111,19 +116,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",
@@ -133,6 +139,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,
@@ -145,14 +160,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,
@@ -160,16 +175,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,
@@ -177,7 +194,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);
@@ -197,7 +214,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({
@@ -205,7 +224,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({
@@ -214,17 +234,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) {
@@ -237,10 +346,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)
@@ -259,10 +368,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);
@@ -275,9 +384,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);
@@ -289,69 +398,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);
       }))));

package/optimize/es/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
 import { useCombinedRefs, useCurrentEuiBreakpoint } from '../../../services';
 import { EuiSelectable } from '../selectable';
@@ -67,9 +67,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;
@@ -144,16 +146,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,

package/optimize/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;"),

package/optimize/es/components/text_truncate/text_truncate.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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
@@ -12,7 +12,7 @@ var _excluded = ["width", "onResize"],
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import classNames from 'classnames';
 import { useCombinedRefs } from '../../services';
 import { EuiResizeObserver } from '../observer/resize_observer';
@@ -41,6 +41,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);
@@ -51,6 +52,19 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     setContainerEl = _useState2[1];
   var refs = useCombinedRefs([setContainerEl, containerRef]);
 
+  // If necessary, wait a tick on mount before truncating
+  var _useState3 = useState(!calculationDelayMs),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ready = _useState4[0],
+    setReady = _useState4[1];
+  useEffect(function () {
+    if (calculationDelayMs) {
+      setTimeout(function () {
+        return setReady(true);
+      }, calculationDelayMs);
+    }
+  }, [calculationDelayMs]);
+
   // Handle exceptions where we need to override the passed props
   var _useMemo = useMemo(function () {
       var truncation = _truncation;
@@ -75,7 +89,8 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
     truncationOffset = _useMemo.truncationOffset;
   var truncatedText = useMemo(function () {
     var truncatedText = '';
-    if (!containerEl || !width) return truncatedText;
+    if (!ready || !containerEl) return text;
+    if (!width) return truncatedText;
     var utils = new TruncationUtils({
       fullText: text,
       ellipsis: ellipsis,
@@ -107,7 +122,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 ___EmotionJSX("div", _extends({
     className: classNames('euiTextTruncate', className),
@@ -131,10 +146,10 @@ var EuiTextTruncateWithWidth = function EuiTextTruncateWithWidth(_ref2) {
 var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserver(_ref3) {
   var _onResize = _ref3.onResize,
     props = _objectWithoutProperties(_ref3, _excluded3);
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    width = _useState4[0],
-    setWidth = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    width = _useState6[0],
+    setWidth = _useState6[1];
   var onResize = useCallback(function (_ref4) {
     var width = _ref4.width;
     setWidth(width);
@@ -146,6 +161,8 @@ var EuiTextTruncateWithResizeObserver = function EuiTextTruncateWithResizeObserv
     return ___EmotionJSX(EuiTextTruncateWithWidth, _extends({
       width: width,
       containerRef: ref
-    }, props));
+    }, props, {
+      "data-resize-observer": "true"
+    }));
   });
 };

package/optimize/es/components/toast/global_toast_list.js

@@ -263,7 +263,7 @@ export var EuiGlobalToastList = function EuiGlobalToastList(_ref) {
   var classes = classNames('euiGlobalToastList', className);
   return ___EmotionJSX("div", _extends({
     "aria-live": "polite",
-    role: "region",
+    role: "log",
     ref: listElement,
     css: cssStyles,
     className: classes

package/optimize/es/global_styling/mixins/_states.js

@@ -7,6 +7,7 @@
  */
 
 import { useEuiTheme } from '../../services';
+import { mathWithUnits } from '../functions';
 /**
  * It is best practice to utilize the browser's default `outline` property for handling focus rings.
  * However, some components need to be forced to have the same behavior, or adjust the display.
@@ -29,7 +30,9 @@ export var euiOutline = function euiOutline(_ref) {
   } else if (offset === 'outset') {
     outlineOffset = "".concat(outlineWidth);
   } else if (offset === 'center') {
-    outlineOffset = "calc(".concat(outlineWidth, " / -2);");
+    outlineOffset = mathWithUnits(outlineWidth, function (x) {
+      return x / -2;
+    });
   }
 
   // This is a separate function from `euiFocusRing` because some EUI components