@elastic/eui 92.0.0 → 92.1.1

package/optimize/es/components/datagrid/body/cell/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiDataGridCell } from './data_grid_cell';
+export { Cell } from './data_grid_cell_wrapper';
+export { DataGridCellPopoverContext, useCellPopover } from './data_grid_cell_popover';

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

@@ -20,7 +20,7 @@ import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
 import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
 import { useDataGridHeader } from './header';
 import { useDataGridFooter } from './footer';
-import { Cell } from './data_grid_cell_wrapper';
+import { Cell } from './cell';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_ref) {
   var renderCustomGridBody = _ref.renderCustomGridBody,
@@ -35,8 +35,6 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
     renderCellPopover = _ref.renderCellPopover,
     renderFooterCellValue = _ref.renderFooterCellValue,
     interactiveCellId = _ref.interactiveCellId,
-    headerIsInteractive = _ref.headerIsInteractive,
-    handleHeaderMutation = _ref.handleHeaderMutation,
     setVisibleColumns = _ref.setVisibleColumns,
     switchColumnPos = _ref.switchColumnPos,
     onColumnResize = _ref.onColumnResize,
@@ -82,8 +80,6 @@ export var EuiDataGridBodyCustomRender = function EuiDataGridBodyCustomRender(_r
    * Header & footer
    */
   var _useDataGridHeader = useDataGridHeader({
-      headerIsInteractive: headerIsInteractive,
-      handleHeaderMutation: handleHeaderMutation,
       switchColumnPos: switchColumnPos,
       setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,

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

@@ -18,7 +18,7 @@ import { VariableSizeGrid as Grid } from 'react-window';
 import { useResizeObserver } from '../../observer/resize_observer';
 import { useDataGridHeader } from './header';
 import { useDataGridFooter } from './footer';
-import { Cell } from './data_grid_cell_wrapper';
+import { Cell } from './cell';
 import { useRowManager } from './data_grid_row_manager';
 import { useFinalGridDimensions, useUnconstrainedHeight, useVirtualizeContainerWidth } from '../utils/grid_height_width';
 import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
@@ -82,8 +82,6 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
     renderFooterCellValue = _ref3.renderFooterCellValue,
     interactiveCellId = _ref3.interactiveCellId,
     pagination = _ref3.pagination,
-    headerIsInteractive = _ref3.headerIsInteractive,
-    handleHeaderMutation = _ref3.handleHeaderMutation,
     setVisibleColumns = _ref3.setVisibleColumns,
     switchColumnPos = _ref3.switchColumnPos,
     onColumnResize = _ref3.onColumnResize,
@@ -133,8 +131,6 @@ export var EuiDataGridBodyVirtualized = function EuiDataGridBodyVirtualized(_ref
    * Header & footer
    */
   var _useDataGridHeader = useDataGridHeader({
-      headerIsInteractive: headerIsInteractive,
-      handleHeaderMutation: handleHeaderMutation,
       switchColumnPos: switchColumnPos,
       setVisibleColumns: setVisibleColumns,
       leadingControlColumns: leadingControlColumns,

package/optimize/es/components/datagrid/body/footer/data_grid_footer_row.js

@@ -11,8 +11,7 @@ var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "
 
 import classnames from 'classnames';
 import React, { forwardRef, memo, useContext } from 'react';
-import { EuiDataGridCell } from '../data_grid_cell';
-import { DataGridCellPopoverContext } from '../data_grid_cell_popover';
+import { EuiDataGridCell, DataGridCellPopoverContext } from '../cell';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var renderEmpty = function renderEmpty() {
   return null;

package/optimize/es/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -13,8 +13,7 @@ import { EuiDataGridHeaderCellWrapper } from './data_grid_header_cell_wrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export 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,
@@ -23,8 +22,7 @@ export var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(
     className: classNames('euiDataGridHeaderCell--controlColumn', headerCellProps === null || headerCellProps === void 0 ? void 0 : headerCellProps.className),
     id: id,
     index: index,
-    width: width,
-    headerIsInteractive: headerIsInteractive
+    width: width
   }), ___EmotionJSX("div", {
     className: "euiDataGridHeaderCell__content"
   }, ___EmotionJSX(HeaderCellRender, null)));

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -35,6 +35,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
+  var _classnames;
   var column = _ref.column,
     index = _ref.index,
     columns = _ref.columns,
@@ -44,15 +45,13 @@ export 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 = classnames(_defineProperty({}, "euiDataGridHeaderCell--".concat(columnType), columnType), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var _useContext = useContext(DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
@@ -77,6 +76,14 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   });
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = useRef(null);
+  var focusActionsButton = useCallback(function () {
+    var _actionsButtonRef$cur;
+    (_actionsButtonRef$cur = actionsButtonRef.current) === null || _actionsButtonRef$cur === void 0 ? void 0 : _actionsButtonRef$cur.focus();
+  }, []);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isActionsButtonFocused = _useState4[0],
+    setIsActionsButtonFocused = _useState4[1];
   var _useSortingUtils = useSortingUtils({
       sorting: sorting,
       id: id,
@@ -97,13 +104,16 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     title: displayAsText || id,
     className: "euiDataGridHeaderCell__content"
   }, display || displayAsText || id), sortingArrow);
+  var classes = classnames((_classnames = {}, _defineProperty(_classnames, "euiDataGridHeaderCell--".concat(columnType), columnType), _defineProperty(_classnames, 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), _defineProperty(_classnames, 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), _classnames), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   return ___EmotionJSX(EuiDataGridHeaderCellWrapper, _extends({}, 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 ? ___EmotionJSX(EuiDataGridColumnResizer, {
     columnId: id,
     columnWidth: width,
@@ -111,11 +121,16 @@ export var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   }) : null, !showColumnActions ? ___EmotionJSX(React.Fragment, null, cellContent, sortingScreenReaderText && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, sortingScreenReaderText))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX("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)
@@ -129,8 +144,8 @@ export 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/optimize/es/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -11,123 +11,69 @@ var _excluded = ["id", "index", "headerIsInteractive", "width", "className", "ch
  */
 
 import classnames from 'classnames';
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import { tabbable } from 'tabbable';
-import { keys } from '../../../../services';
+import React, { useContext, useEffect, useState, useCallback } from 'react';
 import { DataGridFocusContext } from '../../utils/focus';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+import { HandleInteractiveChildren } from '../cell/focus_utils';
+
 /**
  * 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
  */
+import { jsx as ___EmotionJSX } from "@emotion/react";
 export 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 = _objectWithoutProperties(_ref, _excluded);
   var classes = classnames('euiDataGridHeaderCell', className);
+
+  // Must be a state and not a ref to trigger a HandleInteractiveChildren rerender
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    headerEl = _useState2[0],
+    setHeaderEl = _useState2[1];
   var _useContext = useContext(DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     onFocusUpdate = _useContext.onFocusUpdate;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFocused = _useState2[0],
-    setIsFocused = _useState2[1];
+  var updateCellFocusContext = useCallback(function () {
+    setFocusedCell([index, -1]);
+  }, [index, setFocusedCell]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocused = _useState4[0],
+    setIsFocused = _useState4[1];
   useEffect(function () {
     onFocusUpdate([index, -1], function (isFocused) {
       setIsFocused(isFocused);
     });
   }, [index, onFocusUpdate]);
-  var headerRef = useRef(null);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isCellEntered = _useState4[0],
-    setIsCellEntered = _useState4[1];
   useEffect(function () {
-    var headerNode = headerRef.current;
-    if (isCellEntered) {
-      enableAndFocusInteractives(headerNode);
-    } else {
-      disableInteractives(headerNode);
-    }
-  }, [isCellEntered]);
-  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 keys.ENTER:
-          {
-            event.preventDefault();
-            setIsCellEntered(true);
-            break;
-          }
-        case 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 = useCallback(function (e) {
+    if (hasActionsPopover && e.target === headerEl) {
+      focusActionsButton === null || focusActionsButton === void 0 ? void 0 : focusActionsButton();
+    }
+  }, [hasActionsPopover, focusActionsButton, headerEl]);
   return ___EmotionJSX("div", _extends({
     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,
@@ -137,29 +83,9 @@ export var EuiDataGridHeaderCellWrapper = function EuiDataGridHeaderCellWrapper(
     style: width != null ? {
       width: "".concat(width, "px")
     } : {}
-  }, rest), children);
-};
-
-/**
- * Utility fns for managing child interactive tabIndex state
- */
-
-var disableInteractives = function disableInteractives(headerNode) {
-  var tabbables = 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();
-    }
-  });
+  }, rest), ___EmotionJSX(HandleInteractiveChildren, {
+    cellEl: headerEl,
+    updateCellFocusContext: updateCellFocusContext,
+    renderFocusTrap: !hasActionsPopover
+  }, children));
 };

package/optimize/es/components/datagrid/body/header/data_grid_header_row.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -29,7 +29,6 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
     setColumnWidth = props.setColumnWidth,
     setVisibleColumns = props.setVisibleColumns,
     switchColumnPos = props.switchColumnPos,
-    headerIsInteractive = props.headerIsInteractive,
     _dataTestSubj = props['data-test-subj'],
     rest = _objectWithoutProperties(props, _excluded);
   var classes = classnames('euiDataGridHeader', className);
@@ -43,8 +42,7 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index,
-      controlColumn: controlColumn,
-      headerIsInteractive: headerIsInteractive
+      controlColumn: controlColumn
     });
   }), columns.map(function (column, index) {
     return ___EmotionJSX(EuiDataGridHeaderCell, {
@@ -58,15 +56,13 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
       setColumnWidth: setColumnWidth,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
-      defaultColumnWidth: defaultColumnWidth,
-      headerIsInteractive: headerIsInteractive
+      defaultColumnWidth: defaultColumnWidth
     });
   }), trailingControlColumns.map(function (controlColumn, index) {
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index + leadingControlColumns.length + columns.length,
-      controlColumn: controlColumn,
-      headerIsInteractive: headerIsInteractive
+      controlColumn: controlColumn
     });
   }));
 });

