@mui/x-data-grid 7.22.0 → 7.22.1

package/CHANGELOG.md

@@ -3,6 +3,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.22.1
+
+_Nov 1, 2024_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Polish (pl-PL) locale on the Date Pickers
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@wojtkolos, @dpak-maurya, @k-rajat19.
+Following are all team members who have contributed to this release:
+@LukasTy, @arminmeh, @MBilalShafi, @KenanYusuf, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.1`
+
+- [DataGrid] Fix right column group header border (#15152) @KenanYusuf
+- [DataGrid] Fix scroll jump when holding down arrow keys (#15167) @arminmeh
+- [DataGrid] Move `rowGroupingModelChange` handler to respective hook (#15127) @MBilalShafi
+- [DataGrid] Prevent error when deleting the last row (#15153) @dpak-maurya
+- [DataGrid] Fix overlay height in autoHeight mode (#15205) @cherniavskii
+
+#### `@mui/x-data-grid-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.22.1`, plus:
+
+- [DataGridPro] Add list view tests (#15166) @KenanYusuf
+
+#### `@mui/x-data-grid-premium@7.22.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+- [DataGridPremium] Keep focus on the grouping cell on space bar press #15155 @k-rajat19
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.1`
+
+- [l10n] Improve Polish (pl-PL) locale (#15177) @wojtkolos
+
+#### `@mui/x-date-pickers-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.22.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.1`
+
+- [TreeView] Export `TreeItem2DragAndDropOverlay` and `TreeItem2LabelInput` from the root of each package (#15208) @flaviendelangle
+- [TreeView] Fix drag and drop color usage (#15149) @LukasTy
+
+#### `@mui/x-tree-view-pro@7.22.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@7.22.1`.
+
+### Docs
+
+- [docs] Add section explaining how to keep the selection while filtering in Data grid docs (#15199) @arminmeh
+
 ## 7.22.0
 
 _Oct 25, 2024_

package/components/GridRow.js

@@ -16,7 +16,7 @@ import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";

package/components/cell/GridBooleanCell.js

@@ -10,6 +10,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.js";
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../../internals/constants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -116,7 +117,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
+  if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

package/components/virtualization/GridVirtualScrollbar.js

@@ -73,6 +73,7 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     if (scroller[propertyScroll] === lastPosition.current) {
       return;
     }
+    lastPosition.current = scroller[propertyScroll];
     if (isLocked.current) {
       isLocked.current = false;
       return;
@@ -80,7 +81,6 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     isLocked.current = true;
     const value = scroller[propertyScroll] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
   });
   const onScrollbarScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -223,7 +223,6 @@ export const useGridColumnHeaders = props => {
       return null;
     }
     const {
-      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
@@ -292,7 +291,7 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length,
+        sectionLength: rowStructure.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

package/hooks/features/focus/useGridFocus.js

@@ -335,7 +335,7 @@ export const useGridFocus = (apiRef, props) => {
           paginationMode: props.paginationMode
         });
         const nextRow = currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
-        nextRowId = nextRow.id ?? null;
+        nextRowId = nextRow?.id ?? null;
       }
       apiRef.current.setState(state => _extends({}, state, {
         focus: {

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
+import { GRID_TREE_DATA_GROUPING_FIELD, GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
+import { isGroupingColumn } from "../../../internals/utils/gridRowGroupingUtils.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
@@ -9,7 +11,6 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSel
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
 import { gridFocusColumnGroupHeaderSelector } from "../focus/index.js";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
@@ -458,9 +459,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             break;
           }
           const colDef = params.colDef;
-          if (colDef &&
-          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
-          colDef.field === '__tree_data_group__') {
+          if (colDef && (colDef.field === GRID_TREE_DATA_GROUPING_FIELD || isGroupingColumn(colDef.field))) {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

package/hooks/features/listView/useGridListView.d.ts

@@ -7,4 +7,4 @@ export type GridListViewState = (GridListColDef & {
     computedWidth: number;
 }) | undefined;
 export declare const listViewStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_listColumn'>>;
-export declare function useGridListView(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listColumn'>): void;
+export declare function useGridListView(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'unstable_listView' | 'unstable_listColumn'>): void;

package/hooks/features/listView/useGridListView.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
 import { gridDimensionsSelector } from "../dimensions/index.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
-  listViewColumn: _extends({}, props.unstable_listColumn, {
+  listViewColumn: props.unstable_listColumn ? _extends({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
-  })
+  }) : undefined
 });
 export function useGridListView(apiRef, props) {
   /*
@@ -48,6 +49,11 @@ export function useGridListView(apiRef, props) {
       });
     }
   }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      warnOnce(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+    }
+  }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
   return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -13,7 +13,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../..
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from "./utils.js";

package/hooks/features/rows/useGridRowSpanning.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
+import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -15,7 +17,7 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', GRID_DETAIL_PANEL_TOGGLE_FIELD]);
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without

package/hooks/features/scroll/useGridScroll.js

@@ -48,8 +48,6 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
@@ -103,20 +101,18 @@ export const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
-      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
-      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -382,7 +382,7 @@ export const useGridVirtualScroller = () => {
       flexShrink: 0
     };
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
+      size.flexBasis = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.0
+ * @mui/x-data-grid v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const GRID_TREE_DATA_GROUPING_FIELD = "__tree_data_group__";
+export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
+export declare const GRID_DETAIL_PANEL_TOGGLE_FIELD = "__detail_panel_toggle__";

package/internals/constants.js

@@ -0,0 +1,3 @@
+export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/internals/index.d.ts

@@ -92,4 +92,5 @@ export type { GridApiCommunity } from '../models/api/gridApiCommunity';
 export type { GridApiCaches } from '../models/gridApiCaches';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';
 export * from './utils';
+export * from './constants';
 export type { Localization } from '../utils/getGridLocalization';

package/internals/index.js

@@ -72,4 +72,5 @@ export * from "../utils/cellBorderUtils.js";
 export { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 export * from "../hooks/utils/index.js";
 export { serializeCellValue } from "../hooks/features/export/serializers/csvSerializer.js";
-export * from "./utils/index.js";
+export * from "./utils/index.js";
+export * from "./constants.js";

package/internals/utils/gridRowGroupingUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const getRowGroupingCriteriaFromGroupingField: (groupingColDefField: string) => string | null;
+export declare const isGroupingColumn: (field: string) => boolean;

package/internals/utils/gridRowGroupingUtils.js

@@ -0,0 +1,9 @@
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../constants.js";
+export const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+  if (!match) {
+    return null;
+  }
+  return match[1];
+};
+export const isGroupingColumn = field => field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;

package/internals/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from './computeSlots';
 export * from './useProps';
 export * from './propValidation';
+export * from './gridRowGroupingUtils';

package/internals/utils/index.js

@@ -1,3 +1,4 @@
 export * from "./computeSlots.js";
 export * from "./useProps.js";
-export * from "./propValidation.js";
+export * from "./propValidation.js";
+export * from "./gridRowGroupingUtils.js";

package/modern/components/GridRow.js

@@ -16,7 +16,7 @@ import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
 import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
 import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../internals/constants.js";
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";

package/modern/components/cell/GridBooleanCell.js

@@ -10,6 +10,7 @@ import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.js";
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../../internals/constants.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -116,7 +117,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 export { GridBooleanCell };
 export const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && isAutogeneratedRowNode(params.rowNode)) {
+  if (params.field !== GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && isAutogeneratedRowNode(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -73,6 +73,7 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     if (scroller[propertyScroll] === lastPosition.current) {
       return;
     }
+    lastPosition.current = scroller[propertyScroll];
     if (isLocked.current) {
       isLocked.current = false;
       return;
@@ -80,7 +81,6 @@ const GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualS
     isLocked.current = true;
     const value = scroller[propertyScroll] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
   });
   const onScrollbarScroll = useEventCallback(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;

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

@@ -223,7 +223,6 @@ export const useGridColumnHeaders = props => {
       return null;
     }
     const {
-      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
@@ -292,7 +291,7 @@ export const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length,
+        sectionLength: rowStructure.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

package/modern/hooks/features/focus/useGridFocus.js

@@ -335,7 +335,7 @@ export const useGridFocus = (apiRef, props) => {
           paginationMode: props.paginationMode
         });
         const nextRow = currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
-        nextRowId = nextRow.id ?? null;
+        nextRowId = nextRow?.id ?? null;
       }
       apiRef.current.setState(state => _extends({}, state, {
         focus: {

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
+import { GRID_TREE_DATA_GROUPING_FIELD, GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
+import { isGroupingColumn } from "../../../internals/utils/gridRowGroupingUtils.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisibleColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
@@ -9,7 +11,6 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSel
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isNavigationKey } from "../../../utils/keyboardUtils.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
 import { gridFocusColumnGroupHeaderSelector } from "../focus/index.js";
 import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
@@ -458,9 +459,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             break;
           }
           const colDef = params.colDef;
-          if (colDef &&
-          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
-          colDef.field === '__tree_data_group__') {
+          if (colDef && (colDef.field === GRID_TREE_DATA_GROUPING_FIELD || isGroupingColumn(colDef.field))) {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

package/modern/hooks/features/listView/useGridListView.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { warnOnce } from '@mui/x-internals/warning';
 import { gridDimensionsSelector } from "../dimensions/index.js";
 import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
-  listViewColumn: _extends({}, props.unstable_listColumn, {
+  listViewColumn: props.unstable_listColumn ? _extends({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
-  })
+  }) : undefined
 });
 export function useGridListView(apiRef, props) {
   /*
@@ -48,6 +49,11 @@ export function useGridListView(apiRef, props) {
       });
     }
   }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      warnOnce(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+    }
+  }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
   return gridDimensionsSelector(apiRef.current.state).viewportInnerSize.width;

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -13,7 +13,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../..
 import { GridCellModes } from "../../../models/gridEditRowModel.js";
 import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 import { isMultipleRowSelectionEnabled, findRowsToSelect, findRowsToDeselect } from "./utils.js";

package/modern/hooks/features/rows/useGridRowSpanning.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { getUnprocessedRange, isRowRangeUpdated, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
+import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -15,7 +17,7 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', GRID_DETAIL_PANEL_TOGGLE_FIELD]);
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without

package/modern/hooks/features/scroll/useGridScroll.js

@@ -48,8 +48,6 @@ export const useGridScroll = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = useGridSelector(apiRef, gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = gridDimensionsSelector(apiRef.current.state);
@@ -103,20 +101,18 @@ export const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
-      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
-      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -382,7 +382,7 @@ export const useGridVirtualScroller = () => {
       flexShrink: 0
     };
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
+      size.flexBasis = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.0
+ * @mui/x-data-grid v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/constants.js

@@ -0,0 +1,3 @@
+export const GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/modern/internals/index.js

@@ -72,4 +72,5 @@ export * from "../utils/cellBorderUtils.js";
 export { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 export * from "../hooks/utils/index.js";
 export { serializeCellValue } from "../hooks/features/export/serializers/csvSerializer.js";
-export * from "./utils/index.js";
+export * from "./utils/index.js";
+export * from "./constants.js";

package/modern/internals/utils/gridRowGroupingUtils.js

@@ -0,0 +1,9 @@
+import { GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from "../constants.js";
+export const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+  if (!match) {
+    return null;
+  }
+  return match[1];
+};
+export const isGroupingColumn = field => field === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;

package/modern/internals/utils/index.js

@@ -1,3 +1,4 @@
 export * from "./computeSlots.js";
 export * from "./useProps.js";
-export * from "./propValidation.js";
+export * from "./propValidation.js";
+export * from "./gridRowGroupingUtils.js";

package/node/components/GridRow.js

@@ -23,7 +23,7 @@ var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _domUtils = require("../utils/domUtils");
 var _gridCheckboxSelectionColDef = require("../colDef/gridCheckboxSelectionColDef");
 var _gridActionsColDef = require("../colDef/gridActionsColDef");
-var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleField");
+var _constants = require("../internals/constants");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
@@ -145,7 +145,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       }
 
       // User opened a detail panel
-      if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+      if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
         return;
       }
 

package/node/components/cell/GridBooleanCell.js

@@ -17,6 +17,7 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _gridRowsUtils = require("../../hooks/features/rows/gridRowsUtils");
+var _constants = require("../../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "hideDescendantCount"];
 const useUtilityClasses = ownerState => {
@@ -123,7 +124,7 @@ process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
 } : void 0;
 const GridBooleanCell = exports.GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
 const renderBooleanCell = params => {
-  if (params.field !== '__row_group_by_columns_group__' && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
+  if (params.field !== _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD && (0, _gridRowsUtils.isAutogeneratedRowNode)(params.rowNode)) {
     return '';
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridBooleanCell, (0, _extends2.default)({}, params));

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -80,6 +80,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     if (scroller[propertyScroll] === lastPosition.current) {
       return;
     }
+    lastPosition.current = scroller[propertyScroll];
     if (isLocked.current) {
       isLocked.current = false;
       return;
@@ -87,7 +88,6 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     isLocked.current = true;
     const value = scroller[propertyScroll] / contentSize;
     scrollbar[propertyScroll] = value * scrollbarInnerSize;
-    lastPosition.current = scroller[propertyScroll];
   });
   const onScrollbarScroll = (0, _utils.unstable_useEventCallback)(() => {
     const scroller = apiRef.current.virtualScrollerRef.current;

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

@@ -231,7 +231,6 @@ const useGridColumnHeaders = props => {
       return null;
     }
     const {
-      renderedColumns,
       firstColumnToRender,
       lastColumnToRender
     } = columnsToRender;
@@ -300,7 +299,7 @@ const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length,
+        sectionLength: rowStructure.length,
         gridHasFiller: gridHasFiller
       }, index);
     });

package/node/hooks/features/focus/useGridFocus.js

@@ -344,7 +344,7 @@ const useGridFocus = (apiRef, props) => {
           paginationMode: props.paginationMode
         });
         const nextRow = currentPage.rows[(0, _utils2.clamp)(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
-        nextRowId = nextRow.id ?? null;
+        nextRowId = nextRow?.id ?? null;
       }
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
         focus: {

package/node/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridKeyboardNavigation = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _constants = require("../../../internals/constants");
+var _gridRowGroupingUtils = require("../../../internals/utils/gridRowGroupingUtils");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
@@ -16,7 +18,6 @@ var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectio
 var _gridClasses = require("../../../constants/gridClasses");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
-var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
 var _focus = require("../focus");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
 var _gridHeaderFilteringSelectors = require("../headerFiltering/gridHeaderFilteringSelectors");
@@ -460,13 +461,11 @@ const useGridKeyboardNavigation = (apiRef, props) => {
       case ' ':
         {
           const field = params.field;
-          if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+          if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
             break;
           }
           const colDef = params.colDef;
-          if (colDef &&
-          // `GRID_TREE_DATA_GROUPING_FIELD` from the Pro package
-          colDef.field === '__tree_data_group__') {
+          if (colDef && (colDef.field === _constants.GRID_TREE_DATA_GROUPING_FIELD || (0, _gridRowGroupingUtils.isGroupingColumn)(colDef.field))) {
             break;
           }
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {

package/node/hooks/features/listView/useGridListView.js

@@ -9,12 +9,13 @@ exports.listViewStateInitializer = void 0;
 exports.useGridListView = useGridListView;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _warning = require("@mui/x-internals/warning");
 var _dimensions = require("../dimensions");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 const listViewStateInitializer = (state, props, apiRef) => (0, _extends2.default)({}, state, {
-  listViewColumn: (0, _extends2.default)({}, props.unstable_listColumn, {
+  listViewColumn: props.unstable_listColumn ? (0, _extends2.default)({}, props.unstable_listColumn, {
     computedWidth: getListColumnWidth(apiRef)
-  })
+  }) : undefined
 });
 exports.listViewStateInitializer = listViewStateInitializer;
 function useGridListView(apiRef, props) {
@@ -58,6 +59,11 @@ function useGridListView(apiRef, props) {
       });
     }
   }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      (0, _warning.warnOnce)(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+    }
+  }, [props.unstable_listView, props.unstable_listColumn]);
 }
 function getListColumnWidth(apiRef) {
   return (0, _dimensions.gridDimensionsSelector)(apiRef.current.state).viewportInnerSize.width;

package/node/hooks/features/rowSelection/useGridRowSelection.js

@@ -21,7 +21,7 @@ var _colDef = require("../../../colDef");
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
 var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
-var _gridDetailPanelToggleField = require("../../../constants/gridDetailPanelToggleField");
+var _constants = require("../../../internals/constants");
 var _gridClasses = require("../../../constants/gridClasses");
 var _domUtils = require("../../../utils/domUtils");
 var _utils = require("./utils");
@@ -328,7 +328,7 @@ const useGridRowSelection = (apiRef, props) => {
       // click on checkbox should not trigger row selection
       return;
     }
-    if (field === _gridDetailPanelToggleField.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+    if (field === _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD) {
       // click to open the detail panel should not select the row
       return;
     }

package/node/hooks/features/rows/useGridRowSpanning.js

@@ -9,11 +9,13 @@ exports.useGridRowSpanning = exports.rowSpanningStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _constants = require("../../../internals/constants");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _gridVirtualizationSelectors = require("../virtualization/gridVirtualizationSelectors");
 var _useGridSelector = require("../../utils/useGridSelector");
 var _gridRowSpanningUtils = require("./gridRowSpanningUtils");
+var _gridCheckboxSelectionColDef = require("../../../colDef/gridCheckboxSelectionColDef");
 const EMPTY_STATE = {
   spannedCells: {},
   hiddenCells: {},
@@ -23,7 +25,7 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set(['__check__', '__reorder__', '__detail_panel_toggle__']);
+const skippedFields = new Set([_gridCheckboxSelectionColDef.GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', _constants.GRID_DETAIL_PANEL_TOGGLE_FIELD]);
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without

package/node/hooks/features/scroll/useGridScroll.js

@@ -54,8 +54,6 @@ const useGridScroll = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridScroll');
   const colRef = apiRef.current.columnHeadersContainerRef;
   const virtualScrollerRef = apiRef.current.virtualScrollerRef;
-  const virtualScrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const virtualScrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const visibleSortedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedSortedRowEntriesSelector);
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef.current.state);
@@ -109,20 +107,18 @@ const useGridScroll = (apiRef, props) => {
     return false;
   }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
   const scroll = React.useCallback(params => {
-    if (virtualScrollerRef.current && virtualScrollbarHorizontalRef.current && params.left !== undefined && colRef.current) {
+    if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;
       colRef.current.scrollLeft = params.left;
       virtualScrollerRef.current.scrollLeft = direction * params.left;
-      virtualScrollbarHorizontalRef.current.scrollLeft = direction * params.left;
       logger.debug(`Scrolling left: ${params.left}`);
     }
-    if (virtualScrollerRef.current && virtualScrollbarVerticalRef.current && params.top !== undefined) {
+    if (virtualScrollerRef.current && params.top !== undefined) {
       virtualScrollerRef.current.scrollTop = params.top;
-      virtualScrollbarVerticalRef.current.scrollTop = params.top;
       logger.debug(`Scrolling top: ${params.top}`);
     }
     logger.debug(`Scrolling, updating container, and viewport`);
-  }, [virtualScrollerRef, virtualScrollbarHorizontalRef, virtualScrollbarVerticalRef, isRtl, colRef, logger]);
+  }, [virtualScrollerRef, isRtl, colRef, logger]);
   const getScrollPosition = React.useCallback(() => {
     if (!virtualScrollerRef?.current) {
       return {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -393,7 +393,7 @@ const useGridVirtualScroller = () => {
       flexShrink: 0
     };
     if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
+      size.flexBasis = (0, _gridRowsUtils.getMinimalContentHeight)(apiRef); // Give room to show the overlay when there no rows.
     }
     return size;
   }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.22.0
+ * @mui/x-data-grid v7.22.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/node/internals/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
+const GRID_TREE_DATA_GROUPING_FIELD = exports.GRID_TREE_DATA_GROUPING_FIELD = '__tree_data_group__';
+const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
+const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/node/internals/index.js

@@ -879,4 +879,16 @@ Object.keys(_utils5).forEach(function (key) {
       return _utils5[key];
     }
   });
+});
+var _constants = require("./constants");
+Object.keys(_constants).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _constants[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _constants[key];
+    }
+  });
 });

package/node/internals/utils/gridRowGroupingUtils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isGroupingColumn = exports.getRowGroupingCriteriaFromGroupingField = void 0;
+var _constants = require("../constants");
+const getRowGroupingCriteriaFromGroupingField = groupingColDefField => {
+  const match = groupingColDefField.match(/^__row_group_by_columns_group_(.*)__$/);
+  if (!match) {
+    return null;
+  }
+  return match[1];
+};
+exports.getRowGroupingCriteriaFromGroupingField = getRowGroupingCriteriaFromGroupingField;
+const isGroupingColumn = field => field === _constants.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD || getRowGroupingCriteriaFromGroupingField(field) !== null;
+exports.isGroupingColumn = isGroupingColumn;

package/node/internals/utils/index.js

@@ -35,4 +35,15 @@ Object.keys(_propValidation).forEach(function (key) {
       return _propValidation[key];
     }
   });
+});
+var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
+Object.keys(_gridRowGroupingUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridRowGroupingUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridRowGroupingUtils[key];
+    }
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.22.0",
+  "version": "7.22.1",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/constants/gridDetailPanelToggleField.d.ts

@@ -1 +0,0 @@
-export declare const GRID_DETAIL_PANEL_TOGGLE_FIELD = "__detail_panel_toggle__";

package/constants/gridDetailPanelToggleField.js

@@ -1,2 +0,0 @@
-// Can't import from pro package - hence duplication
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/modern/constants/gridDetailPanelToggleField.js

@@ -1,2 +0,0 @@
-// Can't import from pro package - hence duplication
-export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';

package/node/constants/gridDetailPanelToggleField.js

@@ -1,8 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = void 0;
-// Can't import from pro package - hence duplication
-const GRID_DETAIL_PANEL_TOGGLE_FIELD = exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';