@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/lib/test/rtl/index.js

@@ -12,8 +12,17 @@ var _exportNames = {
   findByTestSubject: true,
   render: true,
   screen: true,
-  within: true
+  within: true,
+  euiMatchers: true,
+  setupEuiMatchers: true,
+  isEuiDisabled: true
 };
+Object.defineProperty(exports, "euiMatchers", {
+  enumerable: true,
+  get: function get() {
+    return _matchers.euiMatchers;
+  }
+});
 Object.defineProperty(exports, "findAllByTestSubject", {
   enumerable: true,
   get: function get() {
@@ -38,6 +47,12 @@ Object.defineProperty(exports, "getByTestSubject", {
     return _data_test_subj_queries.getByTestSubject;
   }
 });
+Object.defineProperty(exports, "isEuiDisabled", {
+  enumerable: true,
+  get: function get() {
+    return _matchers.isEuiDisabled;
+  }
+});
 Object.defineProperty(exports, "queryAllByTestSubject", {
   enumerable: true,
   get: function get() {
@@ -62,6 +77,12 @@ Object.defineProperty(exports, "screen", {
     return _custom_render.screen;
   }
 });
+Object.defineProperty(exports, "setupEuiMatchers", {
+  enumerable: true,
+  get: function get() {
+    return _matchers.setupEuiMatchers;
+  }
+});
 Object.defineProperty(exports, "within", {
   enumerable: true,
   get: function get() {
@@ -93,4 +114,5 @@ Object.keys(_render_hook).forEach(function (key) {
       return _render_hook[key];
     }
   });
-});
+});
+var _matchers = require("./matchers");

package/lib/test/rtl/matchers.d.ts

@@ -0,0 +1,36 @@
+declare global {
+  /* eslint-disable-next-line @typescript-eslint/no-namespace,no-redeclare */
+  namespace jest {
+    interface Matchers<R> {
+      /**
+       * Custom matcher to check the disabled state of a DOM element.
+       * Ensures that both `disabled` and `aria-disabled` attributes are checked.
+       */
+      toBeEuiDisabled(): R;
+      /**
+       * Custom matcher to check a DOM element is enabled (= not disabled).
+       * Ensures that both `disabled` and `aria-disabled` attributes are checked.
+       */
+      toBeEuiEnabled(): R;
+    }
+  }
+}
+
+export declare const toBeEuiDisabled: (element: HTMLElement) => {
+  message: () => string;
+  pass: boolean;
+};
+
+export declare const toBeEuiEnabled: (element: HTMLElement) => {
+  message: () => string;
+  pass: boolean;
+};
+
+export declare const isEuiDisabled: (element: HTMLElement) => boolean;
+
+export declare const euiMatchers: {
+  toBeEuiDisabled: typeof toBeEuiDisabled;
+  toBeEuiEnabled: typeof toBeEuiEnabled;
+};
+
+export declare const setupEuiMatchers: () => void;

package/lib/test/rtl/matchers.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setupEuiMatchers = exports.isEuiDisabled = exports.getEuiDisabledState = exports.euiMatchers = exports.default = void 0;
+var _utils = require("../../utils");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var NATIVE_DISABLED_ATTR = 'disabled';
+var CUSTOM_DISABLED_ATTR = 'aria-disabled';
+var toBeEuiDisabled = function toBeEuiDisabled(element) {
+  var _getEuiDisabledState = getEuiDisabledState(element),
+    isDisabled = _getEuiDisabledState.isDisabled,
+    canBeDisabled = _getEuiDisabledState.canBeDisabled,
+    isNativelyDisabled = _getEuiDisabledState.isNativelyDisabled;
+  return {
+    message: function message() {
+      if (isDisabled) {
+        var method = isNativelyDisabled ? "`".concat(NATIVE_DISABLED_ATTR, "`") : "`".concat(CUSTOM_DISABLED_ATTR, "=\"true\"`");
+        if (!canBeDisabled) {
+          return "Element cannot be disabled (based on its role), but it was disabled via ".concat(method);
+        } else {
+          return "Expected element NOT to be disabled, but it was disabled via ".concat(method);
+        }
+      } else {
+        return "Expected element to be disabled via either `".concat(NATIVE_DISABLED_ATTR, "` or `").concat(CUSTOM_DISABLED_ATTR, "=\"true\"` attribute, but found neither");
+      }
+    },
+    pass: isDisabled
+  };
+};
+var toBeEuiEnabled = function toBeEuiEnabled(element) {
+  var _getEuiDisabledState2 = getEuiDisabledState(element),
+    isDisabled = _getEuiDisabledState2.isDisabled,
+    isNativelyDisabled = _getEuiDisabledState2.isNativelyDisabled,
+    isAriaDisabled = _getEuiDisabledState2.isAriaDisabled;
+  return {
+    message: function message() {
+      var attributes = [isNativelyDisabled ? "`".concat(NATIVE_DISABLED_ATTR, "`") : undefined, isAriaDisabled ? "`".concat(CUSTOM_DISABLED_ATTR, "=\"true\"`") : undefined].filter(function (item) {
+        return item !== undefined;
+      }).join(' and ');
+      return "Expected element NOT to have attributes: ".concat(attributes, ".");
+    },
+    pass: !isDisabled
+  };
+};
+var euiMatchers = exports.euiMatchers = {
+  toBeEuiDisabled: toBeEuiDisabled,
+  toBeEuiEnabled: toBeEuiEnabled
+};
+var setupEuiMatchers = exports.setupEuiMatchers = function setupEuiMatchers() {
+  expect.extend(euiMatchers);
+};
+var _default = exports.default = euiMatchers;
+/* Utilities */
+/**
+ * Retrieve an element's disabled state details.
+ * Checks wheather the element has an `disabled` attribute or `aria-disabled="true"` attribute
+ * @returns { isDisabled: boolean; canBeDisabled: boolean; isNativelyDisabled: boolean; isAriaDisabled: boolean }
+ */
+var getEuiDisabledState = exports.getEuiDisabledState = function getEuiDisabledState(element) {
+  var canBeDisabled = (0, _utils.elementCanBeDisabled)(element);
+  var isNativelyDisabled = element.hasAttribute('disabled');
+  var isAriaDisabled = element.getAttribute('aria-disabled') === 'true';
+  var isDisabled = canBeDisabled && (isNativelyDisabled || isAriaDisabled);
+  return {
+    isDisabled: isDisabled,
+    canBeDisabled: canBeDisabled,
+    isNativelyDisabled: isNativelyDisabled,
+    isAriaDisabled: isAriaDisabled
+  };
+};
+
+/**
+ * Checks if an element is disabled via `disabled` attribute or `aria-disabled="true"`.
+ */
+var isEuiDisabled = exports.isEuiDisabled = function isEuiDisabled(element) {
+  return getEuiDisabledState(element).isDisabled;
+};

package/lib/utils/element_can_be_disabled.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.elementCanBeDisabled = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+var SUPPORTED_ELEMENTS = ['fieldset', 'input', 'select', 'optgroup', 'option', 'button', 'textarea'];
+var elementCanBeDisabled = exports.elementCanBeDisabled = function elementCanBeDisabled(htmlElement) {
+  var _htmlElement$getAttri;
+  if (!htmlElement) return false;
+  var tagName = htmlElement.tagName && htmlElement.tagName.toLowerCase();
+  var roleName = (_htmlElement$getAttri = htmlElement.getAttribute('role')) !== null && _htmlElement$getAttri !== void 0 ? _htmlElement$getAttri : '';
+  return SUPPORTED_ELEMENTS.includes(roleName) || SUPPORTED_ELEMENTS.includes(tagName);
+};

package/lib/utils/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  elementCanBeDisabled: true
+};
+Object.defineProperty(exports, "elementCanBeDisabled", {
+  enumerable: true,
+  get: function get() {
+    return _element_can_be_disabled.elementCanBeDisabled;
+  }
+});
 var _prop_types = require("./prop_types");
 Object.keys(_prop_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _prop_types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_prop_types).forEach(function (key) {
 var _is_jest = require("./is_jest");
 Object.keys(_is_jest).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _is_jest[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_is_jest).forEach(function (key) {
 var _type_guards = require("./type_guards");
 Object.keys(_type_guards).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _type_guards[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -35,4 +47,5 @@ Object.keys(_type_guards).forEach(function (key) {
       return _type_guards[key];
     }
   });
-});
+});
+var _element_can_be_disabled = require("./element_can_be_disabled");

package/optimize/es/components/basic_table/collapsed_item_actions.js

@@ -77,7 +77,9 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
           },
           toolTipContent: toolTipContent,
           toolTipProps: {
-            delay: 'long'
+            delay: 'long',
+            // Avoid screen-readers announcing the same text twice
+            disableScreenReaderOutput: typeof buttonContent === 'string' && buttonContent === toolTipContent
           }
         }, buttonContent));
       }

