@mui/x-data-grid 5.17.2 → 5.17.3

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 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_
@@ -11,7 +45,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.

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/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.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

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

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.2
+/** @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/models/api/gridEditingApi.d.ts

@@ -16,6 +16,9 @@ export declare type GridRowModesModelProps = ({
     mode: GridRowModes.Edit;
 } & Omit<GridStartRowEditModeParams, 'id' | 'field'>);
 export declare type GridRowModesModel = Record<GridRowId, GridRowModesModelProps>;
+export interface GridEditCellMeta {
+    changeReason?: 'debouncedSetEditCellValue' | 'setEditCellValue';
+}
 export interface GridNewEditingSharedApi {
     /**
      * Controls if a cell is editable.
@@ -46,6 +49,13 @@ export interface GridNewEditingSharedApi {
      * @ignore - do not document.
      */
     unstable_getRowWithUpdatedValues: (id: GridRowId, field: string) => GridRowModel;
+    /**
+     * Gets the meta information for the edit cell.
+     * @param {GridRowId} id The row id being edited.
+     * @param {string} field The field being edited.
+     * @ignore - do not document.
+     */
+    unstable_getEditCellMeta: (id: GridRowId, field: string) => GridEditCellMeta;
 }
 /**
  * The shared methods used by the cell and row editing API.

package/models/gridEditRowModel.d.ts

@@ -1,7 +1,9 @@
+import type { GridEditCellMeta } from './api/gridEditingApi';
 export interface GridEditCellProps<V = any> {
     value?: V | undefined;
     isValidating?: boolean;
     isProcessingProps?: boolean;
+    changeReason?: GridEditCellMeta['changeReason'];
     [prop: string]: any;
 }
 export declare type GridEditRowProps = {

package/models/gridRows.d.ts

@@ -2,7 +2,7 @@ import type { GridKeyValue } from './colDef/gridColDef';
 export declare type GridValidRowModel = {
     [key: string]: any;
 };
-export declare type GridRowsProp<R = GridValidRowModel> = Readonly<GridRowModel<R>[]>;
+export declare type GridRowsProp<R extends GridValidRowModel = GridValidRowModel> = Readonly<GridRowModel<R>[]>;
 /**
  * @deprecated prefer GridRowModel.
  */

package/models/params/gridEditCellParams.d.ts

@@ -1,5 +1,5 @@
 import { GridEditCellProps } from '../gridEditRowModel';
