@elastic/eui 109.0.0 → 109.1.0-snapshot.1763390960850

package/es/components/datagrid/body/data_grid_body.js

@@ -214,7 +214,6 @@ EuiDataGridBody.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -244,6 +243,19 @@ EuiDataGridBody.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          /**
+             * Controls the disabled behavior via the native `disabled` attribute.
+             */
+          isDisabled: PropTypes.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.bool,
           buttonRef: PropTypes.any
         }),
         /**
@@ -297,7 +309,6 @@ EuiDataGridBody.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -306,6 +317,8 @@ EuiDataGridBody.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -340,7 +353,6 @@ EuiDataGridBody.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -349,6 +361,8 @@ EuiDataGridBody.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -383,7 +397,6 @@ EuiDataGridBody.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -392,6 +405,8 @@ EuiDataGridBody.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -426,7 +441,6 @@ EuiDataGridBody.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -435,6 +449,8 @@ EuiDataGridBody.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -469,7 +485,6 @@ EuiDataGridBody.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -478,6 +493,8 @@ EuiDataGridBody.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,

package/es/components/datagrid/body/data_grid_body_custom.js

@@ -378,7 +378,6 @@ EuiDataGridBodyCustomRender.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -408,6 +407,19 @@ EuiDataGridBodyCustomRender.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          /**
+             * Controls the disabled behavior via the native `disabled` attribute.
+             */
+          isDisabled: PropTypes.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.bool,
           buttonRef: PropTypes.any
         }),
         /**
@@ -461,7 +473,6 @@ EuiDataGridBodyCustomRender.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -470,6 +481,8 @@ EuiDataGridBodyCustomRender.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -504,7 +517,6 @@ EuiDataGridBodyCustomRender.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -513,6 +525,8 @@ EuiDataGridBodyCustomRender.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -547,7 +561,6 @@ EuiDataGridBodyCustomRender.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -556,6 +569,8 @@ EuiDataGridBodyCustomRender.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -590,7 +605,6 @@ EuiDataGridBodyCustomRender.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -599,6 +613,8 @@ EuiDataGridBodyCustomRender.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -633,7 +649,6 @@ EuiDataGridBodyCustomRender.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -642,6 +657,8 @@ EuiDataGridBodyCustomRender.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,

package/es/components/datagrid/body/data_grid_body_virtualized.js

@@ -546,7 +546,6 @@ EuiDataGridBodyVirtualized.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -576,6 +575,19 @@ EuiDataGridBodyVirtualized.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          /**
+             * Controls the disabled behavior via the native `disabled` attribute.
+             */
+          isDisabled: PropTypes.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.bool,
           buttonRef: PropTypes.any
         }),
         /**
@@ -629,7 +641,6 @@ EuiDataGridBodyVirtualized.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -638,6 +649,8 @@ EuiDataGridBodyVirtualized.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -672,7 +685,6 @@ EuiDataGridBodyVirtualized.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -681,6 +693,8 @@ EuiDataGridBodyVirtualized.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -715,7 +729,6 @@ EuiDataGridBodyVirtualized.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -724,6 +737,8 @@ EuiDataGridBodyVirtualized.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -758,7 +773,6 @@ EuiDataGridBodyVirtualized.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -767,6 +781,8 @@ EuiDataGridBodyVirtualized.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -801,7 +817,6 @@ EuiDataGridBodyVirtualized.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -810,6 +825,8 @@ EuiDataGridBodyVirtualized.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,

package/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -253,7 +253,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           /**
              * Overall size of button.
              * Matches the sizes of other EuiButtons
@@ -283,6 +282,19 @@ EuiDataGridHeaderCell.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          /**
+             * Controls the disabled behavior via the native `disabled` attribute.
+             */
+          isDisabled: PropTypes.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.bool,
           buttonRef: PropTypes.any
         }),
         /**
@@ -336,7 +348,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -345,6 +356,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -379,7 +392,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -388,6 +400,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -422,7 +436,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -431,6 +444,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -465,7 +480,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -474,6 +488,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,
@@ -508,7 +524,6 @@ EuiDataGridHeaderCell.propTypes = {
           color: PropTypes.any,
           "aria-label": PropTypes.string,
           "aria-labelledby": PropTypes.string,
-          isDisabled: PropTypes.bool,
           size: PropTypes.any,
           iconSize: PropTypes.any,
           isSelected: PropTypes.bool,
@@ -517,6 +532,8 @@ EuiDataGridHeaderCell.propTypes = {
           className: PropTypes.string,
           "data-test-subj": PropTypes.string,
           css: PropTypes.any,
+          isDisabled: PropTypes.bool,
+          hasAriaDisabled: PropTypes.bool,
           buttonRef: PropTypes.any
         }),
         onClick: PropTypes.func,

package/es/components/datagrid/controls/column_selector.js

@@ -1,8 +1,8 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -43,31 +43,48 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         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 = _toConsumableArray(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
@@ -132,7 +149,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       anchorPosition: "downLeft",
       panelPaddingSize: "none",
       button: ___EmotionJSX(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/es/components/datagrid/controls/column_sorting.js

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

package/es/components/datagrid/controls/data_grid_toolbar_control.js

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

package/es/components/datagrid/data_grid.js

@@ -168,7 +168,11 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
    */
   var displayValues = useMemo(function () {
     return columns.reduce(function (acc, column) {
-      return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, column.id, column.displayAsText || column.id));
+      // prevent duplicate values
+      if (!acc[column.id]) {
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, column.id, column.displayAsText || column.id));
+      }
+      return acc;
     }, {});
   }, [columns]);
   var _useDataGridDisplaySe = useDataGridDisplaySelector(checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showDisplaySelector'), gridStyleWithDefaults, _rowHeightsOptions),