[DataGrid] Pass rowId param to processRowUpdate (#14821)

Co-authored-by: Andrew Cherniavskyi <[email protected]>

docs/data/data-grid/editing/editing.md

@@ -155,10 +155,11 @@ The editable cells have a green background for better visibility.
 
 When the user performs an action to [stop editing](#stop-editing), the `processRowUpdate` callback is triggered.
 Use it to send the new values to the server and save them into a database or other storage method.
-The callback is called with two arguments:
+The callback is called with three arguments:
 
 1. The updated row with the new values returned by the [`valueSetter`](#value-parser-and-value-setter).
 2. The original values of the row before editing.
+3. An object with additional properties such as `rowId`.
 
 Please note that the `processRowUpdate` must return the row object to update the Data Grid internal state.
 The value returned is used later as an argument on a call to `apiRef.current.updateRows`.

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

@@ -566,8 +566,8 @@
     "processRowUpdate": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(newRow: R, oldRow: R) => Promise<R> | R",
-        "describedArgs": ["newRow", "oldRow"],
+        "type": "function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise<R> | R",
+        "describedArgs": ["newRow", "oldRow", "params"],
         "returned": "Promise<R> | R"
       }
     },

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

@@ -506,8 +506,8 @@
     "processRowUpdate": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(newRow: R, oldRow: R) => Promise<R> | R",
-        "describedArgs": ["newRow", "oldRow"],
+        "type": "function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise<R> | R",
+        "describedArgs": ["newRow", "oldRow", "params"],
         "returned": "Promise<R> | R"
       }
     },

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

@@ -422,8 +422,8 @@
     "processRowUpdate": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(newRow: R, oldRow: R) => Promise<R> | R",
-        "describedArgs": ["newRow", "oldRow"],
+        "type": "function(newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise<R> | R",
+        "describedArgs": ["newRow", "oldRow", "params"],
         "returned": "Promise<R> | R"
       }
     },

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -589,6 +589,7 @@
       "typeDescriptions": {
         "newRow": "Row object with the new values.",
         "oldRow": "Row object with the old values.",
+        "params": "Additional parameters.",
         "Promise<R> | R": "The final values to update the row."
       }
     },

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -535,6 +535,7 @@
       "typeDescriptions": {
         "newRow": "Row object with the new values.",
         "oldRow": "Row object with the old values.",
+        "params": "Additional parameters.",
         "Promise<R> | R": "The final values to update the row."
       }
     },

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -437,6 +437,7 @@
       "typeDescriptions": {
         "newRow": "Row object with the new values.",
         "oldRow": "Row object with the old values.",
+        "params": "Additional parameters.",
         "Promise<R> | R": "The final values to update the row."
       }
     },

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -917,6 +917,7 @@ DataGridPremiumRaw.propTypes = {
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,

packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts

@@ -180,7 +180,7 @@ class CellValueUpdater {
 
         try {
           const oldRow = apiRef.current.getRow(rowId);
-          const finalRowUpdate = await processRowUpdate(newRow, oldRow);
+          const finalRowUpdate = await processRowUpdate(newRow, oldRow, { rowId });
           this.updateRow(finalRowUpdate);
         } catch (error) {
           handleError(error);

packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx

@@ -615,6 +615,7 @@ describe('<DataGridPremium /> - Clipboard', () => {
       expect(processRowUpdateSpy.args[0]).to.deep.equal([
         { id: 1, firstName: 'John', lastName: 'Doe' },
         { id: 1, firstName: 'Cersei', lastName: 'Lannister' },
+        { rowId: '1' },
       ]);
     });
 
@@ -725,14 +726,17 @@ describe('<DataGridPremium /> - Clipboard', () => {
         [
           { id: 0, currencyPair: '12', price1M: '12' }, // new row
           { id: 0, currencyPair: 'USDGBP', price1M: 1 }, // old row
+          { rowId: '0' }, // row id
         ],
         [
           { id: 1, currencyPair: '12', price1M: '12' }, // new row
           { id: 1, currencyPair: 'USDEUR', price1M: 11 }, // old row
+          { rowId: '1' }, // row id
         ],
         [
           { id: 2, currencyPair: '12', price1M: '12' }, // new row
           { id: 2, currencyPair: 'GBPEUR', price1M: 21 }, // old row
+          { rowId: '2' }, // row id
         ],
       ]);
     });

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -833,6 +833,7 @@ DataGridProRaw.propTypes = {
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -699,6 +699,7 @@ DataGridRaw.propTypes = {
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,

packages/x-data-grid/src/hooks/features/editing/useGridCellEditing.ts

@@ -423,7 +423,7 @@ export const useGridCellEditing = (
 
         try {
           const row = apiRef.current.getRow(id)!;
-          Promise.resolve(processRowUpdate(rowUpdate, row))
+          Promise.resolve(processRowUpdate(rowUpdate, row, { rowId: id }))
             .then((finalRowUpdate) => {
               apiRef.current.updateRows([finalRowUpdate]);
               finishCellEditMode();

packages/x-data-grid/src/hooks/features/editing/useGridRowEditing.ts

@@ -530,7 +530,7 @@ export const useGridRowEditing = (
         };
 
         try {
-          Promise.resolve(processRowUpdate(rowUpdate, row))
+          Promise.resolve(processRowUpdate(rowUpdate, row, { rowId: id }))
             .then((finalRowUpdate) => {
               apiRef.current.updateRows([finalRowUpdate]);
               finishRowEditMode();

packages/x-data-grid/src/models/props/DataGridProps.ts

@@ -8,7 +8,7 @@ import { GridFeatureMode } from '../gridFeatureMode';
 import { Logger } from '../logger';
 import { GridSortDirection, GridSortModel } from '../gridSortModel';
 import { GridSlotsComponent } from '../gridSlotsComponent';
-import { GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
+import { GridRowId, GridRowIdGetter, GridRowsProp, GridValidRowModel } from '../gridRows';
 import { GridEventListener } from '../events';
 import { GridCallbackDetails, GridLocaleText } from '../api';
 import { GridApiCommunity } from '../api/gridApiCommunity';
@@ -782,14 +782,16 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures?: Partial<GridExperimentalFeatures>;
+  // eslint-disable-next-line jsdoc/require-param
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * @template R
    * @param {R} newRow Row object with the new values.
    * @param {R} oldRow Row object with the old values.
+   * @param {{ rowId: GridRowId }} params Additional parameters.
    * @returns {Promise<R> | R} The final values to update the row.
    */
-  processRowUpdate?: (newRow: R, oldRow: R) => Promise<R> | R;
+  processRowUpdate?: (newRow: R, oldRow: R, params: { rowId: GridRowId }) => Promise<R> | R;
   /**
    * Callback called when `processRowUpdate` throws an error or rejects.
    * @param {any} error The error thrown.