package/optimize/es/components/basic_table/default_item_action.js

@@ -30,6 +30,12 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
   var icon = action.icon ? callWithItemIfFunction(item)(action.icon) : undefined;
   var actionContent = callWithItemIfFunction(item)(action.name);
   var tooltipContent = callWithItemIfFunction(item)(action.description);
+  var tooltipProps = {
+    content: tooltipContent,
+    delay: 'long',
+    // Avoid screen-readers announcing the same text twice
+    disableScreenReaderOutput: typeof actionContent === 'string' && actionContent === tooltipContent
+  };
   var href = callWithItemIfFunction(item)(action.href);
   var dataTestSubj = callWithItemIfFunction(item)(action['data-test-subj']);
   var ariaLabelId = useGeneratedHtmlId();
@@ -73,8 +79,5 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
       flush: "right"
     }, actionContent);
   }
-  return enabled ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, {
-    content: tooltipContent,
-    delay: "long"
-  }, button), ariaLabelledBy) : ___EmotionJSX(React.Fragment, null, button, ariaLabelledBy);
+  return enabled ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiToolTip, tooltipProps, button), ariaLabelledBy) : ___EmotionJSX(React.Fragment, null, button, ariaLabelledBy);
 };

package/optimize/es/components/bottom_bar/bottom_bar.js

