@elastic/eui 115.0.0 → 116.0.0

package/es/components/form/super_select/super_select.js

@@ -1,5 +1,5 @@
-var _excluded = ["className", "options", "valueOfSelected", "placeholder", "onChange", "isOpen", "isInvalid", "hasDividers", "itemClassName", "itemLayoutAlign", "fullWidth", "popoverProps", "compressed"],
-  _excluded2 = ["value", "dropdownDisplay", "inputDisplay"];
+var _excluded = ["className", "options", "valueOfSelected", "placeholder", "onChange", "isOpen", "isInvalid", "itemClassName", "fullWidth", "popoverProps", "compressed"],
+  _excluded2 = ["value", "dropdownDisplay", "inputDisplay", "disabled"];
 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; }
@@ -28,13 +28,13 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React, { Component, createRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { htmlIdGenerator, keys } from '../../../services';
+import { htmlIdGenerator, keys, RenderWithEuiStylesMemoizer } from '../../../services';
 import { EuiI18n } from '../../i18n';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiInputPopover } from '../../popover';
 import { EuiSuperSelectControl } from './super_select_control';
 import { EuiSuperSelectItem } from './super_select_item';
-import { euiSuperSelectStyles as styles } from './super_select.styles';
+import { euiSuperSelectStyles } from './super_select.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ShiftDirection = /*#__PURE__*/function (ShiftDirection) {
   ShiftDirection["BACK"] = "back";
