@mui/x-data-grid-pro 7.21.0 → 7.22.0

package/CHANGELOG.md

@@ -3,6 +3,86 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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/GridDataSourceTreeDataGroupingCell.js

@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _Box = _interopRequireDefault(require("@mui/material/Box"));
-var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
@@ -69,7 +68,7 @@ function GridTreeDataGroupingCellIcon(props) {
   }, rootProps?.slotProps?.baseIconButton, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, {
       title: error?.message ?? null,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseBadge, {
         variant: "dot",
         color: "error",
         invisible: !error,

package/esm/components/GridDataSourceTreeDataGroupingCell.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
-import Badge from '@mui/material/Badge';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
 import { useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -61,7 +60,7 @@ function GridTreeDataGroupingCellIcon(props) {
   }, rootProps?.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
       title: error?.message ?? null,
-      children: /*#__PURE__*/_jsx(Badge, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
         variant: "dot",
         color: "error",
         invisible: !error,

package/esm/hooks/features/dataSource/cache.js

@@ -1,5 +1,5 @@
 function getKey(params) {
-  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys]);
+  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys, params.groupFields]);
 }
 export class GridDataSourceCacheDefault {
   constructor({

package/esm/hooks/features/dataSource/gridDataSourceSelector.js

@@ -12,8 +12,6 @@ const computeStartEnd = paginationModel => {
 export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => {
   return _extends({
     groupKeys: [],
-    // TODO: Implement with `rowGrouping`
-    groupFields: [],
     paginationModel,
     sortModel,
     filterModel

package/esm/hooks/features/dataSource/useGridDataSource.js

@@ -47,7 +47,7 @@ export const useGridDataSource = (apiRef, props) => {
     if (dataSourceState !== INITIAL_STATE) {
       apiRef.current.resetDataSourceState();
     }
-    const fetchParams = gridGetRowsParamsSelector(apiRef);
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
@@ -76,7 +76,8 @@ export const useGridDataSource = (apiRef, props) => {
     }
   }, [nestedDataManager, apiRef, props.unstable_dataSource?.getRows, onError]);
   const fetchRowChildren = React.useCallback(async id => {
-    if (!props.treeData) {
+    const pipedParams = apiRef.current.unstable_applyPipeProcessors('getRowsParams', {});
+    if (!props.treeData && (pipedParams.groupFields?.length ?? 0) === 0) {
       nestedDataManager.clearPendingRequest(id);
       return;
     }
@@ -90,7 +91,7 @@ export const useGridDataSource = (apiRef, props) => {
       nestedDataManager.clearPendingRequest(id);
       return;
     }
-    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), {
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), pipedParams, {
       groupKeys: rowNode.path
     });
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
@@ -193,6 +194,8 @@ export const useGridDataSource = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, fetchRows));
   useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, fetchRows));
   useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, fetchRows));
+  // @ts-ignore - Event is not defined in the Pro API
+  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', () => fetchRows());
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/esm/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -10,18 +10,18 @@ import { GridDataSourceTreeDataGroupingCell } from "../../../components/GridData
 import { createRowTree } from "../../../utils/tree/createRowTree.js";
 import { updateRowTree } from "../../../utils/tree/updateRowTree.js";
 import { getVisibleRowsLookup } from "../../../utils/tree/utils.js";
+import { TreeDataStrategy } from "../treeData/gridTreeDataUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const DATA_SOURCE_TREE_DATA_STRATEGY = 'dataSourceTreeData';
 export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
-    privateApiRef.current.setStrategyAvailability('rowTree', DATA_SOURCE_TREE_DATA_STRATEGY, props.treeData && props.unstable_dataSource ? () => true : () => false);
+    privateApiRef.current.setStrategyAvailability('rowTree', TreeDataStrategy.DataSource, props.treeData && props.unstable_dataSource ? () => true : () => false);
   }, [privateApiRef, props.treeData, props.unstable_dataSource]);
   const getGroupingColDef = React.useCallback(() => {
     const groupingColDefProp = props.groupingColDef;
     let colDefOverride;
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.DataSource,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -95,7 +95,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.DataSource,
         onDuplicatePath
       });
     }
