@elastic/eui 114.3.0 → 116.0.0

package/lib/components/combo_box/combo_box.js

@@ -17,7 +17,7 @@ var _combo_box_input = require("./combo_box_input/combo_box_input");
 var _combo_box_options_list = require("./combo_box_options_list");
 var _combo_box = require("./combo_box.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "truncationProps", "inputPopoverProps", "optionMatcher", "aria-label", "aria-labelledby", "aria-describedby"];
+var _excluded = ["data-test-subj", "async", "className", "compressed", "customOptionText", "fullWidth", "id", "inputRef", "isCaseSensitive", "isClearable", "isDisabled", "isInvalid", "isLoading", "noSuggestions", "onBlur", "onChange", "onCreateOption", "onSearchChange", "options", "placeholder", "renderOption", "rowHeight", "selectedOptions", "singleSelection", "prepend", "sortMatchesBy", "delimiter", "append", "autoFocus", "onFocusBadge", "truncationProps", "inputPopoverProps", "optionMatcher", "aria-label", "aria-labelledby", "aria-describedby"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -105,6 +105,9 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
       _this.listRefInstance = ref;
     });
     _defineProperty(_this, "setListOptionRefs", function (node, index) {
+      var current = _this.state.listOptionRefs[index];
+      // Skip updating if the ref is null (on cleanup) or didn't change
+      if (node === null || node === current) return;
       _this.setState(function (_ref) {
         var listOptionRefs = _ref.listOptionRefs;
         var _listOptionRefs = listOptionRefs;
@@ -125,41 +128,32 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
         isListOpen: false
       });
     });
