@mui/x-data-grid 5.8.0 → 5.11.0

package/legacy/hooks/features/columns/useGridColumns.js

@@ -2,12 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsMetaSelector, gridColumnsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 import { hydrateColumnsWidth, computeColumnTypes, createColumnsState, mergeColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
 import { GridPreferencePanelsValue } from '../preferencesPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -55,13 +54,13 @@ export function useGridColumns(apiRef, props) {
     propModel: props.columnVisibilityModel,
     propOnChange: props.onColumnVisibilityModelChange,
     stateSelector: gridColumnVisibilityModelSelector,
-    changeEvent: GridEvents.columnVisibilityModelChange
+    changeEvent: 'columnVisibilityModelChange'
   });
   var setGridColumnsState = React.useCallback(function (columnsState) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+    apiRef.current.publishEvent('columnsChange', columnsState.all);
   }, [logger, apiRef]);
   /**
    * API METHODS
@@ -152,7 +151,7 @@ export function useGridColumns(apiRef, props) {
         colDef: newColumn,
         isVisible: isVisible
       };
-      apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
+      apiRef.current.publishEvent('columnVisibilityChange', params);
     }
   }, [apiRef]);
   var setColumnIndex = React.useCallback(function (field, targetIndexPosition) {
@@ -180,7 +179,7 @@ export function useGridColumns(apiRef, props) {
       targetIndex: targetIndexPosition,
       oldIndex: oldIndexPosition
     };
-    apiRef.current.publishEvent(GridEvents.columnOrderChange, params);
+    apiRef.current.publishEvent('columnOrderChange', params);
   }, [apiRef, logger, setGridColumnsState]);
   var setColumnWidth = React.useCallback(function (field, width) {
     logger.debug("Updating column ".concat(field, " width to ").concat(width));
@@ -191,7 +190,7 @@ export function useGridColumns(apiRef, props) {
     });
 
     apiRef.current.updateColumns([newColumn]);
-    apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+    apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
       width: width
@@ -237,7 +236,13 @@ export function useGridColumns(apiRef, props) {
       if (colDef.hasBeenResized) {
         var colDefDimensions = {};
         COLUMNS_DIMENSION_PROPERTIES.forEach(function (propertyName) {
-          colDefDimensions[propertyName] = colDef[propertyName];
+          var propertyValue = colDef[propertyName];
+
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+
+          colDefDimensions[propertyName] = propertyValue;
         });
         dimensions[colDef.field] = colDefDimensions;
       }
@@ -273,7 +278,7 @@ export function useGridColumns(apiRef, props) {
     apiRef.current.setState(mergeColumnsState(columnsState));
 
     if (initialState != null) {
-      apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+      apiRef.current.publishEvent('columnsChange', columnsState.all);
     }
 
     return params;
@@ -295,12 +300,23 @@ export function useGridColumns(apiRef, props) {
    * EVENTS
    */
 
