@elastic/eui 115.0.0 → 116.0.0

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

package/es/components/context_menu/context_menu.js

@@ -1,7 +1,7 @@
 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 _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; }
@@ -36,7 +36,6 @@ import { EuiContextMenuPanel } from './context_menu_panel';
 import { EuiContextMenuItem } from './context_menu_item';
 import { euiContextMenuStyles } from './context_menu.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var SIZES = ['s', 'm'];
 var isItemSeparator = function isItemSeparator(item) {
   return item.isSeparator === true;
 };
@@ -149,10 +148,11 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
     _defineProperty(_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 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
     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 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
             _rest = _objectWithoutProperties(item, _excluded);
           return ___EmotionJSX(EuiHorizontalRule, _extends({
             key: _key,
-            margin: "none"
+            margin: "xs",
+            role: "separator"
           }, _rest));
         }
         var panel = item.panel,
@@ -225,6 +227,9 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           icon = item.icon,
           onClick = item.onClick,
           rest = _objectWithoutProperties(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 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
           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 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
         content = panel.content,
         _width = panel.width,
         initialFocusedItemIndex = panel.initialFocusedItemIndex,
-        _size = panel.size,
         rest = _objectWithoutProperties(panel, _excluded3);
 
       // As above, we need to wait for EuiOutsideClickDetector to complete its logic before
@@ -277,7 +282,7 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
       };
       return ___EmotionJSX(EuiContextMenuPanel, _extends({
         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 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
         onPanelChange = _this$props2.onPanelChange,
         className = _this$props2.className,
         initialPanelId = _this$props2.initialPanelId,
-        size = _this$props2.size,
+        height = _this$props2.height,
         rest = _objectWithoutProperties(_this$props2, _excluded4);
       var incomingPanel = this.renderPanel(this.state.incomingPanelId, 'in');
       var outgoingPanel;
@@ -311,11 +316,12 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
       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 = classNames('euiContextMenu', className);
       var styles = stylesMemoizer(euiContextMenuStyles);
+      var cssStyles = [styles.euiContextMenu, height && styles.fixedHeight];
       return ___EmotionJSX("div", _extends({
-        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,8 +345,7 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
   }]);
 }(Component);
 _defineProperty(EuiContextMenuClass, "defaultProps", {
-  panels: [],
-  size: 'm'
+  panels: []
 });
 EuiContextMenuClass.propTypes = {
   className: PropTypes.string,
@@ -373,10 +378,6 @@ EuiContextMenuClass.propTypes = {
     content: PropTypes.node,
     width: PropTypes.any,
     initialFocusedItemIndex: PropTypes.number,
-    /**
-       * Alters the size of the items and the title
-       */
-    size: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
@@ -388,9 +389,6 @@ EuiContextMenuClass.propTypes = {
        */
   onPanelChange: PropTypes.func,
   initialPanelId: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]),
-  /**
-       * Alters the size of the items and the title
-       */
-  size: PropTypes.any
+  height: PropTypes.any
 };
 export var EuiContextMenu = withEuiStylesMemoizer(EuiContextMenuClass);

package/es/components/context_menu/context_menu.styles.js

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