@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/hooks/features/editRows/useGridCellEditing.old.js

@@ -5,7 +5,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import { useEventCallback } from '@mui/material/utils';
 import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events/gridEvents';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent, isPrintableKey, isCellEnterEditModeKeys, isCellExitEditModeKeys, isCellEditCommitKeys, isDeleteKeys } from '../../../utils/keyboardUtils';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -58,7 +57,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.cellModeChange, apiRef.current.getCellParams(id, field));
+    apiRef.current.publishEvent('cellModeChange', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   var getCellMode = React.useCallback(function (id, field) {
     var editRowsState = gridEditRowsStateSelector(apiRef.current.state);
@@ -116,7 +115,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
             return false;
           }
 
-          apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+          apiRef.current.publishEvent('cellEditCommit', commitParams, event);
           return true;
         });
       }
@@ -130,7 +129,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
     }
 
     if (!hasError) {
-      apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+      apiRef.current.publishEvent('cellEditCommit', commitParams, event);
       return true;
     }
 
@@ -204,7 +203,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
               isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
               if (!isEditMode && isCellEnterEditModeKeys(event.key) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
-                apiRef.current.publishEvent(GridEvents.cellEditStart, params, event);
+                apiRef.current.publishEvent('cellEditStart', params, event);
               }
 
               if (!isEditMode && isDeleteKeys(event.key)) {
@@ -217,7 +216,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
                   id: id,
                   field: field
                 }, event);
-                apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+                apiRef.current.publishEvent('cellEditStop', params, event);
               }
 
               if (!(isEditMode && isCellEditCommitKeys(event.key))) {
@@ -244,7 +243,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
 
             case 14:
               if (isEditMode && isCellExitEditModeKeys(event.key)) {
-                apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+                apiRef.current.publishEvent('cellEditStop', params, event);
               }
 
             case 15:
@@ -264,7 +263,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
       return;
     }
 
-    apiRef.current.publishEvent(GridEvents.cellEditStart, params, event);
+    apiRef.current.publishEvent('cellEditStart', params, event);
   }, [apiRef]);
 
   var commitPropsAndExit = /*#__PURE__*/function () {
@@ -285,7 +284,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
               return apiRef.current.commitCellChange(params, event);
 
             case 4:
-              apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+              apiRef.current.publishEvent('cellEditStop', params, event);
 
             case 5:
             case "end":
@@ -338,7 +337,7 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
     }
 
     if (isCellEditCommitKeys(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       return;
     }
 
@@ -390,15 +389,15 @@ export var useCellEditing = function useCellEditing(apiRef, props) {
       }));
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStart, buildCallback(handleCellEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStop, buildCallback(handleCellEditStop));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditCommit, buildCallback(handleCellEditCommit));
-  useGridApiEventHandler(apiRef, GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditCommit, props.onCellEditCommit);
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStart, props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStop, props.onCellEditStop);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
+  useGridApiEventHandler(apiRef, 'cellEditStart', buildCallback(handleCellEditStart));
+  useGridApiEventHandler(apiRef, 'cellEditStop', buildCallback(handleCellEditStop));
+  useGridApiEventHandler(apiRef, 'cellEditCommit', buildCallback(handleCellEditCommit));
+  useGridApiEventHandler(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
+  useGridApiOptionHandler(apiRef, 'cellEditCommit', props.onCellEditCommit);
+  useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
+  useGridApiOptionHandler(apiRef, 'cellEditStop', props.onCellEditStop);
 };

package/legacy/hooks/features/editRows/useGridEditing.new.js

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridCellEditing } from './useGridCellEditing.new';
-import { GridCellModes } from '../../../models/gridEditRowModel';
+import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
 export var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {
@@ -119,7 +119,7 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+                setEditCellValueToCall = props.editMode === GridEditModes.Row ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
                 // By the time this callback runs the user may have cancelled the editing
 
                 if (!(apiRef.current.getCellMode(id, field) === GridCellModes.Edit)) {
@@ -143,10 +143,14 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
       })));
     });
   }, [apiRef, props.editMode]);
