[Data Grid] Added closePopover action to EuiDataGridColumnCellActionProps

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
 - Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))
+- Added `closePopover` prop to `EuiDataGridColumnCellActionProps` ([#4346](https://github.com/elastic/eui/pull/4346))
 - Added `disabled` and `loading` `status` to `EuiStep` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 **Bug fixes**

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

@@ -22,16 +22,15 @@ const columns = [
     id: 'email',
     isSortable: true,
     cellActions: [
-      ({ rowIndex, columnId, Component }) => {
-        const row = ++rowIndex;
+      ({ Component, closePopover }) => {
         return (
           <Component
-            onClick={() =>
-              alert(`Love sent from row ${row}, column "${columnId}"`)
-            }
+            onClick={() => {
+              closePopover?.();
+            }}
             iconType="heart"
-            aria-label={`Send love to ${row}, column "${columnId}" `}>
-            Send love
+            aria-label="Close the popover if expanded">
+            Close the popover
           </Component>
         );
       },

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

@@ -345,9 +345,13 @@ export const DataGridStylingExample = {
           <p>
             Below, the email and city columns provide 1{' '}
             <EuiCode>cellAction</EuiCode> each, while the country column
-            provides 2 <EuiCode>cellAction</EuiCode>s. The city column shows
-            another action with different alert when it&apos;s clicked in the
-            popover.
+            provides 2 <EuiCode>cellAction</EuiCode>s.
+            <br />
+            The email column cell action closes the popover if it&apos;s
+            expanded through the optional <EuiCode>closePopover</EuiCode> prop.
+            <br />
+            The city column shows another action with different alert when
+            it&apos;s clicked in the popover.
           </p>
         </Fragment>
       ),

src/components/datagrid/data_grid_cell_popover.tsx

@@ -104,6 +104,7 @@ export function EuiDataGridCellPopover({
                             <EuiButtonEmpty {...props} size="s" />
                           )}
                           isExpanded={true}
+                          closePopover={closePopover}
                         />
                       </EuiFlexItem>
                     );

src/components/datagrid/data_grid_types.ts

@@ -137,6 +137,11 @@ export interface EuiDataGridColumnCellActionProps {
    * Determines whether the cell's action is displayed expanded (in the Popover)
    */
   isExpanded: boolean;
+  /**
+   * Closes the popover if a cell is expanded.
+   * The prop is provided for an expanded cell only.
+   */
+  closePopover?: () => void;
 }
 
 export interface EuiDataGridColumnVisibility {