[DataGrid] Add reason param for onRowSelectionModelChange callback (#17545)

Signed-off-by: sai chand <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>

Author: sai6855

docs/pages/x/api/data-grid/grid-api.json

@@ -425,7 +425,9 @@
     },
     "setRows": { "type": { "description": "(rows: GridRowModel[]) => void" }, "required": true },
     "setRowSelectionModel": {
-      "type": { "description": "(rowSelectionModel: GridRowSelectionModel) => void" },
+      "type": {
+        "description": "(rowSelectionModel: GridRowSelectionModel, reason?: GridControlledStateReasonLookup['rowSelection']) => void"
+      },
       "required": true
     },
     "setSortModel": {

docs/pages/x/api/data-grid/grid-row-selection-api.json

@@ -25,7 +25,7 @@
     {
       "name": "setRowSelectionModel",
       "description": "Sets the new row selection model.<br>⚠️ Caution: <code>setRowSelectionModel</code> doesn&#39;t apply the selection propagation automatically. Pass model returned by API method <code>getPropagatedRowSelectionModel</code> instead to apply the selection propagation.",
-      "type": "(rowSelectionModel: GridRowSelectionModel) => void"
+      "type": "(rowSelectionModel: GridRowSelectionModel, reason?: GridControlledStateReasonLookup['rowSelection']) => void"
     }
   ]
 }

packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts

@@ -160,7 +160,7 @@ export const useGridRowSelection = (
    * API METHODS
    */
   const setRowSelectionModel = React.useCallback<GridRowSelectionApi['setRowSelectionModel']>(
-    (model) => {
+    (model, reason) => {
       if (
         props.signature === GridSignature.DataGrid &&
         !canHaveMultipleSelection &&
@@ -176,10 +176,13 @@ export const useGridRowSelection = (
       const currentModel = gridRowSelectionStateSelector(apiRef);
       if (currentModel !== model) {
         logger.debug(`Setting selection model`);
-        apiRef.current.setState((state) => ({
-          ...state,
-          rowSelection: props.rowSelection ? model : emptyModel,
-        }));
+        apiRef.current.setState(
+          (state) => ({
+            ...state,
+            rowSelection: props.rowSelection ? model : emptyModel,
+          }),
+          reason,
+        );
       }
     },
     [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection],
@@ -250,7 +253,7 @@ export const useGridRowSelection = (
           }
         }
 
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
       } else {
         logger.debug(`Toggling selection for row ${id}`);
 
@@ -297,7 +300,7 @@ export const useGridRowSelection = (
           (newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2) ||
           canHaveMultipleSelection;
         if (isSelectionValid) {
-          apiRef.current.setRowSelectionModel(newSelectionModel);
+          apiRef.current.setRowSelectionModel(newSelectionModel, 'singleRowSelection');
         }
       }
     },
@@ -406,7 +409,7 @@ export const useGridRowSelection = (
         (newSelectionModel.type === 'include' && newSelectionModel.ids.size < 2) ||
         canHaveMultipleSelection;
       if (isSelectionValid) {
-        apiRef.current.setRowSelectionModel(newSelectionModel);
+        apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
       }
     },
     [
@@ -601,7 +604,7 @@ export const useGridRowSelection = (
             apiRef.current.selectRows(Array.from(newSelectionModel.ids), true, true);
           }
         } else {
-          apiRef.current.setRowSelectionModel(newSelectionModel);
+          apiRef.current.setRowSelectionModel(newSelectionModel, 'multipleRowsSelection');
         }
       }
     },

packages/x-data-grid/src/models/api/gridRowSelectionApi.ts

@@ -1,5 +1,6 @@
 import type { GridRowId, GridRowModel } from '../gridRows';
 import type { GridRowSelectionModel } from '../gridRowSelectionModel';
+import { GridControlledStateReasonLookup } from '../events';
 
 /**
  * The selection API interface that is available in the grid [[apiRef]].
@@ -35,9 +36,13 @@ export interface GridRowSelectionApi {
    *
    * ⚠️ Caution: `setRowSelectionModel` doesn't apply the selection propagation automatically.
    * Pass model returned by API method `getPropagatedRowSelectionModel` instead to apply the selection propagation.
-   * @param {gridRowSelectionModel} rowSelectionModel The new row selection model
+   * @param {gridRowSelectionModel} rowSelectionModel The new row selection model.
+   * @param {string} reason The reason for the state change.
    */
-  setRowSelectionModel: (rowSelectionModel: GridRowSelectionModel) => void;
+  setRowSelectionModel: (
+    rowSelectionModel: GridRowSelectionModel,
+    reason?: GridControlledStateReasonLookup['rowSelection'],
+  ) => void;
 }
 
 export interface GridRowMultiSelectionApi {

packages/x-data-grid/src/models/events/gridEventLookup.ts

@@ -390,6 +390,7 @@ export interface GridControlledStateReasonLookup {
     | 'removeAllFilterItems';
   pagination: 'setPaginationModel' | 'stateRestorePreProcessing';
   rows: 'addSkeletonRows';
+  rowSelection: 'singleRowSelection' | 'multipleRowsSelection';
 }
 
 export interface GridEventLookup

packages/x-data-grid/src/tests/rowSelection.DataGrid.test.tsx

@@ -833,6 +833,32 @@ describe('<DataGrid /> - Row selection', () => {
       expect(onRowSelectionModelChange.lastCall.args[0]).to.deep.equal(includeRowSelection([]));
     });
 
+    it('should call onRowSelectionModelChange with the correct reason when clicking on a row', async () => {
+      const onRowSelectionModelChange = spy();
+      const { user } = render(
+        <TestDataGridSelection
+          checkboxSelection
+          pagination
+          onRowSelectionModelChange={onRowSelectionModelChange}
+        />,
+      );
+      await user.click(getCell(0, 0).querySelector('input')!);
+      expect(onRowSelectionModelChange.lastCall.args[1].reason).to.equal('singleRowSelection');
+    });
+
+    it('should call onRowSelectionModelChange with the correct reason when clicking on the header checkbox', async () => {
+      const onRowSelectionModelChange = spy();
+      const { user } = render(
+        <TestDataGridSelection
+          checkboxSelection
+          pagination
+          onRowSelectionModelChange={onRowSelectionModelChange}
+        />,
+      );
+      await user.click(getColumnHeaderCell(0).querySelector('input')!);
+      expect(onRowSelectionModelChange.lastCall.args[1].reason).to.equal('multipleRowsSelection');
+    });
+
     it('should call onRowSelectionModelChange with an empty array if there is no selected row in the current page when turning off checkboxSelection', async () => {
       const onRowSelectionModelChange = spy();
       const { setProps, user } = render(