@mui/x-data-grid-pro 7.24.1 → 7.26.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.26.0
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+- 🐞 Bugfixes
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@arminmeh, @noraleonte, @LukasTy, @KenanYusuf, @flaviendelangle.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.26.0`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#16480) @lauri865
+
+#### `@mui/x-data-grid-pro@7.26.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.26.0`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16446) @arminmeh
+
+#### `@mui/x-data-grid-premium@7.26.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.26.0`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16468) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.26.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.26.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.26.0`, plus:
+
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16457) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16490) @noraleonte
+
+### Charts
+
+#### `@mui/x-charts@7.26.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.26.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.26.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@7.26.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@7.26.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.26.0`.
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16452) @flaviendelangle
+
+## 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/DataGridPro/DataGridPro.js

@@ -28,6 +28,10 @@ const configuration = {
   }
 };
 const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
+const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
+  packageName: "x-data-grid-pro",
+  releaseInfo: releaseInfo
+});
 const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps, ref) {
   const props = (0, _useDataGridProProps.useDataGridProProps)(inProps);
   const privateApiRef = (0, _useDataGridProComponent.useDataGridProComponent)(props.apiRef, props);
@@ -45,10 +49,7 @@ const DataGridProRaw = (0, _forwardRef.forwardRef)(function DataGridPro(inProps,
       sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
       ref: ref,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
-        packageName: "x-data-grid-pro",
-        releaseInfo: releaseInfo
-      })
+      children: watermark
     }))
   });
 });

package/DataGridPro/useDataGridProComponent.js

@@ -44,7 +44,6 @@ const useDataGridProComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.headerFilteringStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowSelectionStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridDetailPanel.detailPanelStateInitializer, apiRef, props);
@@ -62,11 +61,12 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.densityStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnReorder.columnReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnResizeStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnGroupsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.virtualizationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridDataSource.dataSourceStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _useGridTreeData.useGridTreeData)(apiRef, props);

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

@@ -24,15 +24,14 @@ function GridPinnedRows({
 }) {
   const classes = useUtilityClasses();
   const apiRef = (0, _internals.useGridPrivateApiContext)();
-  const renderContext = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridRenderContextSelector);
   const pinnedRowsData = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridPinnedRowsSelector);
   const rows = pinnedRowsData[position];
   const pinnedRenderContext = React.useMemo(() => ({
     firstRowIndex: 0,
     lastRowIndex: rows.length,
-    firstColumnIndex: renderContext.firstColumnIndex,
-    lastColumnIndex: renderContext.lastColumnIndex
-  }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex]);
+    firstColumnIndex: -1,
+    lastColumnIndex: -1
+  }), [rows]);
   if (rows.length === 0) {
     return null;
   }

package/esm/DataGridPro/DataGridPro.js

@@ -21,6 +21,10 @@ const configuration = {
   }
 };
 const releaseInfo = getReleaseInfo();
+const watermark = /*#__PURE__*/_jsx(Watermark, {
+  packageName: "x-data-grid-pro",
+  releaseInfo: releaseInfo
+});
 const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
   const privateApiRef = useDataGridProComponent(props.apiRef, props);
@@ -38,10 +42,7 @@ const DataGridProRaw = forwardRef(function DataGridPro(inProps, ref) {
       sx: props.sx
     }, props.forwardedProps, props.slotProps?.root, {
       ref: ref,
-      children: /*#__PURE__*/_jsx(Watermark, {
-        packageName: "x-data-grid-pro",
-        releaseInfo: releaseInfo
-      })
+      children: watermark
     }))
   });
 });

package/esm/DataGridPro/useDataGridProComponent.js

@@ -37,7 +37,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   /**
    * Register all state initializers here.
    */
-  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
@@ -55,11 +54,12 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
   useGridInitializeState(dataSourceStateInitializer, apiRef, props);