+  var getRowWithUpdatedValues = React.useCallback(function (id, field) {
+    return props.editMode === GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
   var editingSharedApi = {
     isCellEditable: isCellEditable,
     setEditCellValue: setEditCellValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
 };

package/legacy/hooks/features/editRows/useGridEditing.old.js

@@ -1,7 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -32,7 +31,7 @@ export function useGridEditing(apiRef, props) {
     propModel: props.editRowsModel,
     propOnChange: props.onEditRowsModelChange,
     stateSelector: gridEditRowsStateSelector,
-    changeEvent: GridEvents.editRowsModelChange
+    changeEvent: 'editRowsModelChange'
   });
   var isCellEditable = React.useCallback(function (params) {
     return !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params));
@@ -112,7 +111,7 @@ export function useGridEditing(apiRef, props) {
           value: params.value
         }
       };
-      return apiRef.current.publishEvent(GridEvents.editCellPropsChange, newParams, event);
+      return apiRef.current.publishEvent('editCellPropsChange', newParams, event);
     });
   }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
   var parseValue = React.useCallback(function (id, field, value) {
@@ -163,8 +162,8 @@ export function useGridEditing(apiRef, props) {
       event.preventDefault();
     }
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.cellMouseDown, preventTextSelection);
-  useGridApiOptionHandler(apiRef, GridEvents.editCellPropsChange, props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
+  useGridApiEventHandler(apiRef, 'cellMouseDown', preventTextSelection);
+  useGridApiOptionHandler(apiRef, 'editCellPropsChange', props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
 
   var editingSharedApi = {
     isCellEditable: isCellEditable,

package/legacy/hooks/features/editRows/useGridRowEditing.new.js

@@ -1,24 +1,35 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["id"],
+    _excluded2 = ["id"];
 import * as React from 'react';
-import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events/gridEvents';
+import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
+import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      rowModesModel = _React$useState2[0],
+      setRowModesModel = _React$useState2[1];
+
+  var prevRowModesModel = React.useRef({});
   var focusTimeout = React.useRef(null);
   var nextFocusedCell = React.useRef(null);
   var processRowUpdate = props.processRowUpdate,
-      onProcessRowUpdateError = props.onProcessRowUpdateError;
+      onProcessRowUpdateError = props.onProcessRowUpdateError,
+      rowModesModelProp = props.rowModesModel,
+      onRowModesModelChange = props.onRowModesModelChange,
+      signature = props.signature;
 
   var runIfEditModeIsRow = function runIfEditModeIsRow(callback) {
     return function () {
@@ -56,7 +67,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       reason: GridRowEditStartReasons.cellDoubleClick
     });
 
-    apiRef.current.publishEvent(GridEvents.rowEditStart, newParams, event);
+    apiRef.current.publishEvent('rowEditStart', newParams, event);
   }, [apiRef]);
   var handleCellFocusIn = React.useCallback(function (params) {
     nextFocusedCell.current = params;
@@ -82,6 +93,11 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       focusTimeout.current = null;
 
       if (((_nextFocusedCell$curr = nextFocusedCell.current) == null ? void 0 : _nextFocusedCell$curr.id) !== params.id) {
+        // The row might have been deleted during the click
+        if (!apiRef.current.getRow(params.id)) {
+          return;
+        }
+
         var rowParams = apiRef.current.getRowParams(params.id);
 
         var newParams = _extends({}, rowParams, {
@@ -89,7 +105,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           reason: GridRowEditStopReasons.rowFocusOut
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     });
   }, [apiRef]);
@@ -134,7 +150,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           field: params.field
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStop, newParams, event);
+        apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       var _reason;
@@ -159,26 +175,24 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           reason: _reason
         });
 
-        apiRef.current.publishEvent(GridEvents.rowEditStart, _newParams, event);
+        apiRef.current.publishEvent('rowEditStart', _newParams, event);
       }
     }
   }, [apiRef]);
-  var handleRowEditStart = React.useCallback(function (params, event) {
+  var handleRowEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
         reason = params.reason;
-    apiRef.current.startRowEditMode({
+    var startRowEditModeParams = {
       id: id,
       fieldToFocus: field
-    });
+    };
 
     if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id: id,
-        field: field,
-        value: ''
-      }, event);
+      startRowEditModeParams.deleteValue = !!field;
     }