@@ -15,7 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import classNames from 'classnames';
 import React, { forwardRef, useEffect, useState } from 'react';
-import { useCombinedRefs, useEuiMemoizedStyles, EuiThemeProvider } from '../../services';
+import { useCombinedRefs, useEuiMemoizedStyles, useEuiThemeCSSVariables, EuiThemeProvider } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
@@ -47,6 +47,8 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var styles = useEuiMemoizedStyles(euiBottomBarStyles);
+  var _useEuiThemeCSSVariab = useEuiThemeCSSVariables(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
 
   // Force some props if `fixed` position, but not if the user has supplied these
   affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement;
@@ -61,6 +63,11 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   useEffect(function () {
     if (affordForDisplacement && usePortal) {
       document.body.style.paddingBottom = "".concat(dimensions.height, "px");
+
+      // EUI doesn't use this css variable, but it is useful for consumers
+      setGlobalCSSVariables({
+        '--euiBottomBarOffset': "".concat(dimensions.height, "px")
+      });
     }
     if (bodyClassName) {
       document.body.classList.add(bodyClassName);
@@ -68,12 +75,15 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return function () {
       if (affordForDisplacement && usePortal) {
         document.body.style.paddingBottom = '';
+        setGlobalCSSVariables({
+          '--euiBottomBarOffset': null
+        });
       }
       if (bodyClassName) {
         document.body.classList.remove(bodyClassName);
       }
     };
-  }, [affordForDisplacement, usePortal, dimensions, bodyClassName]);
+  }, [affordForDisplacement, usePortal, dimensions, bodyClassName, setGlobalCSSVariables]);
   var classes = classNames('euiBottomBar', "euiBottomBar--".concat(position), className);
   var cssStyles = [styles.euiBottomBar, styles[position], styles[paddingSize]];
   var newStyle = _objectSpread({

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

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["element", "type", "children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "style"];
+var _excluded = ["element", "type", "children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "hasAriaDisabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "style"],
+  _excluded2 = ["ref"];
 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; }
 /*
@@ -16,10 +17,11 @@ import React, { forwardRef } from 'react';
 
 // @ts-ignore module doesn't export `createElement`
 import { createElement } from '@emotion/react';
-import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
+import { getSecureRelForTarget, useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
+import { validateHref } from '../../../services/security/href_validator';
+import { useEuiDisabledElement } from '../../../services/hooks/useEuiDisabledElement';
 import { euiButtonDisplayStyles } from './_button_display.styles';
 import { EuiButtonDisplayContent } from './_button_display_content';
-import { validateHref } from '../../../services/security/href_validator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SIZES = ['xs', 's', 'm'];
 
@@ -54,6 +56,8 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     size = _ref2$size === void 0 ? 'm' : _ref2$size,
     isDisabled = _ref2.isDisabled,
     disabled = _ref2.disabled,
+    _ref2$hasAriaDisabled = _ref2.hasAriaDisabled,
+    hasAriaDisabled = _ref2$hasAriaDisabled === void 0 ? false : _ref2$hasAriaDisabled,
     isLoading = _ref2.isLoading,
     isSelected = _ref2.isSelected,
     fullWidth = _ref2.fullWidth,
@@ -70,6 +74,14 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
+  var _useEuiDisabledElemen = useEuiDisabledElement({
+      isDisabled: buttonIsDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      onKeyDown: rest.onKeyDown
+    }),
+    disabledRef = _useEuiDisabledElemen.ref,
+    disabledButtonProps = _objectWithoutProperties(_useEuiDisabledElemen, _excluded2);
+  var setCombinedRef = useCombinedRefs([disabledRef, ref]);
   var styles = useEuiMemoizedStyles(euiButtonDisplayStyles);
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && [styles.defaultMinWidth.defaultMinWidth, styles.defaultMinWidth[size]], buttonIsDisabled && styles.isDisabled];
   var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
@@ -81,13 +93,14 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     textProps: textProps
   }, contentProps), children);
   var element = buttonIsDisabled ? 'button' : href ? 'a' : _element;
-  var elementProps = {};
-  // Element-specific attributes
+  var elementProps = {
+    ref: setCombinedRef
+  };
+  var buttonProps = {};
   if (element === 'button') {
-    elementProps = _objectSpread(_objectSpread({}, elementProps), {}, {
-      disabled: buttonIsDisabled,
+    buttonProps = _objectSpread({
       'aria-pressed': isSelected
-    });
+    }, disabledButtonProps);
   }
   var relObj = {};
   if (href && !buttonIsDisabled) {
@@ -101,12 +114,11 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   } else {
     relObj.type = type;
   }
-  return createElement(element, _objectSpread(_objectSpread(_objectSpread({
+  return createElement(element, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
     style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
       minInlineSize: minWidth
-    }) : style,
-    ref: ref
-  }, elementProps), relObj), rest), innerNode);
+    }) : style
+  }, elementProps), relObj), rest), buttonProps), innerNode);
 });
 EuiButtonDisplay.displayName = 'EuiButtonDisplay';

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

@@ -15,11 +15,11 @@ export var euiButtonBaseCSS = function euiButtonBaseCSS() {
   return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat(logicalTextAlignCSS('center'), ";\n    white-space: nowrap;\n    ").concat(logicalCSS('max-width', '100%'), ";\n    vertical-align: middle;\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "8595p9-isDisabled",
-  styles: "cursor:not-allowed;label:isDisabled;"
+  name: "col2gx-isDisabled",
+  styles: "cursor:not-allowed;&[aria-disabled='true']{pointer-events:none;>*{pointer-events:none;}};label:isDisabled;"
 } : {
-  name: "8595p9-isDisabled",
-  styles: "cursor:not-allowed;label:isDisabled;",
+  name: "col2gx-isDisabled",
+  styles: "cursor:not-allowed;&[aria-disabled='true']{pointer-events:none;>*{pointer-events:none;}};label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {

package/optimize/es/components/button/button_empty/button_empty.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "iconType", "iconSide", "iconSize", "color", "size", "flush", "isDisabled", "disabled", "isLoading", "href", "target", "rel", "type", "buttonRef", "contentProps", "textProps", "isSelected"];
+var _excluded = ["children", "className", "iconType", "iconSide", "iconSize", "color", "size", "flush", "isDisabled", "disabled", "hasAriaDisabled", "isLoading", "href", "target", "rel", "type", "buttonRef", "contentProps", "textProps", "isSelected"],
+  _excluded2 = ["ref"];
 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; }
 /*
@@ -14,9 +15,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
-import { EuiButtonDisplayContent } from '../button_display/_button_display_content';
+import { useEuiMemoizedStyles, getSecureRelForTarget, useCombinedRefs } from '../../../services';
+import { useEuiDisabledElement } from '../../../services/hooks/useEuiDisabledElement';
 import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button';
+import { EuiButtonDisplayContent } from '../button_display/_button_display_content';
 import { isButtonDisabled } from '../button_display/_button_display';
 import { euiButtonEmptyStyles } from './button_empty.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -43,6 +45,8 @@ export var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
     flush = _ref.flush,
     _isDisabled = _ref.isDisabled,
     disabled = _ref.disabled,
+    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
+    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
     isLoading = _ref.isLoading,
     href = _ref.href,
     target = _ref.target,
@@ -59,6 +63,14 @@ export var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
     href: href,
     isLoading: isLoading
   });
+  var _useEuiDisabledElemen = useEuiDisabledElement({
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      onKeyDown: rest.onKeyDown
+    }),
+    disabledRef = _useEuiDisabledElemen.ref,
+    disabledButtonProps = _objectWithoutProperties(_useEuiDisabledElemen, _excluded2);
+  var setCombinedRef = useCombinedRefs([disabledRef, buttonRef]);
   var buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty'
   });
@@ -94,7 +106,7 @@ export var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
       href: href,
       target: target,
       rel: secureRel,
-      ref: buttonRef
+      ref: setCombinedRef
     }, rest), innerNode);
   }
   return ___EmotionJSX("button", _extends({
@@ -102,7 +114,7 @@ export var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
     className: classes,
     css: cssStyles,
     type: type,
-    ref: buttonRef,
+    ref: setCombinedRef,
     "aria-pressed": isSelected
-  }, rest), innerNode);
+  }, rest, disabledButtonProps), innerNode);
 };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"];
+var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "hasAriaDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -28,6 +28,8 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
     idToSelectedMap = _ref$idToSelectedMap === void 0 ? {} : _ref$idToSelectedMap,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
+    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
     _ref$isFullWidth = _ref.isFullWidth,
     isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
     _ref$isIconOnly = _ref.isIconOnly,
@@ -47,18 +49,21 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var typeIsSingle = type === 'single';
+  var groupDisabledProps = {
+    disabled: hasAriaDisabled ? undefined : isDisabled,
+    'aria-disabled': hasAriaDisabled ? isDisabled : undefined
+  };
   return ___EmotionJSX("fieldset", _extends({
     css: wrapperCssStyles,
     className: classes
-  }, rest, {
-    disabled: isDisabled
-  }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("legend", null, legend)), ___EmotionJSX("div", {
+  }, rest, groupDisabledProps), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("legend", null, legend)), ___EmotionJSX("div", {
     css: cssStyles,
     className: "euiButtonGroup__buttons"
   }, options.map(function (option) {
     return ___EmotionJSX(EuiButtonGroupButton, _extends({
       key: option.id,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled
     }, option, {
       onClick: typeIsSingle ? function () {
         return onChange(option.id, option.value);

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

@@ -27,8 +27,7 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     id = _ref.id,
     isDisabled = _ref.isDisabled,
     isIconOnly = _ref.isIconOnly,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    isSelected = _ref.isSelected,
     label = _ref.label,
     value = _ref.value,
     size = _ref.size,
@@ -48,7 +47,7 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
   var buttonColorStyles = useEuiButtonColorCSS({
     display: display
   })[color];
-  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly, !isCompressed && (hasToolTip ? styles.uncompressed.hasToolTip : styles.uncompressed[size]), isCompressed ? styles.compressed : styles.uncompressed.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && isCompressed && focusColorStyles[color], hasBorder && styles.hasBorder];
+  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly.iconOnly, isIconOnly && styles.iconOnly[size], !isCompressed && (hasToolTip ? styles.uncompressed.hasToolTip : styles.uncompressed[size]), isCompressed ? styles.compressed : styles.uncompressed.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && isCompressed && focusColorStyles[color], hasBorder && styles.hasBorder];
   var tooltipWrapperStyles = [styles.tooltipWrapper, !isCompressed && styles.uncompressed[size]];
   var contentStyles = [styles.content.euiButtonGroupButton__content, isCompressed && styles.content.compressed];
   var textStyles = [isIconOnly ? styles.text.euiButtonGroupButton__iconOnly : styles.text.euiButtonGroupButton__text];

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

@@ -12,10 +12,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { mathWithUnits, logicalCSS, logicalShorthandCSS, euiTextShift, euiOutline, euiCanAnimate, preventForcedColors, highContrastModeStyles } from '../../../global_styling';
-import { BUTTON_COLORS } from '../../../global_styling/mixins/_button';
+import { mathWithUnits, logicalCSS, logicalShorthandCSS, euiTextShift, euiOutline, euiCanAnimate, preventForcedColors, highContrastModeStyles, euiDisabledSelector } from '../../../global_styling';
+import { BUTTON_COLORS, euiButtonSizeMap } from '../../../global_styling/mixins/_button';
 import { euiScreenReaderOnly } from '../../accessibility';
-import { euiFormVariables } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "m6ysua-tooltipWrapper",
   styles: "overflow:hidden;&:has(:focus-visible){z-index:1;};label:tooltipWrapper;"
@@ -35,9 +34,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var _euiFormVariables = euiFormVariables(euiThemeContext),
-    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
-  var compressedButtonHeight = mathWithUnits([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+  var buttonSizes = euiButtonSizeMap(euiThemeContext);
+  var compressedButtonHeight = mathWithUnits([buttonSizes.s.height, euiTheme.border.width.thin], function (x, y) {
     return x - y * 6;
   });
   var selectedSelectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
@@ -49,10 +47,16 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
     euiButtonGroupButton: /*#__PURE__*/css(logicalCSS('min-width', 0), " flex-shrink:1;flex-grow:0;z-index:0;&:focus-visible{z-index:2;}", euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;}&:is(", selectedSelectors, "){", highContrastModeStyles(euiThemeContext, {
       forced: "\n            --highContrastHoverIndicatorColor: ".concat(euiTheme.colors.textInverse, ";\n            border: none;\n\n            /* styles the content manually instead of the button itself to preserve the system\n            focus style, as otherwise preventForcedColors() would require manual styling */\n            > [class*=\"euiButtonDisplayContent\"] {\n              ").concat(preventForcedColors(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              border: none;\n            }\n          ")
     }), ";};label:euiButtonGroupButton;"),
-    iconOnly: /*#__PURE__*/css("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
+    iconOnly: {
+      // used only as classname, sizes are added separately
+      iconOnly: /*#__PURE__*/css(";label:iconOnly;"),
+      s: "\n        ".concat(logicalCSS('width', buttonSizes.s.height), "\n      "),
+      m: "\n        ".concat(logicalCSS('width', buttonSizes.m.height), "\n      "),
+      compressed: "\n        ".concat(logicalCSS('width', compressedButtonHeight), "\n      ")
+    },
     // Sizes
     uncompressed: {
-      uncompressed: /*#__PURE__*/css("&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";}&:is(", selectedSelectors, "):not(:disabled){z-index:1;border:", euiTheme.border.width.thin, " solid transparent;", highContrastModeStyles(euiThemeContext, {
+      uncompressed: /*#__PURE__*/css("&:focus-visible{", euiOutline(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";}&:is(", selectedSelectors, "):not(", euiDisabledSelector, "){z-index:1;border:", euiTheme.border.width.thin, " solid transparent;", highContrastModeStyles(euiThemeContext, {
         forced: "\n            /* use inset focus outline to ensure visibility, same as custom hover.\n            NOTE: temp solution - this will be revisited once we handle global focus styles */\n            &:focus-visible {\n              outline-color: ".concat(euiTheme.colors.textInverse, ";\n              /* has to be inset due to overflow: hidden */\n              outline-offset: -").concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
           return x * 4;
         }), ";\n            }\n          ")