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

package/CHANGELOG.md

@@ -3,6 +3,83 @@
 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_

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 = "MTczNzY1ODgwMDAwMA==";
+  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.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.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/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.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/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/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.1
+ * @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/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.1
+ * @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 = "MTczNzY1ODgwMDAwMA==";
+  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.1",
+  "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-internals": "7.24.1",
-    "@mui/x-license": "7.24.1",
-    "@mui/x-data-grid": "7.24.1"
+    "@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 = "MTczNzY1ODgwMDAwMA==";
+  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