@mui/x-data-grid 5.17.1 → 5.17.3

package/CHANGELOG.md

@@ -3,6 +3,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.3
+
+_Sep 16, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📝 Fix lost characters when typing into fields in the DataGrid (#5646) @m4theushw
+- 🌏 New locale and improvements for pickers
+- 🎁 Improve support to theme augmentation for pickers
+
+### `@mui/x-data-grid@v5.17.3` / `@mui/x-data-grid-pro@v5.17.3` / `@mui/x-data-grid-premium@v5.17.3`
+
+#### Changes
+
+- [DataGrid] Only update input with value prop if debounce is off (#5646) @m4theushw
+
+### `@mui/x-date-pickers@v5.0.2` / `@mui/x-date-pickers-pro@v5.0.2`
+
+#### Changes
+
+- [pickers] Add Icelandic (is-IS) locale (#6137) @elvatli
+- [pickers] Fix `@mui/x-date-pickers` theme augmentation and style overriding (#6156) @LukasTy
+- [pickers] Fix `@mui/x-date-pickers-pro` theme augmentation (#6096) @LukasTy
+- [pickers] Improve German (de-DE) locale (#6138) @alexfauquette
+
+### Docs
+
+- [docs] Improve main demo to show new functionalities (#5292) @joserodolfofreitas
+
+### Core
+
+- [core] Update to typescript 4.8.3 (#6136) @flaviendelangle
+- [core] Update RFC template (#6100) @bytasv
+
+## 5.17.2
+
+_Sep 9, 2022_
+
+This release will the last regular release for our `v5` packages.
+From now on, we'll be focusing on developing MUI X v6.
+You can check the [roadmap](https://github.com/mui/mui-x/projects/1) for more details on what's coming next.
+
+And if you'd like to help, please consider volunteering to give us a [user interview](https://forms.gle/vsBv6CLPz9h57xg8A).
+We'd love to know more about your use cases, pain points and expectations for the future.
+
+The `v5` packages will only get new versions to patch critical bug fixes.
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 📃 Add support for column grouping when exporting to Excel (#5895) @alexfauquette
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.2` / `@mui/x-data-grid-pro@v5.17.2` / `@mui/x-data-grid-premium@v5.17.2`
+
+#### Changes
+
+- [DataGrid] Revert mode if cell/row couldn't be saved due to validation error (#5897) @m4theushw
+- [DataGridPremium] Export column grouping in Excel (#5895) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.1` / `@mui/x-date-pickers-pro@v5.0.1`
+
+#### Changes
+
+- [DateTimePicker] Remove circular import (#6087) @flaviendelangle
+- [pickers] Add `sx` prop to the equality check of `PickersDay` (#6030) @TheUnlocked
+- [pickers] Add warning when `openTo` is invalid based on available `views` (#6042) @LukasTy
+- [pickers] Allow keyboard navigation to ignore disabled date for left / right arrow (#6082) @alexfauquette
+- [pickers] Fix mobile picker not opening on label click (#6074) @LukasTy
+
+### Docs
+
+- [docs] Add Recipes section
+
+### Core
+
+- [core] Add `yarn release:tag` script (#5169) @DanailH
+- [core] Upgrade monorepo (#6072) @m4theushw
+
 ## 5.17.1
 
 _Sep 5, 2022_

package/colDef/gridNumericOperators.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams } from '../models';
-export declare const getGridNumericQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
+export declare const getGridNumericQuickFilterFn: (value: any) => (({ value }: GridCellParams) => boolean) | null;
 export declare const getGridNumericOperators: () => GridFilterOperator<any, number | string | null, any>[];
 /**
  * @deprecated Use `getGridNumericOperators` instead.

package/colDef/gridSingleSelectOperators.d.ts

@@ -1,5 +1,5 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams, GridColDef } from '../models';
 import { GridApiCommunity } from '../models/api/gridApiCommunity';
-export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value: columnValue }: GridCellParams) => boolean) | null;
+export declare const getGridSingleSelectQuickFilterFn: (value: any, column: GridColDef, apiRef: React.MutableRefObject<GridApiCommunity>) => (({ value }: GridCellParams) => boolean) | null;
 export declare const getGridSingleSelectOperators: () => GridFilterOperator[];

package/colDef/gridStringOperators.d.ts

@@ -1,4 +1,4 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams } from '../models';
-export declare const getGridStringQuickFilterFn: (value: any) => (({ value: columnValue }: GridCellParams) => boolean) | null;
+export declare const getGridStringQuickFilterFn: (value: any) => (({ value }: GridCellParams) => boolean) | null;
 export declare const getGridStringOperators: (disableTrim?: boolean) => GridFilterOperator<any, number | string | null, any>[];

package/components/GridRow.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+const _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
+      _excluded2 = ["changeReason"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -231,9 +232,11 @@ function GridRow(props) {
         updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
       }
 
+      const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded2);
+
       const params = _extends({}, cellParams, {
         row: updatedRow
-      }, editCellState, {
+      }, editCellStateRest, {
         api: apiRef.current
       });
 

package/components/cell/GridEditBooleanCell.js

@@ -95,6 +95,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

package/components/cell/GridEditDateCell.js

@@ -149,6 +149,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

package/components/cell/GridEditInputCell.js

@@ -38,7 +38,7 @@ const GridEditInputCellRoot = styled(InputBase, {
   }
 }));
 const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$experiment;
+  var _rootProps$experiment, _rootProps$experiment3;
 
   const rootProps = useGridRootProps();
 
@@ -62,23 +62,36 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback(async event => {
+    var _rootProps$experiment2;
+
     const newValue = event.target.value;
 
     if (onValueChange) {
       await onValueChange(event, newValue);
     }
 
-    setValueState(newValue);
+    const column = apiRef.current.getColumn(field);
+    let parsedValue = newValue;
+
+    if (column.valueParser && (_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+      parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+    }
+
+    setValueState(parsedValue);
     apiRef.current.setEditCellValue({
       id,
       field,
-      value: newValue,
-      debounceMs
+      value: parsedValue,
+      debounceMs,
+      unstable_skipValueParser: true
     }, event);
-  }, [apiRef, debounceMs, field, id, onValueChange]);
+  }, [apiRef, debounceMs, field, id, onValueChange, (_rootProps$experiment3 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment3.newEditingApi]);
+  const meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
   React.useEffect(() => {
-    setValueState(value);
-  }, [value]);
+    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+      setValueState(value);
+    }
+  }, [meta.changeReason, value]);
   useEnhancedEffect(() => {
     if (hasFocus) {
       inputRef.current.focus();
@@ -111,6 +124,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']),
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

package/components/cell/GridEditSingleSelectCell.js

@@ -193,6 +193,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

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

@@ -11,6 +11,7 @@ import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { deepClone } from '../../../utils/utils';
 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) => {
@@ -319,7 +320,11 @@ export const useGridCellEditing = (apiRef, props) => {
     if (error || isProcessingProps) {
       // Attempt to change cell mode to "view" was not successful
       // Update previous mode to allow another attempt
-      prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+      prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+      updateFieldInCellModesModel(id, field, {
+        mode: GridCellModes.Edit
+      });
       return;
     }
 
@@ -356,7 +361,9 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      value
+      value,
+      debounceMs,
+      unstable_skipValueParser: skipValueParser
     } = params;
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, GridCellModes.Edit);
@@ -364,14 +371,15 @@ export const useGridCellEditing = (apiRef, props) => {
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
 
-    if (column.valueParser) {
+    if (column.valueParser && !skipValueParser) {
       parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
     }
 
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
 
     let newProps = _extends({}, editingState[id][field], {
-      value: parsedValue
+      value: parsedValue,
+      changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
     });
 
     if (column.preProcessEditCellProps) {
@@ -437,7 +445,8 @@ export const useGridCellEditing = (apiRef, props) => {
     const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = cellModesModel;
+    prevCellModesModel.current = deepClone(cellModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(cellModesModel).forEach(([id, fields]) => {
       Object.entries(fields).forEach(([field, params]) => {
         var _copyOfPrevCellModes$, _copyOfPrevCellModes$2, _idToIdLookup$id;

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

@@ -4,6 +4,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridCellEditing } from './useGridCellEditing.new';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
 });
@@ -116,11 +117,18 @@ export const useGridEditing = (apiRef, props) => {
   const getRowWithUpdatedValues = React.useCallback((id, field) => {
     return props.editMode === GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
+  const getEditCellMeta = React.useCallback((id, field) => {
+    const editingState = gridEditRowsStateSelector(apiRef.current.state);
+    return {
+      changeReason: editingState[id][field].changeReason
+    };
+  }, [apiRef]);
   const editingSharedApi = {
     isCellEditable,
     setEditCellValue,
     unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
-    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues,
+    unstable_getEditCellMeta: getEditCellMeta
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
 };

package/hooks/features/editRows/useGridRowEditing.new.js

@@ -12,6 +12,7 @@ import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { deepClone } from '../../../utils/utils';
 import { GridRowEditStopReasons, GridRowEditStartReasons } from '../../../models/params/gridRowParams';
 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 useGridRowEditing = (apiRef, props) => {
@@ -403,7 +404,11 @@ export const useGridRowEditing = (apiRef, props) => {
     const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
 
     if (hasSomeFieldWithError) {
-      prevRowModesModel.current[id].mode = GridRowModes.Edit;
+      prevRowModesModel.current[id].mode = GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+      updateRowInRowModesModel(id, {
+        mode: GridRowModes.Edit
+      });
       return;
     }
 
@@ -437,21 +442,24 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      value
+      value,
+      debounceMs,
+      unstable_skipValueParser: skipValueParser
     } = params;
     throwIfNotEditable(id, field);
     const column = apiRef.current.getColumn(field);
     const row = apiRef.current.getRow(id);
     let parsedValue = value;
 
-    if (column.valueParser) {
+    if (column.valueParser && !skipValueParser) {
       parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
     }
 
     let editingState = gridEditRowsStateSelector(apiRef.current.state);
 
     let newProps = _extends({}, editingState[id][field], {
-      value: parsedValue
+      value: parsedValue,
+      changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
     });
 
     if (!column.preProcessEditCellProps) {
@@ -586,7 +594,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     const copyOfPrevRowModesModel = prevRowModesModel.current;
-    prevRowModesModel.current = rowModesModel;
+    prevRowModesModel.current = deepClone(rowModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(rowModesModel).forEach(([id, params]) => {
       var _copyOfPrevRowModesMo, _idToIdLookup$id;
 

package/hooks/utils/useGridInitializeState.d.ts

@@ -6,5 +6,5 @@ declare type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
 export declare type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, Api extends GridApiCommon = GridApiCommunity> = (state: DeepPartial<Api['state']>, props: P, apiRef: React.MutableRefObject<Api>) => DeepPartial<Api['state']>;
-export declare const useGridInitializeState: <P, Api extends GridApiCommon = GridApiCommunity>(initializer: GridStateInitializer<P, Api>, apiRef: React.MutableRefObject<Api>, props: P) => void;
+export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps<any>>, Api extends GridApiCommon = GridApiCommunity>(initializer: GridStateInitializer<P, Api>, apiRef: React.MutableRefObject<Api>, props: P) => void;
 export {};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.1
+/** @license MUI v5.17.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/components/GridRow.js

@@ -2,7 +2,8 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
+var _excluded = ["selected", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"],
+    _excluded2 = ["changeReason"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -237,9 +238,12 @@ function GridRow(props) {
         updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
       }
 
+      var changeReason = editCellState.changeReason,
+          editCellStateRest = _objectWithoutProperties(editCellState, _excluded2);
+
       var params = _extends({}, cellParams, {
         row: updatedRow
-      }, editCellState, {
+      }, editCellStateRest, {
         api: apiRef.current
       });
 

package/legacy/components/cell/GridEditBooleanCell.js

@@ -135,6 +135,7 @@ process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

package/legacy/components/cell/GridEditDateCell.js

@@ -186,6 +186,7 @@ process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

package/legacy/components/cell/GridEditInputCell.js

@@ -42,7 +42,7 @@ var GridEditInputCellRoot = styled(InputBase, {
   });
 });
 var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _rootProps$experiment;
+  var _rootProps$experiment, _rootProps$experiment3;
 
   var rootProps = useGridRootProps();
 
@@ -80,7 +80,9 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = useUtilityClasses(ownerState);
   var handleChange = React.useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(event) {
-      var newValue;
+      var _rootProps$experiment2;
+
+      var newValue, column, parsedValue;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -96,15 +98,23 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
               return onValueChange(event, newValue);
 
             case 4:
-              setValueState(newValue);
+              column = apiRef.current.getColumn(field);
+              parsedValue = newValue;
+
+              if (column.valueParser && (_rootProps$experiment2 = rootProps.experimentalFeatures) != null && _rootProps$experiment2.newEditingApi) {
+                parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+              }
+
+              setValueState(parsedValue);
               apiRef.current.setEditCellValue({
                 id: id,
                 field: field,
-                value: newValue,
-                debounceMs: debounceMs
+                value: parsedValue,
+                debounceMs: debounceMs,
+                unstable_skipValueParser: true
               }, event);
 
-            case 6:
+            case 9:
             case "end":
               return _context.stop();
           }
@@ -115,10 +125,13 @@ var GridEditInputCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [apiRef, debounceMs, field, id, onValueChange]);
+  }(), [apiRef, debounceMs, field, id, onValueChange, (_rootProps$experiment3 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment3.newEditingApi]);
+  var meta = apiRef.current.unstable_getEditCellMeta ? apiRef.current.unstable_getEditCellMeta(id, field) : {};
   React.useEffect(function () {
-    setValueState(value);
-  }, [value]);
+    if (meta.changeReason !== 'debouncedSetEditCellValue') {
+      setValueState(value);
+    }
+  }, [meta.changeReason, value]);
   useEnhancedEffect(function () {
     if (hasFocus) {
       inputRef.current.focus();
@@ -151,6 +164,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']),
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

package/legacy/components/cell/GridEditSingleSelectCell.js

@@ -250,6 +250,7 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

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

@@ -15,6 +15,7 @@ import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { isPrintableKey } from '../../../utils/keyboardUtils';
 import { buildWarning } from '../../../utils/warning';
 import { gridRowsIdToIdLookupSelector } from '../rows/gridRowsSelector';
+import { deepClone } from '../../../utils/utils';
 import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
 var missingOnProcessRowUpdateErrorWarning = buildWarning(['MUI: A call to `processRowUpdate` threw an error which was not handled because `onProcessRowUpdateError` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError` prop, e.g. `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see http://mui.com/components/data-grid/editing/#persistence.'], 'error');
 export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
@@ -315,16 +316,20 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
               _editingState$id$fiel = editingState[id][field], error = _editingState$id$fiel.error, isProcessingProps = _editingState$id$fiel.isProcessingProps;
 
               if (!(error || isProcessingProps)) {
-                _context.next = 12;
+                _context.next = 13;
                 break;
               }
 
               // Attempt to change cell mode to "view" was not successful
               // Update previous mode to allow another attempt
-              prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+              prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+              updateFieldInCellModesModel(id, field, {
+                mode: GridCellModes.Edit
+              });
               return _context.abrupt("return");
 
-            case 12:
+            case 13:
               rowUpdate = apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field);
 
               if (processRowUpdate) {
@@ -352,7 +357,7 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
                 finishCellEditMode();
               }
 
-            case 14:
+            case 15:
             case "end":
               return _context.stop();
           }
@@ -368,25 +373,26 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(params) {
       var _editingState$id, _editingState$id$fiel2;
 
-      var id, field, value, column, row, parsedValue, editingState, newProps, hasChanged;
+      var id, field, value, debounceMs, skipValueParser, column, row, parsedValue, editingState, newProps, hasChanged;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              id = params.id, field = params.field, value = params.value;
+              id = params.id, field = params.field, value = params.value, debounceMs = params.debounceMs, skipValueParser = params.unstable_skipValueParser;
               throwIfNotEditable(id, field);
               throwIfNotInMode(id, field, GridCellModes.Edit);
               column = apiRef.current.getColumn(field);
               row = apiRef.current.getRow(id);
               parsedValue = value;
 
-              if (column.valueParser) {
+              if (column.valueParser && !skipValueParser) {
                 parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
               }
 
               editingState = gridEditRowsStateSelector(apiRef.current.state);
               newProps = _extends({}, editingState[id][field], {
-                value: parsedValue
+                value: parsedValue,
+                changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
               });
 
               if (!column.preProcessEditCellProps) {
@@ -470,7 +476,8 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
     var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     var copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = cellModesModel;
+    prevCellModesModel.current = deepClone(cellModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(cellModesModel).forEach(function (_ref3) {
       var _ref4 = _slicedToArray(_ref3, 2),
           id = _ref4[0],

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

@@ -7,6 +7,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridCellEditing } from './useGridCellEditing.new';
 import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
 import { useGridRowEditing } from './useGridRowEditing.new';
+import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 export var editingStateInitializer = function editingStateInitializer(state) {
   return _extends({}, state, {
     editRows: {}
@@ -150,11 +151,18 @@ export var useGridEditing = function useGridEditing(apiRef, props) {
   var getRowWithUpdatedValues = React.useCallback(function (id, field) {
     return props.editMode === GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
+  var getEditCellMeta = React.useCallback(function (id, field) {
+    var editingState = gridEditRowsStateSelector(apiRef.current.state);
+    return {
+      changeReason: editingState[id][field].changeReason
+    };
+  }, [apiRef]);
   var editingSharedApi = {
     isCellEditable: isCellEditable,
     setEditCellValue: setEditCellValue,
     unstable_runPendingEditCellValueMutation: runPendingEditCellValueMutation,
-    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues
+    unstable_getRowWithUpdatedValues: getRowWithUpdatedValues,
+    unstable_getEditCellMeta: getEditCellMeta
   };
   useGridApiMethod(apiRef, editingSharedApi, 'EditingApi');
 };