@elastic/eui 92.0.0 → 92.1.0

package/test-env/components/datagrid/body/data_grid_body_custom.js

@@ -18,7 +18,7 @@ var _col_widths = require("../utils/col_widths");
 var _row_heights = require("../utils/row_heights");
 var _header = require("./header");
 var _footer = require("./footer");
-var _data_grid_cell_wrapper = require("./data_grid_cell_wrapper");
+var _cell = require("./cell");
 var _react2 = require("@emotion/react");
 var _excluded = ["colIndex", "visibleRowIndex"];
 /*
@@ -45,8 +45,6 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
     renderCellPopover = _ref.renderCellPopover,
     renderFooterCellValue = _ref.renderFooterCellValue,
     interactiveCellId = _ref.interactiveCellId,
-    headerIsInteractive = _ref.headerIsInteractive,
-    handleHeaderMutation = _ref.handleHeaderMutation,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
     onColumnResize = _ref.onColumnResize,
@@ -92,8 +90,6 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
    * Header & footer
    */
   var _useDataGridHeader = (0, _header.useDataGridHeader)({
-      headerIsInteractive: headerIsInteractive,
-      handleHeaderMutation: handleHeaderMutation,
       switchColumnPos: switchColumnPos,
       setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,
@@ -153,7 +149,7 @@ var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
       visibleRowIndex: visibleRowIndex,
       style: style
     }, cellProps);
-    return (0, _react2.jsx)(_data_grid_cell_wrapper.Cell, (0, _extends2.default)({}, props, rest));
+    return (0, _react2.jsx)(_cell.Cell, (0, _extends2.default)({}, props, rest));
   }, [].concat((0, _toConsumableArray2.default)(Object.values(cellProps)), [getRowHeight]) // eslint-disable-line react-hooks/exhaustive-deps
   );
 