-  var handlepipeProcessorRegister = React.useCallback(function (name) {
-    if (name !== 'hydrateColumns') {
-      return;
+  var prevInnerWidth = React.useRef(null);
+
+  var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      setGridColumnsState(hydrateColumnsWidth(gridColumnsSelector(apiRef.current.state), viewportInnerSize.width));
     }
+  };
+
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiOptionHandler(apiRef, 'columnVisibilityChange', props.onColumnVisibilityChange);
+  /**
+   * APPLIERS
+   */
 
-    logger.info("Columns pre-processing have changed, regenerating the columns");
+  var hydrateColumns = React.useCallback(function () {
+    logger.info("Columns pipe processing have changed, regenerating the columns");
     var columnsState = createColumnsState({
       apiRef: apiRef,
       columnTypes: columnTypes,
@@ -311,18 +327,7 @@ export function useGridColumns(apiRef, props) {
     });
     setGridColumnsState(columnsState);
   }, [apiRef, logger, setGridColumnsState, columnTypes]);
-  var prevInnerWidth = React.useRef(null);
-
-  var handleGridSizeChange = function handleGridSizeChange(viewportInnerSize) {
-    if (prevInnerWidth.current !== viewportInnerSize.width) {
-      prevInnerWidth.current = viewportInnerSize.width;
-      setGridColumnsState(hydrateColumnsWidth(gridColumnsSelector(apiRef.current.state), viewportInnerSize.width));
-    }
-  };
-
-  useGridApiEventHandler(apiRef, GridEvents.pipeProcessorRegister, handlepipeProcessorRegister);
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
   /**
    * EFFECTS
    */

package/legacy/hooks/features/dimensions/useGridDimensions.js

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { debounce, ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
-import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -101,12 +100,12 @@ export function useGridDimensions(apiRef, props) {
     fullDimensionsRef.current = newFullDimensions;
 
     if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
-      apiRef.current.publishEvent(GridEvents.viewportInnerSizeChange, newFullDimensions.viewportInnerSize);
+      apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
   var resize = React.useCallback(function () {
     updateGridDimensionsRef();
-    apiRef.current.publishEvent(GridEvents.debouncedResize, rootDimensionsRef.current);
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
   }, [apiRef, updateGridDimensionsRef]);
   var getRootDimensions = React.useCallback(function () {
     return fullDimensionsRef.current;
@@ -150,12 +149,12 @@ export function useGridDimensions(apiRef, props) {
     var isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
     if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
     if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/components/data-grid/layout/'].join('\n'));
+      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
       warningShown.current = true;
     }
 
@@ -178,10 +177,10 @@ export function useGridDimensions(apiRef, props) {
   useEnhancedEffect(function () {
     return updateGridDimensionsRef();
   }, [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.visibleRowsSet, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.pageChange, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.pageSizeChange, updateGridDimensionsRef);
-  useGridApiOptionHandler(apiRef, GridEvents.columnsChange, updateGridDimensionsRef);
-  useGridApiEventHandler(apiRef, GridEvents.resize, handleResize);
-  useGridApiOptionHandler(apiRef, GridEvents.debouncedResize, props.onResize);
+  useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'pageChange', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'pageSizeChange', updateGridDimensionsRef);
+  useGridApiOptionHandler(apiRef, 'columnsChange', updateGridDimensionsRef);
+  useGridApiEventHandler(apiRef, 'resize', handleResize);
+  useGridApiOptionHandler(apiRef, 'debouncedResize', props.onResize);
 }

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

@@ -1,20 +1,34 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 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", "field"],
+    _excluded2 = ["id", "field"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
+import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
 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 useGridCellEditing = function useGridCellEditing(apiRef, props) {
+  var _React$useState = React.useState({}),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      cellModesModel = _React$useState2[0],
+      setCellModesModel = _React$useState2[1];
+
+  var prevCellModesModel = React.useRef({});
   var processRowUpdate = props.processRowUpdate,
-      onProcessRowUpdateError = props.onProcessRowUpdateError;
+      onProcessRowUpdateError = props.onProcessRowUpdateError,
+      cellModesModelProp = props.cellModesModel,
+      onCellModesModelChange = props.onCellModesModelChange,
+      signature = props.signature;
 
   var runIfEditModeIsCell = function runIfEditModeIsCell(callback) {
     return function () {
@@ -49,7 +63,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       reason: GridCellEditStartReasons.cellDoubleClick
     });
 
-    apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+    apiRef.current.publishEvent('cellEditStart', newParams, event);
   }, [apiRef]);
   var handleCellFocusOut = React.useCallback(function (params, event) {
     if (params.cellMode === GridCellModes.View) {
@@ -60,7 +74,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       reason: GridCellEditStopReasons.cellFocusOut
     });
 
-    apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+    apiRef.current.publishEvent('cellEditStop', newParams, event);
   }, [apiRef]);
   var handleCellKeyDown = React.useCallback(function (params, event) {
     if (params.cellMode === GridCellModes.Edit) {
@@ -80,7 +94,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
           reason: reason
         });
 
-        apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+        apiRef.current.publishEvent('cellEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       var _reason;
@@ -102,23 +116,24 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
           reason: _reason
         });
 
-        apiRef.current.publishEvent(GridEvents.cellEditStart, _newParams, event);
+        apiRef.current.publishEvent('cellEditStart', _newParams, event);
       }
     }
   }, [apiRef]);
-  var handleCellEditStart = React.useCallback(function (params, event) {
+  var handleCellEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
         reason = params.reason;
-    apiRef.current.startCellEditMode(params);
+    var startCellEditModeParams = {
+      id: id,
+      field: field
+    };
 
     if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id: id,
-        field: field,
-        value: ''
-      }, event);
+      startCellEditModeParams.deleteValue = true;
     }