-    _defineProperty(_this, "incrementActiveOptionIndex", function (amount) {
-      // If there are no options available, do nothing.
-      if (!_this.state.matchingOptions.length) {
-        return;
+    _defineProperty(_this, "findNextSelectableOptionIndex", function (options, startIndex) {
+      var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      if (!options.length) return -1;
+      var index = startIndex;
+      for (var count = 0; count < options.length; count++) {
+        var option = options[index];
+        if (!option.isGroupLabelOption && !option.disabled) {
+          return index;
+        }
+        index = (index + direction + options.length) % options.length;
       }
+      return -1; // the remaining options can't be selected (group labels or disabled)
+    });
+    _defineProperty(_this, "incrementActiveOptionIndex", function (amount) {
+      if (!_this.state.matchingOptions.length) return;
       _this.setState(function (_ref2) {
         var activeOptionIndex = _ref2.activeOptionIndex,
           matchingOptions = _ref2.matchingOptions;
-        var nextActiveOptionIndex;
-        if (activeOptionIndex < 0) {
-          // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
-          // either the first or last item.
-          nextActiveOptionIndex = amount < 0 ? matchingOptions.length - 1 : 0;
-        } else {
-          nextActiveOptionIndex = activeOptionIndex + amount;
-          if (nextActiveOptionIndex < 0) {
-            nextActiveOptionIndex = matchingOptions.length - 1;
-          } else if (nextActiveOptionIndex === matchingOptions.length) {
-            nextActiveOptionIndex = 0;
-          }
-        }
-
-        // Group titles are included in option list but are not selectable
-        // Skip group title options
         var direction = amount > 0 ? 1 : -1;
-        while (matchingOptions[nextActiveOptionIndex].isGroupLabelOption) {
-          nextActiveOptionIndex = nextActiveOptionIndex + direction;
-          if (nextActiveOptionIndex < 0) {
-            nextActiveOptionIndex = matchingOptions.length - 1;
-          } else if (nextActiveOptionIndex === matchingOptions.length) {
-            nextActiveOptionIndex = 0;
-          }
-        }
+        var startIndex = activeOptionIndex < 0 ?
+        // Inintial interaction: jump to first or last item
+        amount < 0 ? matchingOptions.length - 1 : 0 :
+        // Advance by amount, wrapping around
+        (activeOptionIndex + amount + matchingOptions.length) % matchingOptions.length;
         return {
-          activeOptionIndex: nextActiveOptionIndex
+          activeOptionIndex: _this.findNextSelectableOptionIndex(matchingOptions, startIndex, direction)
         };
       });
     });
@@ -377,27 +371,36 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
         onChange = _this$props7.onChange,
         selectedOptions = _this$props7.selectedOptions,
         singleSelectionProp = _this$props7.singleSelection;
+      var _this$state2 = _this.state,
+        matchingOptions = _this$state2.matchingOptions,
+        listOptionRefs = _this$state2.listOptionRefs;
       var singleSelection = Boolean(singleSelectionProp);
       var changeOptions = singleSelection ? [addedOption] : selectedOptions.concat(addedOption);
       onChange === null || onChange === void 0 || onChange(changeOptions);
       _this.clearSearchValue();
-      _this.clearActiveOption();
-      if (!isContainerBlur) {
-        var _this$searchInputRefI2;
-        (_this$searchInputRefI2 = _this.searchInputRefInstance) === null || _this$searchInputRefI2 === void 0 || _this$searchInputRefI2.focus();
-      }
       if (singleSelection) {
+        // List closes after single selection; return focus to the input
+        _this.clearActiveOption();
+        if (!isContainerBlur) {
+          var _this$searchInputRefI2;
+          (_this$searchInputRefI2 = _this.searchInputRefInstance) === null || _this$searchInputRefI2 === void 0 || _this$searchInputRefI2.focus();
+        }
         requestAnimationFrame(function () {
           return _this.closeList();
         });
+      } else if (isContainerBlur) {
+        // User tabbed away. `onContainerBlur` will close the list. We're only cleaning up state
+        _this.clearActiveOption();
       } else {
-        _this.setState(function (_ref4) {
-          var listOptionRefs = _ref4.listOptionRefs,
-            matchingOptions = _ref4.matchingOptions;
-          return {
-            listOptionRefs: listOptionRefs.slice(0, matchingOptions.length - 1),
-            activeOptionIndex: matchingOptions.indexOf(addedOption)
-          };
+        var currentIndex = matchingOptions.indexOf(addedOption);
+        var nextOptions = matchingOptions.filter(function (option) {
+          return option !== addedOption;
+        });
+        _this.setState({
+          listOptionRefs: listOptionRefs.slice(0, matchingOptions.length - 1),
+          activeOptionIndex: _this.findNextSelectableOptionIndex(nextOptions, Math.min(currentIndex, nextOptions.length - 1)
+          // direction defaults to 1 (forward)
+          )
         });
       }
     });
@@ -505,6 +508,7 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
         delimiter = _this$props11.delimiter,
         append = _this$props11.append,
         autoFocus = _this$props11.autoFocus,
+        onFocusBadge = _this$props11.onFocusBadge,
         truncationProps = _this$props11.truncationProps,
         inputPopoverProps = _this$props11.inputPopoverProps,
         optionMatcher = _this$props11.optionMatcher,
@@ -512,12 +516,12 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
         ariaLabelledby = _this$props11['aria-labelledby'],
         ariaDescribedby = _this$props11['aria-describedby'],
         rest = _objectWithoutProperties(_this$props11, _excluded);
-      var _this$state2 = this.state,
-        activeOptionIndex = _this$state2.activeOptionIndex,
-        hasFocus = _this$state2.hasFocus,
-        isListOpen = _this$state2.isListOpen,
-        searchValue = _this$state2.searchValue,
-        matchingOptions = _this$state2.matchingOptions;
+      var _this$state3 = this.state,
+        activeOptionIndex = _this$state3.activeOptionIndex,
+        hasFocus = _this$state3.hasFocus,
+        isListOpen = _this$state3.isListOpen,
+        searchValue = _this$state3.searchValue,
+        matchingOptions = _this$state3.matchingOptions;
 
       // Make sure we have a valid ID if users don't pass one as a prop
       var inputId = id !== null && id !== void 0 ? id : this.rootId('_eui-combobox-id');
@@ -568,7 +572,8 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
             delimiter: delimiter,
             getSelectedOptionForSearchValue: _matching_options.getSelectedOptionForSearchValue,
             listboxAriaLabel: listboxAriaLabel,
-            truncationProps: truncationProps
+            truncationProps: truncationProps,
+            onFocusBadge: onFocusBadge
           });
         });
       }
