@mui/x-data-grid 5.15.1 → 5.16.0

package/models/api/gridColumnGroupingApi.d.ts

@@ -0,0 +1,19 @@
+import { GridColumnGroupLookup } from '../../hooks/features/columnGrouping/gridColumnGroupsInterfaces';
+import { GridColumnGroup } from '../gridColumnGrouping';
+/**
+ * The column grouping API interface that is available in the grid [[apiRef]].
+ */
+export interface GridColumnGroupingApi {
+    /**
+     * Returns the id of the groups leading to the requested column.
+     * The array is ordered by increasing depth (the last element is the direct parent of the column).
+     * @param {string} field The field of of the column requested.
+     * @returns {string[]} The id of the groups leading to the requested column.
+     */
+    unstable_getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][];
+    /**
+     * Returns the column group lookup.
+     * @returns {GridColumnGroupLookup} The column group lookup.
+     */
+    unstable_getAllGroupDetails: () => GridColumnGroupLookup;
+}

package/models/api/gridColumnGroupingApi.js

@@ -0,0 +1 @@
+export {};

package/models/api/gridDensityApi.d.ts

@@ -14,6 +14,7 @@ export interface GridDensityApi {
      * @param {string} density Can be: `"compact"`, `"standard"`, `"comfortable"`.
      * @param {number} headerHeight The new header height.
      * @param {number} rowHeight The new row height.
+     * @param {number} maxDepth The depth of maximal depth column header grouping tree.
      */
-    setDensity: (density: GridDensity, headerHeight?: number, rowHeight?: number) => void;
+    setDensity: (density: GridDensity, headerHeight?: number, rowHeight?: number, maxDepth?: number) => void;
 }

package/models/colDef/gridColDef.d.ts

@@ -12,6 +12,7 @@ import { GridActionsCellItemProps } from '../../components/cell/GridActionsCellI
 import { GridEditCellProps } from '../gridEditRowModel';
 import type { GridValidRowModel } from '../gridRows';
 import { GridApiCommunity } from '../api/gridApiCommunity';
+import type { GridColumnGroup } from '../gridColumnGrouping';
 /**
  * Alignment used in position elements in Cells.
  */