+
+    apiRef.current.startCellEditMode(startCellEditModeParams);
   }, [apiRef]);
   var handleCellEditStop = React.useCallback(function (params) {
     var id = params.id,
@@ -150,18 +165,55 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
       cellToFocusAfter: cellToFocusAfter
     });
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellDoubleClick, runIfEditModeIsCell(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, GridEvents.cellFocusOut, runIfEditModeIsCell(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, runIfEditModeIsCell(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStart, runIfEditModeIsCell(handleCellEditStart));
-  useGridApiEventHandler(apiRef, GridEvents.cellEditStop, runIfEditModeIsCell(handleCellEditStop));
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStart, props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, GridEvents.cellEditStop, props.onCellEditStop);
+  useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
+  useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
+  useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
+  useGridApiEventHandler(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
+  useGridApiEventHandler(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
+  useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
+  useGridApiOptionHandler(apiRef, 'cellEditStop', props.onCellEditStop);
   var getCellMode = React.useCallback(function (id, field) {
     var editingState = gridEditRowsStateSelector(apiRef.current.state);
     var isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
+  var updateCellModesModel = React.useCallback(function (newModel) {
+    var isNewModelDifferentFromProp = newModel !== props.cellModesModel;
+
+    if (onCellModesModelChange && isNewModelDifferentFromProp) {
+      var details = signature === GridSignature.DataGridPro ? {
+        api: apiRef.current
+      } : {};
+      onCellModesModelChange(newModel, details);
+    }
+
+    if (props.cellModesModel && isNewModelDifferentFromProp) {
+      return; // The prop always win
+    }
+
+    setCellModesModel(newModel);
+    apiRef.current.publishEvent('cellModesModelChange', newModel);
+  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  var updateFieldInCellModesModel = React.useCallback(function (id, field, newProps) {
+    var newModel = _extends({}, cellModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = _extends({}, newModel[id], _defineProperty({}, field, _extends({}, newProps)));
+    } else {
+      var _cellModesModel$id = cellModesModel[id],
+          fieldToRemove = _cellModesModel$id[field],
+          otherFields = _objectWithoutProperties(_cellModesModel$id, [field].map(_toPropertyKey)); // Ensure that we have a new object, not a reference
+
+
+      newModel[id] = otherFields;
+
+      if (Object.keys(newModel[id]).length === 0) {
+        delete newModel[id];
+      }
+    }
+
+    updateCellModesModel(newModel);
+  }, [cellModesModel, updateCellModesModel]);
   var updateOrDeleteFieldState = React.useCallback(function (id, field, newProps) {
     apiRef.current.setState(function (state) {
       var newEditingState = _extends({}, state.editRows);
@@ -184,85 +236,121 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   }, [apiRef]);
   var startCellEditMode = React.useCallback(function (params) {
     var id = params.id,
-        field = params.field;
+        field = params.field,
+        other = _objectWithoutProperties(params, _excluded);
+
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, GridCellModes.View);
+    updateFieldInCellModesModel(id, field, _extends({
+      mode: GridCellModes.Edit
+    }, other));
+  }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
+  var updateStateToStartCellEditMode = React.useCallback(function (params) {
+    var id = params.id,
+        field = params.field,
+        deleteValue = params.deleteValue;
     var newProps = {
-      value: apiRef.current.getCellValue(id, field),
+      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
       error: false,
       isProcessingProps: false
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  }, [apiRef, updateOrDeleteFieldState]);
   var stopCellEditMode = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        ignoreModifications = params.ignoreModifications,
-        _params$cellToFocusAf = params.cellToFocusAfter,
-        cellToFocusAfter = _params$cellToFocusAf === void 0 ? 'none' : _params$cellToFocusAf;
+        other = _objectWithoutProperties(params, _excluded2);
+
     throwIfNotInMode(id, field, GridCellModes.Edit);
-    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
+    updateFieldInCellModesModel(id, field, _extends({
+      mode: GridCellModes.View
+    }, other));
+  }, [throwIfNotInMode, updateFieldInCellModesModel]);
+  var updateStateToStopCellEditMode = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+      var id, field, ignoreModifications, _params$cellToFocusAf, cellToFocusAfter, finishCellEditMode, editingState, _editingState$id$fiel, error, isProcessingProps, rowUpdate, handleError, row;
 
-    var updateFocusedCellIfNeeded = function updateFocusedCellIfNeeded() {
-      if (cellToFocusAfter !== 'none') {
-        apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
-      }
-    };
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              id = params.id, field = params.field, ignoreModifications = params.ignoreModifications, _params$cellToFocusAf = params.cellToFocusAfter, cellToFocusAfter = _params$cellToFocusAf === void 0 ? 'none' : _params$cellToFocusAf;
+              throwIfNotInMode(id, field, GridCellModes.Edit);
+              apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
 
-    if (ignoreModifications) {
-      updateFocusedCellIfNeeded();
-      updateOrDeleteFieldState(id, field, null);
-      return;
-    }
+              finishCellEditMode = function finishCellEditMode() {
+                if (cellToFocusAfter !== 'none') {
+                  apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
+                }
 
-    var editingState = gridEditRowsStateSelector(apiRef.current.state);
-    var row = apiRef.current.getRow(id);
-    var column = apiRef.current.getColumn(field);
-    var _editingState$id$fiel = editingState[id][field],
-        value = _editingState$id$fiel.value,
-        error = _editingState$id$fiel.error,
-        isProcessingProps = _editingState$id$fiel.isProcessingProps;
+                updateOrDeleteFieldState(id, field, null);
+                updateFieldInCellModesModel(id, field, null);
+              };
 
-    if (error || isProcessingProps) {
-      return;
-    }
+              if (!ignoreModifications) {
+                _context.next = 7;
+                break;
+              }
 
-    var rowUpdate = column.valueSetter ? column.valueSetter({
-      value: value,
-      row: row
-    }) : _extends({}, row, _defineProperty({}, field, value));
+              finishCellEditMode();
+              return _context.abrupt("return");
+
+            case 7:
+              editingState = gridEditRowsStateSelector(apiRef.current.state);
+              _editingState$id$fiel = editingState[id][field], error = _editingState$id$fiel.error, isProcessingProps = _editingState$id$fiel.isProcessingProps;
+
+              if (!(error || isProcessingProps)) {
+                _context.next = 11;
+                break;
+              }
 
-    if (processRowUpdate) {
-      var handleError = function handleError(errorThrown) {
-        if (onProcessRowUpdateError) {
-          onProcessRowUpdateError(errorThrown);
-        } else {
-          missingOnProcessRowUpdateErrorWarning();
+              return _context.abrupt("return");
+
+            case 11:
+              rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
+
+              if (processRowUpdate) {
+                handleError = function handleError(errorThrown) {
+                  if (onProcessRowUpdateError) {
+                    onProcessRowUpdateError(errorThrown);
+                  } else {
+                    missingOnProcessRowUpdateErrorWarning();
+                  }
+                };
+
+                try {
+                  row = apiRef.current.getRow(id);
+                  Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
+                    apiRef.current.updateRows([finalRowUpdate]);
+                    finishCellEditMode();
+                  }).catch(handleError);
+                } catch (errorThrown) {
+                  handleError(errorThrown);
+                }
+              } else {
+                apiRef.current.updateRows([rowUpdate]);
+                finishCellEditMode();
+              }
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
         }
-      };
-
-      try {
-        Promise.resolve(processRowUpdate(rowUpdate, row)).then(function (finalRowUpdate) {
-          apiRef.current.updateRows([finalRowUpdate]);
-          updateFocusedCellIfNeeded();
-          updateOrDeleteFieldState(id, field, null);
-        }).catch(handleError);
-      } catch (errorThrown) {
-        handleError(errorThrown);
-      }
-    } else {
-      apiRef.current.updateRows([rowUpdate]);
-      updateFocusedCellIfNeeded();
-      updateOrDeleteFieldState(id, field, null);
-    }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
   var setCellEditingEditCellValue = React.useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params) {
       var id, field, value, column, row, parsedValue, editingState, newProps, hasChanged;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
               id = params.id, field = params.field, value = params.value;
               throwIfNotEditable(id, field);
@@ -281,7 +369,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
               });
 
               if (!column.preProcessEditCellProps) {
-                _context.next = 16;
+                _context2.next = 16;
                 break;
               }
 
@@ -290,7 +378,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
                 isProcessingProps: true
               });
               updateOrDeleteFieldState(id, field, newProps);
-              _context.next = 15;
+              _context2.next = 15;
               return Promise.resolve(column.preProcessEditCellProps({
                 id: id,
                 row: row,
@@ -299,15 +387,15 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
               }));
 
             case 15:
-              newProps = _context.sent;
+              newProps = _context2.sent;
 
             case 16:
               if (!(apiRef.current.getCellMode(id, field) === GridCellModes.View)) {
-                _context.next = 18;
+                _context2.next = 18;
                 break;
               }
 
-              return _context.abrupt("return", false);
+              return _context2.abrupt("return", false);
 
             case 18:
               editingState = gridEditRowsStateSelector(apiRef.current.state);
@@ -320,25 +408,73 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
               newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
               updateOrDeleteFieldState(id, field, newProps);
               editingState = gridEditRowsStateSelector(apiRef.current.state);
-              return _context.abrupt("return", !editingState[id][field].error);
+              return _context2.abrupt("return", !editingState[id][field].error);
 
             case 24:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     }));
 
