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

package/CHANGELOG.md

@@ -3,6 +3,139 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.27.0
+
+_Feb 17, 2025_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Improve Data Grid Excel export serialization performance
+- 🐞 Bugfixes
+- 🌍 Improve Polish (pl-PL) and Ukrainian (uk-UA) locale on the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@pawelkula, @Neonin.
+Following are all team members who have contributed to this release:
+@cherniavskii, @JCQuintas, @oliviertassinari, @arminmeh and @LukasTy
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.27.0`
+
+- [DataGrid] Add `resetPageOnSortFilter` prop that resets the page after sorting and filtering (#16580) @arminmeh
+- [DataGrid] Avoid `undefined` value for pagination `rowCount` (#16558) @cherniavskii
+- [l10n] Improve Polish (pl-PL) locale (#16594) @pawelkula
+- [l10n] Improve Ukrainian (uk-UA) locale (#16593) @Neonin
+
+#### `@mui/x-data-grid-pro@7.27.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.27.0`.
+
+#### `@mui/x-data-grid-premium@7.27.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.27.0`, plus:
+
+- [DataGridPremium] Fix Excel export Web Worker demo not working in dev mode (#16532) @cherniavskii
+- [DataGridPremium] Improve Excel export serialization performance (#16545) @cherniavskii
+- [DataGridPremium] Namespace Excel export worker (#16539) @oliviertassinari
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.27.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@7.27.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.27.0`, plus:
+
+- [DateRangePicker] Avoid unnecessary field section focusing (#16569) @LukasTy
+
+### Charts
+
+#### `@mui/x-charts@7.27.0`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@7.27.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+- [charts-pro] Fix automatic type overloads (#16579) @JCQuintas
+
+### Core
+
+- [test] Fix Data Grid data source error test on React 18 (#16565) @arminmeh
+
+## 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_

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
     }))
   });
 });
@@ -818,6 +819,12 @@ DataGridProRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: _propTypes.default.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: _propTypes.default.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/DataGridPro/useDataGridProComponent.js

@@ -44,15 +44,14 @@ 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);
   (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridRowPinning.rowPinningStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.sortingStateInitializer, 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/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
     }))
   });
 });
@@ -811,6 +812,12 @@ DataGridProRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: PropTypes.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/esm/DataGridPro/useDataGridProComponent.js

@@ -37,15 +37,14 @@ 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);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, 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/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/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/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";
@@ -39,10 +39,8 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       triggerElement.current = null;
     }
   });
