@mui/x-data-grid 5.17.1 → 5.17.2

package/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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://docs.google.com/forms/d/11L_zxL7oD_B-ZrZDuSyIkUzJLzOTUU2M4vHXxMVtWhU/edit).
+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/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;
     }
 
@@ -437,7 +442,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/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;
     }
 
@@ -586,7 +591,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/index.js

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

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();
           }
@@ -470,7 +475,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/useGridRowEditing.new.js

@@ -14,6 +14,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';
 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 useGridRowEditing = function useGridRowEditing(apiRef, props) {
@@ -402,7 +403,11 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     });
 
     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;
     }
 
@@ -593,7 +598,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
     var idToIdLookup = gridRowsIdToIdLookupSelector(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     var 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(function (_ref5) {
       var _copyOfPrevRowModesMo, _idToIdLookup$id;
 

package/legacy/index.js

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

package/legacy/utils/utils.js

@@ -198,4 +198,11 @@ export function randomNumberBetween(seed, min, max) {
   return function () {
     return min + (max - min) * random();
   };
+}
+export function deepClone(obj) {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(obj);
+  }
+
+  return JSON.parse(JSON.stringify(obj));
 }

package/modern/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;
     }
 
@@ -435,7 +440,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]) => {
         const prevMode = copyOfPrevCellModes[id]?.[field]?.mode || GridCellModes.View;

package/modern/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) => {
@@ -401,7 +402,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;
     }
 
@@ -584,7 +589,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]) => {
       const prevMode = copyOfPrevRowModesModel[id]?.mode || GridRowModes.View;
       const originalId = idToIdLookup[id] ?? id;

package/modern/index.js

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

package/modern/utils/utils.js

@@ -193,4 +193,11 @@ function mulberry32(a) {
 export function randomNumberBetween(seed, min, max) {
   const random = mulberry32(seed);
   return () => min + (max - min) * random();
+}
+export function deepClone(obj) {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(obj);
+  }
+
+  return JSON.parse(JSON.stringify(obj));
 }

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

@@ -29,6 +29,8 @@ var _warning = require("../../../utils/warning");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
+var _utils = require("../../../utils/utils");
+
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
 
 const _excluded = ["id", "field"],
@@ -339,7 +341,11 @@ 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 = _gridEditRowModel.GridCellModes.Edit;
+      prevCellModesModel.current[id][field].mode = _gridEditRowModel.GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+      updateFieldInCellModesModel(id, field, {
+        mode: _gridEditRowModel.GridCellModes.Edit
+      });
       return;
     }
 
@@ -456,7 +462,8 @@ const useGridCellEditing = (apiRef, props) => {
     const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopCellEditMode may change it later
 
     const copyOfPrevCellModes = prevCellModesModel.current;
-    prevCellModesModel.current = cellModesModel;
+    prevCellModesModel.current = (0, _utils.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/node/hooks/features/editRows/useGridRowEditing.new.js

@@ -31,6 +31,8 @@ var _warning = require("../../../utils/warning");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
+var _utils = require("../../../utils/utils");
+
 var _gridRowParams = require("../../../models/params/gridRowParams");
 
 const _excluded = ["id"],
@@ -421,7 +423,11 @@ const useGridRowEditing = (apiRef, props) => {
     const hasSomeFieldWithError = Object.values(editingState[id]).some(fieldProps => fieldProps.error);
 
     if (hasSomeFieldWithError) {
-      prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
+      prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+      updateRowInRowModesModel(id, {
+        mode: _gridEditRowModel.GridRowModes.Edit
+      });
       return;
     }
 
@@ -597,7 +603,8 @@ const useGridRowEditing = (apiRef, props) => {
     const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     const copyOfPrevRowModesModel = prevRowModesModel.current;
-    prevRowModesModel.current = rowModesModel;
+    prevRowModesModel.current = (0, _utils.deepClone)(rowModesModel); // Do a deep-clone because the attributes might be changed later
+
     Object.entries(rowModesModel).forEach(([id, params]) => {
       var _copyOfPrevRowModesMo, _idToIdLookup$id;
 

package/node/index.js

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

package/node/utils/utils.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.clamp = void 0;
+exports.deepClone = deepClone;
 exports.escapeRegExp = escapeRegExp;
 exports.isDeepEqual = isDeepEqual;
 exports.isFunction = isFunction;
@@ -216,4 +217,12 @@ function mulberry32(a) {
 function randomNumberBetween(seed, min, max) {
   const random = mulberry32(seed);
   return () => min + (max - min) * random();
+}
+
+function deepClone(obj) {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(obj);
+  }
+
+  return JSON.parse(JSON.stringify(obj));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "5.17.1",
+  "version": "5.17.2",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/utils/utils.d.ts

@@ -36,3 +36,4 @@ export declare const clamp: (value: number, min: number, max: number) => number;
  */
 export declare function isDeepEqual<T>(actual: any, expected: T): actual is T;
 export declare function randomNumberBetween(seed: number, min: number, max: number): () => number;
+export declare function deepClone(obj: Record<string, any>): any;

package/utils/utils.js

@@ -193,4 +193,11 @@ function mulberry32(a) {
 export function randomNumberBetween(seed, min, max) {
   const random = mulberry32(seed);
   return () => min + (max - min) * random();
+}
+export function deepClone(obj) {
+  if (typeof structuredClone === 'function') {
+    return structuredClone(obj);
+  }
+
+  return JSON.parse(JSON.stringify(obj));
 }