@mui/x-data-grid 8.20.0 → 8.21.0

package/CHANGELOG.md

@@ -5,6 +5,118 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.21.0
+
+_Dec 3, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add [tick spacing property](https://mui.com/x/react-charts/axis/#tick-spacing) to charts axis to control the distance between ticks.
+
+The following team members contributed to this release:
+@alexfauquette, @bernardobelchior, @ElliottMiller, @Janpot, @JCQuintas, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.21.0`
+
+- [DataGrid] Fix autosizing header width calculation (#20323) @siriwatknp
+- [DataGrid] Virtualizer refactor (#19465) @romgrk
+
+#### `@mui/x-data-grid-pro@8.21.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@8.21.0`.
+
+#### `@mui/x-data-grid-premium@8.21.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@8.21.0`, plus:
+
+- [DataGridPremium] Prevent pasting to non-editable cells (#20333) @ElliottMiller
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.21.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@8.21.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.21.0`
+
+- [charts] Fix string measuring types (#20454) @bernardobelchior
+- [charts] Fix typo in performance note for CustomLineMarks demo (#20529) @sai6855
+- [charts] Introduce the notion of series with positions (#20461) @alexfauquette
+- [charts] Migrate from sinon to Vitest mocking utilities for x-charts\* packages (#20444) @Copilot
+- [charts] Move series-level values to series computed data in bar plot (#20467) @bernardobelchior
+- [charts] Refactor bar chart components in preparation for range bar chart (#20521) @bernardobelchior
+- [charts] Remove unnecessary `any` types (#20527) @sai6855
+- [charts] Remove unused `drawingArea` from `findClosestPoints` (#20471) @bernardobelchior
+- [charts] Revert `useIsHydrated` to default=false (#20511) @JCQuintas
+- [charts] Support tooltip anchor position for radar (#20422) @alexfauquette
+- [charts] Add tick spacing property (#20282) @bernardobelchior
+- [charts] Fix Vitest lint error (#20550) @bernardobelchior
+- [charts] Fix infinite loop when highlighting pie slices or scatter points (#20549) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.21.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@8.21.0`, plus:
+
+- [charts-pro] Add support for `anchor="node"` on Sankey tooltip (#20462) @alexfauquette
+
+#### `@mui/x-charts-premium@8.21.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-charts-pro@8.21.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.21.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@8.21.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.21.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Migrate to `next/font` for fonts loading (#20407) @Copilot
+
+### Core
+
+- [code-infra] Enable vitest eslint plugin (#20530) @Janpot
+- [code-infra] Fix missing font loading for local fonts (#20480) @Janpot
+- [internal] Performance: use raw `useSyncExternalStore` (#20447) @romgrk
+- [code-infra] Enable `vitest/expect-expect` and `vitest/no-standalone-expect` rules for x-charts packages (#20535) @Copilot
+
+### Miscellaneous
+
+- Bump @types/d3-sankey to ^0.12.5 (#20489) @renovate[bot]
+- Bump @types/react to 19.2.7 (#20490) @renovate[bot]
+- Bump @types/yargs to ^17.0.35 (#20491) @renovate[bot]
+- Bump Vite & Vitest to ^4.0.14 (#20500) @renovate[bot]
+- Bump csstype to ^3.2.3 (#20493) @renovate[bot]
+- Bump es-toolkit to ^1.42.0 (#20494) @renovate[bot]
+- Bump eslint to ^8.48.0 (#20495) @renovate[bot]
+- Bump lerna to ^9.0.3 (#20496) @renovate[bot]
+- Bump lucide-react to ^0.555.0 (#20502) @renovate[bot]
+- Bump playwright monorepo (#20503) @renovate[bot]
+- Bump pnpm to 10.24.0 (#20504) @renovate[bot]
+- Bump react monorepo (#20340) @renovate[bot]
+- Bump react-hook-form to ^7.66.1 (#20497) @renovate[bot]
+- Bump rimraf to ^6.1.2 (#20498) @renovate[bot]
+- Bump webpack-bundle-analyzer to ^5.0.1 (#20508) @renovate[bot]
+- Bump next to ^15.5.6 [SECURITY] (#20555) @renovate[bot]
+
 ## 8.20.0
 
 _Nov 26, 2025_

package/components/virtualization/GridVirtualScroller.js

@@ -96,6 +96,7 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
+    getPositionerProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -128,12 +129,13 @@ function GridVirtualScroller(props) {
         loadingOverlayVariant: loadingOverlayVariant,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, rootProps.slotProps?.[overlayType]))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, {
-          role: "rowgroup",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({
+          role: "rowgroup"
+        }, getPositionerProps(), {
           children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        })
+        }))
       })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, {

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -1,23 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridVirtualScrollerRenderZone = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -37,21 +34,12 @@ const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0, _forwardRef.forwardRef)(function GridVirtualScrollerRenderZone(props, ref) {
-  const {
-      className
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: rootProps,
-    style: {
-      transform: `translate3d(0, ${offsetTop}px, 0)`
-    }
-  }, other, {
+    ownerState: rootProps
+  }, props, {
+    className: (0, _clsx.default)(classes.root, props.className),
     ref: ref
   }));
 });

package/esm/components/virtualization/GridVirtualScroller.js

@@ -88,6 +88,7 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
+    getPositionerProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -120,12 +121,13 @@ function GridVirtualScroller(props) {
         loadingOverlayVariant: loadingOverlayVariant,
         children: /*#__PURE__*/_jsx(Overlay, _extends({}, rootProps.slotProps?.[overlayType]))
       }), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
-        children: /*#__PURE__*/_jsxs(RenderZone, {
-          role: "rowgroup",
+        children: /*#__PURE__*/_jsxs(RenderZone, _extends({
+          role: "rowgroup"
+        }, getPositionerProps(), {
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        })
+        }))
       })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {

package/esm/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -1,12 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -29,21 +26,12 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = forwardRef(function GridVirtualScrollerRenderZone(props, ref) {
-  const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
   return /*#__PURE__*/_jsx(VirtualScrollerRenderZoneRoot, _extends({
-    className: clsx(classes.root, className),
-    ownerState: rootProps,
-    style: {
-      transform: `translate3d(0, ${offsetTop}px, 0)`
-    }
-  }, other, {
+    ownerState: rootProps
+  }, props, {
+    className: clsx(classes.root, props.className),
     ref: ref
   }));
 });

package/esm/hooks/core/useGridVirtualizer.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Dimensions, Virtualization } from '@mui/x-virtualizer';
+import { Dimensions, LayoutDataGridLegacy, Virtualization } from '@mui/x-virtualizer';
 /**
  * Virtualizer setup
  */
 export declare function useGridVirtualizer(): {
-  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
+  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State<LayoutDataGridLegacy> & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
   api: {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
@@ -20,57 +20,13 @@ export declare function useGridVirtualizer(): {
       resetRowHeights: () => void;
     };
   } & {
-    getters: {
-      setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-      getOffsetTop: () => number;
-      getRows: (rowParams?: {
-        rows?: import("@mui/x-virtualizer/models").RowEntry[];
-        position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
-        renderContext?: import("@mui/x-virtualizer/models").RenderContext;
-      }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
-      rows: import("@mui/x-virtualizer/models").RowEntry[];
-      getContainerProps: () => {
-        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-      };
-      getScrollerProps: () => {
-        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-        style: React.CSSProperties;
-        role: string;
-        tabIndex: number | undefined;
-      };
-      getContentProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        style: React.CSSProperties;
-        role: string;
-      };
-      getScrollbarVerticalProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-      getScrollbarHorizontalProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-      getScrollAreaProps: () => {
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-    };
-    useVirtualization: () => import("@mui/x-virtualizer").BaseState;
-    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-    forceUpdateRenderContext: () => void;
-    scheduleUpdateRenderContext: () => void;
     getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
     calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
     getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+    getters: any;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+    forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
     getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;

package/esm/hooks/core/useGridVirtualizer.js

@@ -6,7 +6,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { roundToDecimalPlaces } from '@mui/x-internals/math';
 import { lruMemoize } from '@mui/x-internals/lruMemoize';
 import { useStoreEffect } from '@mui/x-internals/store';
-import { useVirtualizer, Dimensions, Virtualization, EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
+import { useVirtualizer, Dimensions, LayoutDataGridLegacy, Virtualization, EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
 import { useFirstRender } from "../utils/useFirstRender.js";
 import { createSelector } from "../../utils/createSelector.js";
 import { useGridSelector } from "../utils/useGridSelector.js";
@@ -91,6 +91,8 @@ export function useGridVirtualizer() {
     rightPinnedWidth,
     topPinnedHeight: headersTotalHeight,
     bottomPinnedHeight: 0,
+    autoHeight,
+    minimalContentHeight,
     scrollbarSize: rootProps.scrollbarSize
   };
   const addGridDimensions = useLazyRef(addGridDimensionsCreator).current;
@@ -113,13 +115,14 @@ export function useGridVirtualizer() {
   const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
   eslintUseValue(focusedVirtualCell);
+  const layout = useLazyRef(() => new LayoutDataGridLegacy({
+    container: apiRef.current.mainElementRef,
+    scroller: apiRef.current.virtualScrollerRef,
+    scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+    scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+  })).current;
   const virtualizer = useVirtualizer({
-    refs: {
-      container: apiRef.current.mainElementRef,
-      scroller: apiRef.current.virtualScrollerRef,
-      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
-      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
-    },
+    layout,
     dimensions: dimensionsParams,
     virtualization: {
       isRtl,
@@ -148,10 +151,8 @@ export function useGridVirtualizer() {
     columns: visibleColumns,
     pinnedRows,
     pinnedColumns,
-    autoHeight,
     disableHorizontalScroll: listView,
     disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
-    minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;

package/esm/hooks/features/columnResize/useGridColumnResize.js

@@ -142,15 +142,24 @@ function extractColumnWidths(apiRef, options, columns) {
     if (options.includeHeaders) {
       const header = findGridHeader(apiRef.current, column.field);
       if (header) {
-        const title = header.querySelector(`.${gridClasses.columnHeaderTitle}`);
-        const content = header.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
-        const iconContainer = header.querySelector(`.${gridClasses.iconButtonContainer}`);
+        const titleContainer = header.querySelector(`.${gridClasses.columnHeaderTitleContainer}`);
+        const children = Array.from(titleContainer.children);
         const menuContainer = header.querySelector(`.${gridClasses.menuIcon}`);
-        const element = title ?? content;
-        const style = window.getComputedStyle(header, null);
-        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
-        const contentWidth = element.scrollWidth + 1;
-        const width = contentWidth + paddingWidth + (iconContainer?.clientWidth ?? 0) + (menuContainer?.clientWidth ?? 0);
+        const titleContainerStyle = window.getComputedStyle(titleContainer, null);
+        const gap = parseInt(titleContainerStyle.gap, 10) || 0;
+        const headerStyle = window.getComputedStyle(header, null);
+        const paddingWidth = parseInt(headerStyle.paddingLeft, 10) + parseInt(headerStyle.paddingRight, 10);
+        let totalChildren = 0;
+        let childrenWidth = 0;
+        for (let i = 0; i < children.length; i += 1) {
+          const child = children[i];
+          if (child.clientWidth > 0) {
+            totalChildren += 1;
+            childrenWidth += child.scrollWidth;
+          }
+        }
+        childrenWidth += 1;
+        const width = childrenWidth + gap * (totalChildren - 1) + paddingWidth + (menuContainer?.clientWidth ?? 0);
         filteredWidths.push(width);
       }
     }

package/esm/hooks/features/dimensions/useGridDimensions.js

@@ -39,7 +39,9 @@ const EMPTY_DIMENSIONS = {
   rightPinnedWidth: 0,
   headersTotalHeight: 0,
   topContainerHeight: 0,
-  bottomContainerHeight: 0
+  bottomContainerHeight: 0,
+  autoHeight: false,
+  minimalContentHeight: undefined
 };
 export const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;

package/esm/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -1,10 +1,10 @@
 import { RefObject } from '@mui/x-internals/types';
-import { Virtualization } from '@mui/x-virtualizer';
+import { Virtualization, LayoutDataGridLegacy } from '@mui/x-virtualizer';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 type RootProps = DataGridProcessedProps;
-export type GridVirtualizationState = { [K in keyof Virtualization.State['virtualization']]: Virtualization.State['virtualization'][K] };
+export type GridVirtualizationState = { [K in keyof Virtualization.State<LayoutDataGridLegacy>['virtualization']]: Virtualization.State<LayoutDataGridLegacy>['virtualization'][K] };
 export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
 export {};

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.20.0
+ * @mui/x-data-grid v8.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/hooks/core/useGridVirtualizer.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Dimensions, Virtualization } from '@mui/x-virtualizer';
+import { Dimensions, LayoutDataGridLegacy, Virtualization } from '@mui/x-virtualizer';
 /**
  * Virtualizer setup
  */
 export declare function useGridVirtualizer(): {
-  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
+  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State<LayoutDataGridLegacy> & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
   api: {
     updateDimensions: (firstUpdate?: boolean) => void;
     debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
@@ -20,57 +20,13 @@ export declare function useGridVirtualizer(): {
       resetRowHeights: () => void;
     };
   } & {
-    getters: {
-      setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-      getOffsetTop: () => number;
-      getRows: (rowParams?: {
-        rows?: import("@mui/x-virtualizer/models").RowEntry[];
-        position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
-        renderContext?: import("@mui/x-virtualizer/models").RenderContext;
-      }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
-      rows: import("@mui/x-virtualizer/models").RowEntry[];
-      getContainerProps: () => {
-        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-      };
-      getScrollerProps: () => {
-        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
-        style: React.CSSProperties;
-        role: string;
-        tabIndex: number | undefined;
-      };
-      getContentProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        style: React.CSSProperties;
-        role: string;
-      };
-      getScrollbarVerticalProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-      getScrollbarHorizontalProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-      getScrollAreaProps: () => {
-        scrollPosition: React.RefObject<{
-          top: number;
-          left: number;
-        }>;
-      };
-    };
-    useVirtualization: () => import("@mui/x-virtualizer").BaseState;
-    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-    forceUpdateRenderContext: () => void;
-    scheduleUpdateRenderContext: () => void;
     getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
     calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
     getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+    getters: any;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+    forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
   } & {
     resetColSpan: () => void;
     getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;

package/hooks/core/useGridVirtualizer.js

@@ -99,6 +99,8 @@ function useGridVirtualizer() {
     rightPinnedWidth,
     topPinnedHeight: headersTotalHeight,
     bottomPinnedHeight: 0,
+    autoHeight,
+    minimalContentHeight: _gridRowsUtils.minimalContentHeight,
     scrollbarSize: rootProps.scrollbarSize
   };
   const addGridDimensions = (0, _useLazyRef.default)(addGridDimensionsCreator).current;
@@ -121,13 +123,14 @@ function useGridVirtualizer() {
   const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
   // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
   (0, _utils.eslintUseValue)(focusedVirtualCell);
+  const layout = (0, _useLazyRef.default)(() => new _xVirtualizer.LayoutDataGridLegacy({
+    container: apiRef.current.mainElementRef,
+    scroller: apiRef.current.virtualScrollerRef,
+    scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+    scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+  })).current;
   const virtualizer = (0, _xVirtualizer.useVirtualizer)({
-    refs: {
-      container: apiRef.current.mainElementRef,
-      scroller: apiRef.current.virtualScrollerRef,
-      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
-      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
-    },
+    layout,
     dimensions: dimensionsParams,
     virtualization: {
       isRtl,
@@ -156,10 +159,8 @@ function useGridVirtualizer() {
     columns: visibleColumns,
     pinnedRows,
     pinnedColumns,
-    autoHeight,
     disableHorizontalScroll: listView,
     disableVerticalScroll: overlayState.overlayType === 'noColumnsOverlay' || overlayState.loadingOverlayVariant === 'skeleton',
-    minimalContentHeight: _gridRowsUtils.minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;

package/hooks/features/columnResize/useGridColumnResize.js

@@ -149,15 +149,24 @@ function extractColumnWidths(apiRef, options, columns) {
     if (options.includeHeaders) {
       const header = (0, _domUtils.findGridHeader)(apiRef.current, column.field);
       if (header) {
-        const title = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitle}`);
-        const content = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`);
-        const iconContainer = header.querySelector(`.${_gridClasses.gridClasses.iconButtonContainer}`);
+        const titleContainer = header.querySelector(`.${_gridClasses.gridClasses.columnHeaderTitleContainer}`);
+        const children = Array.from(titleContainer.children);
         const menuContainer = header.querySelector(`.${_gridClasses.gridClasses.menuIcon}`);
-        const element = title ?? content;
-        const style = window.getComputedStyle(header, null);
-        const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
-        const contentWidth = element.scrollWidth + 1;
-        const width = contentWidth + paddingWidth + (iconContainer?.clientWidth ?? 0) + (menuContainer?.clientWidth ?? 0);
+        const titleContainerStyle = window.getComputedStyle(titleContainer, null);
+        const gap = parseInt(titleContainerStyle.gap, 10) || 0;
+        const headerStyle = window.getComputedStyle(header, null);
+        const paddingWidth = parseInt(headerStyle.paddingLeft, 10) + parseInt(headerStyle.paddingRight, 10);
+        let totalChildren = 0;
+        let childrenWidth = 0;
+        for (let i = 0; i < children.length; i += 1) {
+          const child = children[i];
+          if (child.clientWidth > 0) {
+            totalChildren += 1;
+            childrenWidth += child.scrollWidth;
+          }
+        }
+        childrenWidth += 1;
+        const width = childrenWidth + gap * (totalChildren - 1) + paddingWidth + (menuContainer?.clientWidth ?? 0);
         filteredWidths.push(width);
       }
     }

package/hooks/features/dimensions/useGridDimensions.js

@@ -47,7 +47,9 @@ const EMPTY_DIMENSIONS = {
   rightPinnedWidth: 0,
   headersTotalHeight: 0,
   topContainerHeight: 0,
-  bottomContainerHeight: 0
+  bottomContainerHeight: 0,
+  autoHeight: false,
+  minimalContentHeight: undefined
 };
 const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;

package/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -1,10 +1,10 @@
 import { RefObject } from '@mui/x-internals/types';
-import { Virtualization } from '@mui/x-virtualizer';
+import { Virtualization, LayoutDataGridLegacy } from '@mui/x-virtualizer';
 import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
 import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 type RootProps = DataGridProcessedProps;
-export type GridVirtualizationState = { [K in keyof Virtualization.State['virtualization']]: Virtualization.State['virtualization'][K] };
+export type GridVirtualizationState = { [K in keyof Virtualization.State<LayoutDataGridLegacy>['virtualization']]: Virtualization.State<LayoutDataGridLegacy>['virtualization'][K] };
 export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
 export {};

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.20.0
+ * @mui/x-data-grid v8.21.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.20.0",
+  "version": "8.21.0",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.19.0",
-    "@mui/x-virtualizer": "0.2.10"
+    "@mui/x-internals": "8.21.0",
+    "@mui/x-virtualizer": "0.2.11"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",