package/optimize/es/components/datagrid/body/header/use_data_grid_header.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["handleHeaderMutation"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,25 +9,18 @@ var _excluded = ["handleHeaderMutation"];
  */
 
 import React, { useState, useMemo } from 'react';
-import { useMutationObserver } from '../../../observer/mutation_observer';
 import { useResizeObserver } from '../../../observer/resize_observer';
-import { useHeaderFocusWorkaround } from '../../utils/focus';
 import { EuiDataGridHeaderRow } from './data_grid_header_row';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+
 /**
  * DRY out setting up the grid header and its refs & observers
  */
-export var useDataGridHeader = function useDataGridHeader(_ref) {
-  var handleHeaderMutation = _ref.handleHeaderMutation,
-    props = _objectWithoutProperties(_ref, _excluded);
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var useDataGridHeader = function useDataGridHeader(props) {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     headerRowRef = _useState2[0],
     setHeaderRowRef = _useState2[1];
-  useMutationObserver(headerRowRef, handleHeaderMutation, {
-    subtree: true,
-    childList: true
-  });
   var _useResizeObserver = useResizeObserver(headerRowRef, 'height'),
     headerRowHeight = _useResizeObserver.height;
   var headerRow = useMemo(function () {
@@ -38,7 +29,6 @@ export var useDataGridHeader = function useDataGridHeader(_ref) {
     }, props));
   }, Object.values(props)); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useHeaderFocusWorkaround(props.headerIsInteractive);
   return {
     headerRow: headerRow,
     headerRowHeight: headerRowHeight

package/optimize/es/components/datagrid/data_grid.js

@@ -28,8 +28,7 @@ import { useDataGridColumnSelector, useDataGridColumnSorting, useDataGridDisplay
 import { DataGridSortingContext, useSorting } from './utils/sorting';
 import { DataGridFocusContext, useFocus, createKeyDownHandler, preventTabbing } from './utils/focus';
 import { useInMemoryValues, EuiDataGridInMemoryRenderer } from './utils/in_memory';
-import { useHeaderIsInteractive } from './body/header/header_is_interactive';
-import { DataGridCellPopoverContext, useCellPopover } from './body/data_grid_cell_popover';
+import { DataGridCellPopoverContext, useCellPopover } from './body/cell';
 import { computeVisibleRows } from './utils/row_count';
 import { EuiDataGridPaginationRenderer } from './utils/data_grid_pagination';
 import { schemaDetectors as providedSchemaDetectors, useMergedSchema } from './utils/data_grid_schema';
@@ -199,13 +198,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
   /**
    * Focus
    */
-  var _useHeaderIsInteracti = useHeaderIsInteractive(contentRef.current),
-    headerIsInteractive = _useHeaderIsInteracti.headerIsInteractive,
-    handleHeaderMutation = _useHeaderIsInteracti.handleHeaderMutation;
-  var _useFocus = useFocus({
-      headerIsInteractive: headerIsInteractive,
-      gridItemsRendered: gridItemsRendered
-    }),
+  var _useFocus = useFocus(),
     wrappingDivFocusProps = _useFocus.focusProps,
     focusContext = _objectWithoutProperties(_useFocus, _excluded2);
 
@@ -333,7 +326,6 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
       rowCount: rowCount,
       pagination: pagination,
       hasFooter: !!renderFooterCellValue,
-      headerIsInteractive: headerIsInteractive,
       focusContext: focusContext
     }),
     "data-test-subj": "euiDataGridBody",
@@ -350,8 +342,6 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     setVisibleColumns: setVisibleColumns,
     switchColumnPos: switchColumnPos,
     onColumnResize: onColumnResize,
-    headerIsInteractive: headerIsInteractive,
-    handleHeaderMutation: handleHeaderMutation,
     schemaDetectors: allSchemaDetectors,
     pagination: pagination,
     renderCellValue: renderCellValue,

package/optimize/es/components/datagrid/utils/focus.js

@@ -7,7 +7,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * Side Public License, v 1.
  */
 
-import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { tabbable } from 'tabbable';
 import { keys } from '../../../services';
 export var DataGridFocusContext = /*#__PURE__*/createContext({
@@ -22,9 +22,7 @@ export var DataGridFocusContext = /*#__PURE__*/createContext({
 /**
  * Main focus context and overarching focus state management
  */
-export var useFocus = function useFocus(_ref) {
-  var headerIsInteractive = _ref.headerIsInteractive,
-    gridItemsRendered = _ref.gridItemsRendered;
+export var useFocus = function useFocus() {
   // Maintain a map of focus cell state callbacks
   var cellsUpdateFocus = useRef(new Map());
   var onFocusUpdate = useCallback(function (cell, updateFocus) {
@@ -45,14 +43,17 @@ export var useFocus = function useFocus(_ref) {
     focusedCell = _useState4[0],
     _setFocusedCell = _useState4[1];
   var setFocusedCell = useCallback(function (nextFocusedCell) {
-    // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
-    // reference stable, and allows it to be used in places that need reference equality.
-    if (nextFocusedCell[0] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[0]) && nextFocusedCell[1] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[1])) {
-      return;
-    }
-    _setFocusedCell(nextFocusedCell);
-    setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
-  }, [focusedCell]);
+    _setFocusedCell(function (prevFocusedCell) {
+      // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
+      // reference stable, and allows it to be used in places that need reference equality.
+      if (nextFocusedCell[0] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[0]) && nextFocusedCell[1] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[1])) {
+        return prevFocusedCell;
+      } else {
+        setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
+        return nextFocusedCell;
+      }
+    });
+  }, []);
   var previousCell = useRef(undefined);
   useEffect(function () {
     if (previousCell.current) {
@@ -64,19 +65,8 @@ export var useFocus = function useFocus(_ref) {
     }
   }, [cellsUpdateFocus, focusedCell]);
   var focusFirstVisibleInteractiveCell = useCallback(function () {
-    if (headerIsInteractive) {
-      // The header (rowIndex -1) is sticky and will always be in view
-      setFocusedCell([0, -1]);
-    } else if (gridItemsRendered.current) {
-      var _gridItemsRendered$cu = gridItemsRendered.current,
-        visibleColumnStartIndex = _gridItemsRendered$cu.visibleColumnStartIndex,
-        visibleRowStartIndex = _gridItemsRendered$cu.visibleRowStartIndex;
-      setFocusedCell([visibleColumnStartIndex, visibleRowStartIndex]);
-    } else {
-      // If the header is non-interactive and there are no rendered cells,
-      // there's nothing to do - we might as well leave focus on the grid body wrapper
-    }
-  }, [setFocusedCell, headerIsInteractive, gridItemsRendered]);
+    setFocusedCell([0, -1]);
+  }, [setFocusedCell]);
   var focusProps = useMemo(function () {
     return isFocusedCellInView ? {
       // FireFox allows tabbing to a div that is scrollable, while Chrome does not
@@ -117,16 +107,15 @@ export var notifyCellOfFocusState = function notifyCellOfFocusState(cellsUpdateF
 /**
  * Keydown handler for connecting focus state with keyboard navigation
  */
-export var createKeyDownHandler = function createKeyDownHandler(_ref2) {
-  var gridElement = _ref2.gridElement,
-    visibleColCount = _ref2.visibleColCount,
-    visibleRowCount = _ref2.visibleRowCount,
-    visibleRowStartIndex = _ref2.visibleRowStartIndex,
-    rowCount = _ref2.rowCount,
-    pagination = _ref2.pagination,
-    hasFooter = _ref2.hasFooter,
-    headerIsInteractive = _ref2.headerIsInteractive,
-    focusContext = _ref2.focusContext;
+export var createKeyDownHandler = function createKeyDownHandler(_ref) {
+  var gridElement = _ref.gridElement,
+    visibleColCount = _ref.visibleColCount,
+    visibleRowCount = _ref.visibleRowCount,
+    visibleRowStartIndex = _ref.visibleRowStartIndex,
+    rowCount = _ref.rowCount,
+    pagination = _ref.pagination,
+    hasFooter = _ref.hasFooter,
+    focusContext = _ref.focusContext;
   return function (event) {
     var focusedCell = focusContext.focusedCell,
       setFocusedCell = focusContext.setFocusedCell;
@@ -160,8 +149,7 @@ export var createKeyDownHandler = function createKeyDownHandler(_ref2) {
       }
     } else if (key === keys.ARROW_UP) {
       event.preventDefault();
-      var minimumIndex = headerIsInteractive ? -1 : 0;
-      if (y > minimumIndex) {
+      if (y > -1) {
         setFocusedCell([x, y - 1]);
       }
     } else if (key === keys.ARROW_RIGHT) {
@@ -248,21 +236,4 @@ export var getParentCellContent = function getParentCellContent(_element) {
     element = element.parentElement;
   }
   return element;
-};
-
-/**
- * Focus fixes & workarounds
- */
-
-// If the focus is on the header, and the header is no longer interactive,
-// move the focus down to the first row
-export var useHeaderFocusWorkaround = function useHeaderFocusWorkaround(headerIsInteractive) {
-  var _useContext = useContext(DataGridFocusContext),
-    focusedCell = _useContext.focusedCell,
-    setFocusedCell = _useContext.setFocusedCell;
-  useEffect(function () {
-    if (!headerIsInteractive && focusedCell && focusedCell[1] === -1) {
-      setFocusedCell([focusedCell[0], 0]);
-    }
-  }, [headerIsInteractive, focusedCell, setFocusedCell]);
 };