@elastic/eui 114.3.0 → 116.0.0

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

@@ -24,17 +24,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 _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; }
 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; }
@@ -62,13 +62,20 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
     }
     _this = _callSuper(this, EuiComboBoxOptionsList, [].concat(args));
     (0, _defineProperty2.default)(_this, "listRef", null);
+    (0, _defineProperty2.default)(_this, "listBoxRef", /*#__PURE__*/(0, _react.createRef)());
+    (0, _defineProperty2.default)(_this, "optionRefs", {});
     (0, _defineProperty2.default)(_this, "setListRef", function (ref) {
       _this.listRef = ref;
     });
+    (0, _defineProperty2.default)(_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);
+    });
     (0, _defineProperty2.default)(_this, "ListInnerElement", function (_ref) {
       var children = _ref.children,
         rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-      return (0, _react2.jsx)("div", (0, _extends2.default)({}, rest, _this.getListInnerElementProps()), children);
+      return (0, _react2.jsx)("ul", (0, _extends2.default)({}, rest, _this.getListInnerElementProps()), children);
     });
     (0, _defineProperty2.default)(_this, "ListRow", function (_ref2) {
       var _option$key;
@@ -77,33 +84,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 = (0, _objectWithoutProperties2.default)(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) {
@@ -111,40 +128,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, (0, _extends2.default)({
-        style: style,
+      var hasOnFocusBadge = onFocusBadge && optionIsFocused && !optionIsDisabled;
+      return (0, _react2.jsx)(_list_item_layout.EuiListItemLayout, (0, _extends2.default)({
+        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));
     });
     (0, _defineProperty2.default)(_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 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
       // just highlight the entire truncated text
       (0, _react2.jsx)(_mark.EuiMark, null, text));
     });
+    (0, _defineProperty2.default)(_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;
   }
   (0, _inherits2.default)(EuiComboBoxOptionsList, _Component);
   return (0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_this$props4, _excluded3);
       var emptyStateContent;
       if (isLoading) {
         emptyStateContent = (0, _react2.jsx)(_flex.EuiFlexGroup, {
@@ -338,6 +386,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", (0, _extends2.default)({
@@ -345,29 +397,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", (0, _extends2.default)({
+          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));
       });
     }

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

package/optimize/lib/components/context_menu/context_menu.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.EuiContextMenuClass = exports.EuiContextMenu = void 0;
+exports.EuiContextMenuClass = exports.EuiContextMenu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -24,8 +24,8 @@ var _context_menu = require("./context_menu.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["isSeparator", "key"],
   _excluded2 = ["panel", "name", "key", "icon", "onClick"],
-  _excluded3 = ["id", "title", "items", "content", "width", "initialFocusedItemIndex", "size"],
-  _excluded4 = ["stylesMemoizer", "panels", "onPanelChange", "className", "initialPanelId", "size"];
+  _excluded3 = ["id", "title", "items", "content", "width", "initialFocusedItemIndex"],
+  _excluded4 = ["stylesMemoizer", "panels", "onPanelChange", "className", "initialPanelId", "height"];
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -36,7 +36,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var SIZES = exports.SIZES = ['s', 'm'];
 var isItemSeparator = function isItemSeparator(item) {
   return item.isSeparator === true;
 };
@@ -149,10 +148,11 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
     (0, _defineProperty2.default)(_this, "mapIdsToRenderedItems", function () {
       var panels = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
       var idToRenderedItemsMap = {};
+      var idToPanelMap = mapIdsToPanels(panels);
 
       // Pre-rendering the items lets us check reference equality inside of EuiContextMenuPanel.
       panels.forEach(function (panel) {
-        idToRenderedItemsMap[panel.id] = _this.renderItems(panel.items);
+        idToRenderedItemsMap[panel.id] = _this.renderItems(panel.items, idToPanelMap);
       });
       return idToRenderedItemsMap;
     });
@@ -202,6 +202,7 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
     value: function renderItems() {
       var _this2 = this;
       var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+      var idToPanelMap = arguments.length > 1 ? arguments[1] : undefined;
       return items.map(function (item, index) {
         if (item.renderItem) {
           var _item$key;
@@ -216,7 +217,8 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
             _rest = (0, _objectWithoutProperties2.default)(item, _excluded);
           return (0, _react2.jsx)(_horizontal_rule.EuiHorizontalRule, (0, _extends2.default)({
             key: _key,
-            margin: "none"
+            margin: "xs",
+            role: "separator"
           }, _rest));
         }
         var panel = item.panel,
@@ -225,6 +227,9 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
           icon = item.icon,
           onClick = item.onClick,
           rest = (0, _objectWithoutProperties2.default)(item, _excluded2);
+        var targetPanel = panel != null ? idToPanelMap[String(panel)] : undefined;
+        var ariaHasPopup = panel == null || targetPanel == null ? undefined : targetPanel && Array.isArray(targetPanel.items) && targetPanel.items.length > 0 ? 'menu' : 'true'; // for custom content (no items) we shouldn't indicate it as "menu"
+
         var onClickHandler = panel ? function (event) {
           if (onClick && event) {
             event.persist();
@@ -242,7 +247,8 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
           key: key || (typeof name === 'string' ? name : undefined) || index,
           icon: icon,
           onClick: onClickHandler,
-          hasPanel: Boolean(panel)
+          hasPanel: Boolean(panel),
+          "aria-haspopup": ariaHasPopup
         }, rest), name);
       });
     }
