@mui/x-data-grid 5.8.0 → 5.11.0

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

@@ -7,14 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridCellEditing = void 0;
 
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
-var _gridEvents = require("../../../models/events/gridEvents");
-
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -25,8 +27,13 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 
 var _warning = require("../../../utils/warning");
 
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
 
+const _excluded = ["id", "field"],
+      _excluded2 = ["id", "field"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -34,9 +41,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const missingOnProcessRowUpdateErrorWarning = (0, _warning.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');
 
 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) => {
@@ -69,7 +81,7 @@ const useGridCellEditing = (apiRef, props) => {
     const newParams = (0, _extends2.default)({}, params, {
       reason: _gridEditCellParams.GridCellEditStartReasons.cellDoubleClick
     });
-    apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStart, newParams, event);
+    apiRef.current.publishEvent('cellEditStart', newParams, event);
   }, [apiRef]);
   const handleCellFocusOut = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridCellModes.View) {
@@ -79,7 +91,7 @@ const useGridCellEditing = (apiRef, props) => {
     const newParams = (0, _extends2.default)({}, params, {
       reason: _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
     });
-    apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStop, newParams, event);
+    apiRef.current.publishEvent('cellEditStop', newParams, event);
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridCellModes.Edit) {
@@ -98,7 +110,7 @@ const useGridCellEditing = (apiRef, props) => {
         const newParams = (0, _extends2.default)({}, params, {
           reason
         });
-        apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStop, newParams, event);
+        apiRef.current.publishEvent('cellEditStop', newParams, event);
       }
     } else if (params.isEditable) {
       let reason;
@@ -119,25 +131,26 @@ const useGridCellEditing = (apiRef, props) => {
         const newParams = (0, _extends2.default)({}, params, {
           reason
         });
-        apiRef.current.publishEvent(_gridEvents.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 === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown || reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown) {
-      apiRef.current.setEditCellValue({
-        id,
-        field,
-        value: ''
-      }, event);
+      startCellEditModeParams.deleteValue = true;
     }
+
+    apiRef.current.startCellEditMode(startCellEditModeParams);
   }, [apiRef]);
   const handleCellEditStop = React.useCallback(params => {
     const {
@@ -171,18 +184,55 @@ const useGridCellEditing = (apiRef, props) => {
       cellToFocusAfter
     });
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellDoubleClick, runIfEditModeIsCell(handleCellDoubleClick));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusOut, runIfEditModeIsCell(handleCellFocusOut));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellKeyDown, runIfEditModeIsCell(handleCellKeyDown));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellEditStart, runIfEditModeIsCell(handleCellEditStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellEditStop, runIfEditModeIsCell(handleCellEditStop));
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.cellEditStart, props.onCellEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.cellEditStop, props.onCellEditStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStart', props.onCellEditStart);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStop', props.onCellEditStop);
   const getCellMode = React.useCallback((id, field) => {
     const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? _gridEditRowModel.GridCellModes.Edit : _gridEditRowModel.GridCellModes.View;
   }, [apiRef]);
