[EuiDataGrid] Add openCellPopover and closeCellPopover to ref APIs

src-docs/src/views/datagrid/datagrid_ref_example.js

@@ -1,12 +1,7 @@
 import React from 'react';
 
 import { GuideSectionTypes } from '../../components';
-import {
-  EuiCode,
-  EuiCodeBlock,
-  EuiSpacer,
-  EuiCallOut,
-} from '../../../../src/components';
+import { EuiCode, EuiSpacer, EuiCallOut } from '../../../../src/components';
 
 import { EuiDataGridRefProps } from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';
 import DataGridRef from './ref';
@@ -19,6 +14,12 @@ dataGridRef.current.setIsFullScreen(true);
 
 // Mnaually focus a specific cell within the data grid
 dataGridRef.current.setFocusedCell({ rowIndex, colIndex });
+
+// Manually opens the popover of a specified cell within the data grid
+dataGridRef.current.openCellPopover({ rowIndex, colIndex });
+
+// Close any open cell popover
+dataGridRef.current.closeCellPopover();
 `;
 
 export const DataGridRefExample = {
@@ -59,9 +60,21 @@ export const DataGridRefExample = {
                 Your modal or flyout should restore focus into the grid on close
                 to prevent keyboard or screen reader users from being stranded.
               </EuiCallOut>
+              <EuiSpacer size="m" />
+            </li>
+            <li>
+              <p>
+                <EuiCode>openCellPopover({'{ rowIndex, colIndex }'})</EuiCode> -
+                opens the specified cell&apos;s popover contents.
+              </p>
+            </li>
+            <li>
+              <p>
+                <EuiCode>closeCellPopover()</EuiCode> - closes any currently
+                open cell popover.
+              </p>
             </li>
           </ul>
-          <EuiCodeBlock language="jsx">{dataGridRefSnippet}</EuiCodeBlock>
           <p>
             The below example shows how to use the internal APIs for a data grid
             that opens a modal via cell actions.

src-docs/src/views/datagrid/ref.js

@@ -42,6 +42,7 @@ export default () => {
 
   const showModal = useCallback(({ rowIndex, colIndex }) => {
     setIsModalVisible(true);
+    dataGridRef.current.closeCellPopover(); // Close any open cell popovers
     setLastFocusedCell({ rowIndex, colIndex }); // Store the cell that opened this modal
   }, []);
 
@@ -112,8 +113,8 @@ export default () => {
 
   return (
     <>
-      <EuiFlexGroup alignItems="flexEnd" gutterSize="s" style={{ width: 500 }}>
-        <EuiFlexItem>
+      <EuiFlexGroup alignItems="flexEnd" gutterSize="s">
+        <EuiFlexItem grow={false} style={{ width: '80px' }}>
           <EuiFormRow label="Row index">
             <EuiFieldNumber
               min={0}
@@ -124,7 +125,7 @@ export default () => {
             />
           </EuiFormRow>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={false} style={{ width: '80px' }}>
           <EuiFormRow label="Column index">
             <EuiFieldNumber
               min={0}
@@ -135,7 +136,7 @@ export default () => {
             />
           </EuiFormRow>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <EuiButton
             size="s"
             onClick={() =>
@@ -148,7 +149,20 @@ export default () => {
             Set cell focus
           </EuiButton>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            size="s"
+            onClick={() =>
+              dataGridRef.current.openCellPopover({
+                rowIndex: rowIndexAction,
+                colIndex: colIndexAction,
+              })
+            }
+          >
+            Open cell popover
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <EuiButton
             size="s"
             onClick={() => dataGridRef.current.setIsFullScreen(true)}

src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap

@@ -7,6 +7,19 @@ exports[`EuiDataGridCell renders 1`] = `
   interactiveCellId="someId"
   isExpandable={true}
   popoverContent={[Function]}
+  popoverContext={
+    Object {
+      "cellLocation": Object {
+        "colIndex": 0,
+        "rowIndex": 0,
+      },
+      "closeCellPopover": [MockFunction],
+      "openCellPopover": [MockFunction],
+      "popoverIsOpen": false,
+      "setPopoverAnchor": [MockFunction],
+      "setPopoverContent": [MockFunction],
+    }
+  }
   renderCellValue={[Function]}
   rowHeightUtils={
     Object {
@@ -154,3 +167,37 @@ exports[`EuiDataGridCell renders 1`] = `
   </div>
 </EuiDataGridCell>
 `;
+
+exports[`EuiDataGridCell componentDidUpdate handles the cell popover by forwarding the cell's DOM node and contents to the parent popover context 1`] = `
+Array [
+  <div
+    data-test-subj="popover-test"
+  >
+    <div>
+      <button
+        data-datagrid-interactable="true"
+      >
+        hello
+      </button>
+      <button
+        data-datagrid-interactable="true"
+      >
+        world
+      </button>
+    </div>
+  </div>,
+  <div
+    class="euiPopoverFooter"
+  >
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <button />
+      </div>
+    </div>
+  </div>,
+]
+`;

src/components/datagrid/body/data_grid_body.tsx

@@ -28,6 +28,7 @@ import { EuiDataGridCell } from './data_grid_cell';
 import { EuiDataGridFooterRow } from './data_grid_footer_row';
 import { EuiDataGridHeaderRow } from './header';
 import { DefaultColumnFormatter } from './popover_utils';
+import { DataGridCellPopoverContext } from './data_grid_cell_popover';
 import {
   EuiDataGridBodyProps,
   EuiDataGridRowManager,
@@ -70,6 +71,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     rowHeightUtils,
     rowManager,
   } = data;
+  const popoverContext = useContext(DataGridCellPopoverContext);
   const { headerRowHeight } = useContext(DataGridWrapperRowsContext);
   const { getCorrectRowIndex } = useContext(DataGridSortingContext);
 
@@ -118,7 +120,8 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     rowHeightsOptions,
     rowHeightUtils,
     setRowHeight: isFirstColumn ? setRowHeight : undefined,
-    rowManager: rowManager,
+    rowManager,
+    popoverContext,
   };
 
   if (isLeadingControlColumn) {