@mui/x-data-grid 5.17.2 → 5.17.4

package/CHANGELOG.md

@@ -3,6 +3,74 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.17.4
+
+_Sep 22, 2022_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Finnish (fi-FI) locale to the pickers (#6230) @PetroSilenius
+- 🌍 Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.4` / `@mui/x-data-grid-pro@v5.17.4` / `@mui/x-data-grid-premium@v5.17.4`
+
+#### Changes
+
+- [DataGrid] Do not publish `cellFocusOut` event if the row was removed (#6251) @cherniavskii
+- [DataGrid] Improve Polish (pl-PL) locale on the data grid (#6245) @grzegorz-bach
+
+### `@mui/x-date-pickers@v5.0.3` / `@mui/x-date-pickers-pro@v5.0.3`
+
+#### Changes
+
+- [pickers] Add Finnish (fi-FI) locale to pickers (#6219) (#6230) @PetroSilenius
+- [pickers] Add Persian (fa-IR) locale to the pickers (#6181) @fakhamatia
+- [pickers] Fix usage with Typescript 4.8 (#6229) @flaviendelangle
+- [YearPicker] Scroll to the current year even with `autoFocus=false` (#6224) @alexfauquette
+
+### Docs
+
+- [docs] Fix 301 link (#6239) @oliviertassinari
+
+### Core
+
+- [core] Use the official repository for `@mui/monorepo` instead of a fork (#6189) @oliviertassinari
+
+## 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_
@@ -11,7 +79,7 @@ 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://docs.google.com/forms/d/11L_zxL7oD_B-ZrZDuSyIkUzJLzOTUU2M4vHXxMVtWhU/edit).
+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.
@@ -67,7 +135,7 @@ We'd like to offer a big thanks to the 3 contributors who made this release poss
 
 _Sep 2, 2022_
 
-🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages!
 
 If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
 

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

@@ -361,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);
@@ -369,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) {

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

@@ -442,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) {

package/hooks/features/focus/useGridFocus.js

@@ -28,6 +28,14 @@ export const focusStateInitializer = state => _extends({}, state, {
 export const useGridFocus = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFocus');
   const lastClickedCell = React.useRef(null);
+  const publishCellFocusOut = React.useCallback((cell, event) => {
+    if (cell) {
+      // The row might have been deleted
+      if (apiRef.current.getRow(cell.id)) {
+        apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
+      }
+    }
+  }, [apiRef]);
   const setCellFocus = React.useCallback((id, field) => {
     const focusedCell = gridFocusCellSelector(apiRef);
 
@@ -63,18 +71,14 @@ export const useGridFocus = (apiRef, props) => {
     if (focusedCell) {
       // There's a focused cell but another cell was clicked
       // Publishes an event to notify that the focus was lost
-      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field));
+      publishCellFocusOut(focusedCell, {});
     }
 
     apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
-  }, [apiRef, logger]);
+  }, [apiRef, logger, publishCellFocusOut]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
     const cell = gridFocusCellSelector(apiRef);
-
-    if (cell) {
-      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
-    }
-
+    publishCellFocusOut(cell, event);
     apiRef.current.setState(state => {
       logger.debug(`Focusing on column header with colIndex=${field}`);
       return _extends({}, state, {
@@ -93,7 +97,7 @@ export const useGridFocus = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, logger]);
+  }, [apiRef, logger, publishCellFocusOut]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
     let rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
@@ -202,11 +206,6 @@ export const useGridFocus = (apiRef, props) => {
 
     if (cellElement != null && cellElement.contains(event.target)) {
       return;
-    } // The row might have been deleted during the click
-
-
-    if (!apiRef.current.getRow(focusedCell.id)) {
-      return;
     }
 
     if (cellParams) {
@@ -221,9 +220,9 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.forceUpdate(); // There's a focused cell but another element (not a cell) was clicked
       // Publishes an event to notify that the focus was lost
 
-      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+      publishCellFocusOut(focusedCell, event);
     }
-  }, [apiRef]);
+  }, [apiRef, publishCellFocusOut]);
   const handleCellModeChange = React.useCallback(params => {
     if (params.cellMode === 'view') {
       return;

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.2
+/** @license MUI v5.17.4
  *
  * 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

@@ -373,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) {

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

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

@@ -440,20 +440,23 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var setRowEditingEditCellValue = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        value = params.value;
+        value = params.value,
+        debounceMs = params.debounceMs,
+        skipValueParser = params.unstable_skipValueParser;
     throwIfNotEditable(id, field);
     var column = apiRef.current.getColumn(field);
     var row = apiRef.current.getRow(id);
     var parsedValue = value;
 
-    if (column.valueParser) {
+    if (column.valueParser && !skipValueParser) {
       parsedValue = column.valueParser(value, apiRef.current.getCellParams(id, field));
     }
 
     var editingState = gridEditRowsStateSelector(apiRef.current.state);
 
     var newProps = _extends({}, editingState[id][field], {
-      value: parsedValue
+      value: parsedValue,
+      changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
     });
 
     if (!column.preProcessEditCellProps) {