@mui/x-data-grid 5.17.6 → 5.17.7

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.7
+
+_Oct 13, 2022_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.7` / `@mui/x-data-grid-pro@v5.17.7` / `@mui/x-data-grid-premium@v5.17.7`
+
+#### Changes
+
+- [DataGrid] Fix error when using column grouping with all columns hidden (#6425) @alexfauquette
+- [DataGrid] Fix start edit mode with printable character in React 18 (#6478) @m4theushw
+
 ## 5.17.6
 
 _Oct 6, 2022_

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -238,7 +238,7 @@ export const useGridColumnHeaders = props => {
 
     const columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

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

@@ -121,7 +121,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
       if (reason) {
         const newParams = _extends({}, params, {
-          reason
+          reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', newParams, event);
@@ -132,14 +133,21 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -270,10 +278,17 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
+    let newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     const newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

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

@@ -181,6 +181,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
         const newParams = _extends({}, rowParams, {
           field: params.field,
+          key: event.key,
           reason
         });
 
@@ -192,14 +193,21 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -339,7 +347,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       fieldToFocus,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
@@ -349,9 +358,14 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
-      const shouldDeleteValue = deleteValue && fieldToFocus === field;
+      let newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.6
+/** @license MUI v5.17.7
  *
  * 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/columnHeaders/useGridColumnHeaders.js

@@ -283,7 +283,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
 
     var columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

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

@@ -129,7 +129,8 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
 
       if (_reason) {
         var _newParams = _extends({}, params, {
-          reason: _reason
+          reason: _reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', _newParams, event);
@@ -139,13 +140,20 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var handleCellEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        reason = params.reason;
+        reason = params.reason,
+        key = params.key;
     var startCellEditModeParams = {
       id: id,
       field: field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -268,9 +276,16 @@ export var useGridCellEditing = function useGridCellEditing(apiRef, props) {
   var updateStateToStartCellEditMode = useEventCallback(function (params) {
     var id = params.id,
         field = params.field,
-        deleteValue = params.deleteValue;
+        deleteValue = params.deleteValue,
+        initialValue = params.initialValue;
+    var newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     var newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

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

@@ -189,6 +189,7 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
 
         var _newParams = _extends({}, _rowParams, {
           field: params.field,
+          key: event.key,
           reason: _reason
         });
 
@@ -199,13 +200,20 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var handleRowEditStart = React.useCallback(function (params) {
     var id = params.id,
         field = params.field,
-        reason = params.reason;
+        reason = params.reason,
+        key = params.key;
     var startRowEditModeParams = {
       id: id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -338,7 +346,8 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
   var updateStateToStartRowEditMode = useEventCallback(function (params) {
     var id = params.id,
         fieldToFocus = params.fieldToFocus,
-        deleteValue = params.deleteValue;
+        deleteValue = params.deleteValue,
+        initialValue = params.initialValue;
     var columnFields = gridColumnFieldsSelector(apiRef);
     var newProps = columnFields.reduce(function (acc, field) {
       var cellParams = apiRef.current.getCellParams(id, field);
@@ -347,9 +356,14 @@ export var useGridRowEditing = function useGridRowEditing(apiRef, props) {
         return acc;
       }
 
-      var shouldDeleteValue = deleteValue && fieldToFocus === field;
+      var newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.6
+/** @license MUI v5.17.7
  *
  * 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

@@ -183,6 +183,11 @@ export interface GridStartCellEditModeParams {
      * If `true`, the value will be deleted before entering the edit mode.
      */
     deleteValue?: boolean;
+    /**
+     * The initial value for the field.
+     * If `deleteValue` is also true, this value is not used.
+     */
+    initialValue?: any;
 }
 /**
  * Params passed to `apiRef.current.stopCellEditMode`.
@@ -223,6 +228,11 @@ export interface GridStartRowEditModeParams {
      * If `true`, the value in `fieldToFocus` will be deleted before entering the edit mode.
      */
     deleteValue?: boolean;
+    /**
+     * The initial value for the given `fieldToFocus`.
+     * If `deleteValue` is also true, this value is not used.
+     */
+    initialValue?: string;
 }
 /**
  * Params passed to `apiRef.current.stopRowEditMode`.

package/models/params/gridEditCellParams.d.ts

@@ -55,6 +55,10 @@ export interface GridCellEditStartParams<V = any, R extends GridValidRowModel =
      * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      */
     reason?: GridCellEditStartReasons;
+    /**
+     * If the reason is related to a keyboard event, it contains which key was pressed.
+     */
+    key?: string;
 }
 declare enum GridCellEditStopReasons {
     cellFocusOut = "cellFocusOut",

package/models/params/gridRowParams.d.ts

@@ -78,6 +78,10 @@ export interface GridRowEditStartParams<R extends GridValidRowModel = any> exten
      * Only applied if `props.experimentalFeatures.newEditingApi: true`.
      */
     reason?: GridRowEditStartReasons;
+    /**
+     * If the reason is related to a keyboard event, it contains which key was pressed.
+     */
+    key?: string;
 }
 declare enum GridRowEditStopReasons {
     rowFocusOut = "rowFocusOut",

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -236,7 +236,7 @@ export const useGridColumnHeaders = props => {
 
     const columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

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

@@ -121,7 +121,8 @@ export const useGridCellEditing = (apiRef, props) => {
 
       if (reason) {
         const newParams = _extends({}, params, {
-          reason
+          reason,
+          key: event.key
         });
 
         apiRef.current.publishEvent('cellEditStart', newParams, event);
@@ -132,14 +133,21 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
 
-    if (reason === GridCellEditStartReasons.deleteKeyDown || reason === GridCellEditStartReasons.printableKeyDown) {
+    if (reason === GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -270,10 +278,17 @@ export const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
+    let newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     const newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

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

@@ -179,6 +179,7 @@ export const useGridRowEditing = (apiRef, props) => {
 
         const newParams = _extends({}, rowParams, {
           field: params.field,
+          key: event.key,
           reason
         });
 
@@ -190,14 +191,21 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
 
-    if (reason === GridRowEditStartReasons.deleteKeyDown || reason === GridRowEditStartReasons.printableKeyDown) {
+    if (reason === GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -337,7 +345,8 @@ export const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       fieldToFocus,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
     const columnFields = gridColumnFieldsSelector(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
@@ -347,9 +356,14 @@ export const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
-      const shouldDeleteValue = deleteValue && fieldToFocus === field;
+      let newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/modern/index.js

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

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -274,7 +274,7 @@ const useGridColumnHeaders = props => {
 
     const columnsToRender = getColumnsToRender(params);
 
-    if (columnsToRender == null) {
+    if (columnsToRender == null || columnsToRender.renderedColumns.length === 0) {
       return null;
     }
 

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

@@ -147,7 +147,8 @@ const useGridCellEditing = (apiRef, props) => {
 
       if (reason) {
         const newParams = (0, _extends2.default)({}, params, {
-          reason
+          reason,
+          key: event.key
         });
         apiRef.current.publishEvent('cellEditStart', newParams, event);
       }
@@ -157,14 +158,21 @@ const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startCellEditModeParams = {
       id,
       field
     };
 
-    if (reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown || reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown) {
+    if (reason === _gridEditCellParams.GridCellEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startCellEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startCellEditModeParams.deleteValue = true;
+      }
+    } else if (reason === _gridEditCellParams.GridCellEditStartReasons.deleteKeyDown) {
       startCellEditModeParams.deleteValue = true;
     }
 
@@ -293,10 +301,17 @@ const useGridCellEditing = (apiRef, props) => {
     const {
       id,
       field,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
+    let newValue = apiRef.current.getCellValue(id, field);
+
+    if (deleteValue || initialValue) {
+      newValue = deleteValue ? '' : initialValue;
+    }
+
     const newProps = {
-      value: deleteValue ? '' : apiRef.current.getCellValue(id, field),
+      value: newValue,
       error: false,
       isProcessingProps: false
     };

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

@@ -204,6 +204,7 @@ const useGridRowEditing = (apiRef, props) => {
         const rowParams = apiRef.current.getRowParams(params.id);
         const newParams = (0, _extends2.default)({}, rowParams, {
           field: params.field,
+          key: event.key,
           reason
         });
         apiRef.current.publishEvent('rowEditStart', newParams, event);
@@ -214,14 +215,21 @@ const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       field,
-      reason
+      reason,
+      key
     } = params;
     const startRowEditModeParams = {
       id,
       fieldToFocus: field
     };
 
-    if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown || reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown) {
+    if (reason === _gridRowParams.GridRowEditStartReasons.printableKeyDown) {
+      if (React.version.startsWith('18')) {
+        startRowEditModeParams.initialValue = key; // In React 17, cleaning the input is enough
+      } else {
+        startRowEditModeParams.deleteValue = !!field;
+      }
+    } else if (reason === _gridRowParams.GridRowEditStartReasons.deleteKeyDown) {
       startRowEditModeParams.deleteValue = !!field;
     }
 
@@ -360,7 +368,8 @@ const useGridRowEditing = (apiRef, props) => {
     const {
       id,
       fieldToFocus,
-      deleteValue
+      deleteValue,
+      initialValue
     } = params;
     const columnFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
     const newProps = columnFields.reduce((acc, field) => {
@@ -370,9 +379,14 @@ const useGridRowEditing = (apiRef, props) => {
         return acc;
       }
 
-      const shouldDeleteValue = deleteValue && fieldToFocus === field;
+      let newValue = apiRef.current.getCellValue(id, field);
+
+      if (fieldToFocus === field && (deleteValue || initialValue)) {
+        newValue = deleteValue ? '' : initialValue;
+      }
+
       acc[field] = {
-        value: shouldDeleteValue ? '' : apiRef.current.getCellValue(id, field),
+        value: newValue,
         error: false,
         isProcessingProps: false
       };

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.6
+/** @license MUI v5.17.7
  *
  * 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.6",
+  "version": "5.17.7",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",