@mui/x-data-grid 5.10.0 → 5.11.0

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]);
 };

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

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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';
@@ -51,7 +50,7 @@ export const 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]);
   const getCellMode = React.useCallback((id, field) => {
     const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
@@ -108,7 +107,7 @@ export const useCellEditing = (apiRef, props) => {
             return false;
           }
 
-          apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+          apiRef.current.publishEvent('cellEditCommit', commitParams, event);
           return true;
         });
       }
@@ -122,7 +121,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     if (!hasError) {
-      apiRef.current.publishEvent(GridEvents.cellEditCommit, commitParams, event);
+      apiRef.current.publishEvent('cellEditCommit', commitParams, event);
       return true;
     }
 
@@ -191,7 +190,7 @@ export const useCellEditing = (apiRef, props) => {
     const 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)) {
@@ -204,7 +203,7 @@ export const useCellEditing = (apiRef, props) => {
         id,
         field
       }, event);
-      apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+      apiRef.current.publishEvent('cellEditStop', params, event);
     }
 
     if (isEditMode && isCellEditCommitKeys(event.key)) {
@@ -220,7 +219,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     if (isEditMode && isCellExitEditModeKeys(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+      apiRef.current.publishEvent('cellEditStop', params, event);
     }
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -228,7 +227,7 @@ export const useCellEditing = (apiRef, props) => {
       return;
     }
 
-    apiRef.current.publishEvent(GridEvents.cellEditStart, params, event);
+    apiRef.current.publishEvent('cellEditStart', params, event);
   }, [apiRef]);
 
   const commitPropsAndExit = async (params, event) => {
@@ -237,7 +236,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     await apiRef.current.commitCellChange(params, event);
-    apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);
+    apiRef.current.publishEvent('cellEditStop', params, event);
   };
 
   const handleCellFocusOut = useEventCallback((params, event) => {
@@ -278,7 +277,7 @@ export const useCellEditing = (apiRef, props) => {
     }
 
     if (isCellEditCommitKeys(event.key)) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, params, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       return;
     }
 
@@ -336,15 +335,15 @@ export const 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/modern/hooks/features/editRows/useGridEditing.old.js

@@ -1,6 +1,5 @@
 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';
@@ -27,7 +26,7 @@ export function useGridEditing(apiRef, props) {
     propModel: props.editRowsModel,
     propOnChange: props.onEditRowsModelChange,
     stateSelector: gridEditRowsStateSelector,
-    changeEvent: GridEvents.editRowsModelChange
+    changeEvent: 'editRowsModelChange'
   });
   const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
@@ -93,7 +92,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.experimentalFeatures?.preventCommitWhileValidating]);
   const parseValue = React.useCallback((id, field, value) => {
@@ -142,8 +141,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
 
   const editingSharedApi = {
     isCellEditable,