@@ -260,7 +266,6 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
         content = panel.content,
         _width = panel.width,
         initialFocusedItemIndex = panel.initialFocusedItemIndex,
-        _size = panel.size,
         rest = (0, _objectWithoutProperties2.default)(panel, _excluded3);
 
       // As above, we need to wait for EuiOutsideClickDetector to complete its logic before
@@ -277,7 +282,7 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
       };
       return (0, _react2.jsx)(_context_menu_panel.EuiContextMenuPanel, (0, _extends2.default)({
         key: panelId,
-        size: this.props.size,
+        height: this.props.height,
         css: cssStyles,
         onHeightChange: transitionType === 'in' ? this.onIncomingPanelHeightChange : undefined,
         onTransitionComplete: transitionType === 'out' ? this.onOutGoingPanelTransitionComplete : undefined,
@@ -301,7 +306,7 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
         onPanelChange = _this$props2.onPanelChange,
         className = _this$props2.className,
         initialPanelId = _this$props2.initialPanelId,
-        size = _this$props2.size,
+        height = _this$props2.height,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded4);
       var incomingPanel = this.renderPanel(this.state.incomingPanelId, 'in');
       var outgoingPanel;
@@ -311,11 +316,12 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
       var width = this.state.idToPanelMap[this.state.incomingPanelId] && this.state.idToPanelMap[this.state.incomingPanelId].width ? this.state.idToPanelMap[this.state.incomingPanelId].width : undefined;
       var classes = (0, _classnames.default)('euiContextMenu', className);
       var styles = stylesMemoizer(_context_menu.euiContextMenuStyles);
+      var cssStyles = [styles.euiContextMenu, height && styles.fixedHeight];
       return (0, _react2.jsx)("div", (0, _extends2.default)({
-        css: styles.euiContextMenu,
+        css: cssStyles,
         className: classes,
         style: {
-          height: this.state.height,
+          height: height !== null && height !== void 0 ? height : this.state.height,
           width: width
         }
       }, rest), outgoingPanel, incomingPanel);
@@ -339,7 +345,6 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
   }]);
 }(_react.Component);
 (0, _defineProperty2.default)(EuiContextMenuClass, "defaultProps", {
-  panels: [],
-  size: 'm'
+  panels: []
 });
 var EuiContextMenu = exports.EuiContextMenu = (0, _services.withEuiStylesMemoizer)(EuiContextMenuClass);

package/optimize/lib/components/context_menu/context_menu.styles.js

@@ -27,6 +27,9 @@ var euiContextMenuStyles = exports.euiContextMenuStyles = function euiContextMen
   var _euiContextMenuVariab = euiContextMenuVariables(euiThemeContext),
     panelWidth = _euiContextMenuVariab.panelWidth;
   return {
-    euiContextMenu: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', panelWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", _global_styling.euiCanAnimate, "{transition:height ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiContextMenu;")
+    euiContextMenu: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', panelWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", _global_styling.euiCanAnimate, "{transition:height ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiContextMenu;"),
+    fixedHeight: /*#__PURE__*/(0, _react.css)(".euiContextMenuPanel{display:flex;flex-direction:column;", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiContextMenuPanel__list{display:block;flex:1 1 0;", (0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
+      hasAnimatedOverflowShadow: true
+    }), ";};label:fixedHeight;")
   };
 };