+  const updateCellModesModel = React.useCallback(newModel => {
+    const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
+
+    if (onCellModesModelChange && isNewModelDifferentFromProp) {
+      const details = signature === _useGridApiEventHandler.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 = (0, _extends2.default)({}, cellModesModel);
+
+    if (newProps !== null) {
+      newModel[id] = (0, _extends2.default)({}, newModel[id], {
+        [field]: (0, _extends2.default)({}, newProps)
+      });
+    } else {
+      const _cellModesModel$id = cellModesModel[id],
+            otherFields = (0, _objectWithoutPropertiesLoose2.default)(_cellModesModel$id, [field].map(_toPropertyKey2.default)); // 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 = (0, _extends2.default)({}, state.editRows);
@@ -209,18 +259,40 @@ const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field
-    } = params;
+    } = params,
+          other = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded);
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, _gridEditRowModel.GridCellModes.View);
+    updateFieldInCellModesModel(id, field, (0, _extends2.default)({
+      mode: _gridEditRowModel.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 = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded2);
+    throwIfNotInMode(id, field, _gridEditRowModel.GridCellModes.Edit);
+    updateFieldInCellModesModel(id, field, (0, _extends2.default)({
+      mode: _gridEditRowModel.GridCellModes.View
+    }, other));
+  }, [throwIfNotInMode, updateFieldInCellModesModel]);
+  const updateStateToStopCellEditMode = React.useCallback(async params => {
     const {
       id,
       field,
@@ -230,23 +302,22 @@ const useGridCellEditing = (apiRef, props) => {
     throwIfNotInMode(id, field, _gridEditRowModel.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;
     }
 
     const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
-    const column = apiRef.current.getColumn(field);
     const {
-      value,
       error,
       isProcessingProps
     } = editingState[id][field];
@@ -255,12 +326,7 @@ const useGridCellEditing = (apiRef, props) => {
       return;
     }
 
-    const rowUpdate = column.valueSetter ? column.valueSetter({
-      value,
-      row
-    }) : (0, _extends2.default)({}, row, {
-      [field]: value
-    });
+    const rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
@@ -272,20 +338,19 @@ const useGridCellEditing = (apiRef, props) => {
       };
 
       try {
+        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,
@@ -339,13 +404,57 @@ const useGridCellEditing = (apiRef, props) => {
     editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
     return !editingState[id][field].error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
+  const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
+    const column = apiRef.current.getColumn(field);
+    const editingState = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
+    const {
+      value
+    } = editingState[id][field];
+    const row = apiRef.current.getRow(id);
+    return column.valueSetter ? column.valueSetter({
+      value,
+      row
+    }) : (0, _extends2.default)({}, row, {
+      [field]: value
+    });
+  }, [apiRef]);
   const editingApi = {
     getCellMode,
     startCellEditMode,
     stopCellEditMode,
-    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue
+    unstable_setCellEditingEditCellValue: setCellEditingEditCellValue,
+    unstable_getRowWithUpdatedValuesFromCellEditing: getRowWithUpdatedValuesFromCellEditing
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingApi, 'EditingApi');
+  React.useEffect(() => {
+    if (cellModesModelProp) {
+      updateCellModesModel(cellModesModelProp);
+    }
+  }, [cellModesModelProp, updateCellModesModel]);
+  React.useEffect(() => {
+    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef);
+    Object.entries(cellModesModel).forEach(([id, fields]) => {
+      Object.entries(fields).forEach(([field, params]) => {
+        var _prevCellModesModel$c, _prevCellModesModel$c2, _idToIdLookup$id;
+
+        const prevMode = ((_prevCellModesModel$c = prevCellModesModel.current[id]) == null ? void 0 : (_prevCellModesModel$c2 = _prevCellModesModel$c[field]) == null ? void 0 : _prevCellModesModel$c2.mode) || _gridEditRowModel.GridCellModes.View;
+        const originalId = (_idToIdLookup$id = idToIdLookup[id]) != null ? _idToIdLookup$id : id;
+
+        if (params.mode === _gridEditRowModel.GridCellModes.Edit && prevMode === _gridEditRowModel.GridCellModes.View) {
+          updateStateToStartCellEditMode((0, _extends2.default)({
+            id: originalId,
+            field
+          }, params));
+        } else if (params.mode === _gridEditRowModel.GridCellModes.View && prevMode === _gridEditRowModel.GridCellModes.Edit) {
+          updateStateToStopCellEditMode((0, _extends2.default)({
+            id: originalId,
+            field
+          }, params));
+        }
+      });
+    });
+    prevCellModesModel.current = cellModesModel;
+  }, [apiRef, cellModesModel, updateStateToStartCellEditMode, updateStateToStopCellEditMode]);
 };
 
 exports.useGridCellEditing = useGridCellEditing;

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

@@ -15,8 +15,6 @@ var _utils = require("@mui/material/utils");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
-var _gridEvents = require("../../../models/events/gridEvents");
-
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 
 var _keyboardUtils = require("../../../utils/keyboardUtils");
@@ -75,7 +73,7 @@ const useCellEditing = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-    apiRef.current.publishEvent(_gridEvents.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 = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
@@ -133,7 +131,7 @@ const useCellEditing = (apiRef, props) => {
             return false;
           }
 
-          apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditCommit, commitParams, event);
+          apiRef.current.publishEvent('cellEditCommit', commitParams, event);
           return true;
         });
       }
@@ -147,7 +145,7 @@ const useCellEditing = (apiRef, props) => {
     }
 
     if (!hasError) {
-      apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditCommit, commitParams, event);
+      apiRef.current.publishEvent('cellEditCommit', commitParams, event);
       return true;
     }
 
@@ -216,7 +214,7 @@ const useCellEditing = (apiRef, props) => {
     const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
 
     if (!isEditMode && (0, _keyboardUtils.isCellEnterEditModeKeys)(event.key) && !isModifierKeyPressed && !(event.key === ' ' && event.shiftKey)) {
-      apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStart, params, event);
+      apiRef.current.publishEvent('cellEditStart', params, event);
     }
 
     if (!isEditMode && (0, _keyboardUtils.isDeleteKeys)(event.key)) {
@@ -229,7 +227,7 @@ const useCellEditing = (apiRef, props) => {
         id,
         field
       }, event);
-      apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStop, params, event);
+      apiRef.current.publishEvent('cellEditStop', params, event);
     }
 
     if (isEditMode && (0, _keyboardUtils.isCellEditCommitKeys)(event.key)) {
@@ -245,7 +243,7 @@ const useCellEditing = (apiRef, props) => {
     }
 
     if (isEditMode && (0, _keyboardUtils.isCellExitEditModeKeys)(event.key)) {
-      apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStop, params, event);
+      apiRef.current.publishEvent('cellEditStop', params, event);
     }
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
@@ -253,7 +251,7 @@ const useCellEditing = (apiRef, props) => {
       return;
     }
 
