@elastic/eui 92.0.0 → 92.1.1

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,

package/test-env/components/datagrid/utils/focus.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useHeaderFocusWorkaround = exports.useFocus = exports.preventTabbing = exports.notifyCellOfFocusState = exports.getParentCellContent = exports.createKeyDownHandler = exports.DataGridFocusContext = void 0;
+exports.useFocus = exports.preventTabbing = exports.notifyCellOfFocusState = exports.getParentCellContent = exports.createKeyDownHandler = exports.DataGridFocusContext = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _tabbable = require("tabbable");
@@ -30,9 +30,7 @@ exports.DataGridFocusContext = DataGridFocusContext;
 /**
  * Main focus context and overarching focus state management
  */
-var useFocus = function useFocus(_ref) {
-  var headerIsInteractive = _ref.headerIsInteractive,
-    gridItemsRendered = _ref.gridItemsRendered;
+var useFocus = function useFocus() {
   // Maintain a map of focus cell state callbacks
   var cellsUpdateFocus = (0, _react.useRef)(new Map());
   var onFocusUpdate = (0, _react.useCallback)(function (cell, updateFocus) {
@@ -53,14 +51,17 @@ var useFocus = function useFocus(_ref) {
     focusedCell = _useState4[0],
     _setFocusedCell = _useState4[1];
   var setFocusedCell = (0, _react.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 = (0, _react.useRef)(undefined);
   (0, _react.useEffect)(function () {
     if (previousCell.current) {
@@ -72,19 +73,8 @@ var useFocus = function useFocus(_ref) {
     }
   }, [cellsUpdateFocus, focusedCell]);
   var focusFirstVisibleInteractiveCell = (0, _react.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 = (0, _react.useMemo)(function () {
     return isFocusedCellInView ? {
       // FireFox allows tabbing to a div that is scrollable, while Chrome does not
@@ -127,16 +117,15 @@ var notifyCellOfFocusState = function notifyCellOfFocusState(cellsUpdateFocus, c
  * Keydown handler for connecting focus state with keyboard navigation
  */
 exports.notifyCellOfFocusState = notifyCellOfFocusState;
-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;
+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;
@@ -170,8 +159,7 @@ var createKeyDownHandler = function createKeyDownHandler(_ref2) {
       }
     } else if (key === _services.keys.ARROW_UP) {
       event.preventDefault();
-      var minimumIndex = headerIsInteractive ? -1 : 0;
-      if (y > minimumIndex) {
+      if (y > -1) {
         setFocusedCell([x, y - 1]);
       }
     } else if (key === _services.keys.ARROW_RIGHT) {
@@ -261,22 +249,4 @@ var getParentCellContent = function getParentCellContent(_element) {
   }
   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
-exports.getParentCellContent = getParentCellContent;
-var useHeaderFocusWorkaround = function useHeaderFocusWorkaround(headerIsInteractive) {
-  var _useContext = (0, _react.useContext)(DataGridFocusContext),
-    focusedCell = _useContext.focusedCell,
-    setFocusedCell = _useContext.setFocusedCell;
-  (0, _react.useEffect)(function () {
-    if (!headerIsInteractive && focusedCell && focusedCell[1] === -1) {
-      setFocusedCell([focusedCell[0], 0]);
-    }
-  }, [headerIsInteractive, focusedCell, setFocusedCell]);
-};
-exports.useHeaderFocusWorkaround = useHeaderFocusWorkaround;
+exports.getParentCellContent = getParentCellContent;

package/test-env/components/datagrid/utils/scrolling.js

@@ -9,7 +9,7 @@ exports.useScrollCellIntoView = exports.useScrollBars = exports.useScroll = void
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
-var _data_grid_cell_popover = require("../body/data_grid_cell_popover");
+var _cell = require("../body/cell");
 var _focus = require("./focus");
 var _react2 = require("@emotion/react");
 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); }
@@ -41,7 +41,7 @@ var useScroll = function useScroll(args) {
       });
     }
   }, [focusedCell, scrollCellIntoView]);
-  var _useContext2 = (0, _react.useContext)(_data_grid_cell_popover.DataGridCellPopoverContext),
+  var _useContext2 = (0, _react.useContext)(_cell.DataGridCellPopoverContext),
     popoverIsOpen = _useContext2.popoverIsOpen,
     cellLocation = _useContext2.cellLocation;
   (0, _react.useEffect)(function () {

package/test-env/components/flyout/flyout_resizable.js

@@ -12,10 +12,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
 var _resizable_container = require("../resizable_container");
+var _helpers = require("../resizable_container/helpers");
 var _flyout = require("./flyout");
 var _flyout_resizable = require("./flyout_resizable.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["size", "maxWidth", "minWidth", "side", "children"];
+var _excluded = ["size", "maxWidth", "minWidth", "side", "type", "children"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,11 +33,13 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? 'right' : _ref$side,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'overlay' : _ref$type,
     children = _ref.children,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _flyout_resizable.euiFlyoutResizableButtonStyles)(euiTheme);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[side]];
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side]];
   var getFlyoutMinMaxWidth = (0, _react.useCallback)(function (width) {
     return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
     );
@@ -70,7 +73,7 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     return modifier;
   }, [side, flyoutRef]);
   var onMouseMove = (0, _react.useCallback)(function (e) {
-    var mouseOffset = getMouseOrTouchX(e) - initialMouseX.current;
+    var mouseOffset = (0, _helpers.getPosition)(e, true) - initialMouseX.current;
     var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
     setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
   }, [getFlyoutMinMaxWidth, direction]);
@@ -83,7 +86,7 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
   }, [onMouseMove]);
   var onMouseDown = (0, _react.useCallback)(function (e) {
     var _flyoutRef$offsetWidt;
-    initialMouseX.current = getMouseOrTouchX(e);
+    initialMouseX.current = (0, _helpers.getPosition)(e, true);
     initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
 
     // Window event listeners instead of React events are used
@@ -113,9 +116,11 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     size: flyoutWidth || size,
     maxWidth: maxWidth,
     side: side,
+    type: type,
     ref: setRefs
   }), (0, _react2.jsx)(_resizable_container.EuiResizableButton, {
     isHorizontal: true,
+    indicator: "border",
     css: cssStyles,
     onMouseDown: onMouseDown,
     onTouchStart: onMouseDown,
@@ -123,9 +128,4 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
   }), children);
 });
 exports.EuiFlyoutResizable = EuiFlyoutResizable;
-EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';
-var getMouseOrTouchX = function getMouseOrTouchX(e) {
-  // Some Typescript fooling is needed here
-  var x = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
-  return x;
-};
+EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';

package/test-env/components/flyout/flyout_resizable.styles.js

@@ -14,19 +14,25 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "6syi0e-euiFlyoutResizableButton",
-  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;"
+  name: "1gfwqnd-euiFlyoutResizableButton",
+  styles: "position:absolute;label:euiFlyoutResizableButton;"
 } : {
-  name: "6syi0e-euiFlyoutResizableButton",
-  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;",
+  name: "1gfwqnd-euiFlyoutResizableButton",
+  styles: "position:absolute;label:euiFlyoutResizableButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
     euiFlyoutResizableButton: _ref,
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
-    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+    overlay: {
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', 0), ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), ";;label:right;")
+    },
+    push: {
+      left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+    }
   };
 };
 exports.euiFlyoutResizableButtonStyles = euiFlyoutResizableButtonStyles;