@mui/x-data-grid 5.9.0 → 5.11.1

package/modern/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -46,30 +46,27 @@ export const useGridPipeProcessing = apiRef => {
   const registerPipeProcessor = React.useCallback((group, id, processor) => {
     if (!processorsCache.current[group]) {
       processorsCache.current[group] = {
-        processors: {},
+        processors: new Map(),
         appliers: {}
       };
     }
 
     const groupCache = processorsCache.current[group];
-    const oldProcessor = groupCache.processors[id];
+    const oldProcessor = groupCache.processors.get(id);
 
     if (oldProcessor !== processor) {
-      groupCache.processors[id] = processor;
+      groupCache.processors.set(id, processor);
       runAppliers(groupCache);
     }
 
     return () => {
-      const _processors = processorsCache.current[group].processors,
-            otherProcessors = _objectWithoutPropertiesLoose(_processors, [id].map(_toPropertyKey));
-
-      processorsCache.current[group].processors = otherProcessors;
+      processorsCache.current[group].processors.set(id, null);
     };
   }, [runAppliers]);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
     if (!processorsCache.current[group]) {
       processorsCache.current[group] = {
-        processors: {},
+        processors: new Map(),
         appliers: {}
       };
     }
@@ -93,8 +90,12 @@ export const useGridPipeProcessing = apiRef => {
       return value;
     }
 
-    const preProcessors = Object.values(processorsCache.current[group].processors);
+    const preProcessors = Array.from(processorsCache.current[group].processors.values());
     return preProcessors.reduce((acc, preProcessor) => {
+      if (!preProcessor) {
+        return acc;
+      }
+
       return preProcessor(acc, context);
     }, value);
   }, []);

package/modern/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -2,7 +2,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridEvents } from '../../../models/events';
 export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
@@ -25,7 +24,7 @@ export const GRID_STRATEGIES_PROCESSORS = {
  * The plugin containing the custom logic must use:
  *
  * - `useGridRegisterStrategyProcessor` to register their processor.
- *   When the processor of the active strategy changes, it will fire `GridEvents.activeStrategyProcessorChange` to re-apply the processor.
+ *   When the processor of the active strategy changes, it will fire `"activeStrategyProcessorChange"` to re-apply the processor.
  *
  * - `apiRef.current.unstable_setStrategyAvailability` to tell if their strategy can be used.
  *
@@ -35,12 +34,12 @@ export const GRID_STRATEGIES_PROCESSORS = {
  *
  * - `apiRef.current.unstable_applyStrategyProcessor` to run the processor of the active strategy for a given processor name.
  *
- * - `GridEvents.strategyAvailabilityChange` to update something when the active strategy changes.
+ * - the "strategyAvailabilityChange" event to update something when the active strategy changes.
  *    Warning: Be careful not to apply the processor several times.
- *    For instance `GridEvents.rowsSet` is fired by `useGridRows` whenever the active strategy changes.
+ *    For instance "rowsSet" is fired by `useGridRows` whenever the active strategy changes.
  *    So listening to both would most likely run your logic twice.
  *
- * - `GridEvents.activeStrategyProcessorChange` to update something when the processor of the active strategy changes.
+ * - The "activeStrategyProcessorChange" event to update something when the processor of the active strategy changes.
  *
  * =====================================================================================================================
  *
@@ -74,7 +73,7 @@ export const useGridStrategyProcessing = apiRef => {
     }
 
     if (strategyName === apiRef.current.unstable_getActiveStrategy(GRID_STRATEGIES_PROCESSORS[processorName])) {
-      apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, processorName);
+      apiRef.current.publishEvent('activeStrategyProcessorChange', processorName);
     }
 
     return cleanup;
@@ -111,7 +110,7 @@ export const useGridStrategyProcessing = apiRef => {
       group: strategyGroup,
       isAvailable
     });