-import { GridRowId } from '../gridRows';
+import { GridRowId, GridValidRowModel } from '../gridRows';
 import { GridCellParams } from './gridCellParams';
 export interface GridEditCellPropsParams {
     id: GridRowId;
@@ -26,6 +26,10 @@ export interface GridEditCellValueParams {
      * The debounce time in milliseconds.
      */
     debounceMs?: number;
+    /**
+     * TBD
+     */
+    unstable_skipValueParser?: boolean;
 }
 export interface GridCommitCellChangeParams {
     id: GridRowId;
@@ -45,7 +49,7 @@ declare enum GridCellEditStartReasons {
 /**
  * Params passed to the `cellEditStart` event.
  */
-export interface GridCellEditStartParams<V = any, R = any, F = V> extends GridCellParams<V, R, F> {
+export interface GridCellEditStartParams<V = any, R extends GridValidRowModel = GridValidRowModel, F = V> extends GridCellParams<V, R, F> {
     /**
      * The reason for this event to be triggered.
      * Only applied if `props.experimentalFeatures.newEditingApi: true`.
@@ -62,7 +66,7 @@ declare enum GridCellEditStopReasons {
 /**
  * Params passed to the `cellEditStop event.
  */
-export interface GridCellEditStopParams<V = any, R = any, F = V> extends GridCellParams<V, R, F> {
+export interface GridCellEditStopParams<V = any, R extends GridValidRowModel = GridValidRowModel, F = V> extends GridCellParams<V, R, F> {
     /**
      * The reason for this event to be triggered.
      * Only available if `props.experimentalFeatures.newEditingApi: true`.

package/modern/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';
@@ -223,9 +224,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/modern/components/cell/GridEditBooleanCell.js

@@ -93,6 +93,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/modern/components/cell/GridEditDateCell.js

@@ -147,6 +147,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/modern/components/cell/GridEditInputCell.js

@@ -66,17 +66,28 @@ const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       await onValueChange(event, newValue);
     }
 
-    setValueState(newValue);
+    const column = apiRef.current.getColumn(field);
+    let parsedValue = newValue;
+
+    if (column.valueParser && rootProps.experimentalFeatures?.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.experimentalFeatures?.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();
@@ -109,6 +120,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/modern/components/cell/GridEditSingleSelectCell.js

@@ -187,6 +187,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/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -359,7 +359,9 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      value
+      value,
+      debounceMs,
+      unstable_skipValueParser: skipValueParser
     } = params;
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, GridCellModes.Edit);
@@ -367,14 +369,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/modern/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/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -440,21 +440,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/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.2
+/** @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/node/components/GridRow.js

@@ -51,7 +51,8 @@ var _utils = require("../utils/utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -264,9 +265,10 @@ function GridRow(props) {
         updatedRow = apiRef.current.unstable_getRowWithUpdatedValues(rowId, column.field);
       }
 
+      const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
       const params = (0, _extends2.default)({}, cellParams, {
         row: updatedRow
-      }, editCellState, {
+      }, editCellStateRest, {
         api: apiRef.current
       });
       content = column.renderEditCell(params); // TODO move to GridCell

package/node/components/cell/GridEditBooleanCell.js

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

package/node/components/cell/GridEditDateCell.js

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

package/node/components/cell/GridEditInputCell.js

@@ -65,7 +65,7 @@ const GridEditInputCellRoot = (0, _styles.styled)(_InputBase.default, {
   }
 }));
 const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
-  var _rootProps$experiment;
+  var _rootProps$experiment, _rootProps$experiment3;
 
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
@@ -87,23 +87,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]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (hasFocus) {
       inputRef.current.focus();
@@ -137,6 +150,7 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * The mode of the cell.
    */
   cellMode: _propTypes.default.oneOf(['edit', 'view']),
+  changeReason: _propTypes.default.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
 
   /**
    * The column of the row that the current cell belongs to.

package/node/components/cell/GridEditSingleSelectCell.js

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

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

@@ -382,7 +382,9 @@ const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      value
+      value,
+      debounceMs,
+      unstable_skipValueParser: skipValueParser
     } = params;
     throwIfNotEditable(id, field);
     throwIfNotInMode(id, field, _gridEditRowModel.GridCellModes.Edit);
@@ -390,13 +392,14 @@ 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 = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
     let newProps = (0, _extends2.default)({}, editingState[id][field], {
-      value: parsedValue
+      value: parsedValue,
+      changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
     });
 
     if (column.preProcessEditCellProps) {

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

@@ -19,6 +19,8 @@ var _gridEditRowModel = require("../../../models/gridEditRowModel");
 
 var _useGridRowEditing = require("./useGridRowEditing.new");
 
+var _gridEditRowsSelector = require("./gridEditRowsSelector");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -138,11 +140,18 @@ const useGridEditing = (apiRef, props) => {
   const getRowWithUpdatedValues = React.useCallback((id, field) => {
     return props.editMode === _gridEditRowModel.GridEditModes.Cell ? apiRef.current.unstable_getRowWithUpdatedValuesFromCellEditing(id, field) : apiRef.current.unstable_getRowWithUpdatedValuesFromRowEditing(id);
   }, [apiRef, props.editMode]);
+  const getEditCellMeta = React.useCallback((id, field) => {
+    const editingState = (0, _gridEditRowsSelector.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
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, editingSharedApi, 'EditingApi');
 };

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

@@ -461,20 +461,23 @@ 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 = (0, _gridEditRowsSelector.gridEditRowsStateSelector)(apiRef.current.state);
     let newProps = (0, _extends2.default)({}, editingState[id][field], {
-      value: parsedValue
+      value: parsedValue,
+      changeReason: debounceMs ? 'debouncedSetEditCellValue' : 'setEditCellValue'
     });
 
     if (!column.preProcessEditCellProps) {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.2
+/** @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.17.2",
+  "version": "5.17.3",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.9",
-    "@mui/utils": "^5.9.3",
+    "@mui/utils": "^5.10.3",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.6"