@elastic/eui 108.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/column_actions.js

@@ -83,16 +83,6 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
   var closePopover = useCallback(function () {
     setIsPopoverOpen(false);
   }, []);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var onFocus = useCallback(function () {
-    return setIsActionsButtonFocused(true);
-  }, []);
-  var onBlur = useCallback(function () {
-    return setIsActionsButtonFocused(false);
-  }, []);
   var actionsButtonAriaLabel = useEuiI18n('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
     title: title
   });
@@ -107,10 +97,10 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
   /**
    * Props to set on parent EuiDataGridHeaderCell
    */
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isColumnMoving = _useState6[0],
-    setIsColumnMoving = _useState6[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColumnMoving = _useState4[0],
+    setIsColumnMoving = _useState4[1];
   useEffect(function () {
     setPropsFromColumnActions({
       className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
@@ -156,17 +146,11 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
       iconType: "boxesVertical",
       iconSize: "s",
       color: "text",
-      css: styles.euiDataGridHeaderCell__actions,
       className: "euiDataGridHeaderCell__button",
       onClick: togglePopover,
       buttonRef: actionsButtonRef,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
-      ,
-      "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
-      : undefined,
       "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
+      css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.end, ";label:ColumnActions;"],
       "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
     }),
     isOpen: isPopoverOpen,

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

@@ -54,6 +54,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var hasColumnActions = useHasColumnActions(actions);
+  var cellContentId = "dataGridHeaderCellContent-".concat(id);
   var classes = classnames(_defineProperty(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderCellStyles);
   var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
@@ -97,8 +98,7 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
       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": classnames(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) {
@@ -107,11 +107,13 @@ export var EuiDataGridHeaderCell = /*#__PURE__*/memo(function (_ref) {
       }, ___EmotionJSX(EuiIcon, {
         type: "grabOmnidirectional",
         size: "s",
-        css: styles.euiDataGridHeaderCell__actions
+        css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), ___EmotionJSX("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 && ___EmotionJSX(ColumnActions, {
         index: index,
         id: id,
@@ -251,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
@@ -281,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
         }),
         /**
@@ -334,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,
@@ -343,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,
@@ -377,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,
@@ -386,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,
@@ -420,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,
@@ -429,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,
@@ -463,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,
@@ -472,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,
@@ -506,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,
@@ -515,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/body/header/data_grid_header_cell.styles.js

@@ -9,7 +9,6 @@
 import { css } from '@emotion/react';
 import { euiCanAnimate, euiTextTruncate, logicalCSS, logicalTextAlignCSS } from '../../../../global_styling';
 import { euiDataGridCellOutlineSelectors } from '../cell/data_grid_cell.styles';
-
 /**
  * Styles only applied to data header cell content, not control header cells
  */
@@ -17,11 +16,18 @@ export var euiDataGridHeaderCellStyles = function euiDataGridHeaderCellStyles(eu
   var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridCellOutli = euiDataGridCellOutlineSelectors('.euiDataGridHeaderCell'),
     header = _euiDataGridCellOutli.header;
+  var hideAnimation = function hideAnimation(margin, translateX) {
+    return "\n    ".concat(header.hideActions, " & {\n      ").concat(logicalCSS('margin-left', margin), "\n      transform: translateX(").concat(translateX, ") scale(0.01);\n      opacity: 0;\n    }\n  ");
+  };
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/css("flex-grow:1;", euiTextTruncate(), ";;label:euiDataGridHeaderCell__content;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/css(logicalCSS('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__actions: /*#__PURE__*/css("overflow:hidden;display:flex;", header.hideActions, " &{", logicalCSS('width', 0), " opacity:0;}", 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__*/css("overflow:hidden;display:flex;max-inline-size:24px;", 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__*/css(hideAnimation("-".concat(euiTheme.size.m), '0%'), ";;label:start;"),
+      end: /*#__PURE__*/css(hideAnimation("-".concat(euiTheme.size.l), '50%'), ";;label:end;")
+    }
   };
 };

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

@@ -1,4 +1,4 @@
-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"];
 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 _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."); }
@@ -41,6 +41,7 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiDataGridHeaderCell', className);
   var styles = useEuiMemoizedStyles(euiDataGridHeaderCellWrapperStyles);
@@ -106,7 +107,8 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     style: width != null ? {
       width: "".concat(width, "px")
     } : {},
-    "aria-label": renderFocusTrap ? ariaLabel : undefined
+    "aria-label": renderFocusTrap ? ariaLabel : undefined,
+    "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
   }, rest), ___EmotionJSX(HandleInteractiveChildren, {
     cellEl: isDragging ? null : headerEl,
     renderFocusTrap: isDragging ? false : renderFocusTrap,
@@ -122,6 +124,7 @@ EuiDataGridHeaderCellWrapper.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
   className: PropTypes.string,
   "aria-label": PropTypes.any,
+  "aria-labelledby": PropTypes.any,
   hasColumnActions: PropTypes.bool,
   isDragging: PropTypes.bool,
   onKeyDown: PropTypes.any

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() {