-    apiRef.current.publishEvent(GridEvents.strategyAvailabilityChange);
+    apiRef.current.publishEvent('strategyAvailabilityChange');
   }, [apiRef]);
   const strategyProcessingApi = {
     unstable_registerStrategyProcessor: registerStrategyProcessor,

package/modern/hooks/core/useGridApiInitialization.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils/useGridApiMethod';
 import { GridSignature } from '../utils/useGridApiEventHandler';
 import { EventManager } from '../../utils/EventManager';
@@ -15,6 +14,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   if (!apiRef.current) {
     apiRef.current = {
       unstable_eventManager: new EventManager(),
+      unstable_caches: {},
       state: {},
       instanceId: globalId
     };
@@ -43,7 +43,7 @@ export function useGridApiInitialization(inputApiRef, props) {
     };
   }, [apiRef]);
   const showError = React.useCallback(args => {
-    apiRef.current.publishEvent(GridEvents.componentError, args);
+    apiRef.current.publishEvent('componentError', args);
   }, [apiRef]);
   useGridApiMethod(apiRef, {
     subscribeEvent,
@@ -53,7 +53,7 @@ export function useGridApiInitialization(inputApiRef, props) {
   React.useEffect(() => {
     const api = apiRef.current;
     return () => {
-      api.publishEvent(GridEvents.unmount);
+      api.publishEvent('unmount');
     };
   }, [apiRef]);
   return apiRef;

package/modern/hooks/core/useGridErrorHandler.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../models/events';
 import { useGridApiEventHandler } from '../utils/useGridApiEventHandler';
 export function useGridErrorHandler(apiRef, props) {
   const handleError = React.useCallback(args => {
@@ -12,5 +11,5 @@ export function useGridErrorHandler(apiRef, props) {
   React.useEffect(() => {
     handleError(props.error);
   }, [handleError, props.error]);
-  useGridApiEventHandler(apiRef, GridEvents.componentError, handleError);
+  useGridApiEventHandler(apiRef, 'componentError', handleError);
 }

package/modern/hooks/core/useGridStateInitialization.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["stateId"];
 import * as React from 'react';
 import { GridSignature } from '../utils/useGridApiEventHandler';
-import { GridEvents } from '../../models/events';
 import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
 export const useGridStateInitialization = (apiRef, props) => {
@@ -66,7 +65,7 @@ export const useGridStateInitialization = (apiRef, props) => {
       apiRef.current.state = newState;
 
       if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent(GridEvents.stateChange, newState);
+        apiRef.current.publishEvent('stateChange', newState);
       }
     }
 

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -13,7 +13,6 @@ import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
 import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
@@ -127,11 +126,11 @@ export const useGridColumnHeaders = props => {
   const handleColumnResizeStop = React.useCallback(() => setResizeCol(''), []);
   const handleColumnReorderStart = React.useCallback(params => setDragCol(params.field), []);
   const handleColumnReorderStop = React.useCallback(() => setDragCol(''), []);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleColumnResizeStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleColumnResizeStop);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnReorderStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleScroll);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleColumnResizeStart);
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll);
 
   const getColumns = (params, other = {}) => {
     const {

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents } from '../../../models/events';
 import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { gridColumnMenuSelector } from './columnMenuSelector';
 export const columnMenuStateInitializer = state => _extends({}, state, {
@@ -78,6 +77,7 @@ export const useGridColumnMenu = apiRef => {
    * EVENTS
    */
 
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, hideColumnMenu);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
+  useGridApiEventHandler(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridEvents } from '../../../models/events/gridEvents';
 
 /**
  * @requires useGridColumns (method, event)
@@ -103,5 +102,5 @@ export const useGridColumnSpanning = apiRef => {
     // `colSpan` needs to be recalculated after column reordering
     lookup.current = {};
   }, []);
-  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, handleColumnReorderChange);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnReorderChange);
 };

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

@@ -1,6 +1,5 @@
 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';
@@ -47,13 +46,13 @@ export function useGridColumns(apiRef, props) {
     propModel: props.columnVisibilityModel,
     propOnChange: props.onColumnVisibilityModelChange,
     stateSelector: gridColumnVisibilityModelSelector,
-    changeEvent: GridEvents.columnVisibilityModelChange
+    changeEvent: 'columnVisibilityModelChange'
   });
   const setGridColumnsState = React.useCallback(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
@@ -129,7 +128,7 @@ export function useGridColumns(apiRef, props) {
         colDef: newColumn,
         isVisible
       };
-      apiRef.current.publishEvent(GridEvents.columnVisibilityChange, params);
+      apiRef.current.publishEvent('columnVisibilityChange', params);
     }
   }, [apiRef]);
   const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
@@ -153,7 +152,7 @@ export function useGridColumns(apiRef, props) {
       targetIndex: targetIndexPosition,
       oldIndex: oldIndexPosition
     };
-    apiRef.current.publishEvent(GridEvents.columnOrderChange, params);
+    apiRef.current.publishEvent('columnOrderChange', params);
   }, [apiRef, logger, setGridColumnsState]);
   const setColumnWidth = React.useCallback((field, width) => {
     logger.debug(`Updating column ${field} width to ${width}`);
@@ -164,7 +163,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
@@ -248,7 +247,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;
@@ -277,8 +276,8 @@ export function useGridColumns(apiRef, props) {
     }
   };
 
-  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleGridSizeChange);
-  useGridApiOptionHandler(apiRef, GridEvents.columnVisibilityChange, props.onColumnVisibilityChange);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiOptionHandler(apiRef, 'columnVisibilityChange', props.onColumnVisibilityChange);
   /**
    * APPLIERS
    */

package/modern/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';
@@ -99,12 +98,12 @@ export function useGridDimensions(apiRef, props) {
     fullDimensionsRef.current = newFullDimensions;
 
     if (newFullDimensions.viewportInnerSize.width !== prevDimensions?.viewportInnerSize.width || newFullDimensions.viewportInnerSize.height !== prevDimensions?.viewportInnerSize.height) {
-      apiRef.current.publishEvent(GridEvents.viewportInnerSizeChange, newFullDimensions.viewportInnerSize);
+      apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
   }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
   const resize = React.useCallback(() => {
     updateGridDimensionsRef();
-    apiRef.current.publishEvent(GridEvents.debouncedResize, rootDimensionsRef.current);
+    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
   }, [apiRef, updateGridDimensionsRef]);
   const getRootDimensions = React.useCallback(() => fullDimensionsRef.current, []);
   const getViewportPageSize = React.useCallback(() => {
@@ -170,10 +169,10 @@ export function useGridDimensions(apiRef, props) {
     debounceResize();
   }, [props.autoHeight, debounceResize, logger, resize]);
   useEnhancedEffect(() => updateGridDimensionsRef(), [updateGridDimensionsRef]);
-  useGridApiOptionHandler(apiRef, GridEvents.sortedRowsSet, 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/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -1,18 +1,27 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["id", "field"],
+      _excluded2 = ["id", "field"];
 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';
 const 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 const useGridCellEditing = (apiRef, props) => {
+  const [cellModesModel, setCellModesModel] = React.useState({});
+  const prevCellModesModel = React.useRef({});
   const {
     processRowUpdate,
-    onProcessRowUpdateError
+    onProcessRowUpdateError,
+    cellModesModel: cellModesModelProp,
+    onCellModesModelChange,
+    signature
   } = props;
 
   const runIfEditModeIsCell = callback => (...args) => {
@@ -46,7 +55,7 @@ export const useGridCellEditing = (apiRef, props) => {
       reason: GridCellEditStartReasons.cellDoubleClick
     });
 
-    apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+    apiRef.current.publishEvent('cellEditStart', newParams, event);
   }, [apiRef]);
   const handleCellFocusOut = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.View) {
@@ -57,7 +66,7 @@ export const useGridCellEditing = (apiRef, props) => {
       reason: GridCellEditStopReasons.cellFocusOut
     });
 
-    apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+    apiRef.current.publishEvent('cellEditStop', newParams, event);
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === GridCellModes.Edit) {
@@ -77,7 +86,7 @@ export const useGridCellEditing = (apiRef, props) => {
           reason
         });
 
-        apiRef.current.publishEvent(GridEvents.cellEditStop, newParams, event);
+        apiRef.current.publishEvent('cellEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       let reason;
@@ -99,25 +108,26 @@ export const useGridCellEditing = (apiRef, props) => {
           reason
         });
 
-        apiRef.current.publishEvent(GridEvents.cellEditStart, newParams, event);
+        apiRef.current.publishEvent('cellEditStart', newParams, event);
       }
     }
   }, [apiRef]);
-  const handleCellEditStart = React.useCallback((params, event) => {
+  const handleCellEditStart = React.useCallback(params => {
     const {
       id,
       field,
       reason
     } = params;
-    apiRef.current.startCellEditMode(params);
+    const startCellEditModeParams = {
+      id,
+      field
+    };
 
     if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id,
-        field,
-        value: ''
-      }, event);
+      startCellEditModeParams.deleteValue = true;
     }
+
+    apiRef.current.startCellEditMode(startCellEditModeParams);
   }, [apiRef]);
   const handleCellEditStop = React.useCallback(params => {
     const {
@@ -151,18 +161,56 @@ export const useGridCellEditing = (apiRef, props) => {
       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);
   const getCellMode = React.useCallback((id, field) => {
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
+  const updateCellModesModel = React.useCallback(newModel => {
+    const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
+
+    if (onCellModesModelChange && isNewModelDifferentFromProp) {
+      const 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]);
+  const updateFieldInCellModesModel = React.useCallback((id, field, newProps) => {
+    const newModel = _extends({}, cellModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = _extends({}, newModel[id], {
+        [field]: _extends({}, newProps)
+      });
+    } else {
+      const _cellModesModel$id = cellModesModel[id],
+            otherFields = _objectWithoutPropertiesLoose(_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]);
   const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
     apiRef.current.setState(state => {
       const newEditingState = _extends({}, state.editRows);
@@ -189,18 +237,42 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field
-    } = params;
+    } = params,
+          other = _objectWithoutPropertiesLoose(params, _excluded);
+
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, GridCellModes.View);
+    updateFieldInCellModesModel(id, field, _extends({
+      mode: GridCellModes.Edit
+    }, other));
+  }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
+  const updateStateToStartCellEditMode = React.useCallback(params => {
+    const {
+      id,
+      field,
+      deleteValue
+    } = params;
     const 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]);
   const stopCellEditMode = React.useCallback(params => {
+    const {
+      id,
+      field
+    } = params,
+          other = _objectWithoutPropertiesLoose(params, _excluded2);
+
+    throwIfNotInMode(id, field, GridCellModes.Edit);
+    updateFieldInCellModesModel(id, field, _extends({
+      mode: GridCellModes.View
+    }, other));
+  }, [throwIfNotInMode, updateFieldInCellModesModel]);
+  const updateStateToStopCellEditMode = React.useCallback(async params => {
     const {
       id,
       field,
@@ -210,15 +282,17 @@ export const useGridCellEditing = (apiRef, props) => {
     throwIfNotInMode(id, field, GridCellModes.Edit);
     apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
 
-    const updateFocusedCellIfNeeded = () => {
+    const finishCellEditMode = () => {
       if (cellToFocusAfter !== 'none') {
         apiRef.current.unstable_moveFocusToRelativeCell(id, field, cellToFocusAfter);
       }
+
+      updateOrDeleteFieldState(id, field, null);
+      updateFieldInCellModesModel(id, field, null);
     };
 
     if (ignoreModifications) {
-      updateFocusedCellIfNeeded();
-      updateOrDeleteFieldState(id, field, null);
+      finishCellEditMode();
       return;
     }
 
@@ -247,18 +321,16 @@ export const useGridCellEditing = (apiRef, props) => {
         const row = apiRef.current.getRow(id);
         Promise.resolve(processRowUpdate(rowUpdate, row)).then(finalRowUpdate => {
           apiRef.current.updateRows([finalRowUpdate]);
-          updateFocusedCellIfNeeded();
-          updateOrDeleteFieldState(id, field, null);
+          finishCellEditMode();
         }).catch(handleError);
       } catch (errorThrown) {
         handleError(errorThrown);
       }
     } else {
       apiRef.current.updateRows([rowUpdate]);
-      updateFocusedCellIfNeeded();
-      updateOrDeleteFieldState(id, field, null);
+      finishCellEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateOrDeleteFieldState]);
+  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
   const setCellEditingEditCellValue = React.useCallback(async params => {
     const {
       id,
@@ -335,4 +407,31 @@ export const useGridCellEditing = (apiRef, props) => {
     unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   useGridApiMethod(apiRef, editingApi, 'EditingApi');
+  React.useEffect(() => {
+    if (cellModesModelProp) {
+      updateCellModesModel(cellModesModelProp);
+    }
+  }, [cellModesModelProp, updateCellModesModel]);
+  React.useEffect(() => {
+    const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef);
+    Object.entries(cellModesModel).forEach(([id, fields]) => {
+      Object.entries(fields).forEach(([field, params]) => {
+        const prevMode = prevCellModesModel.current[id]?.[field]?.mode || GridCellModes.View;
+        const originalId = idToIdLookup[id] ?? id;
+
+        if (params.mode === GridCellModes.Edit && prevMode === GridCellModes.View) {
+          updateStateToStartCellEditMode(_extends({
+            id: originalId,
+            field
+          }, params));
+        } else if (params.mode === GridCellModes.View && prevMode === GridCellModes.Edit) {
+          updateStateToStopCellEditMode(_extends({
+            id: originalId,
+            field
+          }, params));
+        }
+      });
+    });
+    prevCellModesModel.current = cellModesModel;
+  }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
 };