@@ -110,7 +110,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: DATA_SOURCE_TREE_DATA_STRATEGY
+      groupingName: TreeDataStrategy.DataSource
     });
   }, [props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(() => {
@@ -122,10 +122,10 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
     return skipSorting(rowTree);
   }, [privateApiRef]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'filtering', filterRows);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'sorting', sortRows);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'rowTreeCreation', createRowTreeForTreeData);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/esm/hooks/features/treeData/gridTreeDataUtils.js

@@ -1,5 +1,9 @@
 import { passFilterLogic } from '@mui/x-data-grid/internals';
-export const TREE_DATA_STRATEGY = 'tree-data';
+export let TreeDataStrategy = /*#__PURE__*/function (TreeDataStrategy) {
+  TreeDataStrategy["Default"] = "tree-data";
+  TreeDataStrategy["DataSource"] = "tree-data-source";
+  return TreeDataStrategy;
+}({});
 
 /**
  * A node is visible if one of the following criteria is met:

package/esm/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "./gridTreeDataGroupColDef.js";
-import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from "./gridTreeDataUtils.js";
+import { filterRowTreeFromTreeData, TreeDataStrategy } from "./gridTreeDataUtils.js";
 import { GridTreeDataGroupingCell } from "../../../components/index.js";
 import { createRowTree } from "../../../utils/tree/createRowTree.js";
 import { sortRowTree } from "../../../utils/tree/sortRowTree.js";
@@ -14,14 +14,14 @@ import { getVisibleRowsLookup } from "../../../utils/tree/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
-    privateApiRef.current.setStrategyAvailability('rowTree', TREE_DATA_STRATEGY, props.treeData && !props.unstable_dataSource ? () => true : () => false);
+    privateApiRef.current.setStrategyAvailability('rowTree', TreeDataStrategy.Default, props.treeData && !props.unstable_dataSource ? () => true : () => false);
   }, [privateApiRef, props.treeData, props.unstable_dataSource]);
   const getGroupingColDef = React.useCallback(() => {
     const groupingColDefProp = props.groupingColDef;
     let colDefOverride;
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.Default,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -85,7 +85,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.Default,
         onDuplicatePath
       });
     }
@@ -99,7 +99,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: TREE_DATA_STRATEGY
+      groupingName: TreeDataStrategy.Default
     });
   }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
@@ -122,10 +122,10 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
     });
   }, [privateApiRef, props.disableChildrenSorting]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'rowTreeCreation', createRowTreeForTreeData);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/esm/internals/index.js

@@ -22,7 +22,6 @@ export { useGridRowReorder } from "../hooks/features/rowReorder/useGridRowReorde
 export { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
 export { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
 export { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.js";
-export { TREE_DATA_STRATEGY } from "../hooks/features/treeData/gridTreeDataUtils.js";
 export { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features/rowPinning/useGridRowPinning.js";
 export { useGridRowPinningPreProcessors, addPinnedRow } from "../hooks/features/rowPinning/useGridRowPinningPreProcessors.js";
 export { useGridLazyLoader } from "../hooks/features/lazyLoader/useGridLazyLoader.js";
@@ -32,4 +31,5 @@ export { createRowTree } from "../utils/tree/createRowTree.js";
 export { updateRowTree } from "../utils/tree/updateRowTree.js";
 export { sortRowTree } from "../utils/tree/sortRowTree.js";
 export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from "../utils/tree/utils.js";
+export { skipSorting, skipFiltering } from "../hooks/features/serverSideTreeData/utils.js";
 export * from "./propValidation.js";

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyOTExNjAwMDAwMA==";
+  const releaseInfo = "MTcyOTc5NjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/hooks/features/dataSource/cache.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridDataSourceCacheDefault = void 0;
 function getKey(params) {
-  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys]);
+  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys, params.groupFields]);
 }
 class GridDataSourceCacheDefault {
   constructor({

package/hooks/features/dataSource/gridDataSourceSelector.d.ts

@@ -4,7 +4,6 @@ export declare const gridGetRowsParamsSelector: import("@mui/x-data-grid").Outpu
     start: number;
     end: number;
     groupKeys: never[];
-    groupFields: never[];
     paginationModel: GridPaginationModel;
     sortModel: import("@mui/x-data-grid").GridSortModel;
     filterModel: import("@mui/x-data-grid").GridFilterModel;

package/hooks/features/dataSource/gridDataSourceSelector.js

@@ -19,8 +19,6 @@ const computeStartEnd = paginationModel => {
 const gridGetRowsParamsSelector = exports.gridGetRowsParamsSelector = (0, _internals.createSelector)(_xDataGrid.gridFilterModelSelector, _xDataGrid.gridSortModelSelector, _xDataGrid.gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => {
   return (0, _extends2.default)({
     groupKeys: [],
-    // TODO: Implement with `rowGrouping`
-    groupFields: [],
     paginationModel,
     sortModel,
     filterModel

package/hooks/features/dataSource/useGridDataSource.js

@@ -56,7 +56,7 @@ const useGridDataSource = (apiRef, props) => {
     if (dataSourceState !== INITIAL_STATE) {
       apiRef.current.resetDataSourceState();
     }
-    const fetchParams = (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef);
+    const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
@@ -85,7 +85,8 @@ const useGridDataSource = (apiRef, props) => {
     }
   }, [nestedDataManager, apiRef, props.unstable_dataSource?.getRows, onError]);
   const fetchRowChildren = React.useCallback(async id => {
-    if (!props.treeData) {
+    const pipedParams = apiRef.current.unstable_applyPipeProcessors('getRowsParams', {});
+    if (!props.treeData && (pipedParams.groupFields?.length ?? 0) === 0) {
       nestedDataManager.clearPendingRequest(id);
       return;
     }
@@ -99,7 +100,7 @@ const useGridDataSource = (apiRef, props) => {
       nestedDataManager.clearPendingRequest(id);
       return;
     }
-    const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), {
+    const fetchParams = (0, _extends2.default)({}, (0, _gridDataSourceSelector.gridGetRowsParamsSelector)(apiRef), pipedParams, {
       groupKeys: rowNode.path
     });
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
@@ -202,6 +203,8 @@ const useGridDataSource = (apiRef, props) => {
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'sortModelChange', (0, _utils.runIfServerMode)(props.sortingMode, fetchRows));
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'filterModelChange', (0, _utils.runIfServerMode)(props.filterMode, fetchRows));
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'paginationModelChange', (0, _utils.runIfServerMode)(props.paginationMode, fetchRows));
+  // @ts-ignore - Event is not defined in the Pro API
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'rowGroupingModelChange', () => fetchRows());
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -17,19 +17,19 @@ var _GridDataSourceTreeDataGroupingCell = require("../../../components/GridDataS
 var _createRowTree = require("../../../utils/tree/createRowTree");
 var _updateRowTree = require("../../../utils/tree/updateRowTree");
 var _utils2 = require("../../../utils/tree/utils");
+var _gridTreeDataUtils = require("../treeData/gridTreeDataUtils");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["hideDescendantCount"];
-const DATA_SOURCE_TREE_DATA_STRATEGY = 'dataSourceTreeData';
 const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
-    privateApiRef.current.setStrategyAvailability('rowTree', DATA_SOURCE_TREE_DATA_STRATEGY, props.treeData && props.unstable_dataSource ? () => true : () => false);
+    privateApiRef.current.setStrategyAvailability('rowTree', _gridTreeDataUtils.TreeDataStrategy.DataSource, props.treeData && props.unstable_dataSource ? () => true : () => false);
   }, [privateApiRef, props.treeData, props.unstable_dataSource]);
   const getGroupingColDef = React.useCallback(() => {
     const groupingColDefProp = props.groupingColDef;
     let colDefOverride;
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        groupingName: _gridTreeDataUtils.TreeDataStrategy.DataSource,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -103,7 +103,7 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        groupingName: _gridTreeDataUtils.TreeDataStrategy.DataSource,
         onDuplicatePath
       });
     }
@@ -118,7 +118,7 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: DATA_SOURCE_TREE_DATA_STRATEGY
+      groupingName: _gridTreeDataUtils.TreeDataStrategy.DataSource
     });
   }, [props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(() => {
@@ -130,10 +130,10 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
     return (0, _utils.skipSorting)(rowTree);
   }, [privateApiRef]);
   (0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'hydrateColumns', updateGroupingColumn);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'filtering', filterRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'sorting', sortRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', _utils2.getVisibleRowsLookup);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.DataSource, 'rowTreeCreation', createRowTreeForTreeData);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.DataSource, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.DataSource, 'sorting', sortRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.DataSource, 'visibleRowsLookupCreation', _utils2.getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/hooks/features/treeData/gridTreeDataUtils.d.ts

@@ -8,7 +8,10 @@ interface FilterRowTreeFromTreeDataParams {
     filterModel: GridFilterModel;
     apiRef: React.MutableRefObject<GridPrivateApiPro>;
 }
-export declare const TREE_DATA_STRATEGY = "tree-data";
+export declare enum TreeDataStrategy {
+    Default = "tree-data",
+    DataSource = "tree-data-source"
+}
 /**
  * A node is visible if one of the following criteria is met:
  * - One of its children is passing the filter

package/hooks/features/treeData/gridTreeDataUtils.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.filterRowTreeFromTreeData = exports.TREE_DATA_STRATEGY = void 0;
+exports.filterRowTreeFromTreeData = exports.TreeDataStrategy = void 0;
 var _internals = require("@mui/x-data-grid/internals");
-const TREE_DATA_STRATEGY = exports.TREE_DATA_STRATEGY = 'tree-data';
-
+let TreeDataStrategy = exports.TreeDataStrategy = /*#__PURE__*/function (TreeDataStrategy) {
+  TreeDataStrategy["Default"] = "tree-data";
+  TreeDataStrategy["DataSource"] = "tree-data-source";
+  return TreeDataStrategy;
+}({});
 /**
  * A node is visible if one of the following criteria is met:
  * - One of its children is passing the filter

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -22,14 +22,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["hideDescendantCount"];
 const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
-    privateApiRef.current.setStrategyAvailability('rowTree', _gridTreeDataUtils.TREE_DATA_STRATEGY, props.treeData && !props.unstable_dataSource ? () => true : () => false);
+    privateApiRef.current.setStrategyAvailability('rowTree', _gridTreeDataUtils.TreeDataStrategy.Default, props.treeData && !props.unstable_dataSource ? () => true : () => false);
   }, [privateApiRef, props.treeData, props.unstable_dataSource]);
   const getGroupingColDef = React.useCallback(() => {
     const groupingColDefProp = props.groupingColDef;
     let colDefOverride;
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY,
+        groupingName: _gridTreeDataUtils.TreeDataStrategy.Default,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -93,7 +93,7 @@ const useGridTreeDataPreProcessors = (privateApiRef, props) => {
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY,
+        groupingName: _gridTreeDataUtils.TreeDataStrategy.Default,
         onDuplicatePath
       });
     }
@@ -107,7 +107,7 @@ const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: _gridTreeDataUtils.TREE_DATA_STRATEGY
+      groupingName: _gridTreeDataUtils.TreeDataStrategy.Default
     });
   }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
@@ -130,10 +130,10 @@ const useGridTreeDataPreProcessors = (privateApiRef, props) => {
     });
   }, [privateApiRef, props.disableChildrenSorting]);
   (0, _internals.useGridRegisterPipeProcessor)(privateApiRef, 'hydrateColumns', updateGroupingColumn);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'filtering', filterRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'sorting', sortRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', _utils.getVisibleRowsLookup);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.Default, 'rowTreeCreation', createRowTreeForTreeData);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.Default, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.Default, 'sorting', sortRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(privateApiRef, _gridTreeDataUtils.TreeDataStrategy.Default, 'visibleRowsLookupCreation', _utils.getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.21.0
+ * @mui/x-data-grid-pro v7.22.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/internals/index.d.ts

@@ -15,7 +15,6 @@ export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorde
 export { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
 export { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
-export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
 export { useGridRowPinning, rowPinningStateInitializer, } from '../hooks/features/rowPinning/useGridRowPinning';
 export { useGridRowPinningPreProcessors, addPinnedRow, } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoader';
@@ -27,4 +26,5 @@ export { updateRowTree } from '../utils/tree/updateRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';
 export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from '../utils/tree/utils';
 export type { RowTreeBuilderGroupingCriterion } from '../utils/tree/models';
+export { skipSorting, skipFiltering } from '../hooks/features/serverSideTreeData/utils';
 export * from './propValidation';

package/internals/index.js

@@ -23,7 +23,6 @@ var _exportNames = {
   useGridRowReorderPreProcessors: true,
   useGridTreeData: true,
   useGridTreeDataPreProcessors: true,
-  TREE_DATA_STRATEGY: true,
   useGridRowPinning: true,
   rowPinningStateInitializer: true,
   useGridRowPinningPreProcessors: true,
@@ -37,7 +36,9 @@ var _exportNames = {
   sortRowTree: true,
   insertNodeInTree: true,
   removeNodeFromTree: true,
-  getVisibleRowsLookup: true
+  getVisibleRowsLookup: true,
+  skipSorting: true,
+  skipFiltering: true
 };
 Object.defineProperty(exports, "DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS", {
   enumerable: true,
@@ -51,12 +52,6 @@ Object.defineProperty(exports, "GridColumnHeaders", {
     return _GridColumnHeaders.GridColumnHeaders;
   }
 });
-Object.defineProperty(exports, "TREE_DATA_STRATEGY", {
-  enumerable: true,
-  get: function () {
-    return _gridTreeDataUtils.TREE_DATA_STRATEGY;
-  }
-});
 Object.defineProperty(exports, "addPinnedRow", {
   enumerable: true,
   get: function () {
@@ -117,6 +112,18 @@ Object.defineProperty(exports, "rowPinningStateInitializer", {
     return _useGridRowPinning.rowPinningStateInitializer;
   }
 });
+Object.defineProperty(exports, "skipFiltering", {
+  enumerable: true,
+  get: function () {
+    return _utils2.skipFiltering;
+  }
+});
+Object.defineProperty(exports, "skipSorting", {
+  enumerable: true,
+  get: function () {
+    return _utils2.skipSorting;
+  }
+});
 Object.defineProperty(exports, "sortRowTree", {
   enumerable: true,
   get: function () {
@@ -271,7 +278,6 @@ var _useGridRowReorder = require("../hooks/features/rowReorder/useGridRowReorder
 var _useGridRowReorderPreProcessors = require("../hooks/features/rowReorder/useGridRowReorderPreProcessors");
 var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
 var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
-var _gridTreeDataUtils = require("../hooks/features/treeData/gridTreeDataUtils");
 var _useGridRowPinning = require("../hooks/features/rowPinning/useGridRowPinning");
 var _useGridRowPinningPreProcessors = require("../hooks/features/rowPinning/useGridRowPinningPreProcessors");
 var _useGridLazyLoader = require("../hooks/features/lazyLoader/useGridLazyLoader");
@@ -281,6 +287,7 @@ var _createRowTree = require("../utils/tree/createRowTree");
 var _updateRowTree = require("../utils/tree/updateRowTree");
 var _sortRowTree = require("../utils/tree/sortRowTree");
 var _utils = require("../utils/tree/utils");
+var _utils2 = require("../hooks/features/serverSideTreeData/utils");
 var _propValidation = require("./propValidation");
 Object.keys(_propValidation).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/modern/components/GridDataSourceTreeDataGroupingCell.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
-import Badge from '@mui/material/Badge';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
 import { useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import CircularProgress from '@mui/material/CircularProgress';
@@ -61,7 +60,7 @@ function GridTreeDataGroupingCellIcon(props) {
   }, rootProps?.slotProps?.baseIconButton, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
       title: error?.message ?? null,
-      children: /*#__PURE__*/_jsx(Badge, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
         variant: "dot",
         color: "error",
         invisible: !error,

package/modern/hooks/features/dataSource/cache.js

@@ -1,5 +1,5 @@
 function getKey(params) {
-  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys]);
+  return JSON.stringify([params.paginationModel, params.filterModel, params.sortModel, params.groupKeys, params.groupFields]);
 }
 export class GridDataSourceCacheDefault {
   constructor({

package/modern/hooks/features/dataSource/gridDataSourceSelector.js

@@ -12,8 +12,6 @@ const computeStartEnd = paginationModel => {
 export const gridGetRowsParamsSelector = createSelector(gridFilterModelSelector, gridSortModelSelector, gridPaginationModelSelector, (filterModel, sortModel, paginationModel) => {
   return _extends({
     groupKeys: [],
-    // TODO: Implement with `rowGrouping`
-    groupFields: [],
     paginationModel,
     sortModel,
     filterModel

package/modern/hooks/features/dataSource/useGridDataSource.js

@@ -47,7 +47,7 @@ export const useGridDataSource = (apiRef, props) => {
     if (dataSourceState !== INITIAL_STATE) {
       apiRef.current.resetDataSourceState();
     }
-    const fetchParams = gridGetRowsParamsSelector(apiRef);
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), apiRef.current.unstable_applyPipeProcessors('getRowsParams', {}));
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
@@ -76,7 +76,8 @@ export const useGridDataSource = (apiRef, props) => {
     }
   }, [nestedDataManager, apiRef, props.unstable_dataSource?.getRows, onError]);
   const fetchRowChildren = React.useCallback(async id => {
-    if (!props.treeData) {
+    const pipedParams = apiRef.current.unstable_applyPipeProcessors('getRowsParams', {});
+    if (!props.treeData && (pipedParams.groupFields?.length ?? 0) === 0) {
       nestedDataManager.clearPendingRequest(id);
       return;
     }
@@ -90,7 +91,7 @@ export const useGridDataSource = (apiRef, props) => {
       nestedDataManager.clearPendingRequest(id);
       return;
     }
-    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), {
+    const fetchParams = _extends({}, gridGetRowsParamsSelector(apiRef), pipedParams, {
       groupKeys: rowNode.path
     });
     const cachedData = apiRef.current.unstable_dataSource.cache.get(fetchParams);
@@ -193,6 +194,8 @@ export const useGridDataSource = (apiRef, props) => {
   useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, fetchRows));
   useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, fetchRows));
   useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, fetchRows));
+  // @ts-ignore - Event is not defined in the Pro API
+  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', () => fetchRows());
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/modern/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -10,18 +10,18 @@ import { GridDataSourceTreeDataGroupingCell } from "../../../components/GridData
 import { createRowTree } from "../../../utils/tree/createRowTree.js";
 import { updateRowTree } from "../../../utils/tree/updateRowTree.js";
 import { getVisibleRowsLookup } from "../../../utils/tree/utils.js";
+import { TreeDataStrategy } from "../treeData/gridTreeDataUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const DATA_SOURCE_TREE_DATA_STRATEGY = 'dataSourceTreeData';
 export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
-    privateApiRef.current.setStrategyAvailability('rowTree', DATA_SOURCE_TREE_DATA_STRATEGY, props.treeData && props.unstable_dataSource ? () => true : () => false);
+    privateApiRef.current.setStrategyAvailability('rowTree', TreeDataStrategy.DataSource, props.treeData && props.unstable_dataSource ? () => true : () => false);
   }, [privateApiRef, props.treeData, props.unstable_dataSource]);
   const getGroupingColDef = React.useCallback(() => {
     const groupingColDefProp = props.groupingColDef;
     let colDefOverride;
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.DataSource,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -95,7 +95,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: DATA_SOURCE_TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.DataSource,
         onDuplicatePath
       });
     }
