[#5517] Add onItemsRendered ref to store currently visible/virtuali…

…zed refs

- see https://react-window.vercel.app/#/api/FixedSizeGrid for `onItemsRendered` API
- this struck me as the quickest/easiest way to determine which virtualized cells are in view
- I opted to save this as a ref instead of as state as I didn't see the need to cause a rerender

- `focusFirstVisibleInteractiveCell` was split out to its own fn as it will shortly be used elsewhere to fix another focus bug in the grid

src/components/datagrid/body/data_grid_body.test.tsx

@@ -52,6 +52,7 @@ describe('EuiDataGridBody', () => {
         resetAfterRowIndex: jest.fn(),
       } as any,
     },
+    gridItemsRendered: {} as any,
     wrapperRef: { current: document.createElement('div') },
   };
 

src/components/datagrid/body/data_grid_body.tsx

@@ -243,6 +243,7 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
     gridStyles,
     gridWidth,
     gridRef,
+    gridItemsRendered,
     wrapperRef,
   } = props;
 
@@ -442,6 +443,9 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
       <Grid
         {...(virtualizationOptions ? virtualizationOptions : {})}
         ref={gridRef}
+        onItemsRendered={(itemsRendered) => {
+          gridItemsRendered.current = itemsRendered;
+        }}
         innerElementType={InnerElement}
         outerRef={outerGridRef}
         innerRef={innerGridRef}

src/components/datagrid/data_grid.tsx

@@ -14,7 +14,10 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { VariableSizeGrid as Grid } from 'react-window';
+import {
+  VariableSizeGrid as Grid,
+  GridOnItemsRenderedProps,
+} from 'react-window';
 import { useGeneratedHtmlId, keys } from '../../services';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n, useEuiI18n } from '../i18n';
@@ -169,6 +172,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   // Imperative handler passed back by react-window - we're setting this at
   // the top datagrid level to make passing it to other children & utils easier
   const gridRef = useRef<Grid | null>(null);
+  const gridItemsRendered = useRef<GridOnItemsRenderedProps | null>(null);
 
   /**
    * Display
@@ -254,9 +258,10 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
   const { headerIsInteractive, handleHeaderMutation } = useHeaderIsInteractive(
     contentRef.current
   );
-  const { focusProps: wrappingDivFocusProps, ...focusContext } = useFocus(
-    headerIsInteractive
-  );
+  const { focusProps: wrappingDivFocusProps, ...focusContext } = useFocus({
+    headerIsInteractive,
+    gridItemsRendered,
+  });
 
   /**
    * Toolbar & full-screen
@@ -437,6 +442,7 @@ export const EuiDataGrid: FunctionComponent<EuiDataGridProps> = (props) => {
                 gridStyles={gridStyles}
                 gridWidth={gridWidth}
                 gridRef={gridRef}
+                gridItemsRendered={gridItemsRendered}
                 wrapperRef={contentRef}
               />
             </div>

src/components/datagrid/data_grid_types.ts

@@ -19,7 +19,11 @@ import {
   SetStateAction,
   MutableRefObject,
 } from 'react';
-import { VariableSizeGridProps, VariableSizeGrid as Grid } from 'react-window';
+import {
+  VariableSizeGridProps,
+  VariableSizeGrid as Grid,
+  GridOnItemsRenderedProps,
+} from 'react-window';
 import { EuiListGroupItemProps } from '../list_group';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { ExclusiveUnion, CommonProps, OneOf } from '../common';
@@ -347,6 +351,7 @@ export interface EuiDataGridBodyProps {
   gridStyles: EuiDataGridStyle;
   gridWidth: number;
   gridRef: MutableRefObject<Grid | null>;
+  gridItemsRendered: MutableRefObject<GridOnItemsRenderedProps | null>;
   wrapperRef: MutableRefObject<HTMLDivElement | null>;
 }
 export interface EuiDataGridCellValueElementProps {

src/components/datagrid/utils/focus.ts

@@ -16,7 +16,9 @@ import {
   useState,
   HTMLAttributes,
   KeyboardEvent,
+  MutableRefObject,
 } from 'react';
+import { GridOnItemsRenderedProps } from 'react-window';
 import tabbable from 'tabbable';
 import { keys } from '../../../services';
 import {
@@ -37,9 +39,13 @@ type FocusProps = Pick<HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onFocus'>;
 /**
  * Main focus context and overarching focus state management
  */
-export const useFocus = (
-  headerIsInteractive: boolean
-): DataGridFocusContextShape & { focusProps: FocusProps } => {
+export const useFocus = ({
+  headerIsInteractive,
+  gridItemsRendered,
+}: {
+  headerIsInteractive: boolean;
+  gridItemsRendered: MutableRefObject<GridOnItemsRenderedProps | null>;
+}): DataGridFocusContextShape & { focusProps: FocusProps } => {
   // Maintain a map of focus cell state callbacks
   const cellsUpdateFocus = useRef<Map<string, Function>>(new Map());
 
@@ -81,6 +87,19 @@ export const useFocus = (
     }
   }, [cellsUpdateFocus, focusedCell]);
 
+  const focusFirstVisibleInteractiveCell = useCallback(() => {
+    const {
+      visibleColumnStartIndex,
+      visibleRowStartIndex,
+    } = gridItemsRendered.current!;
+
+    setFocusedCell(
+      headerIsInteractive
+        ? [0, -1]
+        : [visibleColumnStartIndex, visibleRowStartIndex]
+    );
+  }, [setFocusedCell, headerIsInteractive, gridItemsRendered]);
+
   const focusProps = useMemo<FocusProps>(
     () =>
       isFocusedCellInView
@@ -94,13 +113,13 @@ export const useFocus = (
               // if e.target (the source element of the `focus event`
               // matches e.currentTarget (always the div with this onFocus listener)
               // then the user has focused directly on the data grid wrapper (almost definitely by tabbing)
-              // so shift focus to the first interactive cell within the grid
+              // so shift focus to the first visible and interactive cell within the grid
               if (e.target === e.currentTarget) {
-                setFocusedCell(headerIsInteractive ? [0, -1] : [0, 0]);
+                focusFirstVisibleInteractiveCell();
               }
             },
           },
-    [isFocusedCellInView, setFocusedCell, headerIsInteractive]
+    [isFocusedCellInView, focusFirstVisibleInteractiveCell]
   );
 
   return {