+  useGridInitializeState(dimensionsStateInitializer, apiRef, props);
+  useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-data-grid';
-import { gridPinnedRowsSelector, gridRenderContextSelector, useGridPrivateApiContext } from '@mui/x-data-grid/internals';
+import { gridPinnedRowsSelector, useGridPrivateApiContext } from '@mui/x-data-grid/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {
@@ -16,15 +16,14 @@ export function GridPinnedRows({
 }) {
   const classes = useUtilityClasses();
   const apiRef = useGridPrivateApiContext();
-  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
   const rows = pinnedRowsData[position];
   const pinnedRenderContext = React.useMemo(() => ({
     firstRowIndex: 0,
     lastRowIndex: rows.length,
-    firstColumnIndex: renderContext.firstColumnIndex,
-    lastColumnIndex: renderContext.lastColumnIndex
-  }), [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex]);
+    firstColumnIndex: -1,
+    lastColumnIndex: -1
+  }), [rows]);
   if (rows.length === 0) {
     return null;
   }

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["getColumnsToRender", "getPinnedCellOffset", "renderContext", "leftRenderContext", "rightRenderContext", "pinnedColumns", "visibleColumns", "columnPositions"];
 import * as React from 'react';
-import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass, gridDimensionsSelector } from '@mui/x-data-grid';
-import { useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow, shouldCellShowLeftBorder, shouldCellShowRightBorder, PinnedColumnPosition } from '@mui/x-data-grid/internals';
+import { gridFocusColumnHeaderFilterSelector, useGridSelector, gridFilterModelSelector, gridTabIndexColumnHeaderFilterSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
+import { gridColumnsTotalWidthSelector, gridHasFillerSelector, gridHeaderFilterHeightSelector, gridVerticalScrollbarWidthSelector, useGridColumnHeaders as useGridColumnHeadersCommunity, useGridPrivateApiContext, getGridFilter, GridColumnHeaderRow, shouldCellShowLeftBorder, shouldCellShowRightBorder, PinnedColumnPosition } from '@mui/x-data-grid/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -48,9 +48,11 @@ export const useGridColumnHeaders = props => {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   const disableHeaderFiltering = !rootProps.headerFilters;
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
+  const headerFilterHeight = useGridSelector(apiRef, gridHeaderFilterHeightSelector);
+  const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
@@ -87,15 +89,14 @@ export const useGridColumnHeaders = props => {
       }) : colDef.headerClassName;
       const item = getFilterItem(colDef);
       const pinnedPosition = params?.position;
