@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

package/test-env/components/datagrid/body/header/data_grid_header_cell.js

@@ -56,6 +56,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var hasColumnActions = (0, _column_actions.useHasColumnActions)(actions);
+  var cellContentId = "dataGridHeaderCellContent-".concat(id);
   var classes = (0, _classnames2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
   var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
@@ -99,8 +100,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       isLastColumn: isLastColumn,
       width: width,
       "aria-sort": ariaSort,
-      "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
-      ,
+      "aria-labelledby": cellContentId,
       "aria-describedby": (0, _classnames2.default)(sortingAriaId, dragProps === null || dragProps === void 0 ? void 0 : dragProps['aria-describedby']),
       "data-column-moving": propsFromColumnActions['data-column-moving'] || (dragProps === null || dragProps === void 0 ? void 0 : dragProps['data-column-moving']) || undefined
     }), function (hasFocusTrap) {
@@ -109,11 +109,13 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       }, (0, _react2.jsx)(_icon.EuiIcon, {
         type: "grabOmnidirectional",
         size: "s",
-        css: styles.euiDataGridHeaderCell__actions
+        css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), (0, _react2.jsx)("div", {
         css: contentStyles,
         className: "euiDataGridHeaderCell__content",
-        title: title
+        title: title,
+        id: cellContentId,
+        "aria-label": displayAsText ? displayAsText : typeof children === 'string' ? children : undefined
       }, children), sortingArrow, sortingScreenReaderText, hasColumnActions && (0, _react2.jsx)(_column_actions.ColumnActions, {
         index: index,
         id: id,
@@ -253,7 +255,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -283,6 +284,19 @@ EuiDataGridHeaderCell.propTypes = {
           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,
           buttonRef: _propTypes.default.any
         }),
         /**
@@ -336,7 +350,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -345,6 +358,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -379,7 +394,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -388,6 +402,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -422,7 +438,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -431,6 +446,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -465,7 +482,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -474,6 +490,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -508,7 +526,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -517,6 +534,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,

package/test-env/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -22,11 +22,18 @@ var euiDataGridHeaderCellStyles = exports.euiDataGridHeaderCellStyles = function
   var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)('.euiDataGridHeaderCell'),
     header = _euiDataGridCellOutli.header;
+  var hideAnimation = function hideAnimation(margin, translateX) {
+    return "\n    ".concat(header.hideActions, " & {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', margin), "\n      transform: translateX(").concat(translateX, ") scale(0.01);\n      opacity: 0;\n    }\n  ");
+  };
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.euiTextTruncate)(), ";;label:euiDataGridHeaderCell__content;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__actions: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;", header.hideActions, " &{", (0, _global_styling.logicalCSS)('width', 0), " opacity:0;}", _global_styling.euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__actions;")
+    euiDataGridHeaderCell__actions: {
+      action: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;max-inline-size:24px;", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in,margin-left ", euiTheme.animation.fast, " ease-in;animation:none!important;};label:action;"),
+      start: /*#__PURE__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.m), '0%'), ";;label:start;"),
+      end: /*#__PURE__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.l), '50%'), ";;label:end;")
+    }
   };
 };

package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -17,7 +17,7 @@ var _focus = require("../../utils/focus");
 var _focus_utils = require("../cell/focus_utils");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label"];
+var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -43,6 +43,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell_wrapper.euiDataGridHeaderCellWrapperStyles);
@@ -108,7 +109,8 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     style: width != null ? {
       width: "".concat(width, "px")
     } : {},
-    "aria-label": renderFocusTrap ? ariaLabel : undefined
+    "aria-label": renderFocusTrap ? ariaLabel : undefined,
+    "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
   }, rest), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
     cellEl: isDragging ? null : headerEl,
     renderFocusTrap: isDragging ? false : renderFocusTrap,
@@ -124,6 +126,7 @@ EuiDataGridHeaderCellWrapper.propTypes = {
   width: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.any,
+  "aria-labelledby": _propTypes.default.any,
   hasColumnActions: _propTypes.default.bool,
   isDragging: _propTypes.default.bool,
   onKeyDown: _propTypes.default.any

package/test-env/components/datagrid/controls/column_selector.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridColumnSelector = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -45,31 +45,48 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
         var id = _ref.id;
         return id;
       });
-      var availableSet = new Set(availableColumnIds);
-      // Filter visibleColumns to only include existing columns
+      // remove duplicate columns to ensure unique columns
+      var availableColumnIdsSet = new Set(availableColumnIds);
+      if (process.env.NODE_ENV === 'development') {
+        if (availableColumnIds.length > availableColumnIdsSet.size) {
+          var duplicateIds = [];
+          var _iterator = _createForOfIteratorHelper(availableColumnIds),
+            _step;
+          try {
+            var _loop = function _loop() {
+              var id = _step.value;
+              if (!duplicateIds.includes(id) && availableColumnIds.filter(function (_id) {
+                return _id === id;
+              }).length > 1) {
+                duplicateIds.push(id);
+              }
+            };
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              _loop();
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          console.warn("\u26A0\uFE0F EuiDataGrid: Duplicate column IDs detected and removed: ".concat(duplicateIds.join(', '), "."), '\n Column IDs must be unique. Only the first occurrence of each duplicate will be used.');
+        }
+      }
       var validVisibleColumns = visibleColumns.filter(function (id) {
-        return availableSet.has(id);
+        return availableColumnIdsSet.has(id);
       });
       var visibleSet = new Set(validVisibleColumns);
       var result = [];
       var visibleIndex = 0;
-      var _iterator = _createForOfIteratorHelper(availableColumnIds),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var columnId = _step.value;
-          if (visibleSet.has(columnId)) {
-            // Replace with next visible column in order
+      for (var _i = 0, _arr = (0, _toConsumableArray2.default)(availableColumnIdsSet); _i < _arr.length; _i++) {
+        var columnId = _arr[_i];
+        if (visibleSet.has(columnId)) {
+          if (visibleIndex < validVisibleColumns.length) {
             result.push(validVisibleColumns[visibleIndex++]);
-          } else {
-            // Keep hidden column in original position
-            result.push(columnId);
           }
+        } else {
+          result.push(columnId);
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
       return result;
       // doesn't depend on visibleColumns on purpose to keep it an initial state
@@ -134,7 +151,7 @@ var useDataGridColumnSelector = exports.useDataGridColumnSelector = function use
       anchorPosition: "downLeft",
       panelPaddingSize: "none",
       button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
-        badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
+        badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(sortedColumns.length) : sortedColumns.length,
         iconType: "tableDensityNormal",
         "data-test-subj": "dataGridColumnSelectorButton",
         onClick: function onClick() {

package/test-env/components/datagrid/controls/column_sorting.js

@@ -383,7 +383,6 @@ DataGridSortingControl.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -413,6 +412,19 @@ DataGridSortingControl.propTypes = {
           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,
           buttonRef: _propTypes.default.any
         }),
         /**
@@ -466,7 +478,6 @@ DataGridSortingControl.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -475,6 +486,8 @@ DataGridSortingControl.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -509,7 +522,6 @@ DataGridSortingControl.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -518,6 +530,8 @@ DataGridSortingControl.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -552,7 +566,6 @@ DataGridSortingControl.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -561,6 +574,8 @@ DataGridSortingControl.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -595,7 +610,6 @@ DataGridSortingControl.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -604,6 +618,8 @@ DataGridSortingControl.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -638,7 +654,6 @@ DataGridSortingControl.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -647,6 +662,8 @@ DataGridSortingControl.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,

package/test-env/components/datagrid/controls/data_grid_toolbar_control.js

@@ -77,13 +77,6 @@ EuiDataGridToolbarControl.propTypes = {
      * Ensure the text of the button sits flush to the left, right, or both sides of its container
      */
   flush: _propTypes.default.any,
-  /**
-     * `disabled` is also allowed
-     */
-  /**
-     * `disabled` is also allowed
-     */
-  isDisabled: _propTypes.default.bool,
   /**
      * Force disables the button and changes the icon to a loading spinner
      */
@@ -138,10 +131,23 @@ EuiDataGridToolbarControl.propTypes = {
     "data-text": _propTypes.default.string
   }).isRequired, _propTypes.default.oneOf([false])]),
   iconSize: _propTypes.default.any,
