@mui/x-data-grid-premium 5.15.3 → 5.17.1

package/CHANGELOG.md

@@ -3,6 +3,155 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.1
+
+_Sep 5, 2022_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.1` / `@mui/x-data-grid-pro@v5.17.1` / `@mui/x-data-grid-premium@v5.17.1`
+
+#### Changes
+
+- [DataGrid] Fix cells being focused on mouseUp (#5980) @cherniavskii
+- [DataGrid] Fix focused cell if column is spanned and new editing API is used (#5962) @m4theushw
+- [DataGridPro] Fix import in lazy-loading causing a bundling error (#6031) @flaviendelangle
+
+## 5.17.0
+
+_Sep 2, 2022_
+
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+
+If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Implement Lazy loading (#5214) @DanailH
+
+  Pro users now can try the experimental lazy loading feature.
+  In a few steps, you can load your data on demand, as the rows are displayed.
+
+  To enable this feature, add `experimentalFeatures={{ lazyLoading: true }}`.
+  Lazy Loading requires a few other settings.
+  See the [documentation](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) to explore the example in detail.
+
+- 🚀 Improve `pickers` focus management (#5820) @alexfauquette
+- 🎉 Enable disabling `day` on date range picker depending on `position` (#5773) @alexfauquette
+- ✨ Various improvements
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.0` / `@mui/x-data-grid-pro@v5.17.0` / `@mui/x-data-grid-premium@v5.17.0`
+
+#### Changes
+
+- [DataGrid] Add `sort` prop to columns panel slot (#5888) @gavbrennan
+- [DataGrid] Do not throw if `fieldToFocus` cannot be found (#5871) @cherniavskii
+- [DataGrid] Support `getRowId` in the `replaceRows` method (#5988) @flaviendelangle
+- [DataGridPro] Add class name to row with open detail panel (#5924) @m4theushw
+- [DataGridPro] Fix crash when using `pinnedRows` + `getRowClassName` props and `rows=[]` (#5851) @cherniavskii
+- [DataGridPro] Fix filtering with inactive filter items (#5993) @alexfauquette
+- [DataGridPro] Implement Lazy loading (#5214) @DanailH
+- [DataGridPro] Support pinned columns and dynamic row height (#5782) @m4theushw
+- [DataGridPremium] Add state initializer for column groups (#5963) @alexfauquette
+- [DataGridPremium] Update grouping when `groupingValueGetter` changes (#5919) @flaviendelangle
+- [DataGridPremium] Use the aggregated value on tree data real groups (#5953) @flaviendelangle
+
+### `@mui/x-date-pickers@v5.0.0` / `@mui/x-date-pickers-pro@v5.0.0`
+
+#### Changes
+
+- [DatePicker] Improve focus management (#5820) @alexfauquette
+- [DateRangePicker] Enable disabling `day` depending on `position` (#5773) @alexfauquette
+- [DateTimePicker] Create a new `tabs` component slot (#5972) @LukasTy
+- [pickers] Do not forward validation props to the DOM on field components (#5971) @flaviendelangle
+- [pickers] Do not hardcode `date-fns` elements in field components (#5975) @flaviendelangle
+- [pickers] Do not require `date-fns` in `@mui/x-date-pickers-pro` (#5941) @flaviendelangle
+- [pickers] Fix mobile picker not opening on label click (#5651) @LukasTy
+- [pickers] Improve DOM event management on `useField` (#5901) @flaviendelangle
+- [pickers] Include `community` package `themeAugmentation` in `pro` package types (#5969) @LukasTy
+- [pickers] Rename `DateRangeField` into `SingleInputDateRangeField` (#5961) @flaviendelangle
+- [pickers] Support `isSameError` on field components (#5984) @flaviendelangle
+
+### Docs
+
+- [docs] Add `description` and `default` to pickers slots (#5893) @alexfauquette
+- [docs] Fix typo (#5945) @wettopa
+- [docs] Fix typo `onYearPicker` to `onYearChange` (#5954) @alexfauquette
+- [docs] Update `GridCellParams`'s `value` description (#5849) @cherniavskii
+- [docs] Update `README.md` to match Introduction section of the docs (#5754) @samuelsycamore
+
+### Core
+
+- [core] Fix typo (#5990) @flaviendelangle
+- [core] Remove old babel resolve rule (#5939) @oliviertassinari
+- [core] Remove outdated TODO (#5956) @flaviendelangle
+- [core] Upgrade monorepo (#5960) @cherniavskii
+- [core] Fix statics (#5986) @DanailH
+- [core] Remove unused dependencies (#5937) @oliviertassinari
+- [license] Remove CLI (#5757) @flaviendelangle
+- [test] Fix time zone sensitive test (#5955) @LukasTy
+- [test] Use `userEvent.mousePress` instead of `fireClickEvent` (#5920) @cherniavskii
+
+## 5.16.0
+
+_Aug 25, 2022_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce column grouping for data grid (#5133) @alexfauquette
+
+  You can now group columns using the `columnGroupingModel` prop. This lets you to display more structured data.
+
+  <img src="https://user-images.githubusercontent.com/45398769/186178366-4fba66b2-bf90-4c7a-9d83-940a7fc78704.png" width="800" />
+
+  To enable this feature, add `experimentalFeatures={{ columnGrouping: true }}`.
+  The grouping header can be fully customized.
+  See the [documentation](https://mui.com/x/react-data-grid/column-groups/) to explore everything it has to offer.
+
+- 🐞 Bugfixes
+- 🌏 New locales for pickers thanks to @tesseractjh and @drastus
+
+### `@mui/x-data-grid@v5.16.0` / `@mui/x-data-grid-pro@v5.16.0` / `@mui/x-data-grid-premium@v5.16.0`
+
+#### Changes
+
+- [DataGrid] Implement column grouping (#5133) @alexfauquette
+- [DataGrid] Handle `disableVirtualization` prop change (#5889) @cherniavskii
+- [DataGrid] Improve `GridRowModel` typing (#5734) @cherniavskii
+- [DataGrid] Update deprecation note for `GridColDef` `hide` property (#5886) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.0-beta.7` / `@mui/x-date-pickers-pro@v5.0.0-beta.7`
+
+#### Changes
+
+- [DatePicker] Fix to pass down `className` prop provided on DatePicker to `renderInput` (#5471) @CruseCtrl
+- [DatePicker] Improve `a11y` support (#5809) @LukasTy
+- [pickers] Add `PaperContent` component slot (#5801) @LukasTy
+- [pickers] Add a breaking change section in the migration guide (#5805) @alexfauquette
+- [pickers] Add new translations to `localeText` (#5143) @alexfauquette
+- [pickers] Document components slots (#4657) @flaviendelangle
+- [pickers] Add new unstable field components (#5504) @flaviendelangle
+- [pickers] Fallback to default `minDate` / `maxDate` when `null` value is passed (#5397) @flaviendelangle
+- [l10n] Add Korean (ko-KR) locale (#5854) @tesseractjh
+- [l10n] Add Polish (pl-PL) locale (#5833) @drastus
+
+### Docs
+
+- [docs] Fix typo in `migration from lab` (#5277) @chuckwired
+- [docs] Use `dayjs` instead of `date-fns` in doc examples (#5481) @flaviendelangle
+
+### Core
+
+- [core] Clarify the scope of the license key used for tests and documentation (#5824) @oliviertassinari
+- [core] Fix Typescript error on field hooks (#5892) @flaviendelangle
+- [core] Memoize `columns` in `useDemoData` hook (#5848) @cherniavskii
+- [core] Remove Firefox from the BrowserStack list (#5874) @DanailH
+- [core] Small changes to the release script (#5840) @m4theushw
+
 ## 5.15.3
 
 _Aug 18, 2022_
@@ -529,7 +678,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   **MonthPicker**: The prop `onMonthChange` has been removed, you can use `onChange` instead since every change is a month change
 
-  **YearPicker**: The prop `onYearPicker` has been removed, you can use `onChange` instead since every change is a year change
+  **YearPicker**: The prop `onYearChange` has been removed, you can use `onChange` instead since every change is a year change
 
   **DayPicker**: The prop `isDateDisabled` has been removed, you can now use the same validation props as for the other components (`maxDate`, `minDate`, `shouldDisableDate`, `disableFuture` and `disablePast`)
 

package/DataGridPremium/DataGridPremium.js

@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -305,6 +306,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -714,6 +717,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -978,6 +989,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridColumnGroupingPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from '../hooks/features/aggregation/useGridAggregation';
 import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/useGridAggregationPreProcessors';
@@ -13,6 +13,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
@@ -47,6 +48,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridTreeData(apiRef);
   useGridAggregation(apiRef, props);
@@ -59,6 +61,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/hooks/features/aggregation/createAggregationLookup.js

@@ -23,8 +23,23 @@ const getAggregationCellValue = ({
 
   const values = [];
   rowIds.forEach(rowId => {
+    var _rowNode$children;
+
     if (aggregationRowsScope === 'filtered' && filteredRowsLookup[rowId] === false) {
       return;
+    } // If the row is a group, we want to aggregate based on its children
+    // For instance in the following tree, we want the aggregated values of A to be based on A.A, A.B.A and A.B.B but not A.B
+    // A
+    //   A.A
+    //   A.B
+    //     A.B.A
+    //     A.B.B
+
+
+    const rowNode = apiRef.current.getRowNode(rowId);
+
+    if ((_rowNode$children = rowNode.children) != null && _rowNode$children.length) {
+      return;
     }
 
     values.push(apiRef.current.getCellValue(rowId, field));

package/hooks/features/aggregation/gridAggregationUtils.d.ts

@@ -34,7 +34,7 @@ export declare const addFooterRows: ({ groupingParams, aggregationRules, getAggr
 /**
  * Compares two sets of aggregation rules to determine if they are equal or not.
  */
-export declare const hasAggregationRulesChanged: (previousValue: GridAggregationRules | undefined, newValue: GridAggregationRules) => boolean;
+export declare const areAggregationRulesEqual: (previousValue: GridAggregationRules | undefined, newValue: GridAggregationRules) => boolean;
 export declare const getAggregationFunctionLabel: ({ apiRef, aggregationRule, }: {
     apiRef: React.MutableRefObject<GridApiPremium>;
     aggregationRule: GridAggregationRule;

package/hooks/features/aggregation/gridAggregationUtils.js

@@ -149,27 +149,27 @@ export const addFooterRows = ({
  * Compares two sets of aggregation rules to determine if they are equal or not.
  */
 
-export const hasAggregationRulesChanged = (previousValue, newValue) => {
+export const areAggregationRulesEqual = (previousValue, newValue) => {
   const previousFields = Object.keys(previousValue != null ? previousValue : {});
   const newFields = Object.keys(newValue);
 
   if (!isDeepEqual(previousFields, newFields)) {
-    return true;
+    return false;
   }
 
-  return newFields.some(field => {
+  return newFields.every(field => {
     const previousRule = previousValue == null ? void 0 : previousValue[field];
     const newRule = newValue[field];
 
     if ((previousRule == null ? void 0 : previousRule.aggregationFunction) !== (newRule == null ? void 0 : newRule.aggregationFunction)) {
-      return true;
+      return false;
     }
 
     if ((previousRule == null ? void 0 : previousRule.aggregationFunctionName) !== (newRule == null ? void 0 : newRule.aggregationFunctionName)) {
-      return true;
+      return false;
     }
 
-    return false;
+    return true;
   });
 };
 export const getAggregationFunctionLabel = ({

package/hooks/features/aggregation/useGridAggregation.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridColumnLookupSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid-pro';
 import { gridAggregationModelSelector } from './gridAggregationSelectors';
-import { getAggregationRules, mergeStateWithAggregationModel, hasAggregationRulesChanged } from './gridAggregationUtils';
+import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from './gridAggregationUtils';
 import { createAggregationLookup } from './createAggregationLookup';
 export const aggregationStateInitializer = (state, props, apiRef) => {
   var _ref, _props$aggregationMod, _props$initialState, _props$initialState$a;
@@ -69,13 +69,13 @@ export const useGridAggregation = (apiRef, props) => {
       aggregationFunctions: props.aggregationFunctions
     }); // Re-apply the row hydration to add / remove the aggregation footers
 
-    if (hasAggregationRulesChanged(rulesOnLastRowHydration, aggregationRules)) {
+    if (!areAggregationRulesEqual(rulesOnLastRowHydration, aggregationRules)) {
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
       applyAggregation();
     } // Re-apply the column hydration to wrap / unwrap the aggregated columns
 
 
-    if (hasAggregationRulesChanged(rulesOnLastColumnHydration, aggregationRules)) {
+    if (!areAggregationRulesEqual(rulesOnLastColumnHydration, aggregationRules)) {
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
     }
   }, [apiRef, applyAggregation, props.aggregationFunctions, props.disableAggregation]);

package/hooks/features/aggregation/wrapColumnWithAggregation.js

@@ -161,11 +161,12 @@ export const wrapColumnWithAggregationValue = ({
   aggregationRule
 }) => {
   const getCellAggregationResult = (id, field) => {
-    var _parent, _gridAggregationLooku;
+    var _rowNode$children, _rowNode$parent, _gridAggregationLooku;
 
     let cellAggregationPosition = null;
+    const rowNode = apiRef.current.getRowNode(id);
 
-    if (id.toString().startsWith('auto-generated-row-')) {
+    if ((_rowNode$children = rowNode.children) != null && _rowNode$children.length) {
       cellAggregationPosition = 'inline';
     } else if (id.toString().startsWith('auto-generated-group-footer-')) {
       cellAggregationPosition = 'footer';
@@ -176,7 +177,7 @@ export const wrapColumnWithAggregationValue = ({
     } // TODO: Add custom root id
 
 
-    const groupId = cellAggregationPosition === 'inline' ? id : (_parent = apiRef.current.getRowNode(id).parent) != null ? _parent : '';
+    const groupId = cellAggregationPosition === 'inline' ? id : (_rowNode$parent = rowNode.parent) != null ? _rowNode$parent : '';
     const aggregationResult = (_gridAggregationLooku = gridAggregationLookupSelector(apiRef)[groupId]) == null ? void 0 : _gridAggregationLooku[field];
 
     if (!aggregationResult || aggregationResult.position !== cellAggregationPosition) {

package/hooks/features/rowGrouping/gridRowGroupingInterfaces.d.ts

@@ -1,3 +1,4 @@
+import { GridColDef } from '@mui/x-data-grid';
 export declare type GridRowGroupingModel = string[];
 export interface GridRowGroupingState {
     model: GridRowGroupingModel;
@@ -10,7 +11,7 @@ export interface GridRowGroupingInternalCache {
      * Tracks the model on the last pre-processing
      * Allows to check if we need to re-build the grouping columns when the grid upserts a column.
      */
-    sanitizedModelOnLastRowTreeCreation: GridRowGroupingModel;
+    rulesOnLastRowTreeCreation: GridGroupingRules;
 }
 export interface GridRowGroupingApi {
     /**
@@ -36,3 +37,8 @@ export interface GridRowGroupingApi {
      */
     setRowGroupingCriteriaIndex: (groupingCriteriaField: string, groupingIndex: number) => void;
 }
+export interface GridGroupingRule<R = any, V = any> {
+    field: string;
+    groupingValueGetter?: GridColDef<R, V>['groupingValueGetter'];
+}
+export declare type GridGroupingRules<R = any> = GridGroupingRule<R>[];

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { GridRowTreeConfig, GridFilterState, GridFilterModel } from '@mui/x-data-grid-pro';
-import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid-pro/internals';
+import { GridAggregatedFilterItemApplier, GridColumnRawLookup, GridApiCommunity } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
-import { GridRowGroupingModel } from './gridRowGroupingInterfaces';
+import { GridGroupingRules, GridRowGroupingModel } from './gridRowGroupingInterfaces';
 import { GridStatePremium } from '../../../models/gridStatePremium';
 import { GridApiPremium } from '../../../models/gridApiPremium';
 export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
@@ -14,6 +14,7 @@ interface FilterRowTreeFromTreeDataParams {
     rowTree: GridRowTreeConfig;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;
+    apiRef: React.MutableRefObject<GridApiCommunity>;
 }
 /**
  * A leaf is visible if it passed the filter
@@ -25,4 +26,12 @@ export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFro
 export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps['groupingColDef'], fields: string[]) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePremium) => GridStatePremium;
 export declare const setStrategyAvailability: (apiRef: React.MutableRefObject<GridApiPremium>, disableRowGrouping: boolean) => void;
+export declare const getGroupingRules: ({ sanitizedRowGroupingModel, columnsLookup, }: {
+    sanitizedRowGroupingModel: GridRowGroupingModel;
+    columnsLookup: GridColumnRawLookup;
+}) => GridGroupingRules<any>;
+/**
+ * Compares two sets of grouping rules to determine if they are equal or not.
+ */
+export declare const areGroupingRulesEqual: (previousValue: GridGroupingRules | undefined, newValue: GridGroupingRules<any>) => boolean;
 export {};

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -81,7 +81,7 @@ export const filterRowTreeFromGroupingColumns = params => {
         isPassingFiltering = filteredDescendantCount > 0;
       } else {
         const allResults = [...ancestorsResults, filterResults];
-        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel);
+        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, params.apiRef);
       }
     }
 
@@ -149,4 +149,38 @@ export const setStrategyAvailability = (apiRef, disableRowGrouping) => {
   }
 
   apiRef.current.unstable_setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+};
+export const getGroupingRules = ({
+  sanitizedRowGroupingModel,
+  columnsLookup
+}) => sanitizedRowGroupingModel.map(field => {
+  var _columnsLookup$field;
+
+  return {
+    field,
+    groupingValueGetter: (_columnsLookup$field = columnsLookup[field]) == null ? void 0 : _columnsLookup$field.groupingValueGetter
+  };
+});
+/**
+ * Compares two sets of grouping rules to determine if they are equal or not.
+ */
+
+export const areGroupingRulesEqual = (previousValue = [], newValue) => {
+  if (previousValue.length !== newValue.length) {
+    return false;
+  }
+
+  return newValue.every((newRule, newRuleIndex) => {
+    const previousRule = previousValue[newRuleIndex];
+
+    if (previousRule.groupingValueGetter !== newRule.groupingValueGetter) {
+      return false;
+    }
+
+    if (previousRule.field !== newRule.field) {
+      return false;
+    }
+
+    return true;
+  });
 };

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import MuiDivider from '@mui/material/Divider';
-import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
+import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector, gridColumnLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
-import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
+import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from './gridRowGroupingUtils';
 import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
 import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -17,7 +17,7 @@ export const rowGroupingStateInitializer = (state, props, apiRef) => {
   var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
 
   apiRef.current.unstable_caches.rowGrouping = {
-    sanitizedModelOnLastRowTreeCreation: []
+    rulesOnLastRowTreeCreation: []
   };
   return _extends({}, state, {
     rowGrouping: {
@@ -179,11 +179,15 @@ export const useGridRowGrouping = (apiRef, props) => {
     }
   }, [apiRef, props.rowGroupingColumnMode]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
-    const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-    const lastGroupingColumnsModelApplied = apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation;
+    const sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    const rulesOnLastRowTreeCreation = apiRef.current.unstable_caches.rowGrouping.rulesOnLastRowTreeCreation;
+    const groupingRules = getGroupingRules({
+      sanitizedRowGroupingModel,
+      columnsLookup: gridColumnLookupSelector(apiRef)
+    });
 
-    if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
-      apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation = rowGroupingModel;
+    if (!areGroupingRulesEqual(rulesOnLastRowTreeCreation, groupingRules)) {
+      apiRef.current.unstable_caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
       setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -4,7 +4,7 @@ import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useF
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, buildRowTree } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
-import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
+import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability, getGroupingRules } from './gridRowGroupingUtils';
 export const useGridRowGroupingPreProcessors = (apiRef, props) => {
   const getGroupingColDefs = React.useCallback(columnsState => {
     if (props.disableRowGrouping) {
@@ -75,22 +75,27 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
     return columnsState;
   }, [getGroupingColDefs]);
   const createRowTree = React.useCallback(params => {
-    const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
+    const sanitizedRowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
     const columnsLookup = gridColumnLookupSelector(apiRef);
-    apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation = rowGroupingModel;
+    const groupingRules = getGroupingRules({
+      sanitizedRowGroupingModel,
+      columnsLookup
+    });
+    apiRef.current.unstable_caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
 
     const getCellGroupingCriteria = ({
       row,
       id,
-      colDef
+      colDef,
+      groupingRule
     }) => {
       let key;
 
-      if (colDef.groupingValueGetter) {
+      if (groupingRule.groupingValueGetter) {
         const groupingValueGetterParams = {
           colDef,
-          field: colDef.field,
-          value: row[colDef.field],
+          field: groupingRule.field,
+          value: row[groupingRule.field],
           id,
           row,
           rowNode: {
@@ -98,9 +103,9 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
             id
           }
         };
-        key = colDef.groupingValueGetter(groupingValueGetterParams);
+        key = groupingRule.groupingValueGetter(groupingValueGetterParams);
       } else {
-        key = row[colDef.field];
+        key = row[groupingRule.field];
       }
 
       return {
@@ -111,10 +116,11 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
 
     const rows = params.ids.map(rowId => {
       const row = params.idRowsLookup[rowId];
-      const parentPath = rowGroupingModel.map(groupingField => getCellGroupingCriteria({
+      const parentPath = groupingRules.map(groupingRule => getCellGroupingCriteria({
         row,
         id: rowId,
-        colDef: columnsLookup[groupingField]
+        groupingRule,
+        colDef: columnsLookup[groupingRule.field]
       })).filter(cell => cell.key != null);
       const leafGroupingCriteria = {
         key: rowId.toString(),
@@ -137,7 +143,8 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
     return filterRowTreeFromGroupingColumns({
       rowTree,
       isRowMatchingFilters: params.isRowMatchingFilters,
-      filterModel: params.filterModel
+      filterModel: params.filterModel,
+      apiRef
     });
   }, [apiRef]);
   const sortRows = React.useCallback(params => {

package/index.js

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

package/legacy/DataGridPremium/DataGridPremium.js

@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -305,6 +306,8 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -714,6 +717,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -978,6 +989,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"