@elastic/eui 108.0.0 → 109.1.0-snapshot.1763390960850

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

@@ -220,7 +220,6 @@ EuiDataGridBody.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
@@ -250,6 +249,19 @@ EuiDataGridBody.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
         }),
         /**
@@ -303,7 +315,6 @@ EuiDataGridBody.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,
@@ -312,6 +323,8 @@ EuiDataGridBody.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,
@@ -346,7 +359,6 @@ EuiDataGridBody.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,
@@ -355,6 +367,8 @@ EuiDataGridBody.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,
@@ -389,7 +403,6 @@ EuiDataGridBody.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,
@@ -398,6 +411,8 @@ EuiDataGridBody.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,
@@ -432,7 +447,6 @@ EuiDataGridBody.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,
@@ -441,6 +455,8 @@ EuiDataGridBody.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,
@@ -475,7 +491,6 @@ EuiDataGridBody.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,
@@ -484,6 +499,8 @@ EuiDataGridBody.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/lib/components/datagrid/body/data_grid_body_custom.js

@@ -385,7 +385,6 @@ EuiDataGridBodyCustomRender.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
@@ -415,6 +414,19 @@ EuiDataGridBodyCustomRender.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
         }),
         /**
@@ -468,7 +480,6 @@ EuiDataGridBodyCustomRender.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,
@@ -477,6 +488,8 @@ EuiDataGridBodyCustomRender.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,
@@ -511,7 +524,6 @@ EuiDataGridBodyCustomRender.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,
@@ -520,6 +532,8 @@ EuiDataGridBodyCustomRender.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,
@@ -554,7 +568,6 @@ EuiDataGridBodyCustomRender.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,
@@ -563,6 +576,8 @@ EuiDataGridBodyCustomRender.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,
@@ -597,7 +612,6 @@ EuiDataGridBodyCustomRender.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,
@@ -606,6 +620,8 @@ EuiDataGridBodyCustomRender.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,
@@ -640,7 +656,6 @@ EuiDataGridBodyCustomRender.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,
@@ -649,6 +664,8 @@ EuiDataGridBodyCustomRender.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/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -553,7 +553,6 @@ EuiDataGridBodyVirtualized.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
@@ -583,6 +582,19 @@ EuiDataGridBodyVirtualized.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
         }),
         /**
@@ -636,7 +648,6 @@ EuiDataGridBodyVirtualized.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,
@@ -645,6 +656,8 @@ EuiDataGridBodyVirtualized.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,
@@ -679,7 +692,6 @@ EuiDataGridBodyVirtualized.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,
@@ -688,6 +700,8 @@ EuiDataGridBodyVirtualized.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,
@@ -722,7 +736,6 @@ EuiDataGridBodyVirtualized.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,
@@ -731,6 +744,8 @@ EuiDataGridBodyVirtualized.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,
@@ -765,7 +780,6 @@ EuiDataGridBodyVirtualized.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,
@@ -774,6 +788,8 @@ EuiDataGridBodyVirtualized.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,
@@ -808,7 +824,6 @@ EuiDataGridBodyVirtualized.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,
@@ -817,6 +832,8 @@ EuiDataGridBodyVirtualized.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/lib/components/datagrid/body/header/column_actions.js

@@ -89,16 +89,6 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   var closePopover = (0, _react.useCallback)(function () {
     setIsPopoverOpen(false);
   }, []);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var onFocus = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(true);
-  }, []);
-  var onBlur = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(false);
-  }, []);
   var actionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
     title: title
   });
@@ -113,10 +103,10 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   /**
    * Props to set on parent EuiDataGridHeaderCell
    */
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isColumnMoving = _useState6[0],
-    setIsColumnMoving = _useState6[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColumnMoving = _useState4[0],
+    setIsColumnMoving = _useState4[1];
   (0, _react.useEffect)(function () {
     setPropsFromColumnActions({
       className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
@@ -162,17 +152,11 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
       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/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -61,6 +61,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)(_defineProperty(_defineProperty({}, "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];
@@ -104,8 +105,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) {
@@ -114,11 +114,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,
@@ -258,7 +260,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
@@ -288,6 +289,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
         }),
         /**
@@ -341,7 +355,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,
@@ -350,6 +363,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,
@@ -384,7 +399,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,
@@ -393,6 +407,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,
@@ -427,7 +443,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,
@@ -436,6 +451,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,
@@ -470,7 +487,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,
@@ -479,6 +495,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,
@@ -513,7 +531,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,
@@ -522,6 +539,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/lib/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/lib/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -13,7 +13,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
@@ -49,6 +49,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell_wrapper.euiDataGridHeaderCellWrapperStyles);
@@ -114,7 +115,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,
@@ -130,6 +132,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