+
+    apiRef.current.startRowEditMode(startRowEditModeParams);
   }, [apiRef]);
   var handleRowEditStop = React.useCallback(function (params) {
     var id = params.id,
@@ -213,14 +227,14 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       cellToFocusAfter: cellToFocusAfter
     });
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, runIfEditModeIsRow(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusIn, runIfEditModeIsRow(handleCellFocusIn));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, runIfEditModeIsRow(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, runIfEditModeIsRow(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStart, runIfEditModeIsRow(handleRowEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStop, runIfEditModeIsRow(handleRowEditStop));
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStart, props.onRowEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStop, props.onRowEditStop);
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsRow(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'rowEditStart', runIfEditModeIsRow(handleRowEditStart));
+  useGridApiEventHandler(apiRef, 'rowEditStop', runIfEditModeIsRow(handleRowEditStop));
+  useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
+  useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
   var getRowMode = React.useCallback(function (id) {
     if (props.editMode === GridEditModes.Cell) {
       return GridRowModes.View;
@@ -230,6 +244,34 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
+  var updateRowModesModel = React.useCallback(function (newModel) {
+    var isNewModelDifferentFromProp = newModel !== props.rowModesModel;
+
+    if (onRowModesModelChange && isNewModelDifferentFromProp) {
+      var details = signature === GridSignature.DataGridPro ? {
+        api: apiRef.current
+      } : {};
+      onRowModesModelChange(newModel, details);
+    }
+
+    if (props.rowModesModel && isNewModelDifferentFromProp) {
+      return; // The prop always win
+    }
+
+    setRowModesModel(newModel);
+    apiRef.current.publishEvent('rowModesModelChange', newModel);
+  }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
+  var updateRowInRowModesModel = React.useCallback(function (id, newProps) {
+    var newModel = _extends({}, rowModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = _extends({}, newProps);
+    } else {
+      delete newModel[id];
+    }
+
+    updateRowModesModel(newModel);
+  }, [rowModesModel, updateRowModesModel]);
   var updateOrDeleteRowState = React.useCallback(function (id, newProps) {
     apiRef.current.setState(function (state) {
       var newEditingState = _extends({}, state.editRows);
@@ -268,13 +310,17 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   }, [apiRef]);
   var startRowEditMode = React.useCallback(function (params) {
     var id = params.id,
-        fieldToFocus = params.fieldToFocus;
-    throwIfNotInMode(id, GridRowModes.View);
-
-    if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
-      throw new Error("MUI: The cell with id=".concat(id, " is already in edit mode."));
-    }
+        other = _objectWithoutProperties(params, _excluded);
 
+    throwIfNotInMode(id, GridRowModes.View);
+    updateRowInRowModesModel(id, _extends({
+      mode: GridRowModes.Edit
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  var updateStateToStartRowEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        fieldToFocus = params.fieldToFocus,
+        deleteValue = params.deleteValue;
     var columnFields = gridColumnFieldsSelector(apiRef);
     var newProps = columnFields.reduce(function (acc, field) {
       var cellParams = apiRef.current.getCellParams(id, field);
@@ -283,8 +329,9 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         return acc;
       }
 
+      var shouldDeleteValue = deleteValue && fieldToFocus === field;
       acc[field] = {
-        value: apiRef.current.getCellValue(id, field),
+        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
         error: false,
         isProcessingProps: false
       };
@@ -295,25 +342,35 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, updateOrDeleteRowState]);
   var stopRowEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        other = _objectWithoutProperties(params, _excluded2);
+
+    throwIfNotInMode(id, GridRowModes.Edit);
+    updateRowInRowModesModel(id, _extends({
+      mode: GridRowModes.View
+    }, other));
+  }, [throwIfNotInMode, updateRowInRowModesModel]);
+  var updateStateToStopRowEditMode = React.useCallback(function (params) {
     var id = params.id,
         ignoreModifications = params.ignoreModifications,
         focusedField = params.field,
         _params$cellToFocusAf = params.cellToFocusAfter,
         cellToFocusAfter = _params$cellToFocusAf === void 0 ? 'none' : _params$cellToFocusAf;
-    throwIfNotInMode(id, GridRowModes.Edit);
     apiRef.current.unstable_runPendingEditCellValueMutation(id);
 
-    var updateFocusedCellIfNeeded = function updateFocusedCellIfNeeded() {
+    var finishRowEditMode = function finishRowEditMode() {
       if (cellToFocusAfter !== 'none' && focusedField) {
         apiRef.current.unstable_moveFocusToRelativeCell(id, focusedField, cellToFocusAfter);
       }
+
+      updateOrDeleteRowState(id, null);
+      updateRowInRowModesModel(id, null);
     };
 
     if (ignoreModifications) {
-      updateFocusedCellIfNeeded();
-      updateOrDeleteRowState(id, null);
+      finishRowEditMode();
       return;
     }
 
@@ -335,24 +392,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       return;
     }
 
-    var rowUpdate = _extends({}, row);
-
-    Object.entries(editingState[id]).forEach(function (_ref) {
-      var _ref2 = _slicedToArray(_ref, 2),
-          field = _ref2[0],
-          fieldProps = _ref2[1];
-
-      var column = apiRef.current.getColumn(field);
-
-      if (column.valueSetter) {
-        rowUpdate = column.valueSetter({
-          value: fieldProps.value,
-          row: rowUpdate
-        });
-      } else {
-        rowUpdate[field] = fieldProps.value;
-      }
-    });
+    var rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
 
     if (processRowUpdate) {
       var handleError = function handleError(errorThrown) {
@@ -366,18 +406,16 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       try {
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
           apiRef.current.updateRows([finalRowUpdate]);
-          updateFocusedCellIfNeeded();
-          updateOrDeleteRowState(id, null);
+          finishRowEditMode();
         }).catch(handleError);
       } catch (errorThrown) {
         handleError(errorThrown);
       }
     } else {
       apiRef.current.updateRows([rowUpdate]);
-      updateFocusedCellIfNeeded();
-      updateOrDeleteRowState(id, null);
+      finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteRowState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
   var setRowEditingEditCellValue = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
@@ -442,10 +480,10 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         promises.push(promise);
       }
 
-      Object.entries(editingState[id]).forEach(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-            thisField = _ref4[0],
-            fieldProps = _ref4[1];
+      Object.entries(editingState[id]).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            thisField = _ref2[0],
+            fieldProps = _ref2[1];
 
         if (thisField === field) {
           return;
@@ -498,11 +536,65 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
       });
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
+  var getRowWithUpdatedValuesFromRowEditing = React.useCallback(function (id) {
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var row = apiRef.current.getRow(id);
+
+    var rowUpdate = _extends({}, row);
+
+    Object.entries(editingState[id]).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          field = _ref4[0],
+          fieldProps = _ref4[1];
+
+      var column = apiRef.current.getColumn(field);
+
+      if (column.valueSetter) {
+        rowUpdate = column.valueSetter({
+          value: fieldProps.value,
+          row: rowUpdate
+        });
+      } else {
+        rowUpdate[field] = fieldProps.value;
+      }
+    });
+    return rowUpdate;
+  }, [apiRef]);
   var editingApi = {
     getRowMode: getRowMode,
     startRowEditMode: startRowEditMode,
     stopRowEditMode: stopRowEditMode,
-    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue
+    unstable_setRowEditingEditCellValue: setRowEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromRowEditing: getRowWithUpdatedValuesFromRowEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
+  React.useEffect(function () {
+    if (rowModesModelProp) {
+      updateRowModesModel(rowModesModelProp);
+    }
+  }, [rowModesModelProp, updateRowModesModel]);
+  React.useEffect(function () {
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    Object.entries(rowModesModel).forEach(function (_ref5) {
+      var _prevRowModesModel$cu, _idToIdLookup$id;
+
+      var _ref6 = _slicedToArray(_ref5, 2),
+          id = _ref6[0],
+          params = _ref6[1];
+
+      var prevMode = ((_prevRowModesModel$cu = prevRowModesModel.current[id]) == null ? void 0 : _prevRowModesModel$cu.mode) || GridRowModes.View;
+      var originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+
+      if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
+        updateStateToStartRowEditMode(_extends({
+          id: originalId
+        }, params));
+      } else if (params.mode === GridRowModes.View && prevMode === GridRowModes.Edit) {
+        updateStateToStopRowEditMode(_extends({
+          id: originalId
+        }, params));
+      }
+    });
+    prevRowModesModel.current = rowModesModel;
+  }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
 };

package/legacy/hooks/features/editRows/useGridRowEditing.old.js

@@ -8,7 +8,6 @@ import { GridRowModes, GridEditModes, GridCellModes } from '../../../models/grid
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
-import { GridEvents } from '../../../models/events/gridEvents';
 import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 import { useGridApiOptionHandler, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
@@ -148,12 +147,12 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
           return false;
         }
 
-        apiRef.current.publishEvent(GridEvents.rowEditCommit, id, event);
+        apiRef.current.publishEvent('rowEditCommit', id, event);
         return true;
       });
     }
 
-    apiRef.current.publishEvent(GridEvents.rowEditCommit, id, event);
+    apiRef.current.publishEvent('rowEditCommit', id, event);
     return true;
   }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
   var setRowEditingEditCellValue = React.useCallback(function (params) {
@@ -279,13 +278,13 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
               return _context3.abrupt("return");
 
             case 12:
-              apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+              apiRef.current.publishEvent('rowEditStop', rowParams, event);
               _context3.next = 16;
               break;
 
             case 15:
               if (event.key === 'Escape') {
-                apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+                apiRef.current.publishEvent('rowEditStop', rowParams, event);
               }
 
             case 16:
@@ -294,7 +293,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
             case 18:
               if (event.key === 'Enter') {
-                apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+                apiRef.current.publishEvent('rowEditStart', rowParams, event);
               }
 
             case 19:
@@ -315,7 +314,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     }
 
     var rowParams = apiRef.current.getRowParams(params.id);
-    apiRef.current.publishEvent(GridEvents.rowEditStart, rowParams, event);
+    apiRef.current.publishEvent('rowEditStart', rowParams, event);
   }, [apiRef]);
   var handleEditCellPropsChange = React.useCallback(function (params) {
     var row = apiRef.current.getRow(params.id);
@@ -378,7 +377,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     apiRef.current.setRowMode(params.id, GridRowModes.View);
 
     if (event.key === 'Enter') {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
     }
   }, [apiRef]);
   var handleRowEditCommit = React.useCallback(function (id) {
@@ -447,7 +446,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
                       case 3:
                         rowParams = apiRef.current.getRowParams(params.id);
-                        apiRef.current.publishEvent(GridEvents.rowEditStop, rowParams, event);
+                        apiRef.current.publishEvent('rowEditStop', rowParams, event);
 
                       case 5:
                       case "end":
@@ -483,16 +482,16 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var params = apiRef.current.getCellParams(cell.id, cell.field);
     commitPropsAndExit(params, {});
   });
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStart, buildCallback(handleRowEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditStop, buildCallback(handleRowEditStop));
-  useGridApiEventHandler(apiRef, GridEvents.rowEditCommit, buildCallback(handleRowEditCommit));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusIn, buildCallback(handleCellFocusIn));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditCommit, props.onRowEditCommit);
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStart, props.onRowEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.rowEditStop, props.onRowEditStop);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
+  useGridApiEventHandler(apiRef, 'rowEditStart', buildCallback(handleRowEditStart));
+  useGridApiEventHandler(apiRef, 'rowEditStop', buildCallback(handleRowEditStop));
+  useGridApiEventHandler(apiRef, 'rowEditCommit', buildCallback(handleRowEditCommit));
+  useGridApiEventHandler(apiRef, 'cellFocusIn', buildCallback(handleCellFocusIn));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
+  useGridApiOptionHandler(apiRef, 'rowEditCommit', props.onRowEditCommit);
+  useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
+  useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
 };