-      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, dimensions.columnsTotalWidth, scrollbarWidth);
+      const pinnedOffset = getPinnedCellOffset(pinnedPosition, colDef.computedWidth, columnIndex, columnPositions, columnsTotalWidth, scrollbarWidth);
       const indexInSection = i;
       const sectionLength = renderedColumns.length;
       const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
       const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       filters.push(/*#__PURE__*/_jsx(rootProps.slots.headerFilterCell, _extends({
         colIndex: columnIndex,
-        height: dimensions.headerFilterHeight,
+        height: headerFilterHeight,
         width: colDef.computedWidth,
         colDef: colDef,
         hasFocus: hasFocus,

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/detailPanel/useGridDetailPanel.js

@@ -4,9 +4,6 @@ import { useGridSelector, useGridApiEventHandler, useGridApiMethod, gridDataRowI
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "./gridDetailPanelToggleColDef.js";
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelRawHeightCacheSelector } from "./gridDetailPanelSelector.js";
-// FIXME: calling `api.updateDimensions()` here triggers a cycle where `updateDimensions` is
-// called 3 times when opening/closing a panel.
-
 export const detailPanelStateInitializer = (state, props) => {
   return _extends({}, state, {
     detailPanel: {
@@ -101,8 +98,6 @@ export const useGridDetailPanel = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.updateDimensions();
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const storeDetailPanelHeight = React.useCallback((id, height) => {
     const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef.current.state);
@@ -120,7 +115,6 @@ export const useGridDetailPanel = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.updateDimensions();
     apiRef.current.requestPipeProcessorsApplication('rowHeight');
   }, [apiRef]);
   const detailPanelHasAutoHeight = React.useCallback(id => {
@@ -147,17 +141,19 @@ export const useGridDetailPanel = (apiRef, props) => {
     }
   }, [apiRef, props.detailPanelExpandedRowIds]);
   const updateCachesAndForceUpdate = React.useCallback(() => {
+    if (!props.getDetailPanelContent) {
+      return;
+    }
     apiRef.current.setState(state => {
       return _extends({}, state, {
         detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
-    apiRef.current.updateDimensions?.();
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCachesAndForceUpdate);
-  const previousGetDetailPanelContentProp = React.useRef(null);
-  const previousGetDetailPanelHeightProp = React.useRef(null);
+  const previousGetDetailPanelContentProp = React.useRef(undefined);
+  const previousGetDetailPanelHeightProp = React.useRef(undefined);
   const updateCachesIfNeeded = React.useCallback(() => {
     if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current) {
       return;
@@ -167,7 +163,6 @@ export const useGridDetailPanel = (apiRef, props) => {
         detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
-    apiRef.current.updateDimensions?.();
     previousGetDetailPanelContentProp.current = props.getDetailPanelContent;
     previousGetDetailPanelHeightProp.current = props.getDetailPanelHeight;
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
@@ -181,7 +176,8 @@ export const useGridDetailPanel = (apiRef, props) => {
     initialValue.detail = heightCache[row.id] ?? 0; // Fallback to zero because the cache might not be ready yet (for example page was changed)
     return initialValue;
   }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
-  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
+  const enabled = props.getDetailPanelContent !== undefined;
+  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight, enabled);
   const isFirstRender = React.useRef(true);
   if (isFirstRender.current) {
     updateCachesIfNeeded();
@@ -189,7 +185,6 @@ export const useGridDetailPanel = (apiRef, props) => {
   React.useEffect(() => {
     if (!isFirstRender.current) {
       updateCachesIfNeeded();
-      apiRef.current.hydrateRowsMeta();
     }
     isFirstRender.current = false;
   }, [apiRef, updateCachesIfNeeded]);

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/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useGridSelector, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, useGridApiMethod, gridDimensionsSelector } from '@mui/x-data-grid';
-import { useGridVisibleRows, useTimeout } from '@mui/x-data-grid/internals';
+import { useGridSelector, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, useGridApiMethod } from '@mui/x-data-grid';
+import { useGridVisibleRows, useTimeout, gridHorizontalScrollbarHeightSelector } from '@mui/x-data-grid/internals';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { styled } from '@mui/system';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,8 +40,6 @@ export const useGridInfiniteLoader = (apiRef, props) => {
     }
   });
   const virtualScroller = apiRef.current.virtualScrollerRef.current;
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const marginBottom = props.scrollEndThreshold - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   React.useEffect(() => {
     if (!isEnabled) {
       return;
@@ -50,6 +48,8 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       return;
     }
     observer.current?.disconnect();
+    const horizontalScrollbarHeight = gridHorizontalScrollbarHeightSelector(apiRef.current.state);
+    const marginBottom = props.scrollEndThreshold - horizontalScrollbarHeight;
     observer.current = new IntersectionObserver(handleLoadMoreRows, {
       threshold: 1,
       root: virtualScroller,
@@ -58,7 +58,7 @@ export const useGridInfiniteLoader = (apiRef, props) => {
     if (triggerElement.current) {
       observer.current.observe(triggerElement.current);
     }
-  }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
+  }, [apiRef, virtualScroller, handleLoadMoreRows, isEnabled, props.scrollEndThreshold]);
   const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();

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

@@ -1,9 +1,8 @@
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
-import { getTreeNodeDescendants } from '@mui/x-data-grid/internals';
+import { defaultGridFilterLookup, getTreeNodeDescendants } from '@mui/x-data-grid/internals';
 export function skipFiltering(rowTree) {
   const filteredRowsLookup = {};
   const filteredChildrenCountLookup = {};
-  const filteredDescendantCountLookup = {};
   const nodes = Object.values(rowTree);
   for (let i = 0; i < nodes.length; i += 1) {
     const node = nodes[i];
@@ -13,7 +12,7 @@ export function skipFiltering(rowTree) {
   return {
     filteredRowsLookup,
     filteredChildrenCountLookup,
-    filteredDescendantCountLookup
+    filteredDescendantCountLookup: defaultGridFilterLookup.filteredDescendantCountLookup
   };
 }
 export function skipSorting(rowTree) {

package/esm/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTczNzY1ODgwMDAwMA==";
+  const releaseInfo = "MTczODg4MjgwMDAwMA==";
   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/esm/utils/tree/utils.js

@@ -166,7 +166,7 @@ export const getVisibleRowsLookup = ({
   }
   const visibleRowsLookup = {};
   const handleTreeNode = (node, areAncestorsExpanded) => {
-    const isPassingFiltering = filteredRowsLookup[node.id];
+    const isPassingFiltering = filteredRowsLookup[node.id] !== false;
     if (node.type === 'group') {
       node.children.forEach(childId => {
         const childNode = tree[childId];