@@ -712,8 +708,6 @@ EuiDataGridBodyCustomRender.propTypes = {
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
   pagination: _propTypes.default.any,
-  headerIsInteractive: _propTypes.default.bool.isRequired,
-  handleHeaderMutation: _propTypes.default.any.isRequired,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,

package/test-env/components/datagrid/body/data_grid_body_virtualized.js

@@ -16,7 +16,7 @@ var _reactWindow = require("react-window");
 var _resize_observer = require("../../observer/resize_observer");
 var _header = require("./header");
 var _footer = require("./footer");
-var _data_grid_cell_wrapper = require("./data_grid_cell_wrapper");
+var _cell = require("./cell");
 var _data_grid_row_manager = require("./data_grid_row_manager");
 var _grid_height_width = require("../utils/grid_height_width");
 var _col_widths = require("../utils/col_widths");
@@ -42,7 +42,7 @@ var _Cell = function _Cell(_ref) {
     data = _ref.data;
   var _useContext = (0, _react.useContext)(DataGridWrapperRowsContext),
     headerRowHeight = _useContext.headerRowHeight;
-  return (0, _react2.jsx)(_data_grid_cell_wrapper.Cell, (0, _extends2.default)({
+  return (0, _react2.jsx)(_cell.Cell, (0, _extends2.default)({
     colIndex: columnIndex,
     visibleRowIndex: rowIndex,
     style: _objectSpread(_objectSpread({}, style), {}, {
@@ -98,8 +98,6 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
     pagination = _ref3.pagination,
-    headerIsInteractive = _ref3.headerIsInteractive,
-    handleHeaderMutation = _ref3.handleHeaderMutation,
     setVisibleColumns = _ref3.setVisibleColumns,
     switchColumnPos = _ref3.switchColumnPos,
     onColumnResize = _ref3.onColumnResize,
@@ -149,8 +147,6 @@ var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref3) {
    * Header & footer
    */
   var _useDataGridHeader = (0, _header.useDataGridHeader)({
-      headerIsInteractive: headerIsInteractive,
-      handleHeaderMutation: handleHeaderMutation,
       switchColumnPos: switchColumnPos,
       setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,
@@ -850,8 +846,6 @@ EuiDataGridBodyVirtualized.propTypes = {
   renderCustomGridBody: _propTypes.default.func,
   interactiveCellId: _propTypes.default.string.isRequired,
   pagination: _propTypes.default.any,
-  headerIsInteractive: _propTypes.default.bool.isRequired,
-  handleHeaderMutation: _propTypes.default.any.isRequired,
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,

package/test-env/components/datagrid/body/footer/data_grid_footer_row.js

@@ -10,8 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
-var _data_grid_cell = require("../data_grid_cell");
-var _data_grid_cell_popover = require("../data_grid_cell_popover");
+var _cell = require("../cell");
 var _react2 = require("@emotion/react");
 var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "columnWidths", "defaultColumnWidth", "className", "renderCellValue", "renderCellPopover", "rowIndex", "interactiveCellId", "data-test-subj", "visibleRowIndex"];
 /*
@@ -46,7 +45,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
     'euiDataGridRow--striped': visibleRowIndex % 2 !== 0
   }, 'euiDataGridFooter', className);
   var dataTestSubj = (0, _classnames.default)('dataGridRow', 'dataGridFooterRow', _dataTestSubj);
-  var popoverContext = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext);
+  var popoverContext = (0, _react.useContext)(_cell.DataGridCellPopoverContext);
   var sharedCellProps = {
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
@@ -63,7 +62,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
       width = _ref2.width,
       footerCellRender = _ref2.footerCellRender,
       footerCellProps = _ref2.footerCellProps;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, footerCellProps, sharedCellProps, {
+    return (0, _react2.jsx)(_cell.EuiDataGridCell, (0, _extends2.default)({}, footerCellProps, sharedCellProps, {
       key: "".concat(id, "-").concat(rowIndex),
       colIndex: i,
       columnId: id,
@@ -77,7 +76,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
     var columnType = schema[id] ? schema[id].columnType : null;
     var width = columnWidths[id] || defaultColumnWidth;
     var columnPosition = i + leadingControlColumns.length;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
+    return (0, _react2.jsx)(_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
       key: "".concat(columnPosition, ",").concat(visibleRowIndex) // Note: this key should use cell position to match react-window/data cell behavior. See #5720
       ,
       colIndex: columnPosition,
@@ -95,7 +94,7 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
       footerCellRender = _ref4.footerCellRender,
       footerCellProps = _ref4.footerCellProps;
     var colIndex = i + columns.length + leadingControlColumns.length;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, footerCellProps, sharedCellProps, {
+    return (0, _react2.jsx)(_cell.EuiDataGridCell, (0, _extends2.default)({}, footerCellProps, sharedCellProps, {
       key: "".concat(id, "-").concat(rowIndex),
       colIndex: colIndex,
       columnId: id,

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

@@ -21,8 +21,7 @@ var _react2 = require("@emotion/react");
 
 var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
   var controlColumn = _ref.controlColumn,
-    index = _ref.index,
-    headerIsInteractive = _ref.headerIsInteractive;
+    index = _ref.index;
   var HeaderCellRender = controlColumn.headerCellRender,
     headerCellProps = controlColumn.headerCellProps,
     width = controlColumn.width,
@@ -31,8 +30,7 @@ var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
     className: (0, _classnames.default)('euiDataGridHeaderCell--controlColumn', headerCellProps === null || headerCellProps === void 0 ? void 0 : headerCellProps.className),
     id: id,
     index: index,
-    width: width,
-    headerIsInteractive: headerIsInteractive
+    width: width
   }), (0, _react2.jsx)("div", {
     className: "euiDataGridHeaderCell__content"
   }, (0, _react2.jsx)(HeaderCellRender, null)));
@@ -69,6 +67,5 @@ EuiDataGridControlHeaderCell.propTypes = {
        * Optional props to pass to the column footer cell
        */
     footerCellProps: _propTypes.default.any
-  }).isRequired,
-  headerIsInteractive: _propTypes.default.bool.isRequired
+  }).isRequired
 };

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useSortingUtils = exports.usePopoverArrowNavigation = exports.EuiDataGridHeaderCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
@@ -44,6 +44,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
+  var _classnames;
   var column = _ref.column,
     index = _ref.index,
     columns = _ref.columns,
@@ -53,15 +54,13 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     defaultColumnWidth = _ref.defaultColumnWidth,
     setColumnWidth = _ref.setColumnWidth,
     setVisibleColumns = _ref.setVisibleColumns,
-    switchColumnPos = _ref.switchColumnPos,
-    headerIsInteractive = _ref.headerIsInteractive;
+    switchColumnPos = _ref.switchColumnPos;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
     displayHeaderCellProps = column.displayHeaderCellProps;
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
-  var classes = (0, _classnames2.default)((0, _defineProperty2.default)({}, "euiDataGridHeaderCell--".concat(columnType), columnType), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
@@ -86,6 +85,14 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   });
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = (0, _react.useRef)(null);
+  var focusActionsButton = (0, _react.useCallback)(function () {
+    var _actionsButtonRef$cur;
+    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 ? void 0 : _actionsButtonRef$cur.focus();
+  }, []);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isActionsButtonFocused = _useState4[0],
+    setIsActionsButtonFocused = _useState4[1];
   var _useSortingUtils = useSortingUtils({
       sorting: sorting,
       id: id,
@@ -106,13 +113,16 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     title: displayAsText || id,
     className: "euiDataGridHeaderCell__content"
   }, display || displayAsText || id), sortingArrow);
+  var classes = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "euiDataGridHeaderCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classnames, 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), (0, _defineProperty2.default)(_classnames, 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), _classnames), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, (0, _extends2.default)({}, displayHeaderCellProps, {
     className: classes,
     id: id,
     index: index,
     width: width,
-    headerIsInteractive: headerIsInteractive,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    hasActionsPopover: showColumnActions,
+    isActionsButtonFocused: isActionsButtonFocused,
+    focusActionsButton: focusActionsButton
   }), column.isResizable !== false && width != null ? (0, _react2.jsx)(_data_grid_column_resizer.EuiDataGridColumnResizer, {
     columnId: id,
     columnWidth: width,
@@ -120,11 +130,16 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, cellContent, sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
     className: "euiDataGridHeaderCell__button",
     onClick: function onClick() {
-      setFocusedCell([index, -1]);
-      setIsPopoverOpen(function (isPopoverOpen) {
+      return setIsPopoverOpen(function (isPopoverOpen) {
         return !isPopoverOpen;
       });
     },
+    onFocus: function onFocus() {
+      return setIsActionsButtonFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsActionsButtonFocused(false);
+    },
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
     ref: actionsButtonRef,
     "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
@@ -138,8 +153,8 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     focusTrapProps: {
       // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
       onClickOutside: function onClickOutside(event) {
-        var _actionsButtonRef$cur;
-        if (((_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 ? void 0 : _actionsButtonRef$cur.contains(event.target)) === false) {
+        var _actionsButtonRef$cur2;
+        if (((_actionsButtonRef$cur2 = actionsButtonRef.current) === null || _actionsButtonRef$cur2 === void 0 ? void 0 : _actionsButtonRef$cur2.contains(event.target)) === false) {
           setIsPopoverOpen(false);
         }
       }

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

@@ -12,11 +12,10 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _tabbable = require("tabbable");
-var _services = require("../../../../services");
 var _focus = require("../../utils/focus");
+var _focus_utils = require("../cell/focus_utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "index", "headerIsInteractive", "width", "className", "children"];
+var _excluded = ["id", "index", "width", "className", "children", "hasActionsPopover", "isActionsButtonFocused", "focusActionsButton"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,120 +23,66 @@ var _excluded = ["id", "index", "headerIsInteractive", "width", "className", "ch
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * This is a wrapper that handles repeated concerns between control &
  * standard header cells. Most of its shared logic is around focus state/UX,
  * but it also DRY's out certain class/data-test-subj/style attributes
  */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(_ref) {
   var id = _ref.id,
     index = _ref.index,
-    headerIsInteractive = _ref.headerIsInteractive,
     width = _ref.width,
     className = _ref.className,
     children = _ref.children,
+    hasActionsPopover = _ref.hasActionsPopover,
+    isActionsButtonFocused = _ref.isActionsButtonFocused,
+    focusActionsButton = _ref.focusActionsButton,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
+
+  // Must be a state and not a ref to trigger a HandleInteractiveChildren rerender
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    headerEl = _useState2[0],
+    setHeaderEl = _useState2[1];
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     onFocusUpdate = _useContext.onFocusUpdate;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
+  var updateCellFocusContext = (0, _react.useCallback)(function () {
+    setFocusedCell([index, -1]);
+  }, [index, setFocusedCell]);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
   (0, _react.useEffect)(function () {
     onFocusUpdate([index, -1], function (isFocused) {
       setIsFocused(isFocused);
     });
   }, [index, onFocusUpdate]);
-  var headerRef = (0, _react.useRef)(null);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isCellEntered = _useState4[0],
-    setIsCellEntered = _useState4[1];
   (0, _react.useEffect)(function () {
-    var headerNode = headerRef.current;
-    if (isCellEntered) {
-      enableAndFocusInteractives(headerNode);
-    } else {
-      disableInteractives(headerNode);
-    }
-  }, [isCellEntered]);
-  (0, _react.useEffect)(function () {
-    var headerNode = headerRef.current;
-    if (isFocused) {
-      var interactives = headerNode.querySelectorAll('[data-euigrid-tab-managed]');
-      if (interactives.length === 1) {
-        setIsCellEntered(true);
-      } else {
-        headerNode.focus();
+    if (isFocused && headerEl) {
+      // Only focus the cell if not already focused on something in the cell
+      if (!headerEl.contains(document.activeElement)) {
+        headerEl.focus();
       }
-    } else {
-      setIsCellEntered(false);
     }
+  }, [isFocused, headerEl]);
 
-    // focusin bubbles while focus does not, and this needs to react to children gaining focus
-    var onFocusIn = function onFocusIn(e) {
-      if (!headerIsInteractive) {
-        // header is not interactive, avoid focusing
-        requestAnimationFrame(function () {
-          return headerNode.blur();
-        });
-        e.preventDefault();
-        return false;
-      } else {
-        // take the focus
-        if (isFocused === false) {
-          setFocusedCell([index, -1]);
-        } else {
-          // this cell already had the grid's focus, so re-enable and focus interactives
-          setIsCellEntered(true);
-        }
-      }
-    };
-
-    // focusout bubbles while blur does not, and this needs to react to the children losing focus
-    var onFocusOut = function onFocusOut() {
-      // wait for the next element to receive focus, then update interactives' state
-      requestAnimationFrame(function () {
-        if (!headerNode.contains(document.activeElement)) {
-          setIsCellEntered(false);
-        }
-      });
-    };
-    var onKeyUp = function onKeyUp(event) {
-      switch (event.key) {
-        case _services.keys.ENTER:
-          {
-            event.preventDefault();
-            setIsCellEntered(true);
-            break;
-          }
-        case _services.keys.ESCAPE:
-          {
-            event.preventDefault();
-            // move focus to cell
-            setIsCellEntered(false);
-            headerNode.focus();
-            break;
-          }
-      }
-    };
-    headerNode.addEventListener('focusin', onFocusIn);
-    headerNode.addEventListener('focusout', onFocusOut);
-    headerNode.addEventListener('keyup', onKeyUp);
-    return function () {
-      headerNode.removeEventListener('focusin', onFocusIn);
-      headerNode.removeEventListener('focusout', onFocusOut);
-      headerNode.removeEventListener('keyup', onKeyUp);
-    };
-  }, [headerIsInteractive, isFocused, index, setFocusedCell]);
+  // For cell headers with actions, auto-focus into the button instead of the cell wrapper div
+  // The button text is significantly more useful to screen readers (e.g. contains sort order & hints)
+  var onFocus = (0, _react.useCallback)(function (e) {
+    if (hasActionsPopover && e.target === headerEl) {
+      focusActionsButton === null || focusActionsButton === void 0 ? void 0 : focusActionsButton();
+    }
+  }, [hasActionsPopover, focusActionsButton, headerEl]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     role: "columnheader",
-    ref: headerRef,
-    tabIndex: isFocused && !isCellEntered ? 0 : -1,
+    ref: setHeaderEl,
+    tabIndex: isFocused && !isActionsButtonFocused ? 0 : -1,
+    onFocus: onFocus,
     className: classes,
     "data-test-subj": "dataGridHeaderCell-".concat(id),
     "data-gridcell-column-id": id,
@@ -147,36 +92,19 @@ var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(_ref) {
     style: width != null ? {
       width: "".concat(width, "px")
     } : {}
-  }, rest), children);
+  }, rest), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
+    cellEl: headerEl,
+    updateCellFocusContext: updateCellFocusContext,
+    renderFocusTrap: !hasActionsPopover
+  }, children));
 };
-
-/**
- * Utility fns for managing child interactive tabIndex state
- */
 exports.EuiDataGridHeaderCellWrapper = EuiDataGridHeaderCellWrapper;
 EuiDataGridHeaderCellWrapper.propTypes = {
   id: _propTypes.default.string.isRequired,
   index: _propTypes.default.number.isRequired,
-  headerIsInteractive: _propTypes.default.bool.isRequired,
   width: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
-  className: _propTypes.default.string
-};
-var disableInteractives = function disableInteractives(headerNode) {
-  var tabbables = (0, _tabbable.tabbable)(headerNode);
-  if (tabbables.length > 1) {
-    console.warn("EuiDataGridHeaderCell expects at most 1 tabbable element, ".concat(tabbables.length, " found instead"));
-  }
-  tabbables.forEach(function (element) {
-    element.setAttribute('data-euigrid-tab-managed', 'true');
-    element.setAttribute('tabIndex', '-1');
-  });
-};
-var enableAndFocusInteractives = function enableAndFocusInteractives(headerNode) {
-  var interactiveElements = headerNode.querySelectorAll('[data-euigrid-tab-managed]');
-  interactiveElements.forEach(function (element, i) {
-    element.setAttribute('tabIndex', '0');
-    if (i === 0) {
-      element.focus();
-    }
-  });
+  className: _propTypes.default.string,
+  hasActionsPopover: _propTypes.default.bool,
+  isActionsButtonFocused: _propTypes.default.bool,
+  focusActionsButton: _propTypes.default.func
 };

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

@@ -15,7 +15,7 @@ var _data_grid_control_header_cell = require("./data_grid_control_header_cell");
 var _data_grid_header_cell = require("./data_grid_header_cell");
 var _data_grid_types = require("../../data_grid_types");
 var _react2 = require("@emotion/react");
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "schemaDetectors", "columnWidths", "defaultColumnWidth", "className", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "headerIsInteractive", "data-test-subj"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "schemaDetectors", "columnWidths", "defaultColumnWidth", "className", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "data-test-subj"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,7 +39,6 @@ var EuiDataGridHeaderRow = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     setColumnWidth = props.setColumnWidth,
     setVisibleColumns = props.setVisibleColumns,
     switchColumnPos = props.switchColumnPos,
-    headerIsInteractive = props.headerIsInteractive,
     _dataTestSubj = props['data-test-subj'],
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeader', className);
@@ -53,8 +52,7 @@ var EuiDataGridHeaderRow = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     return (0, _react2.jsx)(_data_grid_control_header_cell.EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index,
-      controlColumn: controlColumn,
-      headerIsInteractive: headerIsInteractive
+      controlColumn: controlColumn
     });
   }), columns.map(function (column, index) {
     return (0, _react2.jsx)(_data_grid_header_cell.EuiDataGridHeaderCell, {
@@ -68,15 +66,13 @@ var EuiDataGridHeaderRow = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       setColumnWidth: setColumnWidth,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
-      defaultColumnWidth: defaultColumnWidth,
-      headerIsInteractive: headerIsInteractive
+      defaultColumnWidth: defaultColumnWidth
     });
   }), trailingControlColumns.map(function (controlColumn, index) {
     return (0, _react2.jsx)(_data_grid_control_header_cell.EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index + leadingControlColumns.length + columns.length,
-      controlColumn: controlColumn,
-      headerIsInteractive: headerIsInteractive
+      controlColumn: controlColumn
     });
   }));
 });
