@mui/x-data-grid-pro 7.24.0 → 7.25.0

package/CHANGELOG.md

@@ -3,6 +3,154 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.25.0
+
+_Jan 31, 2025_
+
+We'd like to offer a big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@k-rajat19, @lauri865.
+Following are all team members who have contributed to this release:
+@KenanYusuf, @MBilalShafi, @arminmeh.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.25.0`
+
+- [DataGrid] Fix `renderContext` calculation with scroll bounce / over-scroll (#16368) @lauri865
+- [DataGrid] Refactor row state propagation (#16351) @lauri865
+- [DataGrid] Add missing style overrides (#16272) (#16358) @KenanYusuf
+- [DataGrid] Fix header filters keyboard navigation when there are no rows (#16369) @k-rajat19
+- [DataGrid] Fix order of `onClick` prop on toolbar buttons (#16364) @KenanYusuf
+- [DataGrid] Improve test coverage of server side data source (#15988) @MBilalShafi
+- [DataGrid] Remove outdated warning (#16370) @MBilalShafi
+- [DataGrid] Respect width of `iconContainer` during autosizing (#16409) @michelengelen
+
+#### `@mui/x-data-grid-pro@7.25.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.25.0`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiRef` for Pro and Premium packages on React < 19 (#16348) @arminmeh
+- [DataGridPro] Fetch new rows only once when multiple models are changed in one cycle (#16382) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.25.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.25.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.25.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.25.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.25.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.25.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.25.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-charts@7.25.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.25.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.25.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-tree-view@7.25.0`.
+
+### Docs
+
+- [docs] Improve release documentation (#16322) @MBilalShafi
+
+### Core
+
+- [test] Fix flaky data source tests in DataGrid (#16382) @lauri865
+
+## 7.24.1
+
+_Jan 24, 2025_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌍 Improve Persian (fa-IR) locale on the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@mostafaRoosta74, @lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @JCQuintas, @cherniavskii, @LukasTy, @arminmeh.
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.24.1`
+
+- [DataGrid] Fix toggling preference panel from toolbar (#16276) @lauri865
+- [DataGrid] Only try to mount filter button if there are filters present (#16269) @lauri865
+- [DataGrid] Revert `apiRef` to be `MutableRefObject` for React versions < 19 (#16320) @arminmeh
+- [l10n] Improve Persian (fa-IR) locale (#15964) @mostafaRoosta74
+
+#### `@mui/x-data-grid-pro@7.24.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.24.1`.
+
+#### `@mui/x-data-grid-premium@7.24.1` [![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.24.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.24.1`
+
+- [fields] Reset `all` selected state on section edit (#16232) @LukasTy
+
+#### `@mui/x-date-pickers-pro@7.24.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.24.1`.
+
+### Charts
+
+#### `@mui/x-charts@7.24.1`
+
+- [charts] Handle case where gradient stop `offset` could be `Infinite` (@JCQuintas) (#16309) @JCQuintas
+
+#### `@mui/x-charts-pro@7.24.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-charts@7.24.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.24.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.24.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.24.1`.
+
+### Docs
+
+- [docs] Fix `domainLimit` definition (#16271) @alexfauquette
+
+### Core
+
+- [core] Make `@mui/x-internals` a dependency of `@mui/x-license` (#16265) @alexfauquette
+- [test] Fix flaky column pinning tests (#16228) @cherniavskii
+- [test] Fix flaky tests (#16264) @lauri865
+
 ## 7.24.0
 
 _Jan 17, 2025_

package/DataGridPro/useDataGridProComponent.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
-export declare const useDataGridProComponent: (inputApiRef: React.RefObject<GridApiPro> | undefined, props: DataGridProProcessedProps) => React.RefObject<GridPrivateApiPro>;
+export declare const useDataGridProComponent: (inputApiRef: RefObject<GridApiPro> | undefined, props: DataGridProProcessedProps) => import("react").RefObject<GridPrivateApiPro>;

package/components/GridDetailPanelToggleCell.js

@@ -11,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGrid = require("@mui/x-data-grid");
+var _internals = require("@mui/x-data-grid/internals");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridDetailPanelSelector = require("../hooks/features/detailPanel/gridDetailPanelSelector");
@@ -25,11 +26,19 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
+const isExpandedSelector = (0, _internals.createSelectorV8)(_gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector, (expandedRowIds, rowId) => {
+  return expandedRowIds.includes(rowId);
+});
 function GridDetailPanelToggleCell(props) {
   const {
     id,
-    value: isExpanded
+    row,
+    api
   } = props;
+  const rowId = api.getRowId(row);
+  const isExpanded = (0, _internals.useGridSelectorV8)({
+    current: api
+  }, isExpandedSelector, rowId);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const ownerState = {

package/esm/components/GridDetailPanelToggleCell.js

@@ -3,9 +3,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import { createSelectorV8, useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { gridDetailPanelExpandedRowsContentCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.js";
+import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -17,11 +18,19 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const isExpandedSelector = createSelectorV8(gridDetailPanelExpandedRowIdsSelector, (expandedRowIds, rowId) => {
+  return expandedRowIds.includes(rowId);
+});
 function GridDetailPanelToggleCell(props) {
   const {
     id,
-    value: isExpanded
+    row,
+    api
   } = props;
+  const rowId = api.getRowId(row);
+  const isExpanded = useGridSelectorV8({
+    current: api
+  }, isExpandedSelector, rowId);
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
   const ownerState = {

package/esm/hooks/features/columnPinning/useGridColumnPinning.js

@@ -140,7 +140,7 @@ export const useGridColumnPinning = (apiRef, props) => {
   }, [apiRef]);
   const setPinnedColumns = React.useCallback(newPinnedColumns => {
     setState(apiRef, newPinnedColumns);
-    apiRef.current.forceUpdate();
+    apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
   }, [apiRef]);
   const isColumnPinned = React.useCallback(field => {
     const leftPinnedColumns = pinnedColumns.left || [];

package/esm/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,19 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { gridPinnedColumnsSelector, useGridRegisterPipeProcessor, eslintUseValue, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
 export const useGridColumnPinningPreProcessors = (apiRef, props) => {
   const {
     disableColumnPinning
   } = props;
-  let pinnedColumns;
-  if (apiRef.current.state.columns) {
-    pinnedColumns = gridPinnedColumnsSelector(apiRef.current.state);
-  } else {
-    pinnedColumns = null;
-  }
   const prevAllPinnedColumns = React.useRef([]);
   const reorderPinnedColumns = React.useCallback(columnsState => {
-    eslintUseValue(pinnedColumns);
     if (columnsState.orderedFields.length === 0 || disableColumnPinning) {
       return columnsState;
     }
@@ -105,7 +98,7 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     return _extends({}, columnsState, {
       orderedFields: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
-  }, [apiRef, disableColumnPinning, pinnedColumns]);
+  }, [apiRef, disableColumnPinning]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
   const isColumnPinned = React.useCallback((initialValue, field) => apiRef.current.isColumnPinned(field), [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'isColumnPinned', isColumnPinned);

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

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

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

@@ -3,8 +3,9 @@ import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useGridApiEventHandler, gridRowsLoadingSelector, useGridApiMethod, useGridSelector } from '@mui/x-data-grid';
 import { gridRowGroupsToFetchSelector } from '@mui/x-data-grid/internals';
+import { unstable_debounce as debounce } from '@mui/utils';
 import { gridGetRowsParamsSelector, gridDataSourceErrorsSelector } from "./gridDataSourceSelector.js";
-import { runIfServerMode, NestedDataManager, RequestStatus } from "./utils.js";
+import { NestedDataManager, RequestStatus, runIfServerMode } from "./utils.js";
 import { GridDataSourceCacheDefault } from "./cache.js";
 const INITIAL_STATE = {
   loading: {},
@@ -177,6 +178,7 @@ export const useGridDataSource = (apiRef, props) => {
       });
     });
   }, [apiRef]);
+  const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
   const dataSourceApi = {
     unstable_dataSource: {
       setChildrenLoading,
@@ -191,9 +193,9 @@ export const useGridDataSource = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, dataSourceApi, 'public');
   useGridApiMethod(apiRef, dataSourcePrivateApi, 'private');
-  useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, fetchRows));
-  useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, fetchRows));
-  useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, fetchRows));
+  useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, debouncedFetchRows));
+  useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, debouncedFetchRows));
+  useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, debouncedFetchRows));
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/esm/hooks/features/index.js

@@ -6,4 +6,4 @@ export * from "./treeData/index.js";
 export * from "./detailPanel/index.js";
 export * from "./rowPinning/index.js";
 export * from "./dataSource/interfaces.js";
-export * from "./dataSource/cache.js";
+export { GridDataSourceCacheDefault } from "./dataSource/cache.js";

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNzA2ODQwMDAwMA==";
+  const releaseInfo = "MTczODI5OTYwMDAwMA==";
   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/columnPinning/useGridColumnPinning.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState'>>;
-export declare const useGridColumnPinning: (apiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnPinning" | "initialState" | "pinnedColumns" | "onPinnedColumnsChange" | "slotProps" | "slots">) => void;
+export declare const useGridColumnPinning: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnPinning" | "initialState" | "pinnedColumns" | "onPinnedColumnsChange" | "slotProps" | "slots">) => void;

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -149,7 +149,7 @@ const useGridColumnPinning = (apiRef, props) => {
   }, [apiRef]);
   const setPinnedColumns = React.useCallback(newPinnedColumns => {
     setState(apiRef, newPinnedColumns);
-    apiRef.current.forceUpdate();
+    apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
   }, [apiRef]);
   const isColumnPinned = React.useCallback(field => {
     const leftPinnedColumns = pinnedColumns.left || [];

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridColumnPinningPreProcessors: (apiRef: React.RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;
+export declare const useGridColumnPinningPreProcessors: (apiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -13,15 +13,8 @@ const useGridColumnPinningPreProcessors = (apiRef, props) => {
   const {
     disableColumnPinning
   } = props;
-  let pinnedColumns;
-  if (apiRef.current.state.columns) {
-    pinnedColumns = (0, _internals.gridPinnedColumnsSelector)(apiRef.current.state);
-  } else {
-    pinnedColumns = null;
-  }
   const prevAllPinnedColumns = React.useRef([]);
   const reorderPinnedColumns = React.useCallback(columnsState => {
-    (0, _internals.eslintUseValue)(pinnedColumns);
     if (columnsState.orderedFields.length === 0 || disableColumnPinning) {
       return columnsState;
     }
@@ -113,7 +106,7 @@ const useGridColumnPinningPreProcessors = (apiRef, props) => {
     return (0, _extends2.default)({}, columnsState, {
       orderedFields: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
-  }, [apiRef, disableColumnPinning, pinnedColumns]);
+  }, [apiRef, disableColumnPinning]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', reorderPinnedColumns);
   const isColumnPinned = React.useCallback((initialValue, field) => apiRef.current.isColumnPinned(field), [apiRef]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'isColumnPinned', isColumnPinned);

package/hooks/features/columnReorder/useGridColumnReorder.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
@@ -6,4 +6,4 @@ export declare const columnReorderStateInitializer: GridStateInitializer;
 /**
  * @requires useGridColumns (method)
  */
-export declare const useGridColumnReorder: (apiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnReorder" | "keepColumnPositionIfDraggedOutside" | "classes" | "onColumnOrderChange">) => void;
+export declare const useGridColumnReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "disableColumnReorder" | "keepColumnPositionIfDraggedOutside" | "classes" | "onColumnOrderChange">) => void;

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

@@ -7,6 +7,7 @@ type GridDataSourceCacheDefaultConfig = {
      */
     ttl?: number;
 };
+export declare function getKey(params: GridGetRowsParams): string;
 export declare class GridDataSourceCacheDefault {
     private cache;
     private ttl;

package/hooks/features/dataSource/cache.js

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

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const dataSourceStateInitializer: GridStateInitializer;
-export declare const useGridDataSource: (apiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource" | "unstable_dataSourceCache" | "unstable_onDataSourceError" | "sortingMode" | "filterMode" | "paginationMode" | "treeData">) => void;
+export declare const useGridDataSource: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource" | "unstable_dataSourceCache" | "unstable_onDataSourceError" | "sortingMode" | "filterMode" | "paginationMode" | "treeData">) => void;

package/hooks/features/dataSource/useGridDataSource.js

@@ -11,8 +11,9 @@ var React = _interopRequireWildcard(require("react"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
+var _utils = require("@mui/utils");
 var _gridDataSourceSelector = require("./gridDataSourceSelector");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 var _cache = require("./cache");
 const INITIAL_STATE = {
   loading: {},
@@ -36,7 +37,7 @@ const dataSourceStateInitializer = state => {
 };
 exports.dataSourceStateInitializer = dataSourceStateInitializer;
 const useGridDataSource = (apiRef, props) => {
-  const nestedDataManager = (0, _useLazyRef.default)(() => new _utils.NestedDataManager(apiRef)).current;
+  const nestedDataManager = (0, _useLazyRef.default)(() => new _utils2.NestedDataManager(apiRef)).current;
   const groupsToAutoFetch = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridRowGroupsToFetchSelector);
   const scheduledGroups = React.useRef(0);
   const onError = props.unstable_onDataSourceError;
@@ -126,7 +127,7 @@ const useGridDataSource = (apiRef, props) => {
         nestedDataManager.clearPendingRequest(id);
         return;
       }
-      if (nestedDataManager.getRequestStatus(id) === _utils.RequestStatus.UNKNOWN) {
+      if (nestedDataManager.getRequestStatus(id) === _utils2.RequestStatus.UNKNOWN) {
         apiRef.current.unstable_dataSource.setChildrenLoading(id, false);
         return;
       }
@@ -186,6 +187,7 @@ const useGridDataSource = (apiRef, props) => {
       });
     });
   }, [apiRef]);
+  const debouncedFetchRows = React.useMemo(() => (0, _utils.unstable_debounce)(fetchRows, 0), [fetchRows]);
   const dataSourceApi = {
     unstable_dataSource: {
       setChildrenLoading,
@@ -200,9 +202,9 @@ const useGridDataSource = (apiRef, props) => {
   };
   (0, _xDataGrid.useGridApiMethod)(apiRef, dataSourceApi, 'public');
   (0, _xDataGrid.useGridApiMethod)(apiRef, dataSourcePrivateApi, 'private');
-  (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));
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'sortModelChange', (0, _utils2.runIfServerMode)(props.sortingMode, debouncedFetchRows));
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'filterModelChange', (0, _utils2.runIfServerMode)(props.filterMode, debouncedFetchRows));
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'paginationModelChange', (0, _utils2.runIfServerMode)(props.paginationMode, debouncedFetchRows));
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

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

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowId } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 export declare const runIfServerMode: (modeProp: "server" | "client", fn: Function) => () => void;
@@ -18,7 +19,7 @@ export declare class NestedDataManager {
     private settledRequests;
     private api;
     private maxConcurrentRequests;
-    constructor(privateApiRef: React.RefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
+    constructor(privateApiRef: RefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
     private processQueue;
     queue: (ids: GridRowId[]) => Promise<void>;
     setRequestSettled: (id: GridRowId) => void;

package/hooks/features/detailPanel/useGridDetailPanel.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const detailPanelStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'initialState' | 'detailPanelExpandedRowIds'>>;
-export declare const useGridDetailPanel: (apiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "getDetailPanelContent" | "getDetailPanelHeight" | "detailPanelExpandedRowIds" | "onDetailPanelExpandedRowIdsChange">) => void;
+export declare const useGridDetailPanel: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "getDetailPanelContent" | "getDetailPanelHeight" | "detailPanelExpandedRowIds" | "onDetailPanelExpandedRowIdsChange">) => void;

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridDetailPanelPreProcessors: (privateApiRef: React.RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;
+export declare const useGridDetailPanelPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/index.d.ts

@@ -5,4 +5,4 @@ export * from './treeData';
 export * from './detailPanel';
 export * from './rowPinning';
 export * from './dataSource/interfaces';
-export * from './dataSource/cache';
+export { GridDataSourceCacheDefault } from './dataSource/cache';

package/hooks/features/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  GridDataSourceCacheDefault: true
+};
+Object.defineProperty(exports, "GridDataSourceCacheDefault", {
+  enumerable: true,
+  get: function () {
+    return _cache.GridDataSourceCacheDefault;
+  }
+});
 var _columnPinning = require("./columnPinning");
 Object.keys(_columnPinning).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _columnPinning[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_columnPinning).forEach(function (key) {
 var _columnReorder = require("./columnReorder");
 Object.keys(_columnReorder).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _columnReorder[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_columnReorder).forEach(function (key) {
 var _rowReorder = require("./rowReorder");
 Object.keys(_rowReorder).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _rowReorder[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_rowReorder).forEach(function (key) {
 var _treeData = require("./treeData");
 Object.keys(_treeData).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _treeData[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_treeData).forEach(function (key) {
 var _detailPanel = require("./detailPanel");
 Object.keys(_detailPanel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _detailPanel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +75,7 @@ Object.keys(_detailPanel).forEach(function (key) {
 var _rowPinning = require("./rowPinning");
 Object.keys(_rowPinning).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _rowPinning[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +87,7 @@ Object.keys(_rowPinning).forEach(function (key) {
 var _interfaces = require("./dataSource/interfaces");
 Object.keys(_interfaces).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _interfaces[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -80,14 +96,4 @@ Object.keys(_interfaces).forEach(function (key) {
     }
   });
 });
-var _cache = require("./dataSource/cache");
-Object.keys(_cache).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _cache[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _cache[key];
-    }
-  });
-});
+var _cache = require("./dataSource/cache");

package/hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
@@ -6,4 +6,4 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridInfiniteLoader: (apiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onRowsScrollEnd" | "pagination" | "paginationMode" | "rowsLoadingMode" | "scrollEndThreshold">) => void;
+export declare const useGridInfiniteLoader: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onRowsScrollEnd" | "pagination" | "paginationMode" | "rowsLoadingMode" | "scrollEndThreshold">) => void;

package/hooks/features/lazyLoader/useGridLazyLoader.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
@@ -7,4 +7,4 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
  */
-export declare const useGridLazyLoader: (privateApiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onFetchRows" | "rowsLoadingMode" | "pagination" | "paginationMode" | "experimentalFeatures">) => void;
+export declare const useGridLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "onFetchRows" | "rowsLoadingMode" | "pagination" | "paginationMode" | "experimentalFeatures">) => void;

package/hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const GRID_SKELETON_ROW_ROOT_ID = "auto-generated-skeleton-row-root";
-export declare const useGridLazyLoaderPreProcessors: (privateApiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowCount" | "rowsLoadingMode" | "experimentalFeatures">) => void;
+export declare const useGridLazyLoaderPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowCount" | "rowsLoadingMode" | "experimentalFeatures">) => void;

package/hooks/features/rowPinning/useGridRowPinning.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const rowPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>>;
-export declare const useGridRowPinning: (apiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "pinnedRows" | "getRowId">) => void;
+export declare const useGridRowPinning: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "pinnedRows" | "getRowId">) => void;

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
 import { GridRowId, GridRowModel } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
@@ -9,7 +9,7 @@ export declare function addPinnedRow({ groupingParams, rowModel, rowId, position
     rowModel: GridRowModel;
     rowId: GridRowId;
     position: GridPinnedRowPosition;
-    apiRef: React.RefObject<GridPrivateApiPro>;
+    apiRef: RefObject<GridPrivateApiPro>;
     isAutoGenerated: boolean;
 }): {
     dataRowIdToModelLookup: {
@@ -30,5 +30,5 @@ export declare function addPinnedRow({ groupingParams, rowModel, rowId, position
         pinnedRows?: import("@mui/x-data-grid/internals").GridPinnedRowsState;
     } | undefined;
 };
-export declare const useGridRowPinningPreProcessors: (apiRef: React.RefObject<GridPrivateApiPro>) => void;
+export declare const useGridRowPinningPreProcessors: (apiRef: RefObject<GridPrivateApiPro>) => void;
 export {};

package/hooks/features/rowReorder/useGridRowReorder.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 /**
  * Only available in DataGridPro
  * @requires useGridRows (method)
  */
-export declare const useGridRowReorder: (apiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes">) => void;
+export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes">) => void;

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridRowReorderPreProcessors: (privateApiRef: React.RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;
+export declare const useGridRowReorderPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridDataSourceTreeDataPreProcessors: (privateApiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridDataSourceTreeDataPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

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

@@ -1,3 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
 import { GridRowTreeConfig, GridFilterState, GridFilterModel } from '@mui/x-data-grid';
 import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid/internals';
 import type { GridPrivateApiPro } from '../../../models/gridApiPro';
@@ -6,7 +7,7 @@ interface FilterRowTreeFromTreeDataParams {
     disableChildrenFiltering: boolean;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
     filterModel: GridFilterModel;
-    apiRef: React.RefObject<GridPrivateApiPro>;
+    apiRef: RefObject<GridPrivateApiPro>;
 }
 export declare enum TreeDataStrategy {
     Default = "tree-data",

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-export declare const useGridTreeData: (apiRef: React.RefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource">) => void;
+export declare const useGridTreeData: (apiRef: RefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, "unstable_dataSource">) => void;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
-export declare const useGridTreeDataPreProcessors: (privateApiRef: React.RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "getTreeDataPath" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;
+export declare const useGridTreeDataPreProcessors: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "treeData" | "groupingColDef" | "getTreeDataPath" | "disableChildrenSorting" | "disableChildrenFiltering" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/utils/useGridApiRef.d.ts

@@ -1,2 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridApiCommon } from '@mui/x-data-grid';
 import { GridApiPro } from '../../models/gridApiPro';
-export declare const useGridApiRef: () => import("react").RefObject<GridApiPro>;
+export declare const useGridApiRef: <Api extends GridApiCommon = GridApiPro>() => RefObject<Api>;

package/index.js

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

package/models/dataGridProProps.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RefObject } from '@mui/x-internals/types';
 import { GridEventListener, GridCallbackDetails, GridRowParams, GridRowId, GridValidRowModel, GridGroupNode, GridFeatureMode, GridListColDef } from '@mui/x-data-grid';
 import type { GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, GridPinnedColumnFields, DataGridProSharedPropsWithDefaultValue, DataGridProSharedPropsWithoutDefaultValue, GridDataSourceCache, GridGetRowsParams } from '@mui/x-data-grid/internals';
 import type { GridPinnedRowsProp } from '../hooks/features/rowPinning';
@@ -123,7 +124,7 @@ export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel
     /**
      * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
      */
-    apiRef?: React.RefObject<GridApiPro>;
+    apiRef?: RefObject<GridApiPro>;
     /**
      * The initial state of the DataGridPro.
      * The data in it will be set in the state on initialization but will not be controlled.

package/modern/components/GridDetailPanelToggleCell.js

@@ -3,9 +3,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
+import { createSelectorV8, useGridSelectorV8 } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { gridDetailPanelExpandedRowsContentCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.js";
+import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector } from "../hooks/features/detailPanel/gridDetailPanelSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -17,11 +18,19 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
+const isExpandedSelector = createSelectorV8(gridDetailPanelExpandedRowIdsSelector, (expandedRowIds, rowId) => {
+  return expandedRowIds.includes(rowId);
+});
 function GridDetailPanelToggleCell(props) {
   const {
     id,
-    value: isExpanded
+    row,
+    api
   } = props;
+  const rowId = api.getRowId(row);
+  const isExpanded = useGridSelectorV8({
+    current: api
+  }, isExpandedSelector, rowId);
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
   const ownerState = {

package/modern/hooks/features/columnPinning/useGridColumnPinning.js

@@ -140,7 +140,7 @@ export const useGridColumnPinning = (apiRef, props) => {
   }, [apiRef]);
   const setPinnedColumns = React.useCallback(newPinnedColumns => {
     setState(apiRef, newPinnedColumns);
-    apiRef.current.forceUpdate();
+    apiRef.current.requestPipeProcessorsApplication('hydrateColumns');
   }, [apiRef]);
   const isColumnPinned = React.useCallback(field => {
     const leftPinnedColumns = pinnedColumns.left || [];

package/modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,19 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { gridPinnedColumnsSelector, useGridRegisterPipeProcessor, eslintUseValue, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, gridVisiblePinnedColumnDefinitionsSelector } from '@mui/x-data-grid/internals';
 export const useGridColumnPinningPreProcessors = (apiRef, props) => {
   const {
     disableColumnPinning
   } = props;
-  let pinnedColumns;
-  if (apiRef.current.state.columns) {
-    pinnedColumns = gridPinnedColumnsSelector(apiRef.current.state);
-  } else {
-    pinnedColumns = null;
-  }
   const prevAllPinnedColumns = React.useRef([]);
   const reorderPinnedColumns = React.useCallback(columnsState => {
-    eslintUseValue(pinnedColumns);
     if (columnsState.orderedFields.length === 0 || disableColumnPinning) {
       return columnsState;
     }
@@ -105,7 +98,7 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     return _extends({}, columnsState, {
       orderedFields: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
-  }, [apiRef, disableColumnPinning, pinnedColumns]);
+  }, [apiRef, disableColumnPinning]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
   const isColumnPinned = React.useCallback((initialValue, field) => apiRef.current.isColumnPinned(field), [apiRef]);
   useGridRegisterPipeProcessor(apiRef, 'isColumnPinned', isColumnPinned);

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

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

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

@@ -3,8 +3,9 @@ import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useGridApiEventHandler, gridRowsLoadingSelector, useGridApiMethod, useGridSelector } from '@mui/x-data-grid';
 import { gridRowGroupsToFetchSelector } from '@mui/x-data-grid/internals';
+import { unstable_debounce as debounce } from '@mui/utils';
 import { gridGetRowsParamsSelector, gridDataSourceErrorsSelector } from "./gridDataSourceSelector.js";
-import { runIfServerMode, NestedDataManager, RequestStatus } from "./utils.js";
+import { NestedDataManager, RequestStatus, runIfServerMode } from "./utils.js";
 import { GridDataSourceCacheDefault } from "./cache.js";
 const INITIAL_STATE = {
   loading: {},
@@ -177,6 +178,7 @@ export const useGridDataSource = (apiRef, props) => {
       });
     });
   }, [apiRef]);
+  const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
   const dataSourceApi = {
     unstable_dataSource: {
       setChildrenLoading,
@@ -191,9 +193,9 @@ export const useGridDataSource = (apiRef, props) => {
   };
   useGridApiMethod(apiRef, dataSourceApi, 'public');
   useGridApiMethod(apiRef, dataSourcePrivateApi, 'private');
-  useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, fetchRows));
-  useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, fetchRows));
-  useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, fetchRows));
+  useGridApiEventHandler(apiRef, 'sortModelChange', runIfServerMode(props.sortingMode, debouncedFetchRows));
+  useGridApiEventHandler(apiRef, 'filterModelChange', runIfServerMode(props.filterMode, debouncedFetchRows));
+  useGridApiEventHandler(apiRef, 'paginationModelChange', runIfServerMode(props.paginationMode, debouncedFetchRows));
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (isFirstRender.current) {

package/modern/hooks/features/index.js

@@ -6,4 +6,4 @@ export * from "./treeData/index.js";
 export * from "./detailPanel/index.js";
 export * from "./rowPinning/index.js";
 export * from "./dataSource/interfaces.js";
-export * from "./dataSource/cache.js";
+export { GridDataSourceCacheDefault } from "./dataSource/cache.js";

package/modern/index.js

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

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNzA2ODQwMDAwMA==";
+  const releaseInfo = "MTczODI5OTYwMDAwMA==";
   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.24.0",
+  "version": "7.25.0",
   "description": "The Pro plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./index.js",
@@ -39,9 +39,9 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "reselect": "^5.1.1",
-    "@mui/x-data-grid": "7.24.0",
-    "@mui/x-internals": "7.24.0",
-    "@mui/x-license": "7.24.0"
+    "@mui/x-data-grid": "7.25.0",
+    "@mui/x-license": "7.25.0",
+    "@mui/x-internals": "7.25.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 = "MTczNzA2ODQwMDAwMA==";
+  const releaseInfo = "MTczODI5OTYwMDAwMA==";
   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