+  /**
+     * Controls the disabled behavior via the native `disabled` attribute.
+     */
+  isDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+     * 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,
   badgeContent: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.string.isRequired])
 };
 var betterScreenReaderSlashes = function betterScreenReaderSlashes(badgeContent) {

package/test-env/components/datagrid/data_grid.js

@@ -164,7 +164,11 @@ var EuiDataGrid = exports.EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE
    */
   var displayValues = (0, _react.useMemo)(function () {
     return columns.reduce(function (acc, column) {
-      return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, column.id, column.displayAsText || column.id));
+      // prevent duplicate values
+      if (!acc[column.id]) {
+        return _objectSpread(_objectSpread({}, acc), {}, (0, _defineProperty2.default)({}, column.id, column.displayAsText || column.id));
+      }
+      return acc;
     }, {});
   }, [columns]);
   var _useDataGridDisplaySe = (0, _controls.useDataGridDisplaySelector)((0, _controls.checkOrDefaultToolBarDisplayOptions)(toolbarVisibility, 'showDisplaySelector'), gridStyleWithDefaults, _rowHeightsOptions),

package/test-env/components/datagrid/utils/in_memory.js

@@ -96,13 +96,14 @@ var EuiDataGridInMemoryRenderer = exports.EuiDataGridInMemoryRenderer = function
     var cells = [];
     var _loop = function _loop(i) {
       cells.push(columns.map(function (column, j) {
+        var key = "".concat(i, "-").concat(j, "-").concat(column.id);
         var skipThisColumn = inMemory.skipColumns && inMemory.skipColumns.indexOf(column.id) !== -1;
         if (skipThisColumn) {
           return null;
         }
         var isExpandable = column.isExpandable !== undefined ? column.isExpandable : true;
         return (0, _react3.jsx)("div", {
-          key: "".concat(i, "-").concat(column.id),
+          key: key,
           "data-dg-row": i,
           "data-dg-column": column.id
         }, (0, _react3.jsx)(CellElement, {
@@ -311,7 +312,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -341,6 +341,19 @@ EuiDataGridInMemoryRenderer.propTypes = {
           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,
           buttonRef: _propTypes.default.any
         }),
         /**
@@ -394,7 +407,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -403,6 +415,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -437,7 +451,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -446,6 +459,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -480,7 +495,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -489,6 +503,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -523,7 +539,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -532,6 +547,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,
@@ -566,7 +583,6 @@ EuiDataGridInMemoryRenderer.propTypes = {
           color: _propTypes.default.any,
           "aria-label": _propTypes.default.string,
           "aria-labelledby": _propTypes.default.string,
-          isDisabled: _propTypes.default.bool,
           size: _propTypes.default.any,
           iconSize: _propTypes.default.any,
           isSelected: _propTypes.default.bool,
@@ -575,6 +591,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
           className: _propTypes.default.string,
           "data-test-subj": _propTypes.default.string,
           css: _propTypes.default.any,
+          isDisabled: _propTypes.default.bool,
+          hasAriaDisabled: _propTypes.default.bool,
           buttonRef: _propTypes.default.any
         }),
         onClick: _propTypes.default.func,

package/test-env/components/date_picker/auto_refresh/auto_refresh.js

@@ -180,9 +180,9 @@ EuiAutoRefreshButton.propTypes = {
   intervalUnits: _propTypes.default.any,
   onRefreshChange: _propTypes.default.func.isRequired,
   /**
-     * `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])]),
   /**
      * Reduces the time unit to a single letter
      */
@@ -236,5 +236,14 @@ EuiAutoRefreshButton.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any
+  css: _propTypes.default.any,
+  /**
+     * 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
 };