-    apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStart, params, event);
+    apiRef.current.publishEvent('cellEditStart', params, event);
   }, [apiRef]);
 
   const commitPropsAndExit = async (params, event) => {
@@ -262,7 +260,7 @@ const useCellEditing = (apiRef, props) => {
     }
 
     await apiRef.current.commitCellChange(params, event);
-    apiRef.current.publishEvent(_gridEvents.GridEvents.cellEditStop, params, event);
+    apiRef.current.publishEvent('cellEditStop', params, event);
   };
 
   const handleCellFocusOut = (0, _utils.useEventCallback)((params, event) => {
@@ -303,7 +301,7 @@ const useCellEditing = (apiRef, props) => {
     }
 
     if ((0, _keyboardUtils.isCellEditCommitKeys)(event.key)) {
-      apiRef.current.publishEvent(_gridEvents.GridEvents.cellNavigationKeyDown, params, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', params, event);
       return;
     }
 
@@ -360,17 +358,17 @@ const useCellEditing = (apiRef, props) => {
       }));
     }
   }, [apiRef]);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellKeyDown, buildCallback(handleCellKeyDown));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellDoubleClick, buildCallback(handleCellDoubleClick));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellFocusOut, buildCallback(handleCellFocusOut));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.columnHeaderDragStart, buildCallback(handleColumnHeaderDragStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellEditStart, buildCallback(handleCellEditStart));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellEditStop, buildCallback(handleCellEditStop));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.cellEditCommit, buildCallback(handleCellEditCommit));
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _gridEvents.GridEvents.editCellPropsChange, buildCallback(handleEditCellPropsChange));
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.cellEditCommit, props.onCellEditCommit);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.cellEditStart, props.onCellEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _gridEvents.GridEvents.cellEditStop, props.onCellEditStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', buildCallback(handleCellKeyDown));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', buildCallback(handleCellDoubleClick));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', buildCallback(handleCellFocusOut));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', buildCallback(handleColumnHeaderDragStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStart', buildCallback(handleCellEditStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStop', buildCallback(handleCellEditStop));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditCommit', buildCallback(handleCellEditCommit));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'editCellPropsChange', buildCallback(handleEditCellPropsChange));
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditCommit', props.onCellEditCommit);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStart', props.onCellEditStart);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStop', props.onCellEditStop);
 };
 
 exports.useCellEditing = useCellEditing;

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

@@ -121,7 +121,7 @@ const useGridEditing = (apiRef, props) => {
     } = params;
     return new Promise(resolve => {
       maybeDebounce(id, field, debounceMs, async () => {
-        const setEditCellValueToCall = props.editMode === 'row' ? apiRef.current.unstable_setRowEditingEditCellValue : apiRef.current.unstable_setCellEditingEditCellValue; // Check if the cell is in edit mode
+        const setEditCellValueToCall = props.editMode === _gridEditRowModel.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) === _gridEditRowModel.GridCellModes.Edit) {
@@ -131,10 +131,14 @@ const useGridEditing = (apiRef, props) => {
       });
     });
   }, [apiRef, props.editMode]);
+  const getRowWithUpdatedValues = React.useCallback((id, field) => {
+    return props.editMode === _gridEditRowModel.GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
+  }, [apiRef, props.editMode]);
   const editingSharedApi = {
     isCellEditable,
     setEditCellValue,
-    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation
+    unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingSharedApi, 'EditingApi');
 };

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

@@ -12,8 +12,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _events = require("../../../models/events");
-
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -56,7 +54,7 @@ function useGridEditing(apiRef, props) {
     propModel: props.editRowsModel,
     propOnChange: props.onEditRowsModelChange,
     stateSelector: _gridEditRowsSelector.gridEditRowsStateSelector,
-    changeEvent: _events.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]);
@@ -124,7 +122,7 @@ function useGridEditing(apiRef, props) {
           value: params.value
         }
       };
-      return apiRef.current.publishEvent(_events.GridEvents.editCellPropsChange, newParams, event);
+      return apiRef.current.publishEvent('editCellPropsChange', newParams, event);
     });
   }, [apiRef, props.editMode, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.preventCommitWhileValidating]);
   const parseValue = React.useCallback((id, field, value) => {
@@ -172,8 +170,8 @@ function useGridEditing(apiRef, props) {
       event.preventDefault();
     }
   }, []);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, _events.GridEvents.cellMouseDown, preventTextSelection);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, _events.GridEvents.editCellPropsChange, props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', preventTextSelection);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'editCellPropsChange', props.onEditCellPropsChange); // TODO v6: remove, use `preProcessEditCellProps` instead
 
   const editingSharedApi = {
     isCellEditable,