@@ -110,7 +110,7 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: DATA_SOURCE_TREE_DATA_STRATEGY
+      groupingName: TreeDataStrategy.DataSource
     });
   }, [props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(() => {
@@ -122,10 +122,10 @@ export const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) =>
     return skipSorting(rowTree);
   }, [privateApiRef]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'filtering', filterRows);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'sorting', sortRows);
-  useGridRegisterStrategyProcessor(privateApiRef, DATA_SOURCE_TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'rowTreeCreation', createRowTreeForTreeData);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.DataSource, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/modern/hooks/features/treeData/gridTreeDataUtils.js

@@ -1,5 +1,9 @@
 import { passFilterLogic } from '@mui/x-data-grid/internals';
-export const TREE_DATA_STRATEGY = 'tree-data';
+export let TreeDataStrategy = /*#__PURE__*/function (TreeDataStrategy) {
+  TreeDataStrategy["Default"] = "tree-data";
+  TreeDataStrategy["DataSource"] = "tree-data-source";
+  return TreeDataStrategy;
+}({});
 
 /**
  * A node is visible if one of the following criteria is met:

package/modern/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from "./gridTreeDataGroupColDef.js";
-import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from "./gridTreeDataUtils.js";
+import { filterRowTreeFromTreeData, TreeDataStrategy } from "./gridTreeDataUtils.js";
 import { GridTreeDataGroupingCell } from "../../../components/index.js";
 import { createRowTree } from "../../../utils/tree/createRowTree.js";
 import { sortRowTree } from "../../../utils/tree/sortRowTree.js";
@@ -14,14 +14,14 @@ import { getVisibleRowsLookup } from "../../../utils/tree/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
   const setStrategyAvailability = React.useCallback(() => {
-    privateApiRef.current.setStrategyAvailability('rowTree', TREE_DATA_STRATEGY, props.treeData && !props.unstable_dataSource ? () => true : () => false);
+    privateApiRef.current.setStrategyAvailability('rowTree', TreeDataStrategy.Default, props.treeData && !props.unstable_dataSource ? () => true : () => false);
   }, [privateApiRef, props.treeData, props.unstable_dataSource]);
   const getGroupingColDef = React.useCallback(() => {
     const groupingColDefProp = props.groupingColDef;
     let colDefOverride;
     if (typeof groupingColDefProp === 'function') {
       const params = {
-        groupingName: TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.Default,
         fields: []
       };
       colDefOverride = groupingColDefProp(params);
@@ -85,7 +85,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: TREE_DATA_STRATEGY,
+        groupingName: TreeDataStrategy.Default,
         onDuplicatePath
       });
     }
@@ -99,7 +99,7 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: TREE_DATA_STRATEGY
+      groupingName: TreeDataStrategy.Default
     });
   }, [props.getTreeDataPath, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
@@ -122,10 +122,10 @@ export const useGridTreeDataPreProcessors = (privateApiRef, props) => {
     });
   }, [privateApiRef, props.disableChildrenSorting]);
   useGridRegisterPipeProcessor(privateApiRef, 'hydrateColumns', updateGroupingColumn);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTreeForTreeData);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);
-  useGridRegisterStrategyProcessor(privateApiRef, TREE_DATA_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'rowTreeCreation', createRowTreeForTreeData);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'filtering', filterRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(privateApiRef, TreeDataStrategy.Default, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.21.0
+ * @mui/x-data-grid-pro v7.22.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/internals/index.js

@@ -22,7 +22,6 @@ export { useGridRowReorder } from "../hooks/features/rowReorder/useGridRowReorde
 export { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
 export { useGridTreeData } from "../hooks/features/treeData/useGridTreeData.js";
 export { useGridTreeDataPreProcessors } from "../hooks/features/treeData/useGridTreeDataPreProcessors.js";
-export { TREE_DATA_STRATEGY } from "../hooks/features/treeData/gridTreeDataUtils.js";
 export { useGridRowPinning, rowPinningStateInitializer } from "../hooks/features/rowPinning/useGridRowPinning.js";
 export { useGridRowPinningPreProcessors, addPinnedRow } from "../hooks/features/rowPinning/useGridRowPinningPreProcessors.js";
 export { useGridLazyLoader } from "../hooks/features/lazyLoader/useGridLazyLoader.js";
@@ -32,4 +31,5 @@ export { createRowTree } from "../utils/tree/createRowTree.js";
 export { updateRowTree } from "../utils/tree/updateRowTree.js";
 export { sortRowTree } from "../utils/tree/sortRowTree.js";
 export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from "../utils/tree/utils.js";
+export { skipSorting, skipFiltering } from "../hooks/features/serverSideTreeData/utils.js";
 export * from "./propValidation.js";

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTcyOTExNjAwMDAwMA==";
+  const releaseInfo = "MTcyOTc5NjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.21.0",
+  "version": "7.22.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -41,7 +41,7 @@
     "reselect": "^5.1.1",
     "@mui/x-internals": "7.21.0",
     "@mui/x-license": "7.21.0",
-    "@mui/x-data-grid": "7.21.0"
+    "@mui/x-data-grid": "7.22.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTcyOTExNjAwMDAwMA==";
+  const releaseInfo = "MTcyOTc5NjQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat