@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/optimize/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/optimize/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/optimize/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/optimize/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/optimize/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "108.0.0",
+  "version": "109.1.0-snapshot.1763390960850",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -52,7 +52,7 @@
     "directory": "packages/eui"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "6.0.0",
+    "@elastic/eui-theme-common": "7.0.0",
     "@elastic/prismjs-esql": "^1.1.2",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
@@ -106,7 +106,7 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui-theme-borealis": "4.0.0",
+    "@elastic/eui-theme-borealis": "5.0.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -256,7 +256,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@elastic/eui-theme-borealis": "4.0.0",
+    "@elastic/eui-theme-borealis": "5.0.0",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^17.0 || ^18.0",
@@ -280,5 +280,6 @@
   ],
   "installConfig": {
     "hoistingLimits": "workspaces"
-  }
+  },
+  "stableVersion": "109.1.0"
 }

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -151,9 +151,18 @@ EuiSkipLink.propTypes = {
      */
   size: _propTypes.default.any,
   /**
-     * `disabled` is also allowed
+     * Controls the disabled behavior via the native `disabled` attribute.
      */
   isDisabled: _propTypes.default.bool,
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/basic_table/collapsed_item_actions.js

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

package/test-env/components/basic_table/default_item_action.js

@@ -39,6 +39,12 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
   var icon = action.icon ? (0, _action_types.callWithItemIfFunction)(item)(action.icon) : undefined;
   var actionContent = (0, _action_types.callWithItemIfFunction)(item)(action.name);
   var tooltipContent = (0, _action_types.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 = (0, _action_types.callWithItemIfFunction)(item)(action.href);
   var dataTestSubj = (0, _action_types.callWithItemIfFunction)(item)(action['data-test-subj']);
   var ariaLabelId = (0, _accessibility.useGeneratedHtmlId)();
@@ -82,8 +88,5 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
       flush: "right"
     }, actionContent);
   }
-  return enabled ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-    content: tooltipContent,
-    delay: "long"
-  }, button), ariaLabelledBy) : (0, _react2.jsx)(_react.default.Fragment, null, button, ariaLabelledBy);
+  return enabled ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tool_tip.EuiToolTip, tooltipProps, button), ariaLabelledBy) : (0, _react2.jsx)(_react.default.Fragment, null, button, ariaLabelledBy);
 };

package/test-env/components/bottom_bar/bottom_bar.js

@@ -57,6 +57,8 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_bottom_bar.euiBottomBarStyles);
+  var _useEuiThemeCSSVariab = (0, _services.useEuiThemeCSSVariables)(),
+    setGlobalCSSVariables = _useEuiThemeCSSVariab.setGlobalCSSVariables;
 
   // Force some props if `fixed` position, but not if the user has supplied these
   affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement;
@@ -71,6 +73,11 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   (0, _react.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);
@@ -78,12 +85,15 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.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 = (0, _classnames.default)('euiBottomBar', "euiBottomBar--".concat(position), className);
   var cssStyles = [styles.euiBottomBar, styles[position], styles[paddingSize]];
   var newStyle = _objectSpread({

package/test-env/components/button/button.js

@@ -87,12 +87,29 @@ EuiButton.propTypes = {
      */
   size: _propTypes.default.any,
   /**
-     * `disabled` is also allowed
+     * Controls the disabled behavior via the native `disabled` attribute.
      */
   /**
-     * `disabled` is also allowed
+     * Controls the disabled behavior via the native `disabled` attribute.
      */
-  isDisabled: _propTypes.default.bool,
+  isDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool])]),
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  /**
+     * NOTE: Beta feature, may be changed or removed in the future
+     *
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
+     */
+  hasAriaDisabled: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.bool])]),
   className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string])]),
   "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string])]),
   "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string])]),
@@ -126,27 +143,5 @@ EuiButton.propTypes = {
     css: _propTypes.default.any
   }),
   style: _propTypes.default.any,
-  type: _propTypes.default.any,
-  /**
-     * Any `type` accepted by EuiIcon
-     */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "backgroundTask", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "check", "checkCircle", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "comment", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "diff", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "export", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "info", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusInCircle", "plusInCircleFilled", "plusInSquare", "popout", "push", "question", "quote", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "streamsClassic", "streamsWired", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
-  /**
-     * Can only be one side `left` or `right`
-     */
-  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
-  /**
-     * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
-     *
-     * This span wrapper can be removed by passing `textProps={false}`.
-     */
-  textProps: _propTypes.default.oneOfType([_propTypes.default.shape({
-    className: _propTypes.default.string,
-    "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any,
-    ref: _propTypes.default.any,
-    "data-text": _propTypes.default.string
-  }).isRequired, _propTypes.default.oneOf([false])]),
-  iconSize: _propTypes.default.any
+  type: _propTypes.default.any
 };

