@elastic/eui 116.2.0 → 116.3.0

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

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiBanner = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
+var _i18n = require("../i18n");
+var _title = require("../title");
+var _button = require("../button");
+var _text = require("../text");
+var _accessibility = require("../accessibility");
+var _banner = require("./banner.styles");
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "headingElement", "text", "size", "color", "actionProps", "media", "onDismiss", "dismissButtonProps", "children", "className", "announceOnMount", "data-test-subj"];
+/*
+ * 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.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var EuiBanner = exports.EuiBanner = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var title = _ref.title,
+    _ref$headingElement = _ref.headingElement,
+    headingElement = _ref$headingElement === void 0 ? 'h2' : _ref$headingElement,
+    text = _ref.text,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'highlighted' : _ref$color,
+    actionProps = _ref.actionProps,
+    media = _ref.media,
+    onDismiss = _ref.onDismiss,
+    dismissButtonProps = _ref.dismissButtonProps,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$announceOnMount = _ref.announceOnMount,
+    announceOnMount = _ref$announceOnMount === void 0 ? false : _ref$announceOnMount,
+    _ref$dataTestSubj = _ref['data-test-subj'],
+    dataTestSubj = _ref$dataTestSubj === void 0 ? 'euiBanner' : _ref$dataTestSubj,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var styles = (0, _services.useEuiMemoizedStyles)(_banner.euiBannerStyles);
+  var dismissAriaLabel = (0, _i18n.useEuiI18n)('euiBanner.dismissAriaLabel', 'Dismiss "{title}" announcement', {
+    title: title
+  });
+  var Heading = headingElement;
+  var headingSize = size === 's' ? 'xxs' : 'xs';
+  var primaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.primary;
+  var secondaryActionProps = actionProps === null || actionProps === void 0 ? void 0 : actionProps.secondary;
+  // a standalone secondary action is not supported
+  var hasActions = Boolean(primaryActionProps);
+  var componentClass = 'euiBanner';
+  var classes = (0, _classnames.default)(componentClass, className);
+  var backgroundColorStyles = (0, _global_styling.useEuiBackgroundColorCSS)()[color];
+  var cssStyles = [styles.euiBanner, backgroundColorStyles];
+  var containerCssStyles = [styles.container, onDismiss && styles.hasDismiss];
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    ref: ref,
+    className: classes,
+    css: cssStyles,
+    "data-size": size,
+    "data-color": color,
+    "data-test-subj": dataTestSubj
+  }, rest), (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__container"),
+    css: containerCssStyles
+  }, media ? (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__media"),
+    css: styles.media,
+    "data-test-subj": "".concat(dataTestSubj, "-media")
+  }, media) : null, (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__body"),
+    css: styles.body
+  }, (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__content"),
+    css: styles.content
+  }, (0, _react2.jsx)(_title.EuiTitle, {
+    size: headingSize
+  }, (0, _react2.jsx)(Heading, {
+    css: styles.title,
+    "data-test-subj": "".concat(dataTestSubj, "-title")
+  }, title)), onDismiss ? (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
+    iconType: "cross",
+    color: "text",
+    "aria-label": dismissAriaLabel,
+    "data-test-subj": "".concat(dataTestSubj, "-dismiss")
+  }, dismissButtonProps, {
+    css: [styles.dismiss, dismissButtonProps === null || dismissButtonProps === void 0 ? void 0 : dismissButtonProps.css, ";label:EuiBanner;"],
+    onClick: onDismiss
+  })) : null, text ? (0, _react2.jsx)(_text.EuiText, {
+    css: styles.text,
+    size: "s",
+    color: "subdued",
+    "data-test-subj": "".concat(dataTestSubj, "-text")
+  }, text) : null, children && children), hasActions ? (0, _react2.jsx)("div", {
+    className: "".concat(componentClass, "__actions"),
+    css: styles.actions,
+    "data-test-subj": "".concat(dataTestSubj, "-actions")
+  }, primaryActionProps ? (0, _react2.jsx)(_button.EuiButton, (0, _extends2.default)({
+    "data-test-subj": "".concat(dataTestSubj, "-primaryAction")
+  }, primaryActionProps, {
+    color: "primary",
+    size: "s"
+  })) : null, secondaryActionProps ? (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    "data-test-subj": "".concat(dataTestSubj, "-secondaryAction")
+  }, secondaryActionProps, {
+    color: "primary",
+    size: "s"
+  })) : null) : null)), announceOnMount && (0, _react2.jsx)(_accessibility.EuiLiveAnnouncer, null, title && title, title && text && ",\xA0", text && text, (title || text) && children && ",\xA0", children && children));
+});
+EuiBanner.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
+  /** Heading shown at the top. */title: _propTypes.default.string.isRequired,
+  /**
+     * HTML element used to render the title.
+     * @default 'h2'
+     */
+  headingElement: _propTypes.default.oneOf(["h2", "h3", "h4", "h5", "h6"]),
+  /** Supporting copy rendered below the title. */text: _propTypes.default.node,
+  /** Extra content rendered directly below `text`. */children: _propTypes.default.node,
+  /** Illustration slot. Wrapped in a square (1:1) container. */media: _propTypes.default.node.isRequired,
+  /**
+     * Visual size variant.
+     * @default 'm'
+     */
+  size: _propTypes.default.any,
+  /**
+     * Defines the announcement background color.
+     * @default 'highlighted'
+     */
+  color: _propTypes.default.oneOf(["highlighted", "plain"]),
+  /** Optional action buttons. */actionProps: _propTypes.default.shape({
+    /** Primary call-to-action, rendered as an `EuiButton`. */primary: _propTypes.default.any,
+    /** Secondary action, rendered as an `EuiButtonEmpty`. Is only rendered when a primary action is available. */secondary: _propTypes.default.any
+  }),
+  /**
+     * When provided, a dismiss button is rendered in the top-right corner and
+     * this callback fires when the user activates it.
+     */
+  onDismiss: _propTypes.default.func,
+  /** Extra props spread onto the dismiss `EuiButtonIcon`. */dismissButtonProps: _propTypes.default.shape({
+    "aria-label": _propTypes.default.string,
+    "aria-labelledby": _propTypes.default.string,
+    /**
+       * Overall size of button.
+       * Matches the sizes of other EuiButtons
+       */
+    size: _propTypes.default.any,
+    /**
+       * Size of the icon only.
+       * This will not affect the overall size of the button
+       */
+    iconSize: _propTypes.default.any,
+    /**
+       * Applies the boolean state as the `aria-pressed` property to create a toggle button.
+       * *Only use when the readable text does not change between states.*
+       */
+    isSelected: _propTypes.default.bool,
+    /**
+       * Sets the display style for matching other EuiButton types.
+       * `base` is equivalent to a typical EuiButton
+       * `fill` is equivalent to a filled EuiButton
+       * `empty` (default) is equivalent to an EuiButtonEmpty
+       */
+    display: _propTypes.default.any,
+    /**
+       * Disables the button and changes the icon to a loading spinner
+       */
+    isLoading: _propTypes.default.bool,
+    className: _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
+    /**
+       * 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
+  }),
+  /**
+     * When set to `true`, the content is announced by screen readers on mount.
+     * Use only when the announcement is immediately relevant, e.g. as feedback to user actions.
+     * Avoid using on initial page load as it may create noise for assistive technology users.
+     *
+     * @default false
+     */
+  announceOnMount: _propTypes.default.bool
+};
+EuiBanner.displayName = 'EuiBanner';

package/test-env/components/banner/banner.styles.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiBannerStyles = void 0;
+var _react = require("@emotion/react");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+ * 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 CONTAINER_NAME = 'euiBanner';
+var CQC_LAYOUTS = ['narrow', 'wide'];
+var CQC_BREAKPOINTS = {
+  s: {
+    narrow: '(min-width: 401px)',
+    wide: '(min-width: 800px)'
+  },
+  m: {
+    narrow: '(min-width: 601px)',
+    wide: '(min-width: 1000px)'
+  }
+};
+var CQC_BREAKPOINT_NARROWEST = '(max-width: 400px)';
+
+/** Maximum reading width for `text` and `children` slots. */
+var TEXT_MAX_WIDTH = 1200;
+var withContainerQuery = function withContainerQuery(_ref2) {
+  var layout = _ref2.layout,
+    styles = _ref2.styles;
+  return Object.keys(CQC_BREAKPOINTS).map(function (sizeKey) {
+    return "\n        @container ".concat(CONTAINER_NAME, "--").concat(sizeKey, " ").concat(CQC_BREAKPOINTS[sizeKey][layout], " {\n          ").concat(styles, "\n        }\n      ");
+  }).join('\n');
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "qd171g-title",
+  styles: "[data-size='s'] &{display:inline;};label:title;"
+} : {
+  name: "qd171g-title",
+  styles: "[data-size='s'] &{display:inline;};label:title;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var euiBannerStyles = exports.euiBannerStyles = function euiBannerStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    euiBanner: /*#__PURE__*/(0, _react.css)("container-name:", CONTAINER_NAME, ";container-type:inline-size;position:relative;border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";&[data-size='s']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--s;}&[data-size='m']{container-name:", CONTAINER_NAME, " ", CONTAINER_NAME, "--m;};label:euiBanner;"),
+    container: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;gap:", euiTheme.size.m, ";padding-inline-start:", euiTheme.size.base, ";padding-inline-end:", euiTheme.size.base, ";[data-size='m'] &{padding-block:", euiTheme.size.base, ";}[data-size='s'] &{padding-block:", euiTheme.size.m, ";}", withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        flex-direction: row;\n        align-items: flex-start;\n        gap: ".concat(euiTheme.size.base, ";\n      ")
+    }), ";;label:container;"),
+    media: /*#__PURE__*/(0, _react.css)("--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 5)"), ";flex-shrink:0;inline-size:var(--euiBannerMediaSize);block-size:var(--euiBannerMediaSize);aspect-ratio:1/1;[data-size='s'] &{--euiBannerMediaSize:", "calc(".concat(euiTheme.size.base, " * 2)"), ";}", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        align-self: center;\n      "
+    }), " img,svg{block-size:100%;inline-size:100%;};label:media;"),
+    body: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;display:flex;flex-direction:column;align-self:flex-start;inline-size:100%;gap:", euiTheme.size.m, ";", withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        align-self: center;\n        inline-size: auto;\n      "
+    }), " ", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        flex-direction: row;\n        align-items: center;\n        /* stretch to match the media's height so align-items has space to work */\n        align-self: stretch;\n        justify-content: space-between;\n        gap: ".concat(euiTheme.size.xxl, ";\n      ")
+    }), ";;label:body;"),
+    // At size `s` the content slot becomes a block container so the title and
+    // text flow inline. Other sizes keep the flex column with a fixed gap.
+    content: /*#__PURE__*/(0, _react.css)("flex:1 1 auto;min-inline-size:0;max-inline-size:", TEXT_MAX_WIDTH, "px;display:flex;flex-direction:column;gap:", euiTheme.size.xs, ";[data-size='s'] &{display:block;>*+*:not(.euiButtonIcon){margin-block-start:", euiTheme.size.s, ";}};label:content;"),
+    title: _ref,
+    text: /*#__PURE__*/(0, _react.css)("[data-size='s'] &{display:inline;&::before{content:'\xB7';display:inline-block;inline-size:calc(", euiTheme.size.s, " + ", euiTheme.size.xxs, ");text-align:center;color:", euiTheme.colors.textHeading, ";}};label:text;"),
+    actions: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:", euiTheme.size.s, ";@container ", CONTAINER_NAME, " ", CQC_BREAKPOINT_NARROWEST, "{flex-wrap:wrap;>*{inline-size:100%;}}", withContainerQuery({
+      layout: 'wide',
+      styles: "\n        /* Reverses source order so primary appears last (rightmost). */\n        flex-direction: row-reverse;\n        flex-shrink: 0;\n        align-self: center;\n      "
+    }), ";;label:actions;"),
+    hasDismiss: /*#__PURE__*/(0, _react.css)(withContainerQuery({
+      layout: 'narrow',
+      styles: "\n        padding-inline-end: calc(".concat(euiTheme.size.s, " * 5);\n      ")
+    }), ";;label:hasDismiss;"),
+    dismiss: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:", euiTheme.size.s, ";inset-inline-end:", euiTheme.size.s, ";color:", euiTheme.colors.textSubdued, ";;label:dismiss;")
+  };
+};