@@ -593,11 +598,11 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
             ref: _this2.comboBoxRefCallback
           }), (0, _react2.jsx)(_popover.EuiInputPopover, _extends({
             fullWidth: fullWidth,
-            panelPaddingSize: "none",
+            panelPaddingSize: "s",
             disableFocusTrap: true,
             closeOnScroll: true
           }, inputPopoverProps, {
-            isOpen: isListOpen,
+            isOpen: isListOpen && !noSuggestions,
             closePopover: _this2.closeList
             /* we don't want content changes to be announced via aria-live 
             because ComboBox uses a virtualized list that updates itself
@@ -605,7 +610,10 @@ var EuiComboBox = exports.EuiComboBox = /*#__PURE__*/function (_Component) {
             "aria-live": "off",
             input: (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
               compressed: compressed,
-              focusedOptionId: _this2.hasActiveOption() ? (_this2$state$listOpti = (_this2$state$listOpti2 = _this2.state.listOptionRefs[_this2.state.activeOptionIndex]) === null || _this2$state$listOpti2 === void 0 ? void 0 : _this2$state$listOpti2.id) !== null && _this2$state$listOpti !== void 0 ? _this2$state$listOpti : _this2.rootId("_option-".concat(_this2.state.activeOptionIndex)) : undefined,
+              focusedOptionId: _this2.hasActiveOption() ? (_this2$state$listOpti = (_this2$state$listOpti2 = _this2.state.listOptionRefs[_this2.state.activeOptionIndex]) === null || _this2$state$listOpti2 === void 0 ? void 0 : _this2$state$listOpti2.id) !== null && _this2$state$listOpti !== void 0 ? _this2$state$listOpti :
+              // uses the original `options` array to ensure a stable `id`, otherwise `aria-activedescendant`
+              // loses focus on selecting an option (due to actively removing it from the list)
+              _this2.rootId("_option-".concat(_this2.props.options.indexOf(matchingOptions[activeOptionIndex]))) : undefined,
               fullWidth: fullWidth,
               hasSelectedOptions: selectedOptions.length > 0,
               id: inputId,
@@ -795,7 +803,7 @@ EuiComboBox.propTypes = {
   "aria-labelledby": _propTypes.default.string,
   /**
      * By default, EuiComboBox will truncate option labels at the end of
-     * the string. You can use pass in a custom truncation configuration that
+     * the string. You can pass in a custom truncation configuration that
      * accepts any [EuiTextTruncate](/#/utilities/text-truncation) prop,
      * except for `text` and `children`.
      *

package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -15,17 +15,17 @@ var _mark = require("../../mark");
 var _text = require("../../text");
 var _loading = require("../../loading");
 var _i18n = require("../../i18n");
-var _filter_select_item = require("../../filter_group/filter_select_item");
+var _selectable_list = require("../../selectable/selectable_list/selectable_list.styles");
+var _get_list_item_size = require("../../selectable/selectable_list/utils/get_list_item_size");
 var _badge = require("../../badge");
 var _text_truncate = require("../../text_truncate");
 var _input_popover = require("../../popover/input_popover");
-var _utils = require("../utils");
-var _combo_box_title = require("./combo_box_title");
+var _list_item_layout = require("../../list_item_layout");
 var _combo_box_options_list = require("./combo_box_options_list.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children"],
-  _excluded2 = ["key", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps"],
-  _excluded3 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "options", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "delimiter", "truncationProps", "listboxAriaLabel", "setListOptionRefs"];
+  _excluded2 = ["key", "className", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps", "toolTipContent", "toolTipProps"],
+  _excluded3 = ["data-test-subj", "activeOptionIndex", "areAllOptionsSelected", "customOptionText", "fullWidth", "getSelectedOptionForSearchValue", "isCaseSensitive", "isLoading", "listRef", "matchingOptions", "onCloseList", "onCreateOption", "onOptionClick", "onOptionEnterKey", "onScroll", "options", "renderOption", "rootId", "rowHeight", "scrollToIndex", "searchValue", "selectedOptions", "singleSelection", "delimiter", "onFocusBadge", "truncationProps", "listboxAriaLabel", "setListOptionRefs"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -69,13 +69,20 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
     }
     _this = _callSuper(this, EuiComboBoxOptionsList, [].concat(args));
     _defineProperty(_this, "listRef", null);
+    _defineProperty(_this, "listBoxRef", /*#__PURE__*/(0, _react.createRef)());
+    _defineProperty(_this, "optionRefs", {});
     _defineProperty(_this, "setListRef", function (ref) {
       _this.listRef = ref;
     });
+    _defineProperty(_this, "setOptionRef", function (ref, index) {
+      var _this$props$setListOp, _this$props;
+      _this.optionRefs[index] = ref;
+      (_this$props$setListOp = (_this$props = _this.props).setListOptionRefs) === null || _this$props$setListOp === void 0 || _this$props$setListOp.call(_this$props, ref, index);
+    });
     _defineProperty(_this, "ListInnerElement", function (_ref) {
       var children = _ref.children,
         rest = _objectWithoutProperties(_ref, _excluded);
-      return (0, _react2.jsx)("div", _extends({}, rest, _this.getListInnerElementProps()), children);
+      return (0, _react2.jsx)("ul", _extends({}, rest, _this.getListInnerElementProps()), children);
     });
     _defineProperty(_this, "ListRow", function (_ref2) {
       var _option$key;
@@ -84,33 +91,43 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         style = _ref2.style;
       var option = data[index];
       var key = option.key,
+        className = option.className,
         isGroupLabelOption = option.isGroupLabelOption,
         label = option.label,
         value = option.value,
         prepend = option.prepend,
         append = option.append,
         _truncationProps = option.truncationProps,
+        toolTipContent = option.toolTipContent,
+        toolTipProps = option.toolTipProps,
         rest = _objectWithoutProperties(option, _excluded2);
-      var _this$props = _this.props,
-        singleSelection = _this$props.singleSelection,
-        selectedOptions = _this$props.selectedOptions,
-        onOptionClick = _this$props.onOptionClick,
-        activeOptionIndex = _this$props.activeOptionIndex,
-        renderOption = _this$props.renderOption,
-        searchValue = _this$props.searchValue,
-        rootId = _this$props.rootId,
-        matchingOptions = _this$props.matchingOptions,
-        setListOptionRefs = _this$props.setListOptionRefs,
-        rowHeight = _this$props.rowHeight;
+      var _this$props2 = _this.props,
+        options = _this$props2.options,
+        singleSelection = _this$props2.singleSelection,
+        selectedOptions = _this$props2.selectedOptions,
+        onOptionClick = _this$props2.onOptionClick,
+        activeOptionIndex = _this$props2.activeOptionIndex,
+        renderOption = _this$props2.renderOption,
+        searchValue = _this$props2.searchValue,
+        rootId = _this$props2.rootId,
+        matchingOptions = _this$props2.matchingOptions,
+        onFocusBadge = _this$props2.onFocusBadge,
+        rowHeight = _this$props2.rowHeight;
       var optionIndex = matchingOptions.indexOf(option);
       var hasTruncationProps = _this.props.truncationProps || _truncationProps;
       var truncationProps = hasTruncationProps ? // Individual truncation settings should override component prop
       _objectSpread(_objectSpread({}, _this.props.truncationProps), _truncationProps) : undefined;
       if (isGroupLabelOption) {
-        return (0, _react2.jsx)("div", {
-          key: key !== null && key !== void 0 ? key : label,
-          style: style
-        }, (0, _react2.jsx)(_combo_box_title.EuiComboBoxTitle, null, prepend, label, append));
+        return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+          var styles = stylesMemoizer(_selectable_list.euiSelectableListGroupLabelStyles);
+          return (0, _react2.jsx)("li", {
+            key: key !== null && key !== void 0 ? key : label,
+            style: style,
+            role: "presentation",
+            className: "euiComboBoxTitle",
+            css: styles.groupLabel
+          }, prepend, label, append);
+        });
       }
       var checked = undefined;
       if (singleSelection && selectedOptions.length && selectedOptions[0].label === label && selectedOptions[0].key === key) {
@@ -118,40 +135,54 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
       }
       var optionIsFocused = activeOptionIndex === index;
       var optionIsDisabled = option.hasOwnProperty('disabled') && option.disabled === true;
-      return (0, _react2.jsx)(_filter_select_item.EuiFilterSelectItem, _extends({
-        style: style,
+      var hasOnFocusBadge = onFocusBadge && optionIsFocused && !optionIsDisabled;
+      return (0, _react2.jsx)(_list_item_layout.EuiListItemLayout, _extends({
+        element: "li",
+        role: "option"
+        // uses `aria-selected` over `aria-checked` for multi-selection as the selected options are removed from the list
+        ,
+        selectionMode: "selected",
+        className: (0, _classnames.default)('euiComboBoxOption', className),
+        ref: function ref(node) {
+          return _this.setOptionRef(node, index);
+        }
+        // uses the original `options` array for the index to ensure a stable `id`, otherwise `aria-activedescendant`
+        // loses focus on selecting an option (due to actively removing it from the list)
+        ,
+        id: rootId("_option-".concat(options.indexOf(option))),
         key: (_option$key = option.key) !== null && _option$key !== void 0 ? _option$key : option.label,
+        title: label,
+        prepend: option.prepend,
+        append: hasOnFocusBadge ? (0, _react2.jsx)(_react.default.Fragment, null, option.append, hitEnterBadge) : option.append,
+        checked: checked,
+        isFocused: optionIsFocused,
+        isSelected: !optionIsDisabled && checked !== undefined,
+        isDisabled: optionIsDisabled,
+        isSingleSelection: !!singleSelection,
+        showIndicator: !!singleSelection,
+        textWrap: rowHeight !== 'auto' ? 'truncate' : 'wrap',
+        tooltipProps: toolTipContent && !optionIsDisabled ? _objectSpread(_objectSpread({}, toolTipProps), {}, {
+          content: toolTipContent
+        }) : undefined,
+        style: style,
+        "aria-setsize": matchingOptions.length,
+        "aria-posinset": optionIndex + 1,
+        contentProps: {
+          className: 'euiComboBoxOption__content'
+        },
         onClick: function onClick() {
           if (onOptionClick) {
             onOptionClick(option);
           }
-        },
-        isFocused: optionIsFocused,
-        checked: checked,
-        showIcons: singleSelection ? true : false,
-        truncateContent: rowHeight !== 'auto',
-        id: rootId("_option-".concat(index)),
-        title: label,
-        "aria-setsize": matchingOptions.length,
-        "aria-posinset": optionIndex + 1,
-        forwardRef: function forwardRef(ref) {
-          return setListOptionRefs(ref, index);
         }
-      }, rest), (0, _react2.jsx)("span", {
-        className: "euiComboBoxOption__contentWrapper"
-      }, (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
-        option: option,
-        classNamePrefix: "euiComboBoxOption",
-        marginSize: "s"
-      }, (0, _react2.jsx)("span", {
-        className: (0, _classnames.default)('euiComboBoxOption__content', rowHeight !== 'auto' && 'eui-textTruncate')
-      }, renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : rowHeight === 'auto' ? _this.renderVariableHeightOption(label) : _this.renderTruncatedOption(label, truncationProps))), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
+      }, rest), renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : rowHeight === 'auto' ? _this.renderVariableHeightOption(label) : _this.renderTruncatedOption(label, truncationProps));
     });
     _defineProperty(_this, "getListInnerElementProps", function () {
       return {
         'aria-label': _this.props.listboxAriaLabel,
         id: _this.props.rootId('listbox'),
         role: 'listbox',
+        'aria-multiselectable': _this.props.singleSelection === false ? true : undefined,
         tabIndex: 0
       };
     });
@@ -205,49 +236,66 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
       // just highlight the entire truncated text
       (0, _react2.jsx)(_mark.EuiMark, null, text));
     });
+    _defineProperty(_this, "getItemSize", function (index) {
+      var _ref3 = _this.props,
+        rowHeight = _ref3.rowHeight;
+      var option = _this.props.matchingOptions[index];
+      return (0, _get_list_item_size.getListItemSize)(index, rowHeight, !!(option !== null && option !== void 0 && option.isGroupLabelOption));
+    });
     return _this;
   }
   _inherits(EuiComboBoxOptionsList, _Component);
   return _createClass(EuiComboBoxOptionsList, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      if (this.listRef && typeof this.props.activeOptionIndex !== 'undefined' && this.props.activeOptionIndex !== prevProps.activeOptionIndex && this.props.rowHeight !== 'auto') {
-        this.listRef.scrollToItem(this.props.activeOptionIndex, 'auto');
+      var _this$props3 = this.props,
+        activeOptionIndex = _this$props3.activeOptionIndex,
+        rowHeight = _this$props3.rowHeight;
+      if (this.listRef && typeof activeOptionIndex !== 'undefined' && activeOptionIndex !== prevProps.activeOptionIndex && rowHeight !== 'auto') {
+        // NOTE: The 'auto' setting results in the item being scrolled to the top/end edge;
+        // We could consider changing it to 'center' to keep items further way from the listbox edges.
+        this.listRef.scrollToItem(activeOptionIndex, 'auto');
+      } else if (rowHeight === 'auto') {
+        var _this$optionRefs, _this$optionRefs$scro;
+        (_this$optionRefs = this.optionRefs[activeOptionIndex !== null && activeOptionIndex !== void 0 ? activeOptionIndex : 0]) === null || _this$optionRefs === void 0 || (_this$optionRefs$scro = _this$optionRefs.scrollIntoView) === null || _this$optionRefs$scro === void 0 || _this$optionRefs$scro.call(_this$optionRefs, {
+          block: 'nearest'
+        });
       }
     }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props2 = this.props,
-        dataTestSubj = _this$props2['data-test-subj'],
-        activeOptionIndex = _this$props2.activeOptionIndex,
-        areAllOptionsSelected = _this$props2.areAllOptionsSelected,
-        customOptionText = _this$props2.customOptionText,
-        fullWidth = _this$props2.fullWidth,
-        getSelectedOptionForSearchValue = _this$props2.getSelectedOptionForSearchValue,
-        isCaseSensitive = _this$props2.isCaseSensitive,
-        isLoading = _this$props2.isLoading,
-        listRef = _this$props2.listRef,
-        matchingOptions = _this$props2.matchingOptions,
-        onCloseList = _this$props2.onCloseList,
-        onCreateOption = _this$props2.onCreateOption,
-        onOptionClick = _this$props2.onOptionClick,
-        onOptionEnterKey = _this$props2.onOptionEnterKey,
-        onScroll = _this$props2.onScroll,
-        options = _this$props2.options,
-        renderOption = _this$props2.renderOption,
-        rootId = _this$props2.rootId,
-        rowHeight = _this$props2.rowHeight,
-        scrollToIndex = _this$props2.scrollToIndex,
-        searchValue = _this$props2.searchValue,
-        selectedOptions = _this$props2.selectedOptions,
-        singleSelection = _this$props2.singleSelection,
-        delimiter = _this$props2.delimiter,
-        truncationProps = _this$props2.truncationProps,
-        listboxAriaLabel = _this$props2.listboxAriaLabel,
-        setListOptionRefs = _this$props2.setListOptionRefs,
-        rest = _objectWithoutProperties(_this$props2, _excluded3);
+      var _this$props4 = this.props,
+        dataTestSubj = _this$props4['data-test-subj'],
+        activeOptionIndex = _this$props4.activeOptionIndex,
+        areAllOptionsSelected = _this$props4.areAllOptionsSelected,
+        customOptionText = _this$props4.customOptionText,
+        fullWidth = _this$props4.fullWidth,
+        getSelectedOptionForSearchValue = _this$props4.getSelectedOptionForSearchValue,
+        isCaseSensitive = _this$props4.isCaseSensitive,
+        isLoading = _this$props4.isLoading,
+        listRef = _this$props4.listRef,
+        matchingOptions = _this$props4.matchingOptions,
+        onCloseList = _this$props4.onCloseList,
+        onCreateOption = _this$props4.onCreateOption,
+        onOptionClick = _this$props4.onOptionClick,
+        onOptionEnterKey = _this$props4.onOptionEnterKey,
+        onScroll = _this$props4.onScroll,
+        options = _this$props4.options,
+        renderOption = _this$props4.renderOption,
+        rootId = _this$props4.rootId,
+        rowHeight = _this$props4.rowHeight,
+        scrollToIndex = _this$props4.scrollToIndex,
+        searchValue = _this$props4.searchValue,
+        selectedOptions = _this$props4.selectedOptions,
+        singleSelection = _this$props4.singleSelection,
+        delimiter = _this$props4.delimiter,
+        onFocusBadge = _this$props4.onFocusBadge,
+        truncationProps = _this$props4.truncationProps,
+        listboxAriaLabel = _this$props4.listboxAriaLabel,
+        setListOptionRefs = _this$props4.setListOptionRefs,
+        rest = _objectWithoutProperties(_this$props4, _excluded3);
       var emptyStateContent;
       if (isLoading) {
         emptyStateContent = (0, _react2.jsx)(_flex.EuiFlexGroup, {
@@ -345,6 +393,10 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         // bounded by max-height of .euiComboBoxOptionsList
         boundedHeight = height > _combo_box_options_list.LIST_MAX_HEIGHT ? _combo_box_options_list.LIST_MAX_HEIGHT : height;
       }
+
+      /* We need to consider the panel padding (2 * 8px) but should only subtract it if
+      the panel width has already been set. */
+      var listWidth = this.context && this.context > 0 ? this.context - 16 : this.context;
       return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
         var styles = stylesMemoizer(_combo_box_options_list.euiComboBoxOptionListStyles);
         return (0, _react2.jsx)("div", _extends({
@@ -352,29 +404,39 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
           className: "euiComboBoxOptionsList",
           "data-test-subj": (0, _classnames.default)('comboBoxOptionsList', dataTestSubj),
           ref: listRef
-        }, rest), emptyStateContent ? (0, _react2.jsx)(_text.EuiText, {
+        }, rest, {
+          onMouseDown: function onMouseDown(e) {
+            // prevent focus shifting; expected behavior to keep focus in the input
+            e.preventDefault();
+          }
+        }), emptyStateContent ? (0, _react2.jsx)(_text.EuiText, {
           size: "xs",
           css: styles.euiComboBoxOptionsList__empty,
           className: "euiComboBoxOptionsList__empty"
-        }, emptyStateContent) : rowHeight === 'auto' ? (0, _react2.jsx)("div", _this2.getListInnerElementProps(), matchingOptions.map(function (_, index) {
+        }, emptyStateContent) : rowHeight === 'auto' ? (0, _react2.jsx)("ul", _extends({
+          ref: _this2.listBoxRef
+        }, _this2.getListInnerElementProps()), matchingOptions.map(function (_, index) {
           return (0, _react2.jsx)(_this2.ListRow, {
             data: matchingOptions,
             index: index,
-            key: index // same as FixedSizeList's default
+            key: index // same as VariableSizeList's default
             ,
             style: {}
           });
-        })) : (0, _react2.jsx)(_reactWindow.FixedSizeList, {
+        })) : (0, _react2.jsx)(_reactWindow.VariableSizeList, {
           css: styles.euiComboBoxOptionList__virtualization,
           className: "euiComboBoxOptionsList__virtualization",
           height: boundedHeight,
           onScroll: onScroll,
           itemCount: matchingOptions.length,
-          itemSize: rowHeight,
-          itemData: matchingOptions,
+          itemSize: _this2.getItemSize,
+          itemData: matchingOptions
+          // Prevents scrollbar jump before VariableSizeList populates the cached size
+          ,
+          estimatedItemSize: rowHeight,
           ref: _this2.setListRef,
           innerElementType: _this2.ListInnerElement,
-          width: _this2.context
+          width: listWidth
         }, _this2.ListRow));
       });
     }
