@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.0

package/hooks/features/editing/useGridRowEditing.js

@@ -1,26 +1,36 @@
-import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRowEditing = void 0;
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _warning = require("@mui/x-internals/warning");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _gridEditRowModel = require("../../../models/gridEditRowModel");
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _gridEditingSelectors = require("./gridEditingSelectors");
+var _keyboardUtils = require("../../../utils/keyboardUtils");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _utils = require("../../../utils/utils");
+var _gridRowParams = require("../../../models/params/gridRowParams");
+var _colDef = require("../../../colDef");
+var _utils2 = require("./utils");
 const _excluded = ["id"],
   _excluded2 = ["id"];
-import * as React from 'react';
-import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { warnOnce } from '@mui/x-internals/warning';
-import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
-import { GridEditModes, GridRowModes } from "../../../models/gridEditRowModel.js";
-import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
-import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
-import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
-import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
-import { deepClone } from "../../../utils/utils.js";
-import { GridRowEditStopReasons, GridRowEditStartReasons } from "../../../models/params/gridRowParams.js";
-import { GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
-import { getDefaultCellValue } from "./utils.js";
-export const useGridRowEditing = (apiRef, props) => {
+const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
+  const prevRowValuesLookup = React.useRef({});
   const focusTimeout = React.useRef(undefined);
   const nextFocusedCell = React.useRef(null);
   const {
@@ -30,7 +40,7 @@ export const useGridRowEditing = (apiRef, props) => {
     onRowModesModelChange
   } = props;
   const runIfEditModeIsRow = callback => (...args) => {
-    if (props.editMode === GridEditModes.Row) {
+    if (props.editMode === _gridEditRowModel.GridEditModes.Row) {
       callback(...args);
     }
   };
@@ -46,20 +56,20 @@ export const useGridRowEditing = (apiRef, props) => {
     }
   }, [apiRef]);
   const hasFieldsWithErrors = React.useCallback(rowId => {
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
     return Object.values(editingState[rowId]).some(fieldProps => fieldProps.error);
   }, [apiRef]);
   const handleCellDoubleClick = React.useCallback((params, event) => {
     if (!params.isEditable) {
       return;
     }
-    if (apiRef.current.getRowMode(params.id) === GridRowModes.Edit) {
+    if (apiRef.current.getRowMode(params.id) === _gridEditRowModel.GridRowModes.Edit) {
       return;
     }
     const rowParams = apiRef.current.getRowParams(params.id);
-    const newParams = _extends({}, rowParams, {
+    const newParams = (0, _extends2.default)({}, rowParams, {
       field: params.field,
-      reason: GridRowEditStartReasons.cellDoubleClick
+      reason: _gridRowParams.GridRowEditStartReasons.cellDoubleClick
     });
     apiRef.current.publishEvent('rowEditStart', newParams, event);
   }, [apiRef]);
@@ -70,7 +80,7 @@ export const useGridRowEditing = (apiRef, props) => {
     if (!params.isEditable) {
       return;
     }
-    if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
+    if (apiRef.current.getRowMode(params.id) === _gridEditRowModel.GridRowModes.View) {
       return;
     }
     // The mechanism to detect if we can stop editing a row is different from
@@ -87,16 +97,16 @@ export const useGridRowEditing = (apiRef, props) => {
         }
 
         // The row may already changed its mode
-        if (apiRef.current.getRowMode(params.id) === GridRowModes.View) {
+        if (apiRef.current.getRowMode(params.id) === _gridEditRowModel.GridRowModes.View) {
           return;
         }
         if (hasFieldsWithErrors(params.id)) {
           return;
         }
         const rowParams = apiRef.current.getRowParams(params.id);
-        const newParams = _extends({}, rowParams, {
+        const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
-          reason: GridRowEditStopReasons.rowFocusOut
+          reason: _gridRowParams.GridRowEditStopReasons.rowFocusOut
         });
         apiRef.current.publishEvent('rowEditStop', newParams, event);
       }
@@ -108,7 +118,7 @@ export const useGridRowEditing = (apiRef, props) => {
     };
   }, []);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    if (params.cellMode === GridRowModes.Edit) {
+    if (params.cellMode === _gridEditRowModel.GridRowModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
       // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
@@ -116,13 +126,13 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       let reason;
       if (event.key === 'Escape') {
-        reason = GridRowEditStopReasons.escapeKeyDown;
+        reason = _gridRowParams.GridRowEditStopReasons.escapeKeyDown;
       } else if (event.key === 'Enter') {
-        reason = GridRowEditStopReasons.enterKeyDown;
+        reason = _gridRowParams.GridRowEditStopReasons.enterKeyDown;
       } else if (event.key === 'Tab') {
-        const columnFields = gridVisibleColumnFieldsSelector(apiRef).filter(field => {
+        const columnFields = (0, _gridColumnsSelector.gridVisibleColumnFieldsSelector)(apiRef).filter(field => {
           const column = apiRef.current.getColumn(field);
-          if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+          if (column.type === _colDef.GRID_ACTIONS_COLUMN_TYPE) {
             return true;
           }
           return apiRef.current.isCellEditable(apiRef.current.getCellParams(params.id, field));
@@ -130,11 +140,11 @@ export const useGridRowEditing = (apiRef, props) => {
         if (event.shiftKey) {
           if (params.field === columnFields[0]) {
             // Exit if user pressed Shift+Tab on the first field
-            reason = GridRowEditStopReasons.shiftTabKeyDown;
+            reason = _gridRowParams.GridRowEditStopReasons.shiftTabKeyDown;
           }
         } else if (params.field === columnFields[columnFields.length - 1]) {
           // Exit if user pressed Tab on the last field
-          reason = GridRowEditStopReasons.tabKeyDown;
+          reason = _gridRowParams.GridRowEditStopReasons.tabKeyDown;
         }
 
         // Always prevent going to the next element in the tab sequence because the focus is
@@ -147,10 +157,10 @@ export const useGridRowEditing = (apiRef, props) => {
         }
       }
       if (reason) {
-        if (reason !== GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
+        if (reason !== _gridRowParams.GridRowEditStopReasons.escapeKeyDown && hasFieldsWithErrors(params.id)) {
           return;
         }
-        const newParams = _extends({}, apiRef.current.getRowParams(params.id), {
+        const newParams = (0, _extends2.default)({}, apiRef.current.getRowParams(params.id), {
           reason,
           field: params.field
         });
@@ -166,18 +176,18 @@ export const useGridRowEditing = (apiRef, props) => {
       if (!canStartEditing) {
         return;
       }
-      if (isPrintableKey(event)) {
-        reason = GridRowEditStartReasons.printableKeyDown;
-      } else if (isPasteShortcut(event)) {
-        reason = GridRowEditStartReasons.printableKeyDown;
+      if ((0, _keyboardUtils.isPrintableKey)(event)) {
+        reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
+      } else if ((0, _keyboardUtils.isPasteShortcut)(event)) {
+        reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
       } else if (event.key === 'Enter') {
-        reason = GridRowEditStartReasons.enterKeyDown;
+        reason = _gridRowParams.GridRowEditStartReasons.enterKeyDown;
       } else if (event.key === 'Backspace' || event.key === 'Delete') {
-        reason = GridRowEditStartReasons.deleteKeyDown;
+        reason = _gridRowParams.GridRowEditStartReasons.deleteKeyDown;
       }
       if (reason) {
         const rowParams = apiRef.current.getRowParams(params.id);
-        const newParams = _extends({}, rowParams, {
+        const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
           reason
         });
@@ -195,7 +205,7 @@ export const useGridRowEditing = (apiRef, props) => {
       id,
       fieldToFocus: field
     };
-    if (reason === GridRowEditStartReasons.printableKeyDown || reason === GridRowEditStartReasons.deleteKeyDown) {
+    if (reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown || reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
     apiRef.current.startRowEditMode(startRowEditModeParams);
@@ -208,11 +218,11 @@ export const useGridRowEditing = (apiRef, props) => {
     } = params;
     apiRef.current.runPendingEditCellValueMutation(id);
     let cellToFocusAfter;
-    if (reason === GridRowEditStopReasons.enterKeyDown) {
+    if (reason === _gridRowParams.GridRowEditStopReasons.enterKeyDown) {
       cellToFocusAfter = 'below';
-    } else if (reason === GridRowEditStopReasons.tabKeyDown) {
+    } else if (reason === _gridRowParams.GridRowEditStopReasons.tabKeyDown) {
       cellToFocusAfter = 'right';
-    } else if (reason === GridRowEditStopReasons.shiftTabKeyDown) {
+    } else if (reason === _gridRowParams.GridRowEditStopReasons.shiftTabKeyDown) {
       cellToFocusAfter = 'left';
     }
     const ignoreModifications = reason === 'escapeKeyDown';
@@ -223,23 +233,22 @@ export const useGridRowEditing = (apiRef, props) => {
       cellToFocusAfter
     });
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
-  useGridApiEventHandler(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
-  useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
-  useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsRow(handleCellKeyDown));
-  useGridApiEventHandler(apiRef, 'rowEditStart', runIfEditModeIsRow(handleRowEditStart));
-  useGridApiEventHandler(apiRef, 'rowEditStop', runIfEditModeIsRow(handleRowEditStop));
-  useGridApiOptionHandler(apiRef, 'rowEditStart', props.onRowEditStart);
-  useGridApiOptionHandler(apiRef, 'rowEditStop', props.onRowEditStop);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsRow(handleCellKeyDown));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStart', runIfEditModeIsRow(handleRowEditStart));
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowEditStop', runIfEditModeIsRow(handleRowEditStop));
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStart', props.onRowEditStart);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rowEditStop', props.onRowEditStop);
   const getRowMode = React.useCallback(id => {
-    if (props.editMode === GridEditModes.Cell) {
-      return GridRowModes.View;
-    }
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
-    return isEditing ? GridRowModes.Edit : GridRowModes.View;
+    const isEditing = (0, _gridEditingSelectors.gridRowIsEditingSelector)(apiRef, {
+      rowId: id,
+      editMode: props.editMode
+    });
+    return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
   }, [apiRef, props.editMode]);
-  const updateRowModesModel = useEventCallback(newModel => {
+  const updateRowModesModel = (0, _useEventCallback.default)(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
       onRowModesModelChange(newModel, {
@@ -254,9 +263,9 @@ export const useGridRowEditing = (apiRef, props) => {
     apiRef.current.publishEvent('rowModesModelChange', newModel);
   });
   const updateRowInRowModesModel = React.useCallback((id, newProps) => {
-    const newModel = _extends({}, rowModesModelRef.current);
+    const newModel = (0, _extends2.default)({}, rowModesModelRef.current);
     if (newProps !== null) {
-      newModel[id] = _extends({}, newProps);
+      newModel[id] = (0, _extends2.default)({}, newProps);
     } else {
       delete newModel[id];
     }
@@ -264,24 +273,23 @@ export const useGridRowEditing = (apiRef, props) => {
   }, [updateRowModesModel]);
   const updateOrDeleteRowState = React.useCallback((id, newProps) => {
     apiRef.current.setState(state => {
-      const newEditingState = _extends({}, state.editRows);
+      const newEditingState = (0, _extends2.default)({}, state.editRows);
       if (newProps !== null) {
         newEditingState[id] = newProps;
       } else {
         delete newEditingState[id];
       }
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         editRows: newEditingState
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const updateOrDeleteFieldState = React.useCallback((id, field, newProps) => {
     apiRef.current.setState(state => {
-      const newEditingState = _extends({}, state.editRows);
+      const newEditingState = (0, _extends2.default)({}, state.editRows);
       if (newProps !== null) {
-        newEditingState[id] = _extends({}, newEditingState[id], {
-          [field]: _extends({}, newProps)
+        newEditingState[id] = (0, _extends2.default)({}, newEditingState[id], {
+          [field]: (0, _extends2.default)({}, newProps)
         });
       } else {
         delete newEditingState[id][field];
@@ -289,30 +297,30 @@ export const useGridRowEditing = (apiRef, props) => {
           delete newEditingState[id];
         }
       }
-      return _extends({}, state, {
+      return (0, _extends2.default)({}, state, {
         editRows: newEditingState
       });
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const startRowEditMode = React.useCallback(params => {
     const {
         id
       } = params,
-      other = _objectWithoutPropertiesLoose(params, _excluded);
-    throwIfNotInMode(id, GridRowModes.View);
-    updateRowInRowModesModel(id, _extends({
-      mode: GridRowModes.Edit
+      other = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded);
+    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.View);
+    updateRowInRowModesModel(id, (0, _extends2.default)({
+      mode: _gridEditRowModel.GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStartRowEditMode = useEventCallback(params => {
+  const updateStateToStartRowEditMode = (0, _useEventCallback.default)(params => {
     const {
       id,
       fieldToFocus,
       deleteValue,
       initialValue
     } = params;
-    const columnFields = gridColumnFieldsSelector(apiRef);
+    const row = apiRef.current.getRow(id);
+    const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
       const cellParams = apiRef.current.getCellParams(id, field);
       if (!cellParams.isEditable) {
@@ -322,7 +330,7 @@ export const useGridRowEditing = (apiRef, props) => {
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         if (deleteValue) {
-          newValue = getDefaultCellValue(column);
+          newValue = (0, _utils2.getDefaultCellValue)(column);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -334,6 +342,7 @@ export const useGridRowEditing = (apiRef, props) => {
       };
       return acc;
     }, {});
+    prevRowValuesLookup.current[id] = row;
     updateOrDeleteRowState(id, newProps);
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
@@ -341,17 +350,17 @@ export const useGridRowEditing = (apiRef, props) => {
     columnFields.filter(field => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue).forEach(field => {
       const column = apiRef.current.getColumn(field);
       const value = apiRef.current.getCellValue(id, field);
-      const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;
+      const newValue = deleteValue ? (0, _utils2.getDefaultCellValue)(column) : initialValue ?? value;
       Promise.resolve(column.preProcessEditCellProps({
         id,
-        row: apiRef.current.getRow(id),
+        row,
         props: newProps[field],
         hasChanged: newValue !== value
       })).then(processedProps => {
         // Check if still in edit mode before updating
-        if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
-          const editingState = gridEditRowsStateSelector(apiRef.current.state);
-          updateOrDeleteFieldState(id, field, _extends({}, processedProps, {
+        if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
+          const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
+          updateOrDeleteFieldState(id, field, (0, _extends2.default)({}, processedProps, {
             value: editingState[id][field].value,
             isProcessingProps: false
           }));
@@ -363,13 +372,13 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
         id
       } = params,
-      other = _objectWithoutPropertiesLoose(params, _excluded2);
-    throwIfNotInMode(id, GridRowModes.Edit);
-    updateRowInRowModesModel(id, _extends({
-      mode: GridRowModes.View
+      other = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded2);
+    throwIfNotInMode(id, _gridEditRowModel.GridRowModes.Edit);
+    updateRowInRowModesModel(id, (0, _extends2.default)({
+      mode: _gridEditRowModel.GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStopRowEditMode = useEventCallback(params => {
+  const updateStateToStopRowEditMode = (0, _useEventCallback.default)(params => {
     const {
       id,
       ignoreModifications,
@@ -383,38 +392,42 @@ export const useGridRowEditing = (apiRef, props) => {
       }
       updateOrDeleteRowState(id, null);
       updateRowInRowModesModel(id, null);
+      delete prevRowValuesLookup.current[id];
     };
     if (ignoreModifications) {
       finishRowEditMode();
       return;
     }
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
-    const row = apiRef.current.getRow(id);
+    const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
+    const row = prevRowValuesLookup.current[id];
     const isSomeFieldProcessingProps = Object.values(editingState[id]).some(fieldProps => fieldProps.isProcessingProps);
     if (isSomeFieldProcessingProps) {
-      prevRowModesModel.current[id].mode = GridRowModes.Edit;
+      prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       return;
     }
     if (hasFieldsWithErrors(id)) {
-      prevRowModesModel.current[id].mode = GridRowModes.Edit;
+      prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
       // Revert the mode in the rowModesModel prop back to "edit"
       updateRowInRowModesModel(id, {
-        mode: GridRowModes.Edit
+        mode: _gridEditRowModel.GridRowModes.Edit
       });
       return;
     }
-    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(id);
+    const rowUpdate = apiRef.current.getRowWithUpdatedValuesFromRowEditing(row.id);
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = GridRowModes.Edit;
-        // Revert the mode in the rowModesModel prop back to "edit"
-        updateRowInRowModesModel(id, {
-          mode: GridRowModes.Edit
-        });
+        // The row might have been deleted
+        if (prevRowModesModel.current[id]) {
+          prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
+          // Revert the mode in the rowModesModel prop back to "edit"
+          updateRowInRowModesModel(id, {
+            mode: _gridEditRowModel.GridRowModes.Edit
+          });
+        }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
         } else if (process.env.NODE_ENV !== 'production') {
-          warnOnce(['MUI X: 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, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
+          (0, _warning.warnOnce)(['MUI X: 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, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };
       try {
@@ -447,8 +460,8 @@ export const useGridRowEditing = (apiRef, props) => {
     if (column.valueParser && !skipValueParser) {
       parsedValue = column.valueParser(value, row, column, apiRef);
     }
-    let editingState = gridEditRowsStateSelector(apiRef.current.state);
-    let newProps = _extends({}, editingState[id][field], {
+    let editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
+    let newProps = (0, _extends2.default)({}, editingState[id][field], {
       value: parsedValue,
       changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
     });
@@ -459,12 +472,12 @@ export const useGridRowEditing = (apiRef, props) => {
       const promises = [];
       if (column.preProcessEditCellProps) {
         const hasChanged = newProps.value !== editingState[id][field].value;
-        newProps = _extends({}, newProps, {
+        newProps = (0, _extends2.default)({}, newProps, {
           isProcessingProps: true
         });
         updateOrDeleteFieldState(id, field, newProps);
         const _editingState$id = editingState[id],
-          otherFieldsProps = _objectWithoutPropertiesLoose(_editingState$id, [field].map(_toPropertyKey));
+          otherFieldsProps = (0, _objectWithoutPropertiesLoose2.default)(_editingState$id, [field].map(_toPropertyKey2.default));
         const promise = Promise.resolve(column.preProcessEditCellProps({
           id,
           row,
@@ -474,12 +487,12 @@ export const useGridRowEditing = (apiRef, props) => {
         })).then(processedProps => {
           // Check again if the row is in edit mode because the user may have
           // discarded the changes while the props were being processed.
-          if (apiRef.current.getRowMode(id) === GridRowModes.View) {
+          if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.View) {
             resolve(false);
             return;
           }
-          editingState = gridEditRowsStateSelector(apiRef.current.state);
-          processedProps = _extends({}, processedProps, {
+          editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
+          processedProps = (0, _extends2.default)({}, processedProps, {
             isProcessingProps: false
           });
           // We don't reuse the value from the props pre-processing because when the
@@ -498,13 +511,13 @@ export const useGridRowEditing = (apiRef, props) => {
         if (!fieldColumn.preProcessEditCellProps) {
           return;
         }
-        fieldProps = _extends({}, fieldProps, {
+        fieldProps = (0, _extends2.default)({}, fieldProps, {
           isProcessingProps: true
         });
         updateOrDeleteFieldState(id, thisField, fieldProps);
-        editingState = gridEditRowsStateSelector(apiRef.current.state);
+        editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
         const _editingState$id2 = editingState[id],
-          otherFieldsProps = _objectWithoutPropertiesLoose(_editingState$id2, [thisField].map(_toPropertyKey));
+          otherFieldsProps = (0, _objectWithoutPropertiesLoose2.default)(_editingState$id2, [thisField].map(_toPropertyKey2.default));
         const promise = Promise.resolve(fieldColumn.preProcessEditCellProps({
           id,
           row,
@@ -514,11 +527,11 @@ export const useGridRowEditing = (apiRef, props) => {
         })).then(processedProps => {
           // Check again if the row is in edit mode because the user may have
           // discarded the changes while the props were being processed.
-          if (apiRef.current.getRowMode(id) === GridRowModes.View) {
+          if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.View) {
             resolve(false);
             return;
           }
-          processedProps = _extends({}, processedProps, {
+          processedProps = (0, _extends2.default)({}, processedProps, {
             isProcessingProps: false
           });
           updateOrDeleteFieldState(id, thisField, processedProps);
@@ -526,8 +539,8 @@ export const useGridRowEditing = (apiRef, props) => {
         promises.push(promise);
       });
       Promise.all(promises).then(() => {
-        if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
-          editingState = gridEditRowsStateSelector(apiRef.current.state);
+        if (apiRef.current.getRowMode(id) === _gridEditRowModel.GridRowModes.Edit) {
+          editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
           resolve(!editingState[id][field].error);
         } else {
           resolve(false);
@@ -536,15 +549,17 @@ export const useGridRowEditing = (apiRef, props) => {
     });
   }, [apiRef, throwIfNotEditable, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromRowEditing = React.useCallback(id => {
-    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef);
     const row = apiRef.current.getRow(id);
     if (!editingState[id]) {
       return apiRef.current.getRow(id);
     }
-    let rowUpdate = _extends({}, row);
+    let rowUpdate = (0, _extends2.default)({}, prevRowValuesLookup.current[id], row);
     Object.entries(editingState[id]).forEach(([field, fieldProps]) => {
       const column = apiRef.current.getColumn(field);
-      if (column.valueSetter) {
+      // Column might have been removed
+      // see https://github.com/mui/mui-x/pull/16888
+      if (column?.valueSetter) {
         rowUpdate = column.valueSetter(fieldProps.value, rowUpdate, column, apiRef);
       } else {
         rowUpdate[field] = fieldProps.value;
@@ -561,8 +576,8 @@ export const useGridRowEditing = (apiRef, props) => {
     setRowEditingEditCellValue,
     getRowWithUpdatedValuesFromRowEditing
   };
-  useGridApiMethod(apiRef, editingApi, 'public');
-  useGridApiMethod(apiRef, editingPrivateApi, 'private');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingPrivateApi, 'private');
   React.useEffect(() => {
     if (rowModesModelProp) {
       updateRowModesModel(rowModesModelProp);
@@ -570,29 +585,30 @@ export const useGridRowEditing = (apiRef, props) => {
   }, [rowModesModelProp, updateRowModesModel]);
 
   // Run this effect synchronously so that the keyboard event can impact the yet-to-be-rendered input.
-  useEnhancedEffect(() => {
-    const rowsLookup = gridRowsLookupSelector(apiRef);
+  (0, _useEnhancedEffect.default)(() => {
+    const rowsLookup = (0, _gridRowsSelector.gridRowsLookupSelector)(apiRef);
 
     // Update the ref here because updateStateToStopRowEditMode may change it later
     const copyOfPrevRowModesModel = prevRowModesModel.current;
-    prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
+    prevRowModesModel.current = (0, _utils.deepClone)(rowModesModel); // Do a deep-clone because the attributes might be changed later
 
     const ids = new Set([...Object.keys(rowModesModel), ...Object.keys(copyOfPrevRowModesModel)]);
     Array.from(ids).forEach(id => {
       const params = rowModesModel[id] ?? {
-        mode: GridRowModes.View
+        mode: _gridEditRowModel.GridRowModes.View
       };
-      const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
-      const originalId = apiRef.current.getRowId(rowsLookup[id]) ?? id;
-      if (params.mode === GridRowModes.Edit && prevMode === GridRowModes.View) {
-        updateStateToStartRowEditMode(_extends({
+      const prevMode = copyOfPrevRowModesModel[id]?.mode || _gridEditRowModel.GridRowModes.View;
+      const originalId = rowsLookup[id] ? apiRef.current.getRowId(rowsLookup[id]) : id;
+      if (params.mode === _gridEditRowModel.GridRowModes.Edit && prevMode === _gridEditRowModel.GridRowModes.View) {
+        updateStateToStartRowEditMode((0, _extends2.default)({
           id: originalId
         }, params));
-      } else if (params.mode === GridRowModes.View && prevMode === GridRowModes.Edit) {
-        updateStateToStopRowEditMode(_extends({
+      } else if (params.mode === _gridEditRowModel.GridRowModes.View && prevMode === _gridEditRowModel.GridRowModes.Edit) {
+        updateStateToStopRowEditMode((0, _extends2.default)({
           id: originalId
         }, params));
       }
     });
   }, [apiRef, rowModesModel, updateStateToStartRowEditMode, updateStateToStopRowEditMode]);
-};
+};
+exports.useGridRowEditing = useGridRowEditing;

package/hooks/features/editing/utils.d.ts

@@ -1,2 +1,2 @@
-import { GridColDef } from '../../../models/colDef/gridColDef';
-export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | null | undefined;
+import { GridColDef } from "../../../models/colDef/gridColDef.js";
+export declare const getDefaultCellValue: (colDef: GridColDef) => false | "" | null | undefined;

package/hooks/features/editing/utils.js

@@ -1,4 +1,10 @@
-export const getDefaultCellValue = colDef => {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultCellValue = void 0;
+const getDefaultCellValue = colDef => {
   switch (colDef.type) {
     case 'boolean':
       return false;
@@ -12,4 +18,5 @@ export const getDefaultCellValue = colDef => {
     default:
       return '';
   }
-};
+};
+exports.getDefaultCellValue = getDefaultCellValue;

package/hooks/features/events/useGridEvents.d.ts

@@ -1,8 +1,8 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 /**
  * @requires useGridFocus (event) - can be after, async only
  * @requires useGridColumns (event) - can be after, async only
  */
-export declare function useGridEvents(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;
+export declare function useGridEvents(apiRef: RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'onColumnHeaderClick' | 'onColumnHeaderDoubleClick' | 'onColumnHeaderContextMenu' | 'onColumnHeaderOver' | 'onColumnHeaderOut' | 'onColumnHeaderEnter' | 'onColumnHeaderLeave' | 'onCellClick' | 'onCellDoubleClick' | 'onCellKeyDown' | 'onPreferencePanelClose' | 'onPreferencePanelOpen' | 'onRowDoubleClick' | 'onRowClick' | 'onStateChange' | 'onMenuOpen' | 'onMenuClose'>): void;