@mui/x-data-grid 7.21.0 → 7.22.1

package/CHANGELOG.md

@@ -3,6 +3,148 @@
 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_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🛰 Introduce [server-side support for Data Grid row grouping](https://mui.com/x/react-data-grid/server-side-data/row-grouping/)
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Portuguese (pt-BR) locale on the Data Grid component
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@clins1994, @GITPHLAP, @k-rajat19, @kalyan90, @merotosc, @yash49.
+Following are all team members who have contributed to this release:
+@cherniavskii, @flaviendelangle, @LukasTy, @MBilalShafi, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.22.0`
+
+- [DataGrid] Fix `GridPanelAnchor` positioning (#15022) @k-rajat19
+- [DataGrid] Fix ugly prop-types for the `pageStyle` prop of the `GridPrintExportMenuItem` component (#15015) @flaviendelangle
+- [DataGrid] Fix value type in filter model for number and boolean column type (#14733) @k-rajat19
+- [DataGrid] Focus next row when the focused row is deleted (#15067) @cherniavskii
+- [DataGrid] Remove some usages of `<Box />` and `<Badge />` (#15013) @romgrk
+- [DataGrid] Fix number of rows to display for page size options with negative value (#14890) @kalyan90
+- [l10n] Improve Portuguese (pt-BR) locale (#15021) @k-rajat19
+
+#### `@mui/x-data-grid-pro@7.22.0` [![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.0`, plus:
+
+- [DataGridPro] Fix column pinning layout (#15073) @cherniavskii
+
+#### `@mui/x-data-grid-premium@7.22.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.22.0`, plus:
+
+- [DataGridPremium] Server-side data source with row grouping (#15109) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.22.0`
+
+- [pickers] Fix `DateCalendar` timezone management (#15119) @LukasTy
+- [pickers] Fix `DigitalClock` time options on a `DST` switch day (#15092) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.22.0` [![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.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.22.0`
+
+- [charts] Export data type in `onAxisClick(_, data)` callback (#15038) @clins1994
+
+#### `@mui/x-charts-pro@7.0.0-beta.6` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.22.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.22.0`
+
+- [TreeView] Make the cancellable event types public (#14992) @flaviendelangle
+
+### Docs
+
+- [docs] Fix typo in Tree View docs (#15047) @yash49
+
+### Core
+
+- [core] Adjust cherry-pick GH actions (#15101) @LukasTy
+- [core] Update prettier target branch (#15100) @MBilalShafi
+- [core] Update some `default-branch-switch` instances for `v7.x` (#15085) @MBilalShafi
+- [test] Revert to using `fireEvent` instead of `userEvent` (#14927) @LukasTy
+
 ## 7.21.0
 
 _Oct 17, 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.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { SvgIconProps } from '@mui/material/SvgIcon';
-import { GridRenderCellParams } from '../../models/params/gridCellParams';
-import { GridColDef } from '../../models/colDef/gridColDef';
+import type { GridColDef } from '../../models/colDef/gridColDef';
+import type { GridRenderCellParams } from '../../models/params/gridCellParams';
 interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
     hideDescendantCount?: boolean;
 }
-declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element;
+declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element | null;
 declare namespace GridBooleanCellRaw {
     var propTypes: any;
 }

package/components/cell/GridBooleanCell.js

@@ -4,10 +4,13 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridRowMaximumTreeDepthSelector } from "../../hooks/features/rows/gridRowsSelector.js";
 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 {
@@ -20,7 +23,8 @@ const useUtilityClasses = ownerState => {
 };
 function GridBooleanCellRaw(props) {
   const {
-      value
+      value,
+      rowNode
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
@@ -29,7 +33,14 @@ function GridBooleanCellRaw(props) {
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
+  const maxDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
+  const isServerSideRowGroupingRow =
+  // @ts-expect-error - Access tree data prop
+  maxDepth > 0 && rowNode.type === 'group' && rootProps.treeData === false;
   const Icon = React.useMemo(() => value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon, [rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value]);
+  if (isServerSideRowGroupingRow && value === undefined) {
+    return null;
+  }
   return /*#__PURE__*/_jsx(Icon, _extends({
     fontSize: "small",
     className: classes.root,
@@ -106,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/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
 import { useGridSelector } from "../../hooks/index.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
@@ -76,7 +75,7 @@ function GridColumnHeaderFilterIconButton(props) {
     enterDelay: 1000
   }, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
-      children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
+      children: [counter > 1 && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
         badgeContent: counter,
         color: "default",
         children: iconButton

package/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -4,7 +4,6 @@ const _excluded = ["direction", "index", "sortingOrder", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import Badge from '@mui/material/Badge';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
@@ -63,7 +62,7 @@ function GridColumnHeaderSortIconRaw(props) {
     children: iconElement
   }));
   return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
-    children: [index != null && /*#__PURE__*/_jsx(Badge, {
+    children: [index != null && /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
       badgeContent: index,
       color: "default",
       overlap: "circular",

package/components/containers/GridRootStyles.js

@@ -152,6 +152,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${c.treeDataGroupingCellLoadingContainer}`]: styles.treeDataGroupingCellLoadingContainer
+  }, {
+    [`& .${c.groupingCriteriaCellLoadingContainer}`]: styles.groupingCriteriaCellLoadingContainer
   }, {
     [`& .${c.detailPanelToggleCell}`]: styles.detailPanelToggleCell
   }, {
@@ -685,7 +687,7 @@ export const GridRootStyles = styled('div', {
       alignSelf: 'stretch',
       marginRight: t.spacing(2)
     },
-    [`& .${c.treeDataGroupingCellLoadingContainer}`]: {
+    [`& .${c.treeDataGroupingCellLoadingContainer}, .${c.groupingCriteriaCellLoadingContainer}`]: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -718,7 +720,7 @@ export const GridRootStyles = styled('div', {
       }
     },
     [`& .${c.filler}`]: {
-      flex: 1
+      flex: '1 0 auto'
     },
     [`& .${c['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'

package/components/panel/filterPanel/GridFilterInputBoolean.js

@@ -38,7 +38,7 @@ function GridFilterInputBoolean(props) {
     const value = event.target.value;
     setFilterValueState(value);
     applyValue(_extends({}, item, {
-      value
+      value: Boolean(value)
     }));
   }, [applyValue, item]);
   React.useEffect(() => {

package/components/panel/filterPanel/GridFilterInputMultipleValue.js

@@ -39,9 +39,9 @@ function GridFilterInputMultipleValue(props) {
   const handleChange = React.useCallback((event, value) => {
     setFilterValueState(value.map(String));
     applyValue(_extends({}, item, {
-      value: [...value]
+      value: [...value.map(filterItemValue => type === 'number' ? Number(filterItemValue) : filterItemValue)]
     }));
-  }, [applyValue, item]);
+  }, [applyValue, item, type]);
   return /*#__PURE__*/_jsx(Autocomplete, _extends({
     multiple: true,
     freeSolo: true,

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -34,13 +34,13 @@ function GridFilterInputValue(props) {
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = _extends({}, item, {
-        value,
+        value: type === 'number' ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
       setIsApplying(false);
     });
-  }, [id, applyValue, item, rootProps.filterDebounceMs, filterTimeout]);
+  }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
     if (itemPlusTag.fromInput !== id || item.value === undefined) {

package/components/toolbar/GridToolbar.js

@@ -3,7 +3,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
 import { GridToolbarContainer } from "../containers/GridToolbarContainer.js";
 import { GridToolbarColumnsButton } from "./GridToolbarColumnsButton.js";
 import { GridToolbarDensitySelector } from "./GridToolbarDensitySelector.js";
@@ -36,8 +35,8 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
       // TODO: remove the reference to excelOptions in community package
       ,
       excelOptions: excelOptions
-    }), /*#__PURE__*/_jsx(Box, {
-      sx: {
+    }), /*#__PURE__*/_jsx("div", {
+      style: {
         flex: 1
       }
     }), showQuickFilter && /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]

package/components/toolbar/GridToolbarExport.js

@@ -78,19 +78,7 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     hideFooter: PropTypes.bool,
     hideToolbar: PropTypes.bool,
     includeCheckboxes: PropTypes.bool,
-    pageStyle: PropTypes.oneOfType([PropTypes.shape({
-      '__@hasInstance@646': PropTypes.func.isRequired,
-      '__@metadata@648': PropTypes.any,
-      apply: PropTypes.func.isRequired,
-      arguments: PropTypes.any.isRequired,
-      bind: PropTypes.func.isRequired,
-      call: PropTypes.func.isRequired,
-      caller: PropTypes.object.isRequired,
-      length: PropTypes.number.isRequired,
-      name: PropTypes.string.isRequired,
-      prototype: PropTypes.any.isRequired,
-      toString: PropTypes.func.isRequired
-    }), PropTypes.string])
+    pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   })
 } : void 0;
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {

package/components/toolbar/GridToolbarFilterButton.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
 import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
@@ -104,7 +103,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       "aria-controls": isOpen ? filterPanelId : undefined,
       "aria-expanded": isOpen,
       "aria-haspopup": true,
-      startIcon: /*#__PURE__*/_jsx(Badge, {
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
         badgeContent: activeFilters.length,
         color: "primary",
         children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {})

package/components/virtualization/GridBottomContainer.js

@@ -4,9 +4,6 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
-import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {
@@ -21,22 +18,8 @@ const Element = styled('div')({
 });
 export function GridBottomContainer(props) {
   const classes = useUtilityClasses();
-  const apiRef = useGridApiContext();
-  const {
-    viewportOuterSize,
-    minimumSize,
-    hasScrollX,
-    scrollbarSize
-  } = useGridSelector(apiRef, gridDimensionsSelector);
-  const scrollHeight = hasScrollX ? scrollbarSize : 0;
-  const offset = Math.max(viewportOuterSize.height - minimumSize.height -
-  // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
-  2 * scrollHeight, 0);
   return /*#__PURE__*/_jsx(Element, _extends({}, props, {
     className: clsx(classes.root, gridClasses['container--bottom']),
-    style: {
-      transform: `translateY(${offset}px)`
-    },
     role: "presentation"
   }));
 }

package/components/virtualization/GridMainContainer.js

@@ -7,7 +7,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridPanelAnchor = styled('div')({
   position: 'absolute',
   top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0
+  left: 0,
+  width: 'calc(100% - (var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize)))'
 });
 const Element = styled('div', {
   name: 'MuiDataGrid',

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/components/virtualization/GridVirtualScroller.js

@@ -40,6 +40,8 @@ const Scroller = styled('div', {
   flexGrow: 1,
   overflow: 'scroll',
   scrollbarWidth: 'none' /* Firefox */,
+  display: 'flex',
+  flexDirection: 'column',
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },

package/constants/gridClasses.d.ts

@@ -625,6 +625,11 @@ export interface GridClasses {
      * Styles applied to the toggle of the grouping criteria cell
      */
     groupingCriteriaCellToggle: string;
+    /**
+     * Styles applied to the loading container of the grouping cell of the tree data.
+     * @ignore - do not document.
+     */
+    groupingCriteriaCellLoadingContainer: string;
     /**
      * Styles applied to the pinned rows container.
      */

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--lastUnpinned', 'columnHeader--siblingFocused', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -6,6 +6,7 @@ import { GridHydrateColumnsValue, GridPinnedColumnPosition } from '../../feature
 import { GridRowEntry, GridRowId } from '../../../models/gridRows';
 import { GridHydrateRowsValue } from '../../features/rows/gridRowsInterfaces';
 import { GridPreferencePanelsValue } from '../../features/preferencesPanel';
+import { GridGetRowsParams } from '../../../models/gridDataSource';
 import { HeightEntry } from '../../features/rows/gridRowsMetaInterfaces';
 export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
@@ -17,6 +18,9 @@ export interface GridPipeProcessingLookup {
         value: GridInitialStateCommunity;
         context: GridExportStateParams;
     };
+    getRowsParams: {
+        value: Partial<GridGetRowsParams>;
+    };
     hydrateColumns: {
         value: GridHydrateColumnsValue;
     };

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/columnMenu/useGridColumnMenuSlots.js

@@ -2,10 +2,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["displayOrder"];
 import * as React from 'react';
-import Divider from '@mui/material/Divider';
+import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 const useGridColumnMenuSlots = props => {
   const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
   const {
     defaultSlots,
     defaultSlotProps,
@@ -51,8 +52,8 @@ const useGridColumnMenuSlots = props => {
         const customProps = _objectWithoutPropertiesLoose(processedComponentProps, _excluded);
         itemProps = _extends({}, itemProps, customProps);
       }
-      return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [Divider, {}]] : [...acc, [processedComponents[key], itemProps]];
+      return addDividers && index !== sorted.length - 1 ? [...acc, [processedComponents[key], itemProps], [rootProps.slots.baseDivider, {}]] : [...acc, [processedComponents[key], itemProps]];
     }, []);
-  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems]);
+  }, [addDividers, colDef, defaultItems, hideMenu, processedComponents, processedSlotProps, userItems, rootProps.slots.baseDivider]);
 };
 export { useGridColumnMenuSlots };

package/hooks/features/focus/useGridFocus.js

@@ -323,18 +323,33 @@ export const useGridFocus = (apiRef, props) => {
   const handleRowSet = React.useCallback(() => {
     const cell = gridFocusCellSelector(apiRef);
 
-    // If the focused cell is in a row which does not exist anymore, then remove the focus
+    // If the focused cell is in a row which does not exist anymore,
+    // focus previous row or remove the focus
     if (cell && !apiRef.current.getRow(cell.id)) {
+      const lastFocusedRowId = gridFocusCellSelector(apiRef)?.id;
+      let nextRowId = null;
+      if (typeof lastFocusedRowId !== 'undefined') {
+        const lastFocusedRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(lastFocusedRowId);
+        const currentPage = getVisibleRows(apiRef, {
+          pagination: props.pagination,
+          paginationMode: props.paginationMode
+        });
+        const nextRow = currentPage.rows[clamp(lastFocusedRowIndex, 0, currentPage.rows.length - 1)];
+        nextRowId = nextRow?.id ?? null;
+      }
       apiRef.current.setState(state => _extends({}, state, {
         focus: {
-          cell: null,
+          cell: nextRowId === null ? null : {
+            id: nextRowId,
+            field: cell.field
+          },
           columnHeader: null,
           columnHeaderFilter: null,
           columnGroupHeader: null
         }
       }));
     }
-  }, [apiRef]);
+  }, [apiRef, props.pagination, props.paginationMode]);
   const handlePaginationModelChange = useEventcallback(() => {
     const currentFocusedCell = gridFocusCellSelector(apiRef);
     if (!currentFocusedCell) {

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;