@@ -528,5 +590,6 @@ EuiComboBoxOptionsList.propTypes = {
     asPlainText: _propTypes.default.bool
   }).isRequired]),
   delimiter: _propTypes.default.string,
-  truncationProps: _propTypes.default.any
+  truncationProps: _propTypes.default.any,
+  onFocusBadge: _propTypes.default.bool
 };

package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiComboBoxOptionListStyles = exports.LIST_MAX_HEIGHT = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
-var _title = require("../../title/title.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -19,14 +18,16 @@ var LIST_MAX_HEIGHT = exports.LIST_MAX_HEIGHT = 200;
 var euiComboBoxOptionListStyles = exports.euiComboBoxOptionListStyles = function euiComboBoxOptionListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiComboBoxOptionList: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', "".concat(LIST_MAX_HEIGHT, "px")), " overflow:hidden;.euiTextTruncate{pointer-events:none;}.euiComboBoxOption__contentWrapper{display:flex;align-items:center;}.euiComboBoxOption__content{flex:1;text-align:start;overflow-wrap:anywhere;}.euiComboBoxOption__emptyStateText{flex:1;text-align:start;", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";}.euiComboBoxTitle{display:flex;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), (0, _global_styling.logicalCSS)('padding-top', (0, _global_styling.mathWithUnits)(euiTheme.size.s, function (x) {
-      return x + 1;
-    })), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), " ", (0, _title.euiTitle)(euiThemeContext, 'xxxs'), ";};label:euiComboBoxOptionList;"),
+    euiComboBoxOptionList: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', "".concat(LIST_MAX_HEIGHT, "px")), " overflow:hidden;.euiTextTruncate{pointer-events:none;}.euiComboBoxOption__contentWrapper{display:flex;align-items:center;}.euiComboBoxOption__content{flex:1;text-align:start;overflow-wrap:anywhere;}.euiComboBoxOption__emptyStateText{flex:1;text-align:start;", (0, _global_styling.logicalCSS)('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), ";};label:euiComboBoxOptionList;"),
     /* eslint-disable local/css-logical-properties */
-    hasRowHeightAuto: /*#__PURE__*/(0, _react.css)("overflow-y:auto;.euiComboBoxOption__contentWrapper{align-items:flex-start;}", (0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:hasRowHeightAuto;"),
+    hasRowHeightAuto: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
+      hasAnimatedOverflowShadow: true
+    }), " .euiComboBoxOption__contentWrapper{align-items:flex-start;}", (0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:hasRowHeightAuto;"),
     /* eslint-enable local/css-logical-properties */
 
-    euiComboBoxOptionList__virtualization: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), ";;label:euiComboBoxOptionList__virtualization;"),
+    euiComboBoxOptionList__virtualization: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
+      hasAnimatedOverflowShadow: true
+    }), ";;label:euiComboBoxOptionList__virtualization;"),
     euiComboBoxOptionsList__empty: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.s, ";text-align:center;", (0, _global_styling.euiTextBreakWord)(), ";;label:euiComboBoxOptionsList__empty;")
   };
 };