package/test-env/components/banner/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiBanner", {
+  enumerable: true,
+  get: function get() {
+    return _banner.EuiBanner;
+  }
+});
+var _banner = require("./banner");

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

@@ -37,8 +37,9 @@ var _i18n = require("../i18n");
 var _delay_render = require("../delay_render");
 var _accessibility2 = require("../../services/accessibility");
 var _basic_table = require("./basic_table.styles");
+var _tool_tip = require("../tool_tip");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline", "stickyScrollbar"],
+var _excluded = ["className", "loading", "items", "itemId", "columns", "pagination", "sorting", "selection", "onChange", "error", "noItemsMessage", "compressed", "itemIdToExpandedRowMap", "responsiveBreakpoint", "rowProps", "cellProps", "tableCaption", "rowHeader", "tableLayout", "hasBackground", "scrollableInline", "stickyScrollbar", "stickyHeader"],
   _excluded2 = ["align", "render", "dataType", "isExpander", "textOnly", "name", "field", "description", "sortable", "footer", "mobileOptions", "nameTooltip"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -165,7 +166,11 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
           selectAllRows = _ref4[0],
           deselectRows = _ref4[1];
-        return (0, _react2.jsx)(_form.EuiCheckbox, {
+        return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+          content: checked || indeterminate ? deselectRows : selectAllRows,
+          display: "block",
+          disableScreenReaderOutput: true
+        }, (0, _react2.jsx)(_form.EuiCheckbox, {
           id: _this.selectAllIdGenerator(),
           checked: checked,
           indeterminate: indeterminate,
@@ -173,9 +178,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           onChange: onChange,
           "data-test-subj": "checkboxSelectAll",
           "aria-label": checked || indeterminate ? deselectRows : selectAllRows,
-          title: checked || indeterminate ? deselectRows : selectAllRows,
           label: isMobile ? selectAllRows : null
-        });
+        }));
       });
     });
     (0, _defineProperty2.default)(_this, "renderCopyChar", function (columnIndex) {
@@ -365,6 +369,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         hasBackground = _this$props2.hasBackground,
         scrollableInline = _this$props2.scrollableInline,
         stickyScrollbar = _this$props2.stickyScrollbar,
+        stickyHeader = _this$props2.stickyHeader,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
       var classes = (0, _classnames.default)('euiBasicTable', {
         'euiBasicTable-loading': loading
@@ -385,7 +390,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         hasBackground = _this$props3.hasBackground,
         loading = _this$props3.loading,
         scrollableInline = _this$props3.scrollableInline,
-        stickyScrollbar = _this$props3.stickyScrollbar;
+        stickyScrollbar = _this$props3.stickyScrollbar,
+        stickyHeader = _this$props3.stickyHeader;
       return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
       }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_table.EuiTable, {
@@ -396,6 +402,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         hasBackground: hasBackground,
         scrollableInline: scrollableInline,
         stickyScrollbar: stickyScrollbar,
+        stickyHeader: stickyHeader,
         css: loading && _basic_table.safariLoadingWorkaround
       }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }
@@ -664,8 +671,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         }
       }, (0, _react2.jsx)(_icon.EuiIcon, {
         type: "minusCircle",
-        color: "danger"
-      }), " ", error));
+        color: "danger",
+        "aria-hidden": true
+      }), ' ', error));
     }
   }, {
     key: "renderEmptyMessage",
@@ -792,15 +800,18 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           index: displayedRowIndex + 1
         }
       }, function (selectThisRow) {
-        return (0, _react2.jsx)(_form.EuiCheckbox, {
+        return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+          content: title || selectThisRow,
+          display: "block",
+          disableScreenReaderOutput: true
+        }, (0, _react2.jsx)(_form.EuiCheckbox, {
           id: "".concat(_this6.tableId).concat(key, "-checkbox"),
           disabled: disabled,
           checked: checked,
           onChange: onChange,
-          title: title || selectThisRow,
           "aria-label": title || selectThisRow,
           "data-test-subj": "checkboxSelectRow-".concat(itemId)
-        });
+        }));
       })), disabled];
     }
   }, {

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

@@ -100,10 +100,10 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
   var popoverButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
     className: className,
     "aria-label": actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsButtonAriaLabel,
-    title: actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined,
     iconType: "boxesVertical",
     color: "text",
     isDisabled: actionsDisabled,
+    hasAriaDisabled: actionsDisabled,
     onClick: function onClick() {
       return setPopoverOpen(function (isOpen) {
         return !isOpen;
@@ -111,14 +111,15 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
     },
     "data-test-subj": "euiCollapsedItemActionsButton"
   });
-  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-    content: allActionsTooltip
+  var withTooltip = (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsTooltip,
+    disableScreenReaderOutput: true
   }, popoverButton);
   return (0, _react2.jsx)(_popover.EuiPopover, {
     className: className,
     id: "".concat(itemId, "-actions"),
     isOpen: popoverOpen,
-    button: withTooltip || popoverButton,
+    button: withTooltip,
     closePopover: closePopover,
     panelPaddingSize: "none",
     anchorPosition: "leftCenter"

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

@@ -57,16 +57,13 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
       className: className,
       "aria-labelledby": ariaLabelId,
       isDisabled: !enabled,
+      hasAriaDisabled: !enabled,
       color: color,
       iconType: icon,
       onClick: onClick,
       href: href,
       target: action.target,
       "data-test-subj": dataTestSubj
-      // If action is disabled, the normal tooltip can't show - attempt to
-      // provide some amount of affordance with a browser title tooltip
-      ,
-      title: !enabled ? tooltipContent : undefined
     });
     // actionContent (action.name) is a ReactNode and must be rendered
     // to an element and referenced by ID for screen readers