-  const virtualScroller = apiRef.current.virtualScrollerRef.current;
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const marginBottom = props.scrollEndThreshold - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   React.useEffect(() => {
+    const virtualScroller = apiRef.current.virtualScrollerRef.current;
     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, 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 = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczOTc0NjgwMDAwMA==";
   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];

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -56,9 +56,11 @@ const useGridColumnHeaders = props => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   const disableHeaderFiltering = !rootProps.headerFilters;
-  const dimensions = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridDimensionsSelector);
   const filterModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFilterModelSelector);
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
+  const columnsTotalWidth = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridColumnsTotalWidthSelector);
+  const gridHasFiller = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHasFillerSelector);
+  const headerFilterHeight = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridHeaderFilterHeightSelector);
+  const scrollbarWidth = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridVerticalScrollbarWidthSelector);
   const columnHeaderFilterFocus = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridFocusColumnHeaderFilterSelector);
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
@@ -95,15 +97,14 @@ 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 = (0, _internals.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
       const showRightBorder = (0, _internals.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
       filters.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.headerFilterCell, (0, _extends2.default)({
         colIndex: columnIndex,
-        height: dimensions.headerFilterHeight,
+        height: headerFilterHeight,
         width: colDef.computedWidth,
         colDef: colDef,
         hasFocus: hasFocus,

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -12,9 +12,6 @@ var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
 var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
-// FIXME: calling `api.updateDimensions()` here triggers a cycle where `updateDimensions` is
-// called 3 times when opening/closing a panel.
-
 const detailPanelStateInitializer = (state, props) => {
   return (0, _extends2.default)({}, state, {
     detailPanel: {
@@ -110,8 +107,6 @@ const useGridDetailPanel = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.updateDimensions();
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const storeDetailPanelHeight = React.useCallback((id, height) => {
     const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef.current.state);
@@ -129,7 +124,6 @@ const useGridDetailPanel = (apiRef, props) => {
         })
       });
     });
-    apiRef.current.updateDimensions();
     apiRef.current.requestPipeProcessorsApplication('rowHeight');
   }, [apiRef]);
   const detailPanelHasAutoHeight = React.useCallback(id => {
@@ -156,17 +150,19 @@ const useGridDetailPanel = (apiRef, props) => {
     }
   }, [apiRef, props.detailPanelExpandedRowIds]);
   const updateCachesAndForceUpdate = React.useCallback(() => {
+    if (!props.getDetailPanelContent) {
+      return;
+    }
     apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {
         detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
-    apiRef.current.updateDimensions?.();
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
   (0, _xDataGrid.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;
@@ -176,7 +172,6 @@ const useGridDetailPanel = (apiRef, props) => {
         detailPanel: (0, _extends2.default)({}, 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]);
@@ -190,7 +185,8 @@ 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]);
-  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight);
+  const enabled = props.getDetailPanelContent !== undefined;
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight, enabled);
   const isFirstRender = React.useRef(true);
   if (isFirstRender.current) {
     updateCachesIfNeeded();
@@ -198,7 +194,6 @@ const useGridDetailPanel = (apiRef, props) => {
   React.useEffect(() => {
     if (!isFirstRender.current) {
       updateCachesIfNeeded();
-      apiRef.current.hydrateRowsMeta();
     }
     isFirstRender.current = false;
   }, [apiRef, updateCachesIfNeeded]);

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -47,10 +47,8 @@ const useGridInfiniteLoader = (apiRef, props) => {
       triggerElement.current = null;
     }
   });
-  const virtualScroller = apiRef.current.virtualScrollerRef.current;
-  const dimensions = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridDimensionsSelector);
-  const marginBottom = props.scrollEndThreshold - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   React.useEffect(() => {
+    const virtualScroller = apiRef.current.virtualScrollerRef.current;
     if (!isEnabled) {
       return;
     }
@@ -58,6 +56,8 @@ const useGridInfiniteLoader = (apiRef, props) => {
       return;
     }
     observer.current?.disconnect();
+    const horizontalScrollbarHeight = (0, _internals.gridHorizontalScrollbarHeightSelector)(apiRef.current.state);
+    const marginBottom = props.scrollEndThreshold - horizontalScrollbarHeight;
     observer.current = new IntersectionObserver(handleLoadMoreRows, {
       threshold: 1,
       root: virtualScroller,
@@ -66,7 +66,7 @@ const useGridInfiniteLoader = (apiRef, props) => {
     if (triggerElement.current) {
       observer.current.observe(triggerElement.current);
     }
-  }, [virtualScroller, handleLoadMoreRows, isEnabled, marginBottom]);
+  }, [apiRef, handleLoadMoreRows, isEnabled, props.scrollEndThreshold]);
   const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();

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

@@ -1,7 +1,7 @@
-import { GridRowId, GridRowTreeConfig } from '@mui/x-data-grid';
+import { GridRowTreeConfig } from '@mui/x-data-grid';
 export declare function skipFiltering(rowTree: GridRowTreeConfig): {
-    filteredRowsLookup: Record<GridRowId, boolean>;
-    filteredChildrenCountLookup: Record<GridRowId, number>;
-    filteredDescendantCountLookup: Record<GridRowId, number>;
+    filteredRowsLookup: Record<import("@mui/x-data-grid").GridRowId, boolean>;
+    filteredChildrenCountLookup: Record<import("@mui/x-data-grid").GridRowId, number>;
+    filteredDescendantCountLookup: {};
 };
-export declare function skipSorting(rowTree: GridRowTreeConfig): GridRowId[];
+export declare function skipSorting(rowTree: GridRowTreeConfig): import("@mui/x-data-grid").GridRowId[];

package/hooks/features/serverSideTreeData/utils.js

@@ -10,7 +10,6 @@ var _internals = require("@mui/x-data-grid/internals");
 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];
@@ -20,7 +19,7 @@ function skipFiltering(rowTree) {
   return {
     filteredRowsLookup,
     filteredChildrenCountLookup,
-    filteredDescendantCountLookup
+    filteredDescendantCountLookup: _internals.defaultGridFilterLookup.filteredDescendantCountLookup
   };
 }
 function skipSorting(rowTree) {

package/hooks/utils/useGridApiContext.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 useGridApiContext: () => import("react").RefObject<GridApiPro>;
+export declare const useGridApiContext: <Api extends GridApiCommon = GridApiPro>() => RefObject<Api>;

package/index.js

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

package/modern/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
     }))
   });
 });
@@ -811,6 +812,12 @@ DataGridProRaw.propTypes = {
    * @returns {Promise<R> | R} The final values to update the row.
    */
   processRowUpdate: PropTypes.func,
+  /**
+   * If `true`, the page is set to 0 after each sorting or filtering.
+   * This prop will be removed in the next major version and resetting the page will become the default behavior.
+   * @default false
+   */
+  resetPageOnSortFilter: PropTypes.bool,
   /**
    * The milliseconds throttle delay for resizing the grid.
    * @default 60

package/modern/DataGridPro/useDataGridProComponent.js

@@ -37,15 +37,14 @@ 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);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, 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/modern/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/modern/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/modern/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/modern/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";
@@ -39,10 +39,8 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       triggerElement.current = null;
     }
   });
-  const virtualScroller = apiRef.current.virtualScrollerRef.current;
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const marginBottom = props.scrollEndThreshold - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0);
   React.useEffect(() => {
+    const virtualScroller = apiRef.current.virtualScrollerRef.current;
     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, handleLoadMoreRows, isEnabled, props.scrollEndThreshold]);
   const updateTarget = node => {
     if (triggerElement.current !== node) {
       observer.current?.disconnect();

package/modern/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/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v7.25.0
+ * @mui/x-data-grid-pro v7.27.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 = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczOTc0NjgwMDAwMA==";
   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/modern/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];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "7.25.0",
+  "version": "7.27.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.25.0",
-    "@mui/x-license": "7.25.0",
-    "@mui/x-internals": "7.25.0"
+    "@mui/x-data-grid": "7.27.0",
+    "@mui/x-internals": "7.26.0",
+    "@mui/x-license": "7.26.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 = "MTczODI5OTYwMDAwMA==";
+  const releaseInfo = "MTczOTc0NjgwMDAwMA==";
   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/utils/tree/utils.d.ts

@@ -35,4 +35,4 @@ export declare const createUpdatedGroupsManager: () => GridRowTreeUpdatedGroupsM
 export declare const getVisibleRowsLookup: ({ tree, filteredRowsLookup, }: {
     tree: GridRowsState["tree"];
     filteredRowsLookup: GridFilterState["filteredRowsLookup"];
-}) => Record<GridRowId, boolean>;
+}) => import("@mui/x-data-grid/hooks/features/filter/gridFilterState").GridVisibleRowsLookupState;

package/utils/tree/utils.js

@@ -181,7 +181,7 @@ 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];