@@ -61,7 +62,13 @@ export interface GridColDef<R extends GridValidRowModel = any, V = any, F = V> {
     maxWidth?: number;
     /**
      * If `true`, hide the column.
-     * @deprecated Use the `columnVisibility` prop instead.
+     * @deprecated Use the `initialState` prop to hide columns:
+     * ```jsx
+     * // Hide `id` column, the other columns will remain visible
+     * <DataGrid initialState={{ columns: { columnVisibilityModel: { id: false } } }} />
+     * ```
+     * Or use `columnVisibilityModel` prop to fully control column visibility.
+     * @link https://mui.com/x/react-data-grid/column-visibility/
      * @default false
      */
     hide?: boolean;
@@ -257,6 +264,13 @@ export declare type GridStateColDef<R extends GridValidRowModel = any, V = any,
      * If `true`, it means that at least one of the dimension's property of this column has been modified since the last time the column prop has changed.
      */
     hasBeenResized?: boolean;
+    /**
+     * The id of the groups leading to the column.
+     * The array is ordered by increasing depth (the last element is the direct parent of the column).
+     * If not defined, the column is in no group (equivalent to a path equal to `[]`).
+     * This parameter is computed from the `columnGroupingModel` prop.
+     */
+    groupPath?: GridColumnGroup['groupId'][];
 };
 /**
  * Meta Info about columns.

package/models/gridColumnGrouping.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { GridColDef } from './colDef';
+export interface GridLeafColumn {
+    field: GridColDef['field'];
+}
+export declare type GridColumnNode = GridColumnGroup | GridLeafColumn;
+export declare function isLeaf(node: GridColumnNode): node is GridLeafColumn;
+/**
+ * A function used to process headerClassName params.
+ */
+export declare type GridColumnGroupHeaderClassFn = (params: GridColumnGroupHeaderParams) => string;
+/**
+ * The union type representing the [[GridColDef]] column header class type.
+ */
+export declare type GridColumnGroupHeaderClassNamePropType = string | GridColumnGroupHeaderClassFn;
+export interface GridColumnGroupHeaderParams extends Pick<GridColumnGroup, 'headerName' | 'description'> {
+    /**
+     * A unique string identifying the group.
+     */
+    groupId: GridColumnGroup['groupId'] | null;
+    /**
+     * The number parent the group have.
+     */
+    depth: number;
+    /**
+     * The maximal depth among visible columns.
+     */
+    maxDepth: number;
+    /**
+     * The column fields included in the group (including nested ones).
+     */
+    fields: string[];
+    /**
+     * The column index (0 based).
+     */
+    colIndex: number;
+    /**
+     * Indicate if the group is the last one for the given depth.
+     */
+    isLastColumn: boolean;
+}
+export interface GridColumnGroup extends Pick<GridColDef, 'headerName' | 'description' | 'headerAlign'> {
+    /**
+     * A unique string identifying the group.
+     */
+    groupId: string;
+    /**
+     * The groups and columns included in this group.
+     */
+    children: GridColumnNode[];
+    /**
+     * If `true`, allows reordering columns outside of the group.
+     * @default false
+     */
+    freeReordering?: boolean;
+    /**
+     * Allows to render a component in the column group header cell.
+     * @param {GridColumnGroupHeaderParams} params Object containing parameters for the renderer.
+     * @returns {React.ReactNode} The element to be rendered.
+     */
+    renderHeaderGroup?: (params: GridColumnGroupHeaderParams) => React.ReactNode;
+    /**
+     * Class name that will be added in the column group header cell.
+     */
+    headerClassName?: GridColumnGroupHeaderClassNamePropType;
+}
+export declare type GridColumnGroupingModel = GridColumnGroup[];

package/models/gridColumnGrouping.js

@@ -0,0 +1,6 @@
+export function isLeaf(node) {
+  return node.field !== undefined;
+}
+/**
+ * A function used to process headerClassName params.
+ */

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 = any> = Readonly<GridRowModel<R>[]>;
+export declare type GridRowsProp<R = GridValidRowModel> = Readonly<GridRowModel<R>[]>;
 /**
  * @deprecated prefer GridRowModel.
  */
@@ -10,7 +10,7 @@ export declare type GridRowData = GridValidRowModel;
 /**
  * The key value object representing the data of a row.
  */