@@ -78,6 +75,7 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
       className: className,
       size: "s",
       isDisabled: !enabled,
+      hasAriaDisabled: !enabled,
       color: color,
       iconType: icon,
       onClick: onClick,
@@ -87,5 +85,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, tooltipProps, button), ariaLabelledBy) : (0, _react2.jsx)(_react.default.Fragment, null, button, ariaLabelledBy);
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tool_tip.EuiToolTip, tooltipProps, button), ariaLabelledBy);
 };

package/test-env/components/breadcrumbs/_breadcrumb_content.js

@@ -19,11 +19,12 @@ var _link = require("../link");
 var _popover = require("../popover");
 var _icon = require("../icon");
 var _i18n = require("../i18n");
+var _tool_tip = require("../tool_tip");
 var _breadcrumb_content = require("./_breadcrumb_content.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["text", "truncate", "type", "href", "rel", "onClick", "popoverContent", "popoverProps", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb"],
+var _excluded = ["text", "truncate", "type", "href", "rel", "onClick", "popoverContent", "popoverProps", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb", "title"],
   _excluded2 = ["css"],
-  _excluded3 = ["popoverContent", "popoverProps", "color", "type", "title", "aria-current", "className", "isLastBreadcrumb", "breadcrumbCss", "truncationCss", "children"];
+  _excluded3 = ["popoverContent", "popoverProps", "color", "type", "title", "hasExplicitTitle", "aria-current", "className", "isLastBreadcrumb", "breadcrumbCss", "truncationCss", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -49,6 +50,7 @@ var EuiBreadcrumbContent = exports.EuiBreadcrumbContent = function EuiBreadcrumb
     isOnlyBreadcrumb = _ref.isOnlyBreadcrumb,
     highlightLastBreadcrumb = _ref.highlightLastBreadcrumb,
     truncateLastBreadcrumb = _ref.truncateLastBreadcrumb,
+    propTitle = _ref.title,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isApplication = type === 'application';
   var classes = (0, _classnames.default)('euiBreadcrumb__content', className);
@@ -71,8 +73,9 @@ var EuiBreadcrumbContent = exports.EuiBreadcrumbContent = function EuiBreadcrumb
   var linkColor = color || 'subdued';
   var ariaCurrent = highlightLastBreadcrumb ? 'page' : undefined;
   var interactionStyles = (isInteractiveBreadcrumb || isBreadcrumbWithPopover) && !isApplication && styles.isInteractive;
+  var hasExplicitTitle = propTitle != null && propTitle !== '';
   return (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
-    var title = innerText === '' ? undefined : innerText;
+    var title = propTitle || (innerText === '' ? undefined : innerText);
     var baseProps = {
       ref: ref,
       title: title,
@@ -84,6 +87,8 @@ var EuiBreadcrumbContent = exports.EuiBreadcrumbContent = function EuiBreadcrumb
       var _ = baseProps.css,
         popoverButtonProps = (0, _objectWithoutProperties2.default)(baseProps, _excluded2);
       return (0, _react2.jsx)(EuiBreadcrumbPopover, (0, _extends2.default)({}, popoverButtonProps, {
+        title: title,
+        hasExplicitTitle: hasExplicitTitle,
         breadcrumbCss: [].concat(cssStyles, [interactionStyles]),
         truncationCss: truncationStyles,
         isLastBreadcrumb: isLastBreadcrumb,
@@ -303,6 +308,7 @@ var EuiBreadcrumbPopover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
     color = _ref2.color,
     type = _ref2.type,
     title = _ref2.title,
+    hasExplicitTitle = _ref2.hasExplicitTitle,
     ariaCurrent = _ref2['aria-current'],
     className = _ref2.className,
     isLastBreadcrumb = _ref2.isLastBreadcrumb,
@@ -331,29 +337,33 @@ var EuiBreadcrumbPopover = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2,
   var wrapperStyles = [styles.popoverWrapper.euiBreadcrumb__popoverWrapper, !isLastBreadcrumb && styles.popoverWrapper[type]];
   var buttonStyles = [styles.euiBreadcrumb__popoverButton].concat((0, _toConsumableArray2.default)(breadcrumbCss));
   var truncationStyles = [styles.euiBreadcrumb__popoverTruncation].concat((0, _toConsumableArray2.default)(truncationCss));
+  var linkButton = (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({
+    ref: ref,
+    "aria-current": ariaCurrent,
+    className: className,
+    css: buttonStyles,
+    color: color,
+    onClick: togglePopover
+  }, rest), (0, _react2.jsx)("span", {
+    css: truncationStyles
+  }, children), (0, _react2.jsx)(_icon.EuiIcon, {
+    type: "chevronSingleDown",
+    size: "s",
+    "aria-label": " - ".concat(popoverAriaLabel)
+  }));
   return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({}, popoverProps, {
     isOpen: isPopoverOpen,
     closePopover: closePopover,
     css: wrapperStyles,
-    button: (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({
-      ref: ref,
-      title: title,
-      "aria-current": ariaCurrent,
-      className: className,
-      css: buttonStyles,
-      color: color,
-      onClick: togglePopover
-    }, rest), (0, _react2.jsx)("span", {
-      css: truncationStyles
-    }, children), (0, _react2.jsx)(_icon.EuiIcon, {
-      type: "chevronSingleDown",
-      size: "s",
-      "aria-label": " - ".concat(popoverAriaLabel)
-    }))
+    button: title ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+      content: title,
+      disableScreenReaderOutput: !hasExplicitTitle
+    }, linkButton) : linkButton
   }), typeof popoverContent === 'function' ? popoverContent(closePopover) : popoverContent);
 });
 EuiBreadcrumbPopover.propTypes = {
   breadcrumbCss: _propTypes.default.any.isRequired,
-  truncationCss: _propTypes.default.any.isRequired
+  truncationCss: _propTypes.default.any.isRequired,
+  hasExplicitTitle: _propTypes.default.bool.isRequired
 };
 EuiBreadcrumbPopover.displayName = 'EuiBreadcrumbPopover';

package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -130,6 +130,7 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
       var optionIsFocused = activeOptionIndex === index;
       var optionIsDisabled = option.hasOwnProperty('disabled') && option.disabled === true;
       var hasOnFocusBadge = onFocusBadge && optionIsFocused && !optionIsDisabled;
+      var hasNativeTruncation = !hasTruncationProps && !searchValue && rowHeight !== 'auto';
       return (0, _react2.jsx)(_list_item_layout.EuiListItemLayout, (0, _extends2.default)({
         element: "li",
         role: "option"
@@ -144,8 +145,8 @@ var EuiComboBoxOptionsList = exports.EuiComboBoxOptionsList = /*#__PURE__*/funct
         // loses focus on selecting an option (due to actively removing it from the list)
         ,
         id: rootId("_option-".concat(options.indexOf(option))),
+        title: hasNativeTruncation && !toolTipContent ? label : undefined,
         key: (_option$key = option.key) !== null && _option$key !== void 0 ? _option$key : option.label,
-        title: label,
         prepend: option.prepend,
         append: hasOnFocusBadge ? (0, _react2.jsx)(_react.default.Fragment, null, option.append, hitEnterBadge) : option.append,
         checked: checked,

package/test-env/components/context_menu/context_menu_panel_title.js

@@ -68,18 +68,6 @@ EuiContextMenuPanelTitle.propTypes = {
   title: _propTypes.default.node,
   buttonRef: _propTypes.default.any,
   buttonProps: _propTypes.default.shape({
-    iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "addToDashboard", "advancedSettingsApp", "agentApp", "aggregate", "alignBottom", "alignBottomLeft", "alignBottomRight", "alignCenterHorizontal", "alignCenterVertical", "alignLeft", "alignRight", "alignTop", "alignTopLeft", "alignTopRight", "alert", "analyzeEvent", "annotation", "anomalyChart", "chartAnomaly", "anomalySwimLane", "apmApp", "apmTrace", "chartWaterfall", "appSearchApp", "apps", "arrowDown", "chevronSingleDown", "arrowLeft", "chevronSingleLeft", "arrowRight", "chevronSingleRight", "arrowUp", "chevronSingleUp", "arrowStart", "chevronLimitLeft", "arrowEnd", "chevronLimitRight", "article", "asterisk", "at", "archive", "axisX", "axisYLeft", "axisYRight", "auditbeatApp", "backgroundTask", "beaker", "bell", "bellSlash", "beta", "bolt", "boxesHorizontal", "boxesVertical", "branch", "briefcase", "branchUser", "broom", "brush", "bug", "bulb", "bullseye", "calendar", "canvasApp", "casesApp", "changePointDetection", "chartChangePoint", "chartArea", "chartAreaStack", "chartBarHorizontal", "chartBarHorizontalStack", "chartBarVertical", "chartBarVerticalStack", "chartGauge", "chartHeatmap", "chartLine", "chartPie", "chartTagCloud", "chartThreshold", "check", "checkCircle", "checkInCircleFilled", "checkCircleFill", "cheer", "popper", "classificationJob", "clickLeft", "clickRight", "clock", "clockCounter", "clockControl", "cloud", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "code", "codeApp", "color", "paintBucket", "commandLine", "comment", "compare", "compute", "processor", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "contrast", "contrastHigh", "contrastFill", "controls", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "crossProjectSearch", "createAdvancedJob", "createGenericJob", "createGeoJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInCircle", "crossCircle", "crosshair", "crosshairs", "currency", "money", "cut", "scissors", "dashboardApp", "dashedCircle", "dataVisualizer", "database", "desktop", "display", "devToolsApp", "diff", "discoverApp", "distributeHorizontal", "distributeVertical", "download", "drag", "dragHorizontal", "dragVertical", "discuss", "document", "documentEdit", "documentation", "documents", "dot", "dotInCircle", "doubleArrowLeft", "chevronDoubleLeft", "doubleArrowRight", "chevronDoubleRight", "ellipsis", "editorAlignCenter", "textAlignCenter", "editorAlignLeft", "textAlignLeft", "editorAlignRight", "textAlignRight", "editorBold", "textBold", "editorChecklist", "listCheck", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "textHeading", "editorItalic", "textItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "listNumber", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "redo", "editorStrike", "textStrike", "editorTable", "table", "editorUnderline", "textUnderline", "editorUndo", "undo", "editorUnorderedList", "listBullet", "email", "mail", "empty", "emsApp", "endpoint", "eql", "query", "eraser", "error", "errorFilled", "errorFill", "esqlVis", "exit", "logOut", "expand", "maximize", "expandMini", "export", "exportAction", "upload", "external", "eye", "eyeClosed", "eyeSlash", "faceHappy", "faceNeutral", "faceSad", "fieldStatistics", "tableInfo", "filebeatApp", "filter", "filterExclude", "filterIgnore", "filterInclude", "filterInCircle", "flask", "flag", "fleetApp", "fold", "folder", "folderClosed", "folderClose", "folderCheck", "folderExclamation", "folderOpen", "folderOpened", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "grabOmnidirectional", "gradient", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "hourglass", "if", "info", "image", "importAction", "index", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "mapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "indexTemporary", "tableTime", "infinity", "inputOutput", "inspect", "invert", "ip", "key", "keyboard", "kqlField", "queryField", "kqlFunction", "kqlOperand", "queryOperand", "kqlSelector", "querySelector", "kqlValue", "queryValue", "kubernetesNode", "kubernetesPod", "launch", "rocket", "layers", "lensApp", "lettering", "text", "lineBreak", "lineBreakSlash", "lineDash", "lineDashed", "lineDot", "lineDotted", "lineSolid", "link", "linkSlash", "list", "listAdd", "lock", "lockOpen", "logPatternAnalysis", "pattern", "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", "queue", "machineLearningApp", "magnet", "magnify", "magnifyExclamation", "magnifyMinus", "magnifyPlus", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "map", "mapMarker", "waypoint", "megaphone", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusCircle", "minusInCircle", "minusInCircleFilled", "minusInSquare", "minusSquare", "mobile", "monitoringApp", "moon", "move", "namespace", "nested", "newChat", "node", "vectorTriangle", "notebookApp", "number", "offline", "wifiSlash", "online", "wifi", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "palette", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFill", "pinFilled", "pipeBreaks", "pipelineApp", "pipeNoBreaks", "pivot", "play", "playFilled", "plugs", "plus", "plusCircle", "plusInCircle", "plusInCircleFilled", "plusInSquare", "plusSquare", "popout", "presentation", "productRobot", "productAgent", "productCloudInfra", "productDashboard", "productDiscover", "productML", "productStreamsClassic", "productStreamsWired", "push", "send", "question", "quote", "radar", "readOnly", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "return", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "section", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "server", "sessionViewer", "shard", "share", "significantEvents", "singleMetricViewer", "snowflake", "sortAscending", "sortDescending", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spaces", "spacesApp", "sparkles", "sqlApp", "star", "starEmpty", "starEmptySpace", "starFill", "starFilled", "starFillSpace", "starFilledSpace", "starMinusEmpty", "starMinusFill", "starMinusFilled", "starPlusEmpty", "starPlusFill", "starPlusFilled", "stats", "stop", "stopFill", "stopFilled", "stopSlash", "storage", "streamsClassic", "streamsWired", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityHigh", "tableDensityExpanded", "tableDensityLow", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "thermometer", "thumbDown", "thumbUp", "timeline", "timelineWithArrow", "timelionApp", "timeRefresh", "refreshTime", "timeslider", "training", "transitionBottomIn", "transitionBottomOut", "transitionLeftIn", "transitionLeftOut", "transitionTopIn", "transitionTopOut", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "unarchive", "vector", "vectorSquare", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "chartMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "vulnerabilityManagementApp", "warning", "warningFilled", "warningFill", "watchesApp", "web", "wordWrap", "wordWrapDisabled", "workflowsApp", "workflow", "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]).isRequired,
-    /**
-       * Any of the named color palette options.
-       *
-       * Do not use the following colors for standalone buttons directly,
-       * they exist to serve other components:
-       *  - accent
-       *  - warning
-       *  - neutral
-       *  - risk
-       */
-    color: _propTypes.default.any,
     "aria-label": _propTypes.default.string,
     "aria-labelledby": _propTypes.default.string,
     /**