@@ -54,40 +54,50 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "controlButtonRef", /*#__PURE__*/createRef());
     _defineProperty(_this, "describedById", htmlIdGenerator('euiSuperSelect_')('_screenreaderDescribeId'));
     _defineProperty(_this, "state", {
-      isPopoverOpen: _this.props.isOpen || false
+      isPopoverOpen: _this.props.isOpen || false,
+      currentIndex: 0
     });
     _defineProperty(_this, "setItemNode", function (node, index) {
       _this.itemNodes[index] = node;
     });
     _defineProperty(_this, "openPopover", function () {
+      var _this$props = _this.props,
+        options = _this$props.options,
+        valueOfSelected = _this$props.valueOfSelected;
+      var indexOfSelected = options.findIndex(function (option) {
+        return (option === null || option === void 0 ? void 0 : option.value) === valueOfSelected;
+      });
+      var candidateIndex = valueOfSelected != null && indexOfSelected >= 0 ? indexOfSelected : 0;
+      var initialIndex = candidateIndex;
+
+      // If the item is disabled, find the first focusable item going forward
+      while (initialIndex < options.length && (_options$initialIndex = options[initialIndex]) !== null && _options$initialIndex !== void 0 && _options$initialIndex.disabled) {
+        var _options$initialIndex;
+        initialIndex++;
+      }
+      if (initialIndex >= options.length) {
+        initialIndex = candidateIndex;
+      }
       _this.setState({
-        isPopoverOpen: true
+        isPopoverOpen: options.length > 0,
+        currentIndex: initialIndex
       });
-      var focusSelected = function focusSelected() {
-        var indexOfSelected = _this.props.options.reduce(function (indexOfSelected, option, index) {
-          if (indexOfSelected != null) return indexOfSelected;
-          if (option == null) return null;
-          return option.value === _this.props.valueOfSelected ? index : null;
-        }, null);
+      requestAnimationFrame(function () {
         requestAnimationFrame(function () {
           if (!_this._isMounted) {
             return;
           }
-          if (_this.props.valueOfSelected != null && indexOfSelected != null) {
-            _this.focusItemAt(indexOfSelected);
-          } else {
-            _this.focusItemAt(0);
-          }
+          _this.focusItemAt(initialIndex);
           if (_this.props.onFocus) {
             _this.props.onFocus();
           }
         });
-      };
-      requestAnimationFrame(focusSelected);
+      });
     });
     _defineProperty(_this, "closePopover", function () {
       _this.setState({
-        isPopoverOpen: false
+        isPopoverOpen: false,
+        currentIndex: -1
       });
 
       // Refocus back to the toggling control button on popover close
@@ -157,54 +167,58 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "focusItemAt",
-    value: function focusItemAt(index, direction) {
-      var _targetElement;
-      var targetElement = this.itemNodes[index];
-      // If the current index is disabled, find the next non-disabled element
-      while (targetElement && targetElement.disabled) {
-        direction === ShiftDirection.BACK ? index-- : index++;
-        targetElement = this.itemNodes[index];
-      }
-      (_targetElement = targetElement) === null || _targetElement === void 0 || _targetElement.focus();
+    value: function focusItemAt(index) {
+      var _this$itemNodes$index;
+      (_this$itemNodes$index = this.itemNodes[index]) === null || _this$itemNodes$index === void 0 || _this$itemNodes$index.focus();
     }
   }, {
     key: "shiftFocus",
     value: function shiftFocus(direction) {
-      var currentIndex = this.itemNodes.indexOf(document.activeElement);
-      var targetElementIndex;
+      var options = this.props.options;
+      var currentIndex = this.state.currentIndex;
       if (currentIndex === -1) {
         // somehow the select options has lost focus
-        targetElementIndex = 0;
-      } else {
-        // Note: this component purposely does not cycle arrow key navigation
-        // to match native <select> elements
-        if (direction === ShiftDirection.BACK) {
-          targetElementIndex = currentIndex - 1;
-        } else {
-          targetElementIndex = currentIndex + 1;
+        this.focusItemAt(0);
+        this.setState({
+          currentIndex: 0
+        });
+        return;
+      }
+
+      // Note: this component purposely does not cycle arrow key navigation
+      // to match native <select> elements
+      var step = direction === ShiftDirection.BACK ? -1 : 1;
+      var nextIndex = currentIndex + step;
+      while (nextIndex >= 0 && nextIndex < options.length) {
+        var _options$nextIndex;
+        if (!((_options$nextIndex = options[nextIndex]) !== null && _options$nextIndex !== void 0 && _options$nextIndex.disabled)) {
+          this.focusItemAt(nextIndex);
+          this.setState({
+            currentIndex: nextIndex
+          });
+          return;
         }
+        nextIndex += step;
       }
-      this.focusItemAt(targetElementIndex, direction);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-      var _this$props = this.props,
-        className = _this$props.className,
-        options = _this$props.options,
-        valueOfSelected = _this$props.valueOfSelected,
-        placeholder = _this$props.placeholder,
-        onChange = _this$props.onChange,
-        isOpen = _this$props.isOpen,
-        isInvalid = _this$props.isInvalid,
-        hasDividers = _this$props.hasDividers,
-        itemClassName = _this$props.itemClassName,
-        itemLayoutAlign = _this$props.itemLayoutAlign,
-        fullWidth = _this$props.fullWidth,
-        popoverProps = _this$props.popoverProps,
-        compressed = _this$props.compressed,
-        rest = _objectWithoutProperties(_this$props, _excluded);
+      var _this2 = this,
+        _options$this$state$c;
+      var _this$props2 = this.props,
+        className = _this$props2.className,
+        options = _this$props2.options,
+        valueOfSelected = _this$props2.valueOfSelected,
+        placeholder = _this$props2.placeholder,
+        onChange = _this$props2.onChange,
+        isOpen = _this$props2.isOpen,
+        isInvalid = _this$props2.isInvalid,
+        itemClassName = _this$props2.itemClassName,
+        fullWidth = _this$props2.fullWidth,
+        popoverProps = _this$props2.popoverProps,
+        compressed = _this$props2.compressed,
+        rest = _objectWithoutProperties(_this$props2, _excluded);
       var popoverClasses = classNames('euiSuperSelect', popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.className);
       var button = ___EmotionJSX(EuiSuperSelectControl, _extends({
         options: options,
@@ -224,58 +238,72 @@ export var EuiSuperSelect = /*#__PURE__*/function (_Component) {
         var value = option.value,
           dropdownDisplay = option.dropdownDisplay,
           inputDisplay = option.inputDisplay,
+          disabled = option.disabled,
           optionRest = _objectWithoutProperties(option, _excluded2);
         if (value == null) return;
         return ___EmotionJSX(EuiSuperSelectItem, _extends({
-          key: index,
+          key: index
+          /* NOTE: This should rather use "li" to align select-like behavior. But the current
+          implementation relies on the interactive and focusable item for the navigation.
+          This will require additional refactoring to adjust but we might want to decide first
+          if the effort is worth it, considering the unification plans for selection components
+          as part of OneSelect (https://github.com/elastic/eui/issues/8808).
+          */,
+          element: "button",
           id: String(value),
           className: itemClassName,
-          hasDividers: hasDividers,
-          layoutAlign: itemLayoutAlign,
-          icon: valueOfSelected === value ? 'check' : 'empty',
+          checked: valueOfSelected === value ? 'on' : undefined,
+          isSelected: valueOfSelected === value,
+          isFocused: _this2.state.currentIndex === index,
+          isSingleSelection: true,
+          isDisabled: disabled,
+          textWrap: "wrap",
           onClick: function onClick() {
             return _this2.itemClicked(value);
           },
           onKeyDown: _this2.onItemKeyDown,
-          buttonRef: function buttonRef(node) {
+          ref: function ref(node) {
             return _this2.setItemNode(node, index);
           },
           "aria-selected": valueOfSelected === value
         }, optionRest), dropdownDisplay || inputDisplay);
       });
-      return ___EmotionJSX(EuiInputPopover, _extends({
-        closePopover: this.closePopover,
-        panelPaddingSize: "none"
-      }, popoverProps, {
-        className: popoverClasses,
-        isOpen: isOpen || this.state.isPopoverOpen,
-        input: button,
-        fullWidth: fullWidth,
-        disableFocusTrap: true // This component handles its own focus manually
-      }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
-        id: this.describedById
-      }, ___EmotionJSX(EuiI18n, {
-        token: "euiSuperSelect.screenReaderAnnouncement",
-        default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
-      }))), ___EmotionJSX(EuiI18n, {
-        token: "euiSuperSelect.ariaLabel",
-        default: "Select listbox"
-      }, function (ariaLabel) {
-        return ___EmotionJSX("div", {
-          "aria-label": ariaLabel,
-          "aria-describedby": _this2.describedById,
-          css: styles.euiSuperSelect__listbox,
-          className: "euiSuperSelect__listbox eui-scrollBar",
-          role: "listbox",
-          "aria-activedescendant": valueOfSelected != null ? String(valueOfSelected) : undefined,
-          tabIndex: 0
-        }, items);
-      }));
+      var ariaActiveDescendant = ((_options$this$state$c = options[this.state.currentIndex]) === null || _options$this$state$c === void 0 ? void 0 : _options$this$state$c.value) != null ? String(options[this.state.currentIndex].value) : undefined;
+      return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(euiSuperSelectStyles);
+        return ___EmotionJSX(EuiInputPopover, _extends({
+          closePopover: _this2.closePopover,
+          panelPaddingSize: "none"
+        }, popoverProps, {
+          className: popoverClasses,
+          isOpen: isOpen || _this2.state.isPopoverOpen,
+          input: button,
+          fullWidth: fullWidth,
+          disableFocusTrap: true // This component handles its own focus manually
+        }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+          id: _this2.describedById
+        }, ___EmotionJSX(EuiI18n, {
+          token: "euiSuperSelect.screenReaderAnnouncement",
+          default: "You are in a form selector and must select a single option. Use the Up and Down arrow keys to navigate or Escape to close."
+        }))), ___EmotionJSX(EuiI18n, {
+          token: "euiSuperSelect.ariaLabel",
+          default: "Select listbox"
+        }, function (ariaLabel) {
+          return ___EmotionJSX("div", {
+            "aria-label": ariaLabel,
+            "aria-describedby": _this2.describedById,
+            css: styles.euiSuperSelect__listbox,
+            className: "euiSuperSelect__listbox eui-scrollBar",
+            role: "listbox",
+            "aria-activedescendant": ariaActiveDescendant,
+            tabIndex: 0
+          }, items);
+        }));
+      });
     }
   }]);
 }(Component);
 _defineProperty(EuiSuperSelect, "defaultProps", {
-  hasDividers: false,
   fullWidth: false,
   compressed: false,
   isInvalid: false,
@@ -345,15 +373,6 @@ EuiSuperSelect.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
-  /**
-       * Change to `true` if you want horizontal lines between options.
-       * This is best used when options are multi-line.
-       */
-  hasDividers: PropTypes.bool,
-  /**
-       * Change `EuiContextMenuItem` layout position of icon
-       */
-  itemLayoutAlign: PropTypes.oneOf(["center", "top", "bottom"]),
   /**
        * Controls whether the options are shown. Default: false
        */

package/es/components/form/super_select/super_select.styles.js

@@ -7,16 +7,12 @@
  */
 
 import { css } from '@emotion/react';
-import { euiFontSize, euiTextTruncate, logicalCSS, logicalCSSWithFallback, logicalTextAlignCSS } from '../../../global_styling';
+import { euiTextTruncate, logicalCSS, logicalCSSWithFallback, logicalTextAlignCSS } from '../../../global_styling';
 import { euiFormControlStyles, euiFormVariables } from '../form.styles';
-export var euiSuperSelectStyles = {
-  euiSuperSelect__listbox: /*#__PURE__*/css(logicalCSS('max-height', '300px'), " ", logicalCSSWithFallback('overflow-y', 'auto'), " ", logicalCSSWithFallback('overflow-x', 'hidden'), ";;label:euiSuperSelect__listbox;")
-};
-export var euiSuperSelectItemStyles = function euiSuperSelectItemStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+export var euiSuperSelectStyles = function euiSuperSelectStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
   return {
-    euiSuperSelect__item: /*#__PURE__*/css("padding:", euiTheme.size.s, ";", euiFontSize(euiThemeContext, 's'), ";;label:euiSuperSelect__item;"),
-    hasDividers: /*#__PURE__*/css("&:not(:last-of-type){", logicalCSS('border-bottom', euiTheme.border.thin), ";};label:hasDividers;")
+    euiSuperSelect__listbox: /*#__PURE__*/css(logicalCSS('max-height', '300px'), " ", logicalCSSWithFallback('overflow-y', 'auto'), " ", logicalCSSWithFallback('overflow-x', 'hidden'), " padding:", euiTheme.size.s, ";.euiSuperSelect__item:focus{outline:none;};label:euiSuperSelect__listbox;")
   };
 };
 export var euiSuperSelectControlStyles = function euiSuperSelectControlStyles(euiThemeContext) {

package/es/components/form/super_select/super_select_item.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "hasDividers"];
+var _excluded = ["children", "className"];
 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; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -10,12 +10,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import PropTypes from "prop-types";
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../../services';
-import { EuiContextMenuItem } from '../../context_menu';
-import { euiSuperSelectItemStyles } from './super_select.styles';
+import { EuiListItemLayout } from '../../list_item_layout';
 
 // Type exposed to consumers via API
 
@@ -23,20 +20,15 @@ import { euiSuperSelectItemStyles } from './super_select.styles';
 // from consumer props to internal EUI props
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // Internal subcomponent util, primarily for easier usage of hooks
-export var EuiSuperSelectItem = function EuiSuperSelectItem(_ref) {
+export var EuiSuperSelectItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    hasDividers = _ref.hasDividers,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiSuperSelect__item', className);
-  var styles = useEuiMemoizedStyles(euiSuperSelectItemStyles);
-  var cssStyles = [styles.euiSuperSelect__item, hasDividers && styles.hasDividers];
-  return ___EmotionJSX(EuiContextMenuItem, _extends({
-    css: cssStyles,
-    className: classes,
-    role: "option"
+  return ___EmotionJSX(EuiListItemLayout, _extends({
+    ref: ref,
+    role: "option",
+    className: classes
   }, rest), children);
-};
-EuiSuperSelectItem.propTypes = {
-  hasDividers: PropTypes.bool
-};
+});
+EuiSuperSelectItem.displayName = 'EuiSuperSelectItem';

package/es/components/link/external_link_icon.js

@@ -1,4 +1,4 @@
-var _excluded = ["target", "external"];
+var _excluded = ["target", "external", "size"];
 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; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -30,6 +30,8 @@ var iconStyle = function iconStyle(_ref) {
 export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
   var target = _ref2.target,
     external = _ref2.external,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 's' : _ref2$size,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var iconCssStyle = useEuiMemoizedStyles(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
@@ -38,7 +40,7 @@ export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
   }
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, _extends({
     css: iconCssStyle,
-    size: "s",
+    size: size,
     type: "external",
     role: "presentation"
   }, rest)), target === '_blank' ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {

package/es/components/list_group/list_group.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["children", "className", "listItems", "style", "flush", "bordered", "gutterSize", "wrapText", "maxWidth", "showToolTips", "color", "size", "ariaLabelledby"];
+var _excluded = ["children", "className", "listItems", "style", "bordered", "wrapText", "maxWidth", "showToolTips", "color", "ariaLabelledby"];
 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; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -24,31 +24,26 @@ import { logicalStyle } from '../../global_styling';
 import { EuiListGroupItem } from './list_group_item';
 import { euiListGroupStyles } from './list_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var GUTTER_SIZES = ['none', 's', 'm'];
 export var EuiListGroup = function EuiListGroup(_ref) {
   var children = _ref.children,
     className = _ref.className,
     listItems = _ref.listItems,
     style = _ref.style,
-    _ref$flush = _ref.flush,
-    flush = _ref$flush === void 0 ? false : _ref$flush,
     _ref$bordered = _ref.bordered,
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
-    _ref$gutterSize = _ref.gutterSize,
-    gutterSize = _ref$gutterSize === void 0 ? 's' : _ref$gutterSize,
     _ref$wrapText = _ref.wrapText,
     wrapText = _ref$wrapText === void 0 ? false : _ref$wrapText,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? true : _ref$maxWidth,
     _ref$showToolTips = _ref.showToolTips,
     showToolTips = _ref$showToolTips === void 0 ? false : _ref$showToolTips,
-    color = _ref.color,
-    size = _ref.size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'text' : _ref$color,
     ariaLabelledby = _ref.ariaLabelledby,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiListGroup', className);
   var styles = useEuiMemoizedStyles(euiListGroupStyles);
-  var cssStyles = [styles.euiListGroup, styles[gutterSize], flush && styles.flush, bordered && styles.bordered, maxWidth === true && styles.maxWidthDefault];
+  var cssStyles = [styles.euiListGroup, bordered && styles.bordered, maxWidth === true && styles.maxWidthDefault];
   var maxWidthStyle = useMemo(function () {
     if (maxWidth && maxWidth !== true) {
       return logicalStyle('max-width', maxWidth);
@@ -64,12 +59,11 @@ export var EuiListGroup = function EuiListGroup(_ref) {
           // we're passing the parent `color` and `size` down to the children
           // so that they can inherit it if they don't have one
           ,
-          color: color,
-          size: size
+          color: color
         }, item));
       });
     }
-  }, [listItems, color, size, wrapText, showToolTips]);
+  }, [listItems, color, wrapText, showToolTips]);
   var listItemsOrChildren = renderedListItems ||
   // Note that there's no point in memoizing `children`, as JSX changes every rerender
   React.Children.map(children, function (child) {
@@ -77,8 +71,7 @@ export var EuiListGroup = function EuiListGroup(_ref) {
       return cloneElementWithCss(child, _objectSpread(_objectSpread({
         // we're passing the parent `color` and `size` down to the children
         // so that they can inherit it if they don't have one
-        color: color,
-        size: size
+        color: color
       }, showToolTips && {
         showToolTip: true
       }), child.props));
@@ -100,14 +93,6 @@ EuiListGroup.propTypes = {
        * Add a border to the list container
        */
   bordered: PropTypes.bool,
-  /**
-       * Remove container padding, stretching list items to the edges
-       */
-  flush: PropTypes.bool,
-  /**
-       * Spacing between list items
-       */
-  gutterSize: PropTypes.any,
   /**
        * Items to display in this group. See {@link EuiListGroupItem}
        */
@@ -117,12 +102,22 @@ EuiListGroup.propTypes = {
     "data-test-subj": PropTypes.string,
     css: PropTypes.any,
     /**
-         * Size of the label text
-         */
-    size: PropTypes.any,
+       * Controls the disabled behavior via the native `disabled` attribute.
+       */
+    isDisabled: PropTypes.bool,
+    /**
+       * NOTE: Beta feature, may be changed or removed in the future
+       *
+       * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+       * This results in a semantically disabled button without the default browser handling of the disabled state.
+       *
+       * Use e.g. when a disabled button should have a tooltip.
+       */
+    hasAriaDisabled: PropTypes.bool,
     /**
          * By default the item will get the color `text`.
          * You can customize the color of the item by passing a color name.
+         * @default 'text'
          */
     color: PropTypes.any,
     /**
@@ -133,10 +128,6 @@ EuiListGroup.propTypes = {
          * Apply styles indicating an item is active
          */
     isActive: PropTypes.bool,
-    /**
-         * Apply styles indicating an item is disabled
-         */
-    isDisabled: PropTypes.bool,
     /**
          * Make the list item label a link.
          * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -263,11 +254,6 @@ EuiListGroup.propTypes = {
        * @default text
        */
   color: PropTypes.any,
-  /**
-       * Change the size of all `listItems` at once
-       * @default m
-       */
-  size: PropTypes.any,
   /**
        * Sets the max-width of the page.
        * Set to `true` to use the default size,

package/es/components/list_group/list_group.styles.js

@@ -11,14 +11,6 @@ import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 import { euiFormMaxWidth } from '../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1urrzow-flush",
-  styles: "padding:0;border:none;.euiListGroupItem{border-radius:0;};label:flush;"
-} : {
-  name: "1urrzow-flush",
-  styles: "padding:0;border:none;.euiListGroupItem{border-radius:0;};label:flush;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "2tmo78-euiListGroup",
   styles: "display:flex;flex-direction:column;label:euiListGroup;"
 } : {
@@ -31,14 +23,8 @@ export var euiListGroupStyles = function euiListGroupStyles(euiThemeContext) {
   var formMaxWidth = euiFormMaxWidth(euiThemeContext);
   return {
     // Base
-    euiListGroup: _ref2,
-    // Variants
-    flush: _ref,
+    euiListGroup: _ref,
     bordered: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.thin, ";;label:bordered;"),
-    maxWidthDefault: /*#__PURE__*/css(logicalCSS('max-width', formMaxWidth), ";;label:maxWidthDefault;"),
-    // Gutter sizes
-    none: /*#__PURE__*/css(";label:none;"),
-    s: /*#__PURE__*/css("padding:", euiTheme.size.s, ";gap:", euiTheme.size.s, ";;label:s;"),
-    m: /*#__PURE__*/css("padding:", euiTheme.size.base, ";gap:", euiTheme.size.base, ";;label:m;")
+    maxWidthDefault: /*#__PURE__*/css(logicalCSS('max-width', formMaxWidth), ";;label:maxWidthDefault;")
   };
 };