@elastic/eui 114.3.0 → 116.0.0

package/es/components/combo_box/combo_box.js

@@ -1,4 +1,4 @@
-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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -101,6 +101,9 @@ export var 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;
@@ -121,41 +124,32 @@ export var 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)
         };
       });
     });
@@ -373,27 +367,36 @@ export var 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)
+          )
         });
       }
     });
@@ -501,6 +504,7 @@ export var 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,
@@ -508,12 +512,12 @@ export var 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');
@@ -564,7 +568,8 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             delimiter: delimiter,
             getSelectedOptionForSearchValue: getSelectedOptionForSearchValue,
             listboxAriaLabel: listboxAriaLabel,
-            truncationProps: truncationProps
+            truncationProps: truncationProps,
+            onFocusBadge: onFocusBadge
           });
         });
       }
@@ -589,11 +594,11 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             ref: _this2.comboBoxRefCallback
           }), ___EmotionJSX(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
@@ -601,7 +606,10 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
             "aria-live": "off",
             input: ___EmotionJSX(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,
@@ -791,7 +799,7 @@ EuiComboBox.propTypes = {
   "aria-labelledby": PropTypes.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/es/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -1,6 +1,6 @@
 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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -28,10 +28,10 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { FixedSizeList } from 'react-window';
+import { VariableSizeList } from 'react-window';
 import { RenderWithEuiStylesMemoizer } from '../../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiHighlight } from '../../highlight';
@@ -39,12 +39,12 @@ import { EuiMark } from '../../mark';
 import { EuiText } from '../../text';
 import { EuiLoadingSpinner } from '../../loading';
 import { EuiI18n } from '../../i18n';
-import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
+import { euiSelectableListGroupLabelStyles } from '../../selectable/selectable_list/selectable_list.styles';
+import { getListItemSize } from '../../selectable/selectable_list/utils/get_list_item_size';
 import { EuiBadge } from '../../badge';
 import { EuiTextTruncate } from '../../text_truncate';
 import { EuiInputPopoverWidthContext } from '../../popover/input_popover';
-import { EuiComboBoxOptionAppendPrepend } from '../utils';
-import { EuiComboBoxTitle } from './combo_box_title';
+import { EuiListItemLayout } from '../../list_item_layout';
 import { euiComboBoxOptionListStyles, LIST_MAX_HEIGHT } from './combo_box_options_list.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var hitEnterBadge = ___EmotionJSX(EuiBadge, {
@@ -62,13 +62,20 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
     }
     _this = _callSuper(this, EuiComboBoxOptionsList, [].concat(args));
     _defineProperty(_this, "listRef", null);
+    _defineProperty(_this, "listBoxRef", /*#__PURE__*/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 ___EmotionJSX("div", _extends({}, rest, _this.getListInnerElementProps()), children);
+      return ___EmotionJSX("ul", _extends({}, rest, _this.getListInnerElementProps()), children);
     });
     _defineProperty(_this, "ListRow", function (_ref2) {
       var _option$key;
@@ -77,33 +84,43 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         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 ___EmotionJSX("div", {
-          key: key !== null && key !== void 0 ? key : label,
-          style: style
-        }, ___EmotionJSX(EuiComboBoxTitle, null, prepend, label, append));
+        return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+          var styles = stylesMemoizer(euiSelectableListGroupLabelStyles);
+          return ___EmotionJSX("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) {
@@ -111,40 +128,54 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       }
       var optionIsFocused = activeOptionIndex === index;
       var optionIsDisabled = option.hasOwnProperty('disabled') && option.disabled === true;
-      return ___EmotionJSX(EuiFilterSelectItem, _extends({
-        style: style,
+      var hasOnFocusBadge = onFocusBadge && optionIsFocused && !optionIsDisabled;
+      return ___EmotionJSX(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: classNames('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 ? ___EmotionJSX(React.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), ___EmotionJSX("span", {
-        className: "euiComboBoxOption__contentWrapper"
-      }, ___EmotionJSX(EuiComboBoxOptionAppendPrepend, {
-        option: option,
-        classNamePrefix: "euiComboBoxOption",
-        marginSize: "s"
-      }, ___EmotionJSX("span", {
-        className: classNames('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
       };
     });
@@ -198,49 +229,66 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
       // just highlight the entire truncated text
       ___EmotionJSX(EuiMark, null, text));
     });
+    _defineProperty(_this, "getItemSize", function (index) {
+      var _ref3 = _this.props,
+        rowHeight = _ref3.rowHeight;
+      var option = _this.props.matchingOptions[index];
+      return 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 = ___EmotionJSX(EuiFlexGroup, {
@@ -338,6 +386,10 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         // bounded by max-height of .euiComboBoxOptionsList
         boundedHeight = height > LIST_MAX_HEIGHT ? 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 ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
         var styles = stylesMemoizer(euiComboBoxOptionListStyles);
         return ___EmotionJSX("div", _extends({
@@ -345,29 +397,39 @@ export var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
           className: "euiComboBoxOptionsList",
           "data-test-subj": classNames('comboBoxOptionsList', dataTestSubj),
           ref: listRef
-        }, rest), emptyStateContent ? ___EmotionJSX(EuiText, {
+        }, rest, {
+          onMouseDown: function onMouseDown(e) {
+            // prevent focus shifting; expected behavior to keep focus in the input
+            e.preventDefault();
+          }
+        }), emptyStateContent ? ___EmotionJSX(EuiText, {
           size: "xs",
           css: styles.euiComboBoxOptionsList__empty,
           className: "euiComboBoxOptionsList__empty"
-        }, emptyStateContent) : rowHeight === 'auto' ? ___EmotionJSX("div", _this2.getListInnerElementProps(), matchingOptions.map(function (_, index) {
+        }, emptyStateContent) : rowHeight === 'auto' ? ___EmotionJSX("ul", _extends({
+          ref: _this2.listBoxRef
+        }, _this2.getListInnerElementProps()), matchingOptions.map(function (_, index) {
           return ___EmotionJSX(_this2.ListRow, {
             data: matchingOptions,
             index: index,
-            key: index // same as FixedSizeList's default
+            key: index // same as VariableSizeList's default
             ,
             style: {}
           });
-        })) : ___EmotionJSX(FixedSizeList, {
+        })) : ___EmotionJSX(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));
       });
     }
@@ -521,5 +583,6 @@ EuiComboBoxOptionsList.propTypes = {
     asPlainText: PropTypes.bool
   }).isRequired]),
   delimiter: PropTypes.string,
-  truncationProps: PropTypes.any
+  truncationProps: PropTypes.any,
+  onFocusBadge: PropTypes.bool
 };

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

@@ -7,20 +7,21 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, mathWithUnits, euiScrollBarStyles, euiTextBreakWord } from '../../../global_styling';
-import { euiTitle } from '../../title/title.styles';
+import { logicalCSS, euiScrollBarStyles, euiTextBreakWord, euiYScrollWithShadows } from '../../../global_styling';
 export var LIST_MAX_HEIGHT = 200;
 export var euiComboBoxOptionListStyles = function euiComboBoxOptionListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiComboBoxOptionList: /*#__PURE__*/css(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;", logicalCSS('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";}.euiComboBoxTitle{display:flex;", logicalCSS('padding-horizontal', euiTheme.size.s), logicalCSS('padding-top', mathWithUnits(euiTheme.size.s, function (x) {
-      return x + 1;
-    })), " ", logicalCSS('padding-bottom', euiTheme.size.xs), " ", euiTitle(euiThemeContext, 'xxxs'), ";};label:euiComboBoxOptionList;"),
+    euiComboBoxOptionList: /*#__PURE__*/css(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;", logicalCSS('margin-bottom', 0), ";}.euiComboBoxOption__enterBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiComboBoxOptionList;"),
     /* eslint-disable local/css-logical-properties */
-    hasRowHeightAuto: /*#__PURE__*/css("overflow-y:auto;.euiComboBoxOption__contentWrapper{align-items:flex-start;}", euiScrollBarStyles(euiThemeContext), ";;label:hasRowHeightAuto;"),
+    hasRowHeightAuto: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext, {
+      hasAnimatedOverflowShadow: true
+    }), " .euiComboBoxOption__contentWrapper{align-items:flex-start;}", euiScrollBarStyles(euiThemeContext), ";;label:hasRowHeightAuto;"),
     /* eslint-enable local/css-logical-properties */
 
-    euiComboBoxOptionList__virtualization: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), ";;label:euiComboBoxOptionList__virtualization;"),
+    euiComboBoxOptionList__virtualization: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext, {
+      hasAnimatedOverflowShadow: true
+    }), ";;label:euiComboBoxOptionList__virtualization;"),
     euiComboBoxOptionsList__empty: /*#__PURE__*/css("padding:", euiTheme.size.s, ";text-align:center;", euiTextBreakWord(), ";;label:euiComboBoxOptionsList__empty;")
   };
 };