[EuiDataGrid] Deprecate the closePopover callback passed to `cellAc…

…tions` in favor of `closeCellPopover` ref API (#5734) * Deprecate the `closePopover` callback passed to `cellActions` in favor of using the ref method * Fix accidentally deleted newline
elastic · Apr 5, 2022 · 6d8f03b · 6d8f03b
1 parent e85c6e7
commit 6d8f03b
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 17 deletions.
diff --git a/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js b/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js
@@ -84,13 +84,18 @@ export const DataGridCellsExample = {
             your cell actions to switch correctly between button icons and
             buttons.
           </p>
+          <p>
+            To close a cell&apos;s expansion popover upon clicking an action,
+            use the{' '}
+            <Link to="/tabular-content/data-grid-advanced#ref-methods">
+              closeCellPopover
+            </Link>{' '}
+            API available via the <EuiCode>ref</EuiCode> prop.
+          </p>
           <p>
             In the below example, the email and city columns provide 1{' '}
             <EuiCode>cellAction</EuiCode> each, while the country column
             provides 2 <EuiCode>cellAction</EuiCode>s.
-            <br />
-            The email column cell action closes the popover if it&apos;s
-            expanded through the <EuiCode>closePopover</EuiCode> prop.
           </p>
         </Fragment>
       ),

diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx
@@ -75,8 +75,6 @@ describe('EuiDataGridCell', () => {
     });
     (getCellActions().prop('onExpandClick') as Function)();
     expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(1);
-    (getCellActions().prop('closePopover') as Function)();
-    expect(mockPopoverContext.closeCellPopover).toHaveBeenCalledTimes(2);
   });
 
   describe('shouldComponentUpdate', () => {

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -666,7 +666,6 @@ export class EuiDataGridCell extends Component<
               rowIndex={rowIndex}
               colIndex={colIndex}
               column={column}
-              closePopover={closeCellPopover}
               onExpandClick={() => {
                 if (popoverIsOpen) {
                   closeCellPopover();

diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -21,7 +21,6 @@ const MockAction: EuiDataGridColumnCellAction = ({ Component }) => (
 
 describe('EuiDataGridCellActions', () => {
   const requiredProps = {
-    closePopover: jest.fn(),
     onExpandClick: jest.fn(),
     rowIndex: 0,
     colIndex: 0,
@@ -93,7 +92,6 @@ describe('EuiDataGridCellActions', () => {
       >
         <MockAction
           Component={[Function]}
-          closePopover={[MockFunction]}
           colIndex={0}
           columnId="someId"
           isExpanded={false}

diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -20,13 +20,11 @@ import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
 
 export const EuiDataGridCellActions = ({
-  closePopover,
   onExpandClick,
   column,
   rowIndex,
   colIndex,
 }: {
-  closePopover: () => void;
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
   rowIndex: number;
@@ -88,12 +86,11 @@ export const EuiDataGridCellActions = ({
             columnId={column.id}
             Component={ButtonComponent}
             isExpanded={false}
-            closePopover={closePopover}
           />
         );
       }
     );
-  }, [column, colIndex, rowIndex, closePopover]);
+  }, [column, colIndex, rowIndex]);
 
   return (
     <div className="euiDataGridRowCell__expandActions">

diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts
@@ -637,11 +637,6 @@ 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 {

diff --git a/upcoming_changelogs/5734.md b/upcoming_changelogs/5734.md
@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed the `closePopover()` callback passed to `EuiDataGrid`'s `cellActions` render functions. Use `closeCellPopover()` passed by `EuiDataGrid`'s `ref` prop instead.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Breaking changes

		- Removed the `closePopover()` callback passed to `EuiDataGrid`'s `cellActions` render functions. Use `closeCellPopover()` passed by `EuiDataGrid`'s `ref` prop instead.