@elastic/eui 90.0.0 → 91.0.0

package/es/components/accordion/accordion.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "id", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
+var _excluded = ["children", "className", "id", "role", "element", "buttonElement", "buttonProps", "buttonClassName", "buttonContentClassName", "buttonContent", "arrowDisplay", "arrowProps", "extraAction", "paddingSize", "borders", "initialIsOpen", "forceState", "isLoading", "isLoadingMessage", "isDisabled", "theme"];
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -103,6 +103,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         children = _this$props3.children,
         className = _this$props3.className,
         id = _this$props3.id,
+        role = _this$props3.role,
         _this$props3$element = _this$props3.element,
         Element = _this$props3$element === void 0 ? 'div' : _this$props3$element,
         buttonElement = _this$props3.buttonElement,
@@ -148,6 +149,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? ___EmotionJSX(EuiLoadingSpinner, null) : extraAction
       }), ___EmotionJSX(EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
@@ -169,7 +171,8 @@ _defineProperty(EuiAccordionClass, "defaultProps", {
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 EuiAccordionClass.propTypes = {
   className: PropTypes.string,
@@ -182,6 +185,14 @@ EuiAccordionClass.propTypes = {
        * When using `fieldset`, it will enforce `buttonElement = legend` as well.
        */
   element: PropTypes.oneOf(["div", "fieldset"]),
+  /**
+       * Defaults to the [group role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role).
+       *
+       * If your accordion contains significant enough content to be a document
+       * [landmark role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role#accessibility_concerns), consider using the `region` role instead.
+       * @default group
+       */
+  role: PropTypes.any,
   /**
        * Class that will apply to the trigger for the accordion.
        */

package/es/components/accordion/accordion_children/accordion_children.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
+var _excluded = ["role", "children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -25,7 +25,8 @@ import { EuiAccordionChildrenLoading } from './accordion_children_loading';
 import { euiAccordionChildrenStyles, euiAccordionChildWrapperStyles } from './accordion_children.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
-  var children = _ref.children,
+  var role = _ref.role,
+    children = _ref.children,
     accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
@@ -70,7 +71,7 @@ export var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
     css: wrapperCssStyles,
     style: heightInlineStyle,
     ref: accordionChildrenRef,
-    role: "region",
+    role: role,
     tabIndex: -1
     // @ts-expect-error - inert property not yet available in React TS defs. TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822 is merged
     ,

package/es/components/breadcrumbs/breadcrumb.js

@@ -178,6 +178,8 @@ EuiBreadcrumbContent.propTypes = {
   popoverProps: PropTypes.shape({
     /**
        * Class name passed to the direct parent of the button
+       *
+       * @deprecated Use `className` instead
        */
     anchorClassName: PropTypes.string,
     /**
@@ -189,6 +191,9 @@ EuiBreadcrumbContent.propTypes = {
        * Intended for use with inputs as anchors, e.g. EuiInputPopover
        */
     attachToAnchor: PropTypes.bool,
+    /**
+       * @deprecated Use `popoverRef` instead
+       */
     buttonRef: PropTypes.any,
     /**
        * Restrict the popover's position within this element
@@ -257,11 +262,6 @@ EuiBreadcrumbContent.propTypes = {
          */
       grow: PropTypes.bool,
       panelRef: PropTypes.any,
-      /**
-         * Background color of the panel;
-         * Usually a lightened form of the brand colors
-         */
-      color: PropTypes.any,
       className: PropTypes.string,
       "aria-label": PropTypes.string,
       "data-test-subj": PropTypes.string,

package/es/components/breadcrumbs/breadcrumbs.js

@@ -153,6 +153,8 @@ EuiBreadcrumbs.propTypes = {
     popoverProps: PropTypes.shape({
       /**
          * Class name passed to the direct parent of the button
+         *
+         * @deprecated Use `className` instead
          */
       anchorClassName: PropTypes.string,
       /**
@@ -164,6 +166,9 @@ EuiBreadcrumbs.propTypes = {
          * Intended for use with inputs as anchors, e.g. EuiInputPopover
          */
       attachToAnchor: PropTypes.bool,
+      /**
+         * @deprecated Use `popoverRef` instead
+         */
       buttonRef: PropTypes.any,
       /**
          * Restrict the popover's position within this element
@@ -232,11 +237,6 @@ EuiBreadcrumbs.propTypes = {
            */
         grow: PropTypes.bool,
         panelRef: PropTypes.any,
-        /**
-           * Background color of the panel;
-           * Usually a lightened form of the brand colors
-           */
-        color: PropTypes.any,
         className: PropTypes.string,
         "aria-label": PropTypes.string,
         "data-test-subj": PropTypes.string,

package/es/components/button/button_display/_button_display.js

@@ -118,7 +118,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 EuiButtonDisplay.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
-  element: PropTypes.oneOf(["a", "button", "span", "label"]),
+  element: PropTypes.oneOf(["a", "button", "span"]),
   children: PropTypes.node,
   size: PropTypes.any,
   /**

package/es/components/button/button_group/button_group.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
-import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { useEuiTheme } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupButton } from './button_group_button';
 import { euiButtonGroupStyles, euiButtonGroupButtonsStyles } from './button_group.styles';
@@ -51,9 +51,6 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var typeIsSingle = type === 'single';
-  var nameIfSingle = useGeneratedHtmlId({
-    conditionalId: name
-  });
   return ___EmotionJSX("fieldset", _extends({
     css: wrapperCssStyles,
     className: classes
@@ -65,15 +62,17 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
   }, options.map(function (option, index) {
     return ___EmotionJSX(EuiButtonGroupButton, _extends({
       key: index,
-      name: nameIfSingle,
       isDisabled: isDisabled
     }, option, {
-      element: typeIsSingle ? 'label' : 'button',
+      onClick: typeIsSingle ? function () {
+        return onChange(option.id, option.value);
+      } : function () {
+        return onChange(option.id);
+      },
       isSelected: typeIsSingle ? option.id === idSelected : idToSelectedMap[option.id],
       color: color,
       size: buttonSize,
-      isIconOnly: isIconOnly,
-      onChange: onChange
+      isIconOnly: isIconOnly
     }));
   })));
 };
@@ -163,8 +162,7 @@ EuiButtonGroup.propTypes = {
     css: PropTypes.any
   }).isRequired).isRequired,
   /**
-           * The `name` attribute for radio inputs;
-           * Defaults to a random string
+           * @deprecated No longer needed. You can safely remove this prop entirely
            */
   name: PropTypes.string,
   /**

package/es/components/button/button_group/button_group_button.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "name", "onChange", "size", "value", "color", "element", "type"];
+var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "value", "size", "color"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -33,44 +33,11 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     label = _ref.label,
-    name = _ref.name,
-    _onChange = _ref.onChange,
-    size = _ref.size,
     value = _ref.value,
+    size = _ref.size,
     _ref$color = _ref.color,
     _color = _ref$color === void 0 ? 'primary' : _ref$color,
-    _ref$element = _ref.element,
-    _element = _ref$element === void 0 ? 'button' : _ref$element,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'button' : _ref$type,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // Force element to be a button if disabled
-  var element = isDisabled ? 'button' : _element;
-  var elementProps = {};
-  var singleInput;
-  if (element === 'label') {
-    singleInput = ___EmotionJSX("input", {
-      className: "euiScreenReaderOnly",
-      name: name,
-      checked: isSelected,
-      disabled: isDisabled,
-      value: value,
-      type: "radio",
-      onChange: function onChange() {
-        return _onChange(id, value);
-      },
-      "data-test-subj": id
-    });
-  } else {
-    elementProps = {
-      'data-test-subj': id,
-      isSelected: isSelected,
-      type: type,
-      onClick: function onClick() {
-        return _onChange(id);
-      }
-    };
-  }
   var isCompressed = size === 'compressed';
   var color = isDisabled ? 'disabled' : _color;
   var display = isSelected ? 'fill' : isCompressed ? 'empty' : 'base';
@@ -100,7 +67,6 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
   return ___EmotionJSX(EuiButtonDisplay, _extends({
     css: cssStyles,
     className: buttonClasses,
-    element: element,
     isDisabled: isDisabled,
     size: size === 'compressed' ? 's' : size,
     contentProps: {
@@ -111,8 +77,10 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
       ref: buttonTextRef,
       'data-text': innerText
     },
-    title: innerText
-  }, elementProps, rest), singleInput, label);
+    title: innerText,
+    "data-test-subj": id,
+    isSelected: isSelected
+  }, rest), label);
 };
 EuiButtonGroupButton.propTypes = {
   /**
@@ -124,13 +92,10 @@ EuiButtonGroupButton.propTypes = {
      */
   label: PropTypes.node.isRequired,
   isDisabled: PropTypes.bool,
-  /**
-     * The value of the radio input for 'single'.
-     */
   /**
      * The value of the radio input.
      */
-  value: PropTypes.oneOfType([PropTypes.any, PropTypes.string]),
+  value: PropTypes.any,
   /**
      * The type of the underlying HTML button
      */
@@ -160,18 +125,10 @@ EuiButtonGroupButton.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
-  /**
-     * Element to display based on single or multi
-     */
-  element: PropTypes.oneOf(["button", "label"]).isRequired,
   /**
      * Styles the selected button to look selected (usually with `fill`)
      */
   isSelected: PropTypes.bool,
-  /**
-     * Name of the whole group for 'single'.
-     */
-  name: PropTypes.string,
   /**
      * Inherit from EuiButtonGroup
      */
@@ -187,5 +144,5 @@ EuiButtonGroupButton.propTypes = {
   /**
      * Inherit from EuiButtonGroup
      */
-  onChange: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired
 };

package/es/components/button/button_group/button_group_button.styles.js

@@ -50,22 +50,12 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
     }
   };
 };
-
-/**
- * Focus utilities - made complex by the two different button styles
- * and the fact that `label`/`input` combos need :focus-within,
- * but `button` does not
- */
-var _outlineSelectors = function _outlineSelectors(outlineCss) {
-  return /*#__PURE__*/css("&:is(button){&:focus-visible{", outlineCss, ";}}&:is(label){&:focus-within{", outlineCss, ";}@supports selector(:has(*)){/* Once all evergreen browsers support :has, we can remove\n           @supports and the outline: none reset just use this selector */&:focus-within{outline:none;}&:has(:focus-visible){", outlineCss, ";}}}");
-};
 export var _compressedButtonFocusColor = function _compressedButtonFocusColor(euiThemeContext, color) {
-  var euiTheme = euiThemeContext.euiTheme;
   var _euiButtonFillColor = euiButtonFillColor(euiThemeContext, color),
     backgroundColor = _euiButtonFillColor.backgroundColor;
-  return _outlineSelectors("outline: ".concat(euiTheme.focus.width, " solid ").concat(backgroundColor, ";"));
+  return /*#__PURE__*/css("&:focus-visible{", euiOutline(euiThemeContext, 'center', backgroundColor), " &:is(.euiButtonGroupButton-isSelected){outline-offset:0;}}");
 };
 export var _uncompressedButtonFocus = function _uncompressedButtonFocus(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return _outlineSelectors(euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade));
+  return /*#__PURE__*/css("&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";}");
 };

package/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js

@@ -186,6 +186,14 @@ EuiCollapsibleNavGroup.propTypes = {
        * When using `fieldset`, it will enforce `buttonElement = legend` as well.
        */
   element: PropTypes.oneOf(["div", "fieldset"]),
+  /**
+       * Defaults to the [group role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role).
+       *
+       * If your accordion contains significant enough content to be a document
+       * [landmark role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/region_role#accessibility_concerns), consider using the `region` role instead.
+       * @default group
+       */
+  role: PropTypes.any,
   /**
        * Class that will apply to the trigger for the accordion.
        */

package/es/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiCollapsibleNavContext } from '../context';
 import { EuiCollapsibleNavItem, EuiCollapsibleNavSubItems } from '../collapsible_nav_item/collapsible_nav_item';
 import { EuiCollapsedNavPopover } from '../collapsible_nav_item/collapsed/collapsed_nav_popover';
@@ -35,17 +35,22 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
   var euiTheme = useEuiTheme();
   var styles = euiCollapsibleNavGroupStyles(euiTheme);
   var cssStyles = [styles.euiCollapsibleNavGroup, isPush && isCollapsed ? styles.euiCollapsibleNavGroup__title : styles.isWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
+  var labelledById = useGeneratedHtmlId();
   return ___EmotionJSX("div", _extends({}, wrapperProps, {
     className: classes,
     css: cssStyles
   }), isCollapsed && isPush ? ___EmotionJSX(EuiCollapsedNavPopover, _extends({
     className: classes,
     items: items
-  }, props)) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCollapsibleNavItem, _extends({}, props, {
+  }, props)) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCollapsibleNavItem, _extends({
+    id: labelledById
+  }, props, {
     css: styles.euiCollapsibleNavGroup__title
   })), ___EmotionJSX(EuiCollapsibleNavSubItems, {
     items: items,
-    isGroup: true
+    isGroup: true,
+    role: "group",
+    "aria-labelledby": props.id || labelledById
   })));
 };
 EuiCollapsibleNavGroup.propTypes = {

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiCollapsibleNavSubItems } from './collapsible_nav_item';
 import { euiCollapsibleNavItemVariables } from './collapsible_nav_item.styles';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
@@ -46,10 +46,12 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
     }
   } : undefined; // Prevents Emotion from generating a selector if no styles need to be applied
 
+  var labelledById = useGeneratedHtmlId();
   return ___EmotionJSX("div", _extends({
     className: classes
   }, cssStyles, rest), ___EmotionJSX(EuiCollapsibleNavLink, _extends({
-    href: href
+    href: href,
+    id: labelledById
   }, linkProps, {
     isSelected: isSelected,
     isSubItem: isSubItem,
@@ -57,7 +59,9 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
   }), header), ___EmotionJSX(EuiCollapsibleNavSubItems, {
     items: items,
     isSubItem: isSubItem,
-    className: "euiCollapsibleNavGroup__children"
+    className: "euiCollapsibleNavGroup__children",
+    role: "group",
+    "aria-labelledby": (linkProps === null || linkProps === void 0 ? void 0 : linkProps.id) || labelledById
   }));
 };
 EuiCollapsibleNavGroup.propTypes = {

package/es/components/combo_box/combo_box.js

@@ -412,14 +412,16 @@ export var EuiComboBox = /*#__PURE__*/function (_Component) {
       var _this$props10 = _this.props,
         onSearchChange = _this$props10.onSearchChange,
         delimiter = _this$props10.delimiter;
-      if (onSearchChange) {
-        var _hasMatchingOptions = _this.state.matchingOptions.length > 0;
-        onSearchChange(searchValue, _hasMatchingOptions);
-      }
       _this.setState({
         searchValue: searchValue
       }, function () {
-        if (searchValue && _this.state.isListOpen === false) _this.openList();
+        if (searchValue && _this.state.isListOpen === false) {
+          _this.openList();
+        }
+        if (onSearchChange) {
+          var _hasMatchingOptions = _this.state.matchingOptions.length > 0;
+          onSearchChange(searchValue, _hasMatchingOptions);
+        }
       });
       if (delimiter && searchValue.endsWith(delimiter)) {
         _this.setCustomOptions(false);