@elastic/eui 109.0.0 → 109.1.0

package/lib/test/enzyme/enzyme_matchers.d.ts

@@ -0,0 +1,36 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { ReactWrapper } from 'enzyme';
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      /**
+       * Checks if an Enzyme wrapper has EUI disabled state (it checks `disabled`, `isDisabled` and `aria-disabled` props)
+       */
+      toHaveEuiDisabledProp(): R;
+    }
+  }
+}
+
+export declare const toHaveEuiDisabledProp: (wrapper: ReactWrapper<any>) => {
+  message: () => string;
+  pass: boolean;
+};
+
+export declare const hasEuiDisabledProp: (
+  props: Record<string, any>
+) => boolean;
+
+export declare const euiEnzymeMatchers: {
+  toHaveEuiDisabledProp: typeof toHaveEuiDisabledProp;
+};
+
+export declare const setupEuiEnzymeMatchers: () => void;

package/lib/test/enzyme/enzyme_matchers.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setupEuiEnzymeMatchers = exports.hasEuiDisabledProp = exports.euiEnzymeMatchers = void 0;
+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); }
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/* eslint-env jest */
+
+var euiEnzymeMatchers = exports.euiEnzymeMatchers = {
+  /**
+   * Checks if an Enzyme wrapper has an EUI disabled state.
+   * It looks for `disabled`, `isDisabled` and `aria-disabled` props
+   */
+  toHaveEuiDisabledProp: function toHaveEuiDisabledProp(props) {
+    if (!props || _typeof(props) !== 'object') {
+      throw new Error('toHaveEuiDisabledProp() must be called with the props value from ReactWrapper.props()');
+    }
+    var isDisabled = hasEuiDisabledProp(props);
+    return {
+      message: function message() {
+        return isDisabled ? 'Expected component NOT to have EUI disabled prop, but it was disabled' : 'Expected component to have EUI disabled prop (`disabled`, `isDisabled` or `aria-disabled="true"`)';
+      },
+      pass: isDisabled
+    };
+  }
+};
+var setupEuiEnzymeMatchers = exports.setupEuiEnzymeMatchers = function setupEuiEnzymeMatchers() {
+  expect.extend(euiEnzymeMatchers);
+};
+
+/* Utilities */
+
+/**
+ * Checks if a ReactWrapper has one of the following disabled props enabled:
+ * `disabled`, `isDisabled` or attribute or `aria-disabled="true"`.
+ */
+var hasEuiDisabledProp = exports.hasEuiDisabledProp = function hasEuiDisabledProp(props) {
+  return props.disabled === true || props.isDisabled === true || props['aria-disabled'] === true || props['aria-disabled'] === 'true';
+};

package/lib/test/enzyme/index.d.ts

@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export {
+  euiEnzymeMatchers,
+  setupEuiEnzymeMatchers,
+  hasEuiDisabledProp,
+} from './enzyme_matchers';

package/lib/test/enzyme/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "euiEnzymeMatchers", {
+  enumerable: true,
+  get: function get() {
+    return _enzyme_matchers.euiEnzymeMatchers;
+  }
+});
+Object.defineProperty(exports, "hasEuiDisabledProp", {
+  enumerable: true,
+  get: function get() {
+    return _enzyme_matchers.hasEuiDisabledProp;
+  }
+});
+Object.defineProperty(exports, "setupEuiEnzymeMatchers", {
+  enumerable: true,
+  get: function get() {
+    return _enzyme_matchers.setupEuiEnzymeMatchers;
+  }
+});
+var _enzyme_matchers = require("./enzyme_matchers");

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

@@ -1,3 +1,11 @@
 export * from './component_helpers';
-export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, } from './data_test_subj_queries';
+export {
+  queryByTestSubject,
+  queryAllByTestSubject,
+  getByTestSubject,
+  getAllByTestSubject,
+  findAllByTestSubject,
+  findByTestSubject,
+} from './data_test_subj_queries';
 export { render, screen, within } from './custom_render';
+export { euiMatchers, setupEuiMatchers, isEuiDisabled } from './matchers';

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/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

@@ -47,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];