-export declare type GridRowModel<R extends GridValidRowModel = any> = R;
+export declare type GridRowModel<R extends GridValidRowModel = GridValidRowModel> = R;
 export declare type GridUpdateAction = 'delete';
 export interface GridRowModelUpdate extends GridRowModel {
     _action?: GridUpdateAction;
@@ -81,12 +81,12 @@ export interface GridRowsMeta {
     positions: number[];
 }
 export declare type GridRowTreeConfig = Record<GridRowId, GridRowTreeNodeConfig>;
-export declare type GridRowsLookup<R extends GridValidRowModel = any> = Record<GridRowId, R>;
+export declare type GridRowsLookup<R extends GridValidRowModel = GridValidRowModel> = Record<GridRowId, R>;
 /**
  * The type of Id supported by the grid.
  */
 export declare type GridRowId = string | number;
-export interface GridRowEntry<R extends GridValidRowModel = any> {
+export interface GridRowEntry<R extends GridValidRowModel = GridValidRowModel> {
     /**
      * The row id.
      */
@@ -99,4 +99,4 @@ export interface GridRowEntry<R extends GridValidRowModel = any> {
 /**
  * The function to retrieve the id of a [[GridRowModel]].
  */
-export declare type GridRowIdGetter<R extends GridValidRowModel = any> = (row: R) => GridRowId;
+export declare type GridRowIdGetter<R extends GridValidRowModel = GridValidRowModel> = (row: R) => GridRowId;

package/models/gridStateCommunity.d.ts

@@ -1,4 +1,4 @@
-import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState } from '../hooks';
+import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditRowsModel } from './gridEditRowModel';
 import type { GridSelectionModel } from './gridSelectionModel';
@@ -11,6 +11,7 @@ export interface GridStateCommunity {
     editRows: GridEditRowsModel;
     pagination: GridPaginationState;
     columns: GridColumnsState;
+    columnGrouping: GridColumnsGroupingState;
     columnMenu: GridColumnMenuState;
     sorting: GridSortingState;
     focus: GridFocusState;

package/models/index.d.ts

@@ -22,5 +22,6 @@ export * from './logger';
 export * from './muiEvent';
 export * from './events';
 export * from './gridSortModel';
+export * from './gridColumnGrouping';
 export type { GridExportOptions, GridFileExportOptions, GridGetRowsToExportParams, GridCsvGetRowsToExportParams, GridCsvExportOptions, GridPrintExportOptions, } from './gridExport';
 export * from './gridFilterOperator';

package/models/index.js

@@ -21,7 +21,8 @@ export * from './gridDensity';
 export * from './logger';
 export * from './muiEvent';
 export * from './events';
-export * from './gridSortModel'; // Do not export GridExportFormat and GridExportExtension which are override in pro package
+export * from './gridSortModel';
+export * from './gridColumnGrouping'; // Do not export GridExportFormat and GridExportExtension which are override in pro package
 
 export * from './gridFilterOperator';
 export {};

package/models/params/gridMenuParams.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export interface GridMenuParams {
     /**
      * The element that opens the menu.
      */
-    target: React.ReactNode;
+    target: HTMLElement | null;
 }

package/models/props/DataGridProps.d.ts

@@ -23,6 +23,7 @@ import { GridInitialStateCommunity } from '../gridStateCommunity';
 import { GridSlotsComponentsProps } from '../gridSlotsComponentsProps';
 import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces';
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
+import { GridColumnGroupingModel } from '../gridColumnGrouping';
 export interface GridExperimentalFeatures {
     /**
      * Will be part of the premium-plan when fully ready.
@@ -32,6 +33,10 @@ export interface GridExperimentalFeatures {
      * Enables the new API for cell editing and row editing.
      */
     newEditingApi: boolean;
+    /**
+     * Enables the column grouping.
+     */
+    columnGrouping: boolean;
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
      * Only works if NODE_ENV=test.
@@ -234,7 +239,7 @@ export interface DataGridPropsWithDefaultValues {
     logger: Logger;
     /**
      * Allows to pass the logging level or false to turn off logging.
-     * @default "debug"
+     * @default "error" ("warn" in dev mode)
      */
     logLevel: keyof Logger | false;
     /**
@@ -310,13 +315,13 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]].
      * TODO: Remove `@internal` when opening `apiRef` to Community plan
-     * @internal
+     * @ignore - do not document.
      */
     apiRef?: React.MutableRefObject<GridApiCommunity>;
     /**
      * Signal to the underlying logic what version of the public component API
      * of the data grid is exposed [[GridSignature]].
-     * @internal
+     * @ignore - do not document.
      */
     signature?: string;
     /**
@@ -551,7 +556,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridState} state The new state.
      * @param {MuiEvent<{}>} event The event object.
      * @param {GridCallbackDetails} details Additional details for this callback.
-     * @internal
+     * @ignore - do not document.
      */
     onStateChange?: GridEventListener<'stateChange'>;
     /**
@@ -741,4 +746,5 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {any} error The error thrown.
      */
     onProcessRowUpdateError?: (error: any) => void;
+    columnGroupingModel?: GridColumnGroupingModel;
 }

package/modern/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -194,6 +195,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -347,7 +349,7 @@ DataGridRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -645,7 +647,7 @@ DataGridRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
 

package/modern/DataGrid/useDataGridComponent.js

@@ -25,12 +25,15 @@ import { useGridDimensions } from '../hooks/features/dimensions/useGridDimension
 import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+import { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export const useDataGridComponent = props => {
   const apiRef = useGridInitialization(undefined, props);
   /**
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowsPreProcessors(apiRef);
   /**
@@ -39,6 +42,7 @@ export const useDataGridComponent = props => {
 
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(props.experimentalFeatures?.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -55,6 +59,7 @@ export const useDataGridComponent = props => {
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/modern/components/DataGridColumnHeaders.js

@@ -18,7 +18,8 @@ export const DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
     isDragging,
     getRootProps,
     getInnerProps,
-    getColumns
+    getColumnHeaders,
+    getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef
   });
@@ -27,10 +28,10 @@ export const DataGridColumnHeaders = /*#__PURE__*/React.forwardRef(function Grid
   }, getRootProps(other), {
     children: [/*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "left"
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+    }), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, getInnerProps(), {
-      children: getColumns()
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
     })), /*#__PURE__*/_jsx(GridScrollArea, {
       scrollDirection: "right"
     })]

package/modern/components/GridAutoSizer.js

@@ -104,6 +104,13 @@ process.env.NODE_ENV !== "production" ? GridAutoSizer.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * Function responsible for rendering children.
+   * @param {AutoSizerSize} size The grid's size.
+   * @returns {React.ReactNode} The children to render.
+   */
+  children: PropTypes.func.isRequired,
+
   /**
    * Default height to use for initial render; useful for SSR.
    * @default null

package/modern/components/GridRow.js

@@ -22,6 +22,7 @@ import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import { gridDensityHeaderGroupingMaxDepthSelector } from '../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -80,8 +81,6 @@ function GridRow(props) {
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
-  const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
-
   const apiRef = useGridApiContext();
   const ref = React.useRef(null);
   const rootProps = useGridRootProps();
@@ -89,6 +88,9 @@ function GridRow(props) {
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
+
   const {
     hasScrollX,
     hasScrollY
@@ -351,7 +353,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
   rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,

package/modern/components/base/GridBody.js

@@ -6,7 +6,7 @@ import { GridAutoSizer } from '../GridAutoSizer';
 import { GridOverlays } from './GridOverlays';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -18,14 +18,17 @@ function GridBody(props) {
   } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [isVirtualizationDisabled, setIsVirtualizationDisabled] = React.useState(rootProps.disableVirtualization);
   const disableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(true);
   }, []);
   const enableVirtualization = React.useCallback(() => {
     setIsVirtualizationDisabled(false);
-  }, []); // The `useGridApiMethod` hook can't be used here, because it only installs the
+  }, []);
+  React.useEffect(() => {
+    setIsVirtualizationDisabled(rootProps.disableVirtualization);
+  }, [rootProps.disableVirtualization]); // The `useGridApiMethod` hook can't be used here, because it only installs the
   // method if it doesn't exist yet. Once installed, it's never updated again.
   // This break the methods above, since their closure comes from the first time
   // they were installed. Which means that calling `setIsVirtualizationDisabled`
@@ -60,8 +63,8 @@ function GridBody(props) {
           width: size.width,
           // If `autoHeight` is on, there will be no height value.
           // In this case, let the container to grow whatever it needs.
-          height: size.height ? size.height - headerHeight : 'auto',
-          marginTop: headerHeight
+          height: size.height ? size.height - totalHeaderHeight : 'auto',
+          marginTop: totalHeaderHeight
         };
         return /*#__PURE__*/_jsx(VirtualScrollerComponent, {
           ref: windowRef,

package/modern/components/base/GridOverlays.js

@@ -6,13 +6,13 @@ import { gridVisibleRowCountSelector } from '../../hooks/features/filter/gridFil
 import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridDensityHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../../hooks/features/density/densitySelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 function GridOverlayWrapper(props) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const [viewportInnerSize, setViewportInnerSize] = React.useState(() => apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
   const handleViewportSizeChange = React.useCallback(() => {
     setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null);
@@ -35,11 +35,8 @@ function GridOverlayWrapper(props) {
       height,
       width: viewportInnerSize?.width ?? 0,
       position: 'absolute',
-      top: headerHeight,
-      bottom: height === 'auto' ? 0 : undefined,
-      zIndex: 4,
-      // should be above pinned columns, pinned rows and detail panel
-      pointerEvents: 'none'
+      top: totalHeaderHeight,
+      bottom: height === 'auto' ? 0 : undefined
     }
   }, props));
 }

package/modern/components/cell/GridEditDateCell.js

@@ -81,7 +81,7 @@ function GridEditDateCell(props) {
       const [date, time] = newFormattedDate.split('T');
       const [year, month, day] = date.split('-');
       newParsedDate = new Date();
-      newParsedDate.setFullYear(year, Number(month) - 1, day);
+      newParsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
       newParsedDate.setHours(0, 0, 0, 0);
 
       if (time) {

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -23,6 +23,10 @@ const renderSingleSelectOptions = (option, OptionComponent) => {
   }, key);
 };
 
+function isKeyboardEvent(event) {
+  return !!event.key;
+}
+
 function GridEditSingleSelectCell(props) {
   const rootProps = useGridRootProps();
 
@@ -136,7 +140,11 @@ function GridEditSingleSelectCell(props) {
     }
   };
 
-  const handleOpen = () => {
+  const handleOpen = event => {
+    if (isKeyboardEvent(event) && event.key === 'Enter') {
+      return;
+    }
+
     setOpen(true);
   };
 

package/modern/components/columnHeaders/GridColumnGroupHeader.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_useId as useId } from '@mui/utils';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    headerAlign,
+    isDragging,
+    showRightBorder,
+    showColumnBorder,
+    groupId
+  } = ownerState;
+  const slots = {
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'withBorder', showColumnBorder && 'columnHeader--showColumnBorder', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+function GridColumnGroupHeader(props) {
+  const {
+    groupId,
+    width,
+    depth,
+    maxDepth,
+    fields,
+    height,
+    colIndex,
+    isLastColumn,
+    extendRowFullWidth
+  } = props;
+  const rootProps = useGridRootProps();
+  const apiRef = useGridApiContext();
+  const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
+  const {
+    hasScrollX,
+    hasScrollY
+  } = apiRef.current.getRootDimensions() ?? {
+    hasScrollX: false,
+    hasScrollY: false
+  };
+  const group = groupId ? columnGroupsLookup[groupId] : {};
+  const {
+    headerName = groupId ?? '',
+    description = '',
+    headerAlign = undefined
+  } = group;
+  let headerComponent;
+  const render = groupId && columnGroupsLookup[groupId]?.renderHeaderGroup;
+  const renderParams = {
+    groupId,
+    headerName,
+    description,
+    depth,
+    maxDepth,
+    fields,
+    colIndex,
+    isLastColumn
+  };
+
+  if (groupId && render) {
+    headerComponent = render(renderParams);
+  }
+
+  const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
+  const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
+  const showColumnBorder = rootProps.showColumnRightBorder;
+
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes,
+    showRightBorder,
+    showColumnBorder,
+    headerAlign,
+    depth,
+    isDragging: false
+  });
+
+  const label = headerName ?? groupId;
+  const id = useId();
+  const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
+  const classes = useUtilityClasses(ownerState);
+  const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, {
+    classes: classes,
+    columnMenuOpen: false,
+    colIndex: colIndex,
+    height: height,
+    isResizing: false,
+    sortDirection: null,
+    hasFocus: false,
+    tabIndex: -1,
+    isDraggable: false,
+    headerComponent: headerComponent,
+    headerClassName: headerClassName,
+    description: description,
+    elementId: elementId,
+    width: width,
+    columnMenuIconButton: null,
+    columnTitleIconButtons: null,
+    resizable: false,
+    label: label,
+    "aria-colspan": fields.length // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
+    ,
+    "data-fields": `|-${fields.join('-|-')}-|`,
+    disableHeaderSeparator: true
+  });
+}
+
+export { GridColumnGroupHeader };