-    return function (_x) {
-      return _ref.apply(this, arguments);
+    return function (_x2) {
+      return _ref2.apply(this, arguments);
     };
   }(), [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  var getRowWithUpdatedValuesFromCellEditing = React.useCallback(function (id, field) {
+    var column = apiRef.current.getColumn(field);
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    var value = editingState[id][field].value;
+    var row = apiRef.current.getRow(id);
+    return column.valueSetter ? column.valueSetter({
+      value: value,
+      row: row
+    }) : _extends({}, row, _defineProperty({}, field, value));
+  }, [apiRef]);
   var editingApi = {
     getCellMode: getCellMode,
     startCellEditMode: startCellEditMode,
     stopCellEditMode: stopCellEditMode,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
+  React.useEffect(function () {
+    if (cellModesModelProp) {
+      updateCellModesModel(cellModesModelProp);
+    }
+  }, [cellModesModelProp, updateCellModesModel]);
+  React.useEffect(function () {
+    var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    Object.entries(cellModesModel).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          id = _ref4[0],
+          fields = _ref4[1];
+
+      Object.entries(fields).forEach(function (_ref5) {
+        var _prevCellModesModel$c, _prevCellModesModel$c2, _idToIdLookup$id;
+
+        var _ref6 = _slicedToArray(_ref5, 2),
+            field = _ref6[0],
+            params = _ref6[1];
+
+        var prevMode = ((_prevCellModesModel$c = prevCellModesModel.current[id]) == null ? void 0 : (_prevCellModesModel$c2 = _prevCellModesModel$c[field]) == null ? void 0 : _prevCellModesModel$c2.mode) || GridCellModes.View;
+        var originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+
+        if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
+          updateStateToStartCellEditMode(_extends({
+            id: originalId,
+            field: field
+          }, params));
+        } else if (params.mode === GridCellModes.View && prevMode === GridCellModes.Edit) {
+          updateStateToStopCellEditMode(_extends({
+            id: originalId,
+            field: field
+          }, params));
+        }
+      });
+    });
+    prevCellModesModel.current = cellModesModel;
+  }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
 };