@@ -616,7 +612,6 @@ EuiDataGridHeaderRow.propTypes = {
   defaultColumnWidth: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   setColumnWidth: _propTypes.default.func.isRequired,
   setVisibleColumns: _propTypes.default.func.isRequired,
-  switchColumnPos: _propTypes.default.func.isRequired,
-  headerIsInteractive: _propTypes.default.bool.isRequired
+  switchColumnPos: _propTypes.default.func.isRequired
 };
 EuiDataGridHeaderRow.displayName = 'EuiDataGridHeaderRow';

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

@@ -8,14 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridHeader = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _mutation_observer = require("../../../observer/mutation_observer");
 var _resize_observer = require("../../../observer/resize_observer");
-var _focus = require("../../utils/focus");
 var _data_grid_header_row = require("./data_grid_header_row");
 var _react2 = require("@emotion/react");
-var _excluded = ["handleHeaderMutation"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,22 +21,15 @@ var _excluded = ["handleHeaderMutation"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * DRY out setting up the grid header and its refs & observers
  */
-var useDataGridHeader = function useDataGridHeader(_ref) {
-  var handleHeaderMutation = _ref.handleHeaderMutation,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var useDataGridHeader = function useDataGridHeader(props) {
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     headerRowRef = _useState2[0],
     setHeaderRowRef = _useState2[1];
-  (0, _mutation_observer.useMutationObserver)(headerRowRef, handleHeaderMutation, {
-    subtree: true,
-    childList: true
-  });
   var _useResizeObserver = (0, _resize_observer.useResizeObserver)(headerRowRef, 'height'),
     headerRowHeight = _useResizeObserver.height;
   var headerRow = (0, _react.useMemo)(function () {
@@ -47,7 +38,6 @@ var useDataGridHeader = function useDataGridHeader(_ref) {
     }, props));
   }, Object.values(props)); // eslint-disable-line react-hooks/exhaustive-deps
 
-  (0, _focus.useHeaderFocusWorkaround)(props.headerIsInteractive);
   return {
     headerRow: headerRow,
     headerRowHeight: headerRowHeight

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

@@ -24,8 +24,7 @@ var _controls = require("./controls");
 var _sorting = require("./utils/sorting");
 var _focus = require("./utils/focus");
 var _in_memory = require("./utils/in_memory");
-var _header_is_interactive = require("./body/header/header_is_interactive");
-var _data_grid_cell_popover = require("./body/data_grid_cell_popover");
+var _cell = require("./body/cell");
 var _row_count = require("./utils/row_count");
 var _data_grid_pagination = require("./utils/data_grid_pagination");
 var _data_grid_schema = require("./utils/data_grid_schema");
@@ -207,20 +206,14 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   /**
    * Focus
    */
-  var _useHeaderIsInteracti = (0, _header_is_interactive.useHeaderIsInteractive)(contentRef.current),
-    headerIsInteractive = _useHeaderIsInteracti.headerIsInteractive,
-    handleHeaderMutation = _useHeaderIsInteracti.handleHeaderMutation;
-  var _useFocus = (0, _focus.useFocus)({
-      headerIsInteractive: headerIsInteractive,
-      gridItemsRendered: gridItemsRendered
-    }),
+  var _useFocus = (0, _focus.useFocus)(),
     wrappingDivFocusProps = _useFocus.focusProps,
     focusContext = (0, _objectWithoutProperties2.default)(_useFocus, _excluded2);
 
   /**
    * Cell popover
    */
-  var _useCellPopover = (0, _data_grid_cell_popover.useCellPopover)(),
+  var _useCellPopover = (0, _cell.useCellPopover)(),
     cellPopoverContext = _useCellPopover.cellPopoverContext,
     cellPopover = _useCellPopover.cellPopover;
 
@@ -294,7 +287,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
   }
   return (0, _react2.jsx)(_focus.DataGridFocusContext.Provider, {
     value: focusContext
-  }, (0, _react2.jsx)(_data_grid_cell_popover.DataGridCellPopoverContext.Provider, {
+  }, (0, _react2.jsx)(_cell.DataGridCellPopoverContext.Provider, {
     value: cellPopoverContext
   }, (0, _react2.jsx)(_sorting.DataGridSortingContext.Provider, {
     value: sortingContext
@@ -341,7 +334,6 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
       rowCount: rowCount,
       pagination: pagination,
       hasFooter: !!renderFooterCellValue,
-      headerIsInteractive: headerIsInteractive,
       focusContext: focusContext
     }),
     "data-test-subj": "euiDataGridBody",
@@ -358,8 +350,6 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
     setVisibleColumns: setVisibleColumns,
     switchColumnPos: switchColumnPos,
     onColumnResize: onColumnResize,
-    headerIsInteractive: headerIsInteractive,
-    handleHeaderMutation: handleHeaderMutation,
     schemaDetectors: allSchemaDetectors,
     pagination: pagination,
     renderCellValue: renderCellValue,