@elastic/eui 90.0.0 → 91.0.0

package/lib/components/accordion/accordion.js

@@ -13,7 +13,7 @@ var _accordion_trigger = require("./accordion_trigger");
 var _accordion_children = require("./accordion_children");
 var _accordion = require("./accordion.styles");
 var _react2 = require("@emotion/react");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -111,6 +111,7 @@ 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,
@@ -156,6 +157,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         onToggle: this.onToggle,
         extraAction: isLoading ? (0, _react2.jsx)(_loading.EuiLoadingSpinner, null) : extraAction
       }), (0, _react2.jsx)(_accordion_children.EuiAccordionChildren, {
+        role: role,
         id: id,
         "aria-labelledby": buttonId,
         paddingSize: paddingSize,
@@ -178,7 +180,8 @@ _defineProperty(EuiAccordionClass, "defaultProps", {
   isDisabled: false,
   isLoadingMessage: false,
   element: 'div',
-  buttonElement: 'button'
+  buttonElement: 'button',
+  role: 'group'
 });
 EuiAccordionClass.propTypes = {
   className: _propTypes.default.string,
@@ -191,6 +194,14 @@ EuiAccordionClass.propTypes = {
        * When using `fieldset`, it will enforce `buttonElement = legend` as well.
        */
   element: _propTypes.default.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.default.any,
   /**
        * Class that will apply to the trigger for the accordion.
        */

package/lib/components/accordion/accordion_children/accordion_children.js

@@ -13,7 +13,7 @@ var _resize_observer = require("../../observer/resize_observer");
 var _accordion_children_loading = require("./accordion_children_loading");
 var _accordion_children = require("./accordion_children.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
+var _excluded = ["role", "children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,7 +34,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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,
@@ -79,7 +80,7 @@ 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/lib/components/breadcrumbs/breadcrumb.js

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

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

@@ -126,7 +126,7 @@ exports.EuiButtonDisplay = EuiButtonDisplay;
 EuiButtonDisplay.propTypes = {
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
-  element: _propTypes.default.oneOf(["a", "button", "span", "label"]),
+  element: _propTypes.default.oneOf(["a", "button", "span"]),
   children: _propTypes.default.node,
   size: _propTypes.default.any,
   /**

package/lib/components/button/button_group/button_group.js

@@ -57,9 +57,6 @@ var EuiButtonGroup = function EuiButtonGroup(_ref) {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var typeIsSingle = type === 'single';
-  var nameIfSingle = (0, _services.useGeneratedHtmlId)({
-    conditionalId: name
-  });
   return (0, _react2.jsx)("fieldset", _extends({
     css: wrapperCssStyles,
     className: classes
@@ -71,15 +68,17 @@ var EuiButtonGroup = function EuiButtonGroup(_ref) {
   }, options.map(function (option, index) {
     return (0, _react2.jsx)(_button_group_button.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
     }));
   })));
 };
@@ -170,8 +169,7 @@ EuiButtonGroup.propTypes = {
     css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.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.default.string,
   /**

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

@@ -13,7 +13,7 @@ var _inner_text = require("../../inner_text");
 var _button_display = require("../button_display/_button_display");
 var _button_group_button = require("./button_group_button.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,44 +39,11 @@ 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 = (0, _react2.jsx)("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';
@@ -106,7 +73,6 @@ var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
   return (0, _react2.jsx)(_button_display.EuiButtonDisplay, _extends({
     css: cssStyles,
     className: buttonClasses,
-    element: element,
     isDisabled: isDisabled,
     size: size === 'compressed' ? 's' : size,
     contentProps: {
@@ -117,8 +83,10 @@ 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);
 };
 exports.EuiButtonGroupButton = EuiButtonGroupButton;
 EuiButtonGroupButton.propTypes = {
@@ -131,13 +99,10 @@ EuiButtonGroupButton.propTypes = {
      */
   label: _propTypes.default.node.isRequired,
   isDisabled: _propTypes.default.bool,
-  /**
-     * The value of the radio input for 'single'.
-     */
   /**
      * The value of the radio input.
      */
-  value: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.string]),
+  value: _propTypes.default.any,
   /**
      * The type of the underlying HTML button
      */
@@ -167,18 +132,10 @@ EuiButtonGroupButton.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
-  /**
-     * Element to display based on single or multi
-     */
-  element: _propTypes.default.oneOf(["button", "label"]).isRequired,
   /**
      * Styles the selected button to look selected (usually with `fill`)
      */
   isSelected: _propTypes.default.bool,
-  /**
-     * Name of the whole group for 'single'.
-     */
-  name: _propTypes.default.string,
   /**
      * Inherit from EuiButtonGroup
      */
@@ -194,5 +151,5 @@ EuiButtonGroupButton.propTypes = {
   /**
      * Inherit from EuiButtonGroup
      */
-  onChange: _propTypes.default.func.isRequired
+  onClick: _propTypes.default.func.isRequired
 };

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

@@ -56,25 +56,15 @@ var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeCon
     }
   };
 };
-
-/**
- * Focus utilities - made complex by the two different button styles
- * and the fact that `label`/`input` combos need :focus-within,
- * but `button` does not
- */
 exports.euiButtonGroupButtonStyles = euiButtonGroupButtonStyles;
-var _outlineSelectors = function _outlineSelectors(outlineCss) {
-  return /*#__PURE__*/(0, _react.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, ";}}}");
-};
 var _compressedButtonFocusColor = function _compressedButtonFocusColor(euiThemeContext, color) {
-  var euiTheme = euiThemeContext.euiTheme;
   var _euiButtonFillColor = (0, _button.euiButtonFillColor)(euiThemeContext, color),
     backgroundColor = _euiButtonFillColor.backgroundColor;
-  return _outlineSelectors("outline: ".concat(euiTheme.focus.width, " solid ").concat(backgroundColor, ";"));
+  return /*#__PURE__*/(0, _react.css)("&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'center', backgroundColor), " &:is(.euiButtonGroupButton-isSelected){outline-offset:0;}}");
 };
 exports._compressedButtonFocusColor = _compressedButtonFocusColor;
 var _uncompressedButtonFocus = function _uncompressedButtonFocus(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  return _outlineSelectors((0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.colors.fullShade));
+  return /*#__PURE__*/(0, _react.css)("&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.colors.fullShade), ";}");
 };
 exports._uncompressedButtonFocus = _uncompressedButtonFocus;

package/lib/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js

@@ -194,6 +194,14 @@ EuiCollapsibleNavGroup.propTypes = {
        * When using `fieldset`, it will enforce `buttonElement = legend` as well.
        */
   element: _propTypes.default.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.default.any,
   /**
        * Class that will apply to the trigger for the accordion.
        */

package/lib/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.js

@@ -44,17 +44,22 @@ var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _collapsible_nav_group.euiCollapsibleNavGroupStyles)(euiTheme);
   var cssStyles = [styles.euiCollapsibleNavGroup, isPush && isCollapsed ? styles.euiCollapsibleNavGroup__title : styles.isWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
+  var labelledById = (0, _services.useGeneratedHtmlId)();
   return (0, _react2.jsx)("div", _extends({}, wrapperProps, {
     className: classes,
     css: cssStyles
   }), isCollapsed && isPush ? (0, _react2.jsx)(_collapsed_nav_popover.EuiCollapsedNavPopover, _extends({
     className: classes,
     items: items
-  }, props)) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_collapsible_nav_item.EuiCollapsibleNavItem, _extends({}, props, {
+  }, props)) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_collapsible_nav_item.EuiCollapsibleNavItem, _extends({
+    id: labelledById
+  }, props, {
     css: styles.euiCollapsibleNavGroup__title
   })), (0, _react2.jsx)(_collapsible_nav_item.EuiCollapsibleNavSubItems, {
     items: items,
-    isGroup: true
+    isGroup: true,
+    role: "group",
+    "aria-labelledby": props.id || labelledById
   })));
 };
 exports.EuiCollapsibleNavGroup = EuiCollapsibleNavGroup;

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

@@ -52,10 +52,12 @@ var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
     }
   } : undefined; // Prevents Emotion from generating a selector if no styles need to be applied
 
+  var labelledById = (0, _services.useGeneratedHtmlId)();
   return (0, _react2.jsx)("div", _extends({
     className: classes
   }, cssStyles, rest), (0, _react2.jsx)(_collapsible_nav_link.EuiCollapsibleNavLink, _extends({
-    href: href
+    href: href,
+    id: labelledById
   }, linkProps, {
     isSelected: isSelected,
     isSubItem: isSubItem,
@@ -63,7 +65,9 @@ var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
   }), header), (0, _react2.jsx)(_collapsible_nav_item.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
   }));
 };
 exports.EuiCollapsibleNavGroup = EuiCollapsibleNavGroup;

package/lib/components/combo_box/combo_box.js

@@ -416,14 +416,16 @@ 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);