package/test-env/components/button/button_display/_button_display.js

@@ -14,10 +14,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react2 = require("@emotion/react");
 var _services = require("../../../services");
+var _href_validator = require("../../../services/security/href_validator");
+var _useEuiDisabledElement = require("../../../services/hooks/useEuiDisabledElement");
 var _button_display = require("./_button_display.styles");
 var _button_display_content = require("./_button_display_content");
-var _href_validator = require("../../../services/security/href_validator");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -63,6 +65,8 @@ var EuiButtonDisplay = exports.EuiButtonDisplay = /*#__PURE__*/(0, _react.forwar
     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,
@@ -79,6 +83,14 @@ var EuiButtonDisplay = exports.EuiButtonDisplay = /*#__PURE__*/(0, _react.forwar
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
+  var _useEuiDisabledElemen = (0, _useEuiDisabledElement.useEuiDisabledElement)({
+      isDisabled: buttonIsDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      onKeyDown: rest.onKeyDown
+    }),
+    disabledRef = _useEuiDisabledElemen.ref,
+    disabledButtonProps = (0, _objectWithoutProperties2.default)(_useEuiDisabledElemen, _excluded2);
+  var setCombinedRef = (0, _services.useCombinedRefs)([disabledRef, ref]);
   var styles = (0, _services.useEuiMemoizedStyles)(_button_display.euiButtonDisplayStyles);
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && [styles.defaultMinWidth.defaultMinWidth, styles.defaultMinWidth[size]], buttonIsDisabled && styles.isDisabled];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
@@ -90,13 +102,14 @@ var EuiButtonDisplay = exports.EuiButtonDisplay = /*#__PURE__*/(0, _react.forwar
     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) {
@@ -110,13 +123,12 @@ var EuiButtonDisplay = exports.EuiButtonDisplay = /*#__PURE__*/(0, _react.forwar
   } else {
     relObj.type = type;
   }
-  return (0, _react2.createElement)(element, _objectSpread(_objectSpread(_objectSpread({
+  return (0, _react2.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.propTypes = {
   href: _propTypes.default.string,
@@ -169,28 +181,18 @@ EuiButtonDisplay.propTypes = {
   style: _propTypes.default.any,
   type: _propTypes.default.any,
   /**
-     * Any `type` accepted by EuiIcon
+     * Controls the disabled behavior via the native `disabled` attribute.
      */
-  iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "anomalyChart", "anomalySwimLane", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "article", "asterisk", "at", "auditbeatApp", "backgroundTask", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "check", "checkCircle", "checkInCircleFilled", "cheer", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "comment", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "diff", "discoverApp", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "endpoint", "eql", "eraser", "error", "errorFilled", "esqlVis", "exit", "expand", "expandMini", "export", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "info", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "launch", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "logRateAnalysis", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoVulnerabilityManagement", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "minusInSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusInCircle", "plusInCircleFilled", "plusInSquare", "popout", "push", "question", "quote", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "streamsClassic", "streamsWired", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "timeslider", "training", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDimension", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenSemanticText", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable", "tokenVectorDense", "tokenDenseVector", "tokenVectorSparse"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]),
-  /**
-     * Can only be one side `left` or `right`
-     */
-  iconSide: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([undefined])]),
+  isDisabled: _propTypes.default.bool,
   /**
-     * Object of props passed to the `<span>` wrapping the content's text/children only (not icon)
+     * NOTE: Beta feature, may be changed or removed in the future
      *
-     * This span wrapper can be removed by passing `textProps={false}`.
+     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+     * This results in a semantically disabled button without the default browser handling of the disabled state.
+     *
+     * Use e.g. when a disabled button should have a tooltip.
      */
-  textProps: _propTypes.default.oneOfType([_propTypes.default.shape({
-    className: _propTypes.default.string,
-    "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any,
-    ref: _propTypes.default.any,
-    "data-text": _propTypes.default.string
-  }).isRequired, _propTypes.default.oneOf([false])]),
-  iconSize: _propTypes.default.any,
-  isDisabled: _propTypes.default.bool,
+  hasAriaDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/button/button_display/_button_display.styles.js

@@ -20,11 +20,11 @@ var euiButtonBaseCSS = exports.euiButtonBaseCSS = function euiButtonBaseCSS() {
   return "\n    display: inline-block;\n    appearance: none;\n    cursor: pointer;\n    ".concat((0, _global_styling.logicalTextAlignCSS)('center'), ";\n    white-space: nowrap;\n    ").concat((0, _global_styling.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__
 };
 var euiButtonDisplayStyles = exports.euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {