[EuiDataGrid] Add openCellPopover and closeCellPopover to ref APIs

src/components/datagrid/utils/scrolling.spec.tsx

@@ -6,8 +6,9 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { createRef } from 'react';
 import { EuiDataGrid, EuiDataGridProps } from '../';
+import { EuiDataGridRefProps } from '../data_grid_types';
 
 const baseProps: EuiDataGridProps = {
   'aria-label': 'useScroll test',
@@ -31,7 +32,7 @@ const baseProps: EuiDataGridProps = {
 };
 
 describe('useScroll', () => {
-  describe('on cell focus', () => {
+  describe('cell focus', () => {
     it('fully scrolls cells into view (accounting for sticky headers, rows, and scrollbars)', () => {
       cy.realMount(<EuiDataGrid {...baseProps} />);
       cy.repeatRealPress('Tab', 3);
@@ -57,5 +58,35 @@ describe('useScroll', () => {
         .should('have.attr', 'data-gridcell-column-index', '0')
         .should('have.attr', 'data-gridcell-visible-row-index', '0');
     });
+
+    it('handles setFocusedCell being called manually on cells out of view', () => {
+      const ref = createRef<EuiDataGridRefProps>();
+      cy.mount(<EuiDataGrid {...baseProps} ref={ref} />);
+
+      // Wait for the grid to finish rendering and pass back the ref
+      cy.get('[data-test-subj="euiDataGridBody"]').then(() => {
+        ref.current.setFocusedCell({ rowIndex: 14, colIndex: 5 });
+        cy.focused()
+          .should('have.attr', 'data-gridcell-visible-row-index', '14')
+          .should('have.attr', 'data-gridcell-column-index', '5');
+      });
+    });
+  });
+
+  describe('cell popover', () => {
+    it('handles openCellPopover being called manually on cells out of view', () => {
+      const ref = createRef<EuiDataGridRefProps>();
+      cy.mount(<EuiDataGrid {...baseProps} ref={ref} />);
+
+      // Wait for the grid to finish rendering and pass back the ref
+      cy.get('[data-test-subj="euiDataGridBody"]').then(() => {
+        ref.current.openCellPopover({ rowIndex: 14, colIndex: 5 });
+        cy.focused().should(
+          'have.attr',
+          'data-test-subj',
+          'euiDataGridExpansionPopover'
+        );
+      });
+    });
   });
 });

src/components/datagrid/utils/scrolling.ts

@@ -8,6 +8,8 @@
 
 import { useContext, useEffect, useCallback, MutableRefObject } from 'react';
 import { VariableSizeGrid as Grid } from 'react-window';
+
+import { DataGridCellPopoverContext } from '../body/data_grid_cell_popover';
 import { DataGridFocusContext } from './focus';
 
 interface ScrollCellIntoView {
@@ -43,6 +45,18 @@ export const useScroll = (args: Dependencies) => {
     }
   }, [focusedCell, scrollCellIntoView]);
 
+  const { popoverIsOpen, openCellLocation } = useContext(
+    DataGridCellPopoverContext
+  );
+  useEffect(() => {
+    if (popoverIsOpen) {
+      scrollCellIntoView({
+        rowIndex: openCellLocation.rowIndex,
+        colIndex: openCellLocation.colIndex,
+      });
+    }
+  }, [popoverIsOpen, openCellLocation, scrollCellIntoView]);
+
   return { scrollCellIntoView };
 };