@mui/x-virtualizer 1.0.0-beta.1 → 1.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,159 @@
 # Changelog
 
+## 9.0.0-rc.0
+
+<!-- generated comparing v9.0.0-beta.0..master -->
+
+_Apr 7, 2026_
+
+We'd like to extend a big thank you to the 18 contributors who made this release possible.
+
+Special thanks go out to these community members for their valuable contributions:
+@mixelburg, @sibananda485, @youjin-hong
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @arminmeh, @brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @mapache-salvaje, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @romgrk, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-rc.0`
+
+- [DataGrid] Rename filter panel `Columns` label to singular `Column` (#21935) @youjin-hong
+- [DataGrid] Export `GridColumnUnsortedIconProps` for custom column icon slots (#21658) @mixelburg
+- [DataGrid] Remove `x-virtualizer`'s `virtualScroller` from public API (#21936) @romgrk
+- [DataGrid][virtualizer] Scrolling without render gaps (#21616) @romgrk
+
+#### `@mui/x-data-grid-pro@9.0.0-rc.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@9.0.0-rc.0`, plus:
+
+- [DataGridPro] Improve trigger for nested row reordering (#21642) @MBilalShafi
+- [DataGridPro] Undeprecate `onRowsScrollEnd` prop (#21912) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@9.0.0-rc.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@9.0.0-rc.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste issue in portal (#21931) @sibananda485
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- Accessible DOM structure is now the only default. [Read more](https://next.mui.com/x/migration/migration-pickers-v8/#accessible-dom-structure-is-now-the-default)
+- The `PickerDay2` and `DateRangePickerDay2` components were propagated to stable while removing the previous defaults. [Read more](https://next.mui.com/x/migration/migration-pickers-v8/#day-slot)
+
+#### `@mui/x-date-pickers@9.0.0-rc.0`
+
+- [pickers] Remove `PickersDay` and `DateRangePickerDay` and promote their `2` versions as replacements (#21739) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.0-rc.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@9.0.0-rc.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-rc.0.0`
+
+- [charts] Make line visibility toggle start from the baseline (#21893) @alexfauquette
+- [charts] Remove the container overflow (#21955) @alexfauquette
+- [charts] Revert `theme.alpha` for non-channel token (#21965) @siriwatknp
+
+#### `@mui/x-charts-pro@9.0.0-rc.0.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@9.0.0-rc.0.0`, plus:
+
+- [charts-pro] Zoom slider touch improvements (#21832) @JCQuintas
+- [charts-pro] Add `seriesIds` filter to zoom slider preview (#21933) @JCQuintas
+- [charts-pro] Fix zoom slider preview with discard filter mode (#21883) @JCQuintas
+
+#### `@mui/x-charts-premium@9.0.0-rc.0.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@9.0.0-rc.0.0`, plus:
+
+- [charts-premium] Add series `valueFormatter` to candlestick chart (#21905) @JCQuintas
+- [charts-premium] Add zoom slider preview support for candlestick charts (#21914) @JCQuintas
+- [charts-premium] Allow color customization in `Candlestick` chart (#21838) @JCQuintas
+- [charts-premium] Support hide/show for OHLC (candlestick) series (#21807) @Copilot
+- [charts-premium] Add `dataset` support to `Candlestick` chart (#21872) @JCQuintas
+- [charts-premium] Add candlestick page to sidebar navigation (#21834) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-rc.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.0-rc.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@9.0.0-rc.0`, plus:
+
+- [RichTreeViewPro] Allow to auto-expand lazy loaded items (#21759) @flaviendelangle
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-alpha.0`
+
+- [scheduler] Add locale files, adapt l10n scripts, and add localization table to docs (#21870) @rita-codes
+- [scheduler] Add planned features to the docs (#21705) @rita-codes
+- [scheduler] Add scheduler to docs introduction (#21845) @rita-codes
+- [scheduler] Add wide docs to scheduler (#21860) @noraleonte
+- [scheduler] All day event bugfixes (#21884) @noraleonte
+- [scheduler] Autofocus title field (#21947) @noraleonte
+- [scheduler] Change default event creation trigger to single click (#21979) @rita-codes
+- [scheduler] Change order of the views on the view selector (#21904) @rita-codes
+- [scheduler] Disabled border color for the repeat day picker in dark mode (#21987) @rita-codes
+- [scheduler] Drop unused dependency (#21956) @flaviendelangle
+- [scheduler] Fix all-day event shifting to previous day in negative UTC offsets (#21994) @rita-codes
+- [scheduler] Fix dark theme localization demos (#21992) @noraleonte
+- [scheduler] Fix licensing confusion in docs (#21939) @rita-codes
+- [scheduler] Fix preferences menu width shift when toggling options + Improve preferences menu accessibility (#21902) @rita-codes
+- [scheduler] Prepare for the alpha launch (#21859) @rita-codes
+- [scheduler] Sync Base UI internals and apply good practices (#21946) @flaviendelangle
+- [scheduler] Update close modal aria label translation (#21940) @rita-codes
+- [scheduler] Add Spanish (es-ES) locale (#21900) @rita-codes
+- [scheduler] Improve French (fr-FR) locale (#21941) @rita-codes
+- [scheduler] Improve Romanian (ro-RO) locale (#21942) @rita-codes
+
+#### `@mui/x-scheduler-premium@9.0.0-alpha.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-scheduler@9.0.0-alpha.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-rc.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix JSDOM → jsdom casing (#21907) @JCQuintas
+- [docs] Remove Joy UI references and dependency (#21937) @siriwatknp
+- [docs] Remove none generated files (#21886) @alexfauquette
+- [docs] Remove unused interactive demo code (#21945) @LukasTy
+- [docs] Revise the Funnel doc (#21677) @mapache-salvaje
+- [docs] Revise the Line chart docs (#21554) @mapache-salvaje
+- [docs] Revise the Radar doc (#21674) @mapache-salvaje
+- [docs] Revise the Sankey doc (#21678) @mapache-salvaje
+- [docs] Revise the Scatter chart docs (#21564) @mapache-salvaje
+
+### Core
+
+- [docs-infra] Update to the latest monorepo (#21971) @brijeshb42
+- [internal] Remove checks for `materialVersion >= 6` (#21975) @LukasTy
+
+### Miscellaneous
+
+- [core] Bump @mui/material to v9.0.0-beta.1 (#21858) @siriwatknp
+- [core] Update browserslistrc (#21974) @siriwatknp
+- [deps] Bump minimum core packages to 7.3.0 to adopt theme color manipulator (#21892) @siriwatknp
+- [telemetry] Prefer upstream remote over origin for `projectId` (#21882) @aemartos
+- [telemetry] Send `repoHash`, `[x]packageNameHash`, and `rootPathHash` alongside `projectId` (#21896) @aemartos
+- [test] Exclude flaky `DataGrid` argos test (#21977) @MBilalShafi
+- [test] Fix flaky `DataGrid` test (#22000) @arminmeh
+- [test] Remove `componentsProp` test from `describeConformance` (#21897) @ZeeshanTamboli
+- [x-license] Change `orderId` type from `number` to `string` (#21885) @aemartos
+
 ## 9.0.0-beta.0
 
 <!-- generated comparing v9.0.0-alpha.4..master -->
@@ -313,7 +467,7 @@ Same changes as in `@mui/x-charts-pro@9.0.0-alpha.3`, plus:
 - Remove deprecated CSS state classes from `treeItemClasses`: `expanded`, `selected`, `focused`, `disabled`, `editable`, `editing` (use `[data-expanded]`, `[data-selected]`, etc.)
 - The `<RichTreeViewPro />` component has now virtualization enabled by default.
 - The items used inside the `<RichTreeViewPro />` now have a default height of `32px`.
-- The events of the `<RichTreeViewPro />` are now rendered as a flat list instead of a nested tree.
+- The items of the `<RichTreeViewPro />` are now rendered as a flat list instead of a nested tree.
 
 #### `@mui/x-tree-view@9.0.0-alpha.3`
 

package/features/dimensions.d.mts

@@ -27,6 +27,7 @@ export declare const Dimensions: {
     rowPositions: (state: BaseState) => number[];
     columnPositions: (_: any, columns: ColumnWithWidth[]) => number[];
     needsHorizontalScrollbar: (state: BaseState) => boolean;
+    needsVerticalScrollbar: (state: BaseState) => boolean;
   };
 };
 export declare namespace Dimensions {

package/features/dimensions.d.ts

@@ -27,6 +27,7 @@ export declare const Dimensions: {
     rowPositions: (state: BaseState) => number[];
     columnPositions: (_: any, columns: ColumnWithWidth[]) => number[];
     needsHorizontalScrollbar: (state: BaseState) => boolean;
+    needsVerticalScrollbar: (state: BaseState) => boolean;
   };
 };
 export declare namespace Dimensions {

package/features/dimensions.js

@@ -61,7 +61,8 @@ const selectors = {
     }
     return positions;
   }),
-  needsHorizontalScrollbar: state => state.dimensions.viewportOuterSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportOuterSize.width
+  needsHorizontalScrollbar: state => state.dimensions.viewportInnerSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportInnerSize.width,
+  needsVerticalScrollbar: state => state.dimensions.viewportInnerSize.height > 0 && state.dimensions.contentSize.height > state.dimensions.viewportInnerSize.height
 };
 const Dimensions = exports.Dimensions = {
   initialize: initializeState,

package/features/dimensions.mjs

@@ -54,7 +54,8 @@ const selectors = {
     }
     return positions;
   }),
-  needsHorizontalScrollbar: state => state.dimensions.viewportOuterSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportOuterSize.width
+  needsHorizontalScrollbar: state => state.dimensions.viewportInnerSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportInnerSize.width,
+  needsVerticalScrollbar: state => state.dimensions.viewportInnerSize.height > 0 && state.dimensions.contentSize.height > state.dimensions.viewportInnerSize.height
 };
 export const Dimensions = {
   initialize: initializeState,

package/features/virtualization/layout.d.mts

@@ -36,6 +36,17 @@ export declare class LayoutDataGrid extends Layout<DataGridElements> {
       role: string;
       tabIndex: number | undefined;
     };
+    scrollerContentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: React.CSSProperties | undefined;
+      role: string;
+    };
+    viewportProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: {
+        width: number;
+        height: number;
+      };
+      role: string;
+    };
     contentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
       style: React.CSSProperties;
       role: string;
@@ -45,6 +56,11 @@ export declare class LayoutDataGrid extends Layout<DataGridElements> {
         transform: string;
       };
     };
+    containerVerticalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: {
+        transform: string;
+      };
+    } | undefined;
     scrollbarHorizontalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
       ref: any;
       scrollPosition: {
@@ -78,6 +94,17 @@ export declare class LayoutDataGridLegacy extends LayoutDataGrid {
       role: string;
       tabIndex: number | undefined;
     };
+    getScrollerContentProps: () => {
+      style: React.CSSProperties | undefined;
+      role: string;
+    };
+    getViewportProps: () => {
+      style: {
+        width: number;
+        height: number;
+      };
+      role: string;
+    };
     getContentProps: () => {
       style: React.CSSProperties;
       role: string;
@@ -104,6 +131,11 @@ export declare class LayoutDataGridLegacy extends LayoutDataGrid {
         current: import("../../models/index.mjs").ScrollPosition;
       };
     };
+    getContainerVerticalProps: () => {
+      style: {
+        transform: string;
+      };
+    } | undefined;
   };
 }
 type ListElements = BaseElements;

package/features/virtualization/layout.d.ts

@@ -36,6 +36,17 @@ export declare class LayoutDataGrid extends Layout<DataGridElements> {
       role: string;
       tabIndex: number | undefined;
     };
+    scrollerContentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: React.CSSProperties | undefined;
+      role: string;
+    };
+    viewportProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: {
+        width: number;
+        height: number;
+      };
+      role: string;
+    };
     contentProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
       style: React.CSSProperties;
       role: string;
@@ -45,6 +56,11 @@ export declare class LayoutDataGrid extends Layout<DataGridElements> {
         transform: string;
       };
     };
+    containerVerticalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
+      style: {
+        transform: string;
+      };
+    } | undefined;
     scrollbarHorizontalProps: (args_0: Virtualization.State<Layout<AnyElements>> & Dimensions.State) => {
       ref: any;
       scrollPosition: {
@@ -78,6 +94,17 @@ export declare class LayoutDataGridLegacy extends LayoutDataGrid {
       role: string;
       tabIndex: number | undefined;
     };
+    getScrollerContentProps: () => {
+      style: React.CSSProperties | undefined;
+      role: string;
+    };
+    getViewportProps: () => {
+      style: {
+        width: number;
+        height: number;
+      };
+      role: string;
+    };
     getContentProps: () => {
       style: React.CSSProperties;
       role: string;
@@ -104,6 +131,11 @@ export declare class LayoutDataGridLegacy extends LayoutDataGrid {
         current: import("../../models/index.js").ScrollPosition;
       };
     };
+    getContainerVerticalProps: () => {
+      style: {
+        transform: string;
+      };
+    } | undefined;
   };
 }
 type ListElements = BaseElements;

package/features/virtualization/layout.js

@@ -64,19 +64,58 @@ class LayoutDataGrid extends Layout {
       // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
       tabIndex: platform.isFirefox ? -1 : undefined
     })),
+    scrollerContentProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.layoutMode, _dimensions.Dimensions.selectors.dimensions, _dimensions.Dimensions.selectors.needsVerticalScrollbar, _dimensions.Dimensions.selectors.needsHorizontalScrollbar, (layoutMode, dimensions, needsVerticalScrollbar, needsHorizontalScrollbar) => {
+      let style;
+      if (layoutMode === 'controlled') {
+        const {
+          contentSize,
+          scrollbarSize,
+          topContainerHeight,
+          bottomContainerHeight,
+          minimalContentHeight,
+          columnsTotalWidth
+        } = dimensions;
+        const verticalScrollbarSize = needsVerticalScrollbar ? scrollbarSize : 0;
+        const horizontalScrollbarSize = needsHorizontalScrollbar ? scrollbarSize : 0;
+        const contentHeight = contentSize.height === 0 ? minimalContentHeight : contentSize.height;
+        const width = needsHorizontalScrollbar ? verticalScrollbarSize + columnsTotalWidth : 'auto';
+        const height = cssAdd(cssAdd(cssAdd(contentHeight, topContainerHeight), bottomContainerHeight), horizontalScrollbarSize);
+        style = {
+          width,
+          height,
+          flex: '0 0 auto'
+        };
+      }
+      return {
+        style,
+        role: 'presentation'
+      };
+    }),
+    viewportProps: (0, _store.createSelectorMemoized)(_dimensions.Dimensions.selectors.dimensions, dimensions => ({
+      style: {
+        width: dimensions.viewportOuterSize.width,
+        height: dimensions.viewportOuterSize.height
+      },
+      role: 'presentation'
+    })),
     contentProps: (0, _store.createSelectorMemoized)(_dimensions.Dimensions.selectors.contentHeight, _dimensions.Dimensions.selectors.minimalContentHeight, _dimensions.Dimensions.selectors.columnsTotalWidth, _dimensions.Dimensions.selectors.needsHorizontalScrollbar, (contentHeight, minimalContentHeight, columnsTotalWidth, needsHorizontalScrollbar) => ({
       style: {
         width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-        flexBasis: contentHeight === 0 ? minimalContentHeight : contentHeight,
-        flexShrink: 0
+        height: contentHeight === 0 ? minimalContentHeight : contentHeight,
+        flex: '0 0 auto'
       },
       role: 'presentation'
     })),
-    positionerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.offsetTop, offsetTop => ({
+    positionerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.layoutMode, _virtualization.Virtualization.selectors.offsetTop, _virtualization.Virtualization.selectors.scrollPosition, (layoutMode, offsetTop, scrollPosition) => ({
       style: {
-        transform: `translate3d(0, ${offsetTop}px, 0)`
+        transform: layoutMode === 'uncontrolled' ? `translate3d(0, ${offsetTop}px, 0)` : `translate3d(${-scrollPosition.current.left}px, ${offsetTop - scrollPosition.current.top}px, 0)`
       }
     })),
+    containerVerticalProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.layoutMode, _virtualization.Virtualization.selectors.scrollPosition, (layoutMode, scrollPosition) => layoutMode === 'uncontrolled' ? undefined : {
+      style: {
+        transform: `translate3d(${-scrollPosition.current.left}px, 0, 0)`
+      }
+    }),
     scrollbarHorizontalProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.context, _virtualization.Virtualization.selectors.scrollPosition, (context, scrollPosition) => ({
       ref: context.scrollbarHorizontalRef,
       scrollPosition
@@ -102,19 +141,25 @@ class LayoutDataGridLegacy extends LayoutDataGrid {
     super.use(store, _params, _api, layoutParams);
     const containerProps = store.use(LayoutDataGrid.selectors.containerProps);
     const scrollerProps = store.use(LayoutDataGrid.selectors.scrollerProps);
+    const scrollerContentProps = store.use(LayoutDataGrid.selectors.scrollerContentProps);
+    const viewportProps = store.use(LayoutDataGrid.selectors.viewportProps);
     const contentProps = store.use(LayoutDataGrid.selectors.contentProps);
     const positionerProps = store.use(LayoutDataGrid.selectors.positionerProps);
     const scrollbarVerticalProps = store.use(LayoutDataGrid.selectors.scrollbarVerticalProps);
     const scrollbarHorizontalProps = store.use(LayoutDataGrid.selectors.scrollbarHorizontalProps);
     const scrollAreaProps = store.use(LayoutDataGrid.selectors.scrollAreaProps);
+    const containerVerticalProps = store.use(LayoutDataGrid.selectors.containerVerticalProps);
     return {
       getContainerProps: () => containerProps,
       getScrollerProps: () => scrollerProps,
+      getScrollerContentProps: () => scrollerContentProps,
+      getViewportProps: () => viewportProps,
       getContentProps: () => contentProps,
       getPositionerProps: () => positionerProps,
       getScrollbarVerticalProps: () => scrollbarVerticalProps,
       getScrollbarHorizontalProps: () => scrollbarHorizontalProps,
-      getScrollAreaProps: () => scrollAreaProps
+      getScrollAreaProps: () => scrollAreaProps,
+      getContainerVerticalProps: () => containerVerticalProps
     };
   }
 }
@@ -144,20 +189,18 @@ class LayoutList extends Layout {
       // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
       tabIndex: platform.isFirefox ? -1 : undefined
     })),
-    contentProps: (0, _store.createSelectorMemoized)(_dimensions.Dimensions.selectors.contentHeight, contentHeight => {
-      return {
-        style: {
-          position: 'absolute',
-          display: 'inline-block',
-          width: '100%',
-          height: contentHeight,
-          top: 0,
-          left: 0,
-          zIndex: -1
-        },
-        role: 'presentation'
-      };
-    }),
+    contentProps: (0, _store.createSelectorMemoized)(_dimensions.Dimensions.selectors.contentHeight, contentHeight => ({
+      style: {
+        position: 'absolute',
+        display: 'inline-block',
+        width: '100%',
+        height: contentHeight,
+        top: 0,
+        left: 0,
+        zIndex: -1
+      },
+      role: 'presentation'
+    })),
     positionerProps: (0, _store.createSelectorMemoized)(_virtualization.Virtualization.selectors.offsetTop, offsetTop => ({
       style: {
         height: offsetTop
@@ -216,4 +259,19 @@ function useScrollbarRefCallback(scrollerRef, refSetter, scrollProperty) {
       scrollbar.removeEventListener('scroll', onScrollbarScroll);
     };
   });
+}
+function cssAdd(a, b) {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a + b;
+  }
+  return `calc(${valueToCSSString(a)} + ${valueToCSSString(b)})`;
+}
+function valueToCSSString(value) {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'undefined') {
+    return '0';
+  }
+  return `${value}px`;
 }

package/features/virtualization/layout.mjs

@@ -25,7 +25,7 @@ export class Layout {
   }
 }
 export class LayoutDataGrid extends Layout {
-  static elements = (() => ['scroller', 'container', 'content', 'positioner', 'scrollbarVertical', 'scrollbarHorizontal'])();
+  static elements = ['scroller', 'container', 'content', 'positioner', 'scrollbarVertical', 'scrollbarHorizontal'];
   use(store, _params, _api, layoutParams) {
     const {
       scrollerRef,
@@ -40,7 +40,7 @@ export class LayoutDataGrid extends Layout {
       scrollbarHorizontalRef
     };
   }
-  static selectors = (() => ({
+  static selectors = {
     containerProps: createSelectorMemoized(Virtualization.selectors.context, context => ({
       ref: context.containerRef
     })),
@@ -57,19 +57,58 @@ export class LayoutDataGrid extends Layout {
       // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
       tabIndex: platform.isFirefox ? -1 : undefined
     })),
+    scrollerContentProps: createSelectorMemoized(Virtualization.selectors.layoutMode, Dimensions.selectors.dimensions, Dimensions.selectors.needsVerticalScrollbar, Dimensions.selectors.needsHorizontalScrollbar, (layoutMode, dimensions, needsVerticalScrollbar, needsHorizontalScrollbar) => {
+      let style;
+      if (layoutMode === 'controlled') {
+        const {
+          contentSize,
+          scrollbarSize,
+          topContainerHeight,
+          bottomContainerHeight,
+          minimalContentHeight,
+          columnsTotalWidth
+        } = dimensions;
+        const verticalScrollbarSize = needsVerticalScrollbar ? scrollbarSize : 0;
+        const horizontalScrollbarSize = needsHorizontalScrollbar ? scrollbarSize : 0;
+        const contentHeight = contentSize.height === 0 ? minimalContentHeight : contentSize.height;
+        const width = needsHorizontalScrollbar ? verticalScrollbarSize + columnsTotalWidth : 'auto';
+        const height = cssAdd(cssAdd(cssAdd(contentHeight, topContainerHeight), bottomContainerHeight), horizontalScrollbarSize);
+        style = {
+          width,
+          height,
+          flex: '0 0 auto'
+        };
+      }
+      return {
+        style,
+        role: 'presentation'
+      };
+    }),
+    viewportProps: createSelectorMemoized(Dimensions.selectors.dimensions, dimensions => ({
+      style: {
+        width: dimensions.viewportOuterSize.width,
+        height: dimensions.viewportOuterSize.height
+      },
+      role: 'presentation'
+    })),
     contentProps: createSelectorMemoized(Dimensions.selectors.contentHeight, Dimensions.selectors.minimalContentHeight, Dimensions.selectors.columnsTotalWidth, Dimensions.selectors.needsHorizontalScrollbar, (contentHeight, minimalContentHeight, columnsTotalWidth, needsHorizontalScrollbar) => ({
       style: {
         width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-        flexBasis: contentHeight === 0 ? minimalContentHeight : contentHeight,
-        flexShrink: 0
+        height: contentHeight === 0 ? minimalContentHeight : contentHeight,
+        flex: '0 0 auto'
       },
       role: 'presentation'
     })),
-    positionerProps: createSelectorMemoized(Virtualization.selectors.offsetTop, offsetTop => ({
+    positionerProps: createSelectorMemoized(Virtualization.selectors.layoutMode, Virtualization.selectors.offsetTop, Virtualization.selectors.scrollPosition, (layoutMode, offsetTop, scrollPosition) => ({
       style: {
-        transform: `translate3d(0, ${offsetTop}px, 0)`
+        transform: layoutMode === 'uncontrolled' ? `translate3d(0, ${offsetTop}px, 0)` : `translate3d(${-scrollPosition.current.left}px, ${offsetTop - scrollPosition.current.top}px, 0)`
       }
     })),
+    containerVerticalProps: createSelectorMemoized(Virtualization.selectors.layoutMode, Virtualization.selectors.scrollPosition, (layoutMode, scrollPosition) => layoutMode === 'uncontrolled' ? undefined : {
+      style: {
+        transform: `translate3d(${-scrollPosition.current.left}px, 0, 0)`
+      }
+    }),
     scrollbarHorizontalProps: createSelectorMemoized(Virtualization.selectors.context, Virtualization.selectors.scrollPosition, (context, scrollPosition) => ({
       ref: context.scrollbarHorizontalRef,
       scrollPosition
@@ -81,7 +120,7 @@ export class LayoutDataGrid extends Layout {
     scrollAreaProps: createSelectorMemoized(Virtualization.selectors.scrollPosition, scrollPosition => ({
       scrollPosition
     }))
-  }))();
+  };
 }
 
 // The current virtualizer API is exposed on one of the DataGrid slots, so we need to keep
@@ -94,24 +133,30 @@ export class LayoutDataGridLegacy extends LayoutDataGrid {
     super.use(store, _params, _api, layoutParams);
     const containerProps = store.use(LayoutDataGrid.selectors.containerProps);
     const scrollerProps = store.use(LayoutDataGrid.selectors.scrollerProps);
+    const scrollerContentProps = store.use(LayoutDataGrid.selectors.scrollerContentProps);
+    const viewportProps = store.use(LayoutDataGrid.selectors.viewportProps);
     const contentProps = store.use(LayoutDataGrid.selectors.contentProps);
     const positionerProps = store.use(LayoutDataGrid.selectors.positionerProps);
     const scrollbarVerticalProps = store.use(LayoutDataGrid.selectors.scrollbarVerticalProps);
     const scrollbarHorizontalProps = store.use(LayoutDataGrid.selectors.scrollbarHorizontalProps);
     const scrollAreaProps = store.use(LayoutDataGrid.selectors.scrollAreaProps);
+    const containerVerticalProps = store.use(LayoutDataGrid.selectors.containerVerticalProps);
     return {
       getContainerProps: () => containerProps,
       getScrollerProps: () => scrollerProps,
+      getScrollerContentProps: () => scrollerContentProps,
+      getViewportProps: () => viewportProps,
       getContentProps: () => contentProps,
       getPositionerProps: () => positionerProps,
       getScrollbarVerticalProps: () => scrollbarVerticalProps,
       getScrollbarHorizontalProps: () => scrollbarHorizontalProps,
-      getScrollAreaProps: () => scrollAreaProps
+      getScrollAreaProps: () => scrollAreaProps,
+      getContainerVerticalProps: () => containerVerticalProps
     };
   }
 }
 export class LayoutList extends Layout {
-  static elements = (() => ['scroller', 'container', 'content', 'positioner'])();
+  static elements = ['scroller', 'container', 'content', 'positioner'];
   use(store, _params, _api, layoutParams) {
     const {
       scrollerRef,
@@ -122,7 +167,7 @@ export class LayoutList extends Layout {
       mergedRef
     };
   }
-  static selectors = (() => ({
+  static selectors = {
     containerProps: createSelectorMemoized(Virtualization.selectors.context, Dimensions.selectors.autoHeight, Dimensions.selectors.needsHorizontalScrollbar, (context, autoHeight, needsHorizontalScrollbar) => ({
       ref: context.mergedRef,
       style: {
@@ -135,26 +180,24 @@ export class LayoutList extends Layout {
       // https://github.com/mui/mui-x/pull/13891#discussion_r1683416024
       tabIndex: platform.isFirefox ? -1 : undefined
     })),
-    contentProps: createSelectorMemoized(Dimensions.selectors.contentHeight, contentHeight => {
-      return {
-        style: {
-          position: 'absolute',
-          display: 'inline-block',
-          width: '100%',
-          height: contentHeight,
-          top: 0,
-          left: 0,
-          zIndex: -1
-        },
-        role: 'presentation'
-      };
-    }),
+    contentProps: createSelectorMemoized(Dimensions.selectors.contentHeight, contentHeight => ({
+      style: {
+        position: 'absolute',
+        display: 'inline-block',
+        width: '100%',
+        height: contentHeight,
+        top: 0,
+        left: 0,
+        zIndex: -1
+      },
+      role: 'presentation'
+    })),
     positionerProps: createSelectorMemoized(Virtualization.selectors.offsetTop, offsetTop => ({
       style: {
         height: offsetTop
       }
     }))
-  }))();
+  };
 }
 function useScrollbarRefCallback(scrollerRef, refSetter, scrollProperty) {
   const isLocked = React.useRef(false);
@@ -206,4 +249,19 @@ function useScrollbarRefCallback(scrollerRef, refSetter, scrollProperty) {
       scrollbar.removeEventListener('scroll', onScrollbarScroll);
     };
   });
+}
+function cssAdd(a, b) {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a + b;
+  }
+  return `calc(${valueToCSSString(a)} + ${valueToCSSString(b)})`;
+}
+function valueToCSSString(value) {
+  if (typeof value === 'string') {
+    return value;
+  }
+  if (typeof value === 'undefined') {
+    return '0';
+  }
+  return `${value}px`;
 }

package/features/virtualization/virtualization.d.mts

@@ -15,6 +15,13 @@ export type VirtualizationParams = {
   /** The column buffer in pixels to render before and after the viewport.
    * @default 150 */
   columnBufferPx?: number;
+  /**
+   * Controls how the container and render zones are positioned:
+   * - 'uncontrolled': uses CSS sticky positioning (default)
+   * - 'controlled': uses CSS absolute positioning with JS-computed offsets
+   * @default 'uncontrolled'
+   */
+  layoutMode?: 'controlled' | 'uncontrolled';
 };
 export type VirtualizationState<K extends string = string> = {
   enabled: boolean;
@@ -26,6 +33,7 @@ export type VirtualizationState<K extends string = string> = {
   scrollPosition: {
     current: ScrollPosition;
   };
+  layoutMode: 'controlled' | 'uncontrolled';
 };
 export declare const EMPTY_RENDER_CONTEXT: {
   firstRowIndex: number;
@@ -46,9 +54,18 @@ export declare const Virtualization: {
       container: React.RefObject<HTMLElement | null>;
     } & Record<string, React.RefObject<HTMLElement | null>>>> & Dimensions.State) => number;
     context: (state: BaseState) => Record<string, any>;
+    layoutMode: (state: BaseState) => "controlled" | "uncontrolled";
     scrollPosition: (state: BaseState) => {
       current: ScrollPosition;
     };
+    pinnedLeftOffsetSelector: (args_0: Virtualization.State<Layout<{
+      scroller: React.RefObject<HTMLElement | null>;
+      container: React.RefObject<HTMLElement | null>;
+    } & Record<string, React.RefObject<HTMLElement | null>>>> & Dimensions.State) => number;
+    pinnedRightOffsetSelector: (args_0: Virtualization.State<Layout<{
+      scroller: React.RefObject<HTMLElement | null>;
+      container: React.RefObject<HTMLElement | null>;
+    } & Record<string, React.RefObject<HTMLElement | null>>>> & Dimensions.State) => number;
   };
 };
 export declare namespace Virtualization {
@@ -83,6 +100,6 @@ declare function useVirtualization(store: Store<BaseState>, params: ParamsWithDe
   scheduleUpdateRenderContext: () => void;
 };
 export declare function areRenderContextsEqual(context1: RenderContext, context2: RenderContext): boolean;
-export declare function computeOffsetLeft(columnPositions: number[], renderContext: ColumnsRenderContext, pinnedLeftLength: number): number;
+export declare function computeOffsetLeft(columnPositions: number[], renderContext: ColumnsRenderContext, pinnedLeftLength: number, layoutMode?: VirtualizationState['layoutMode']): number;
 export declare function roundToDecimalPlaces(value: number, decimals: number): number;
 export {};

package/features/virtualization/virtualization.d.ts

@@ -15,6 +15,13 @@ export type VirtualizationParams = {
   /** The column buffer in pixels to render before and after the viewport.
    * @default 150 */
   columnBufferPx?: number;
+  /**
+   * Controls how the container and render zones are positioned:
+   * - 'uncontrolled': uses CSS sticky positioning (default)
+   * - 'controlled': uses CSS absolute positioning with JS-computed offsets
+   * @default 'uncontrolled'
+   */
+  layoutMode?: 'controlled' | 'uncontrolled';
 };
 export type VirtualizationState<K extends string = string> = {
   enabled: boolean;
@@ -26,6 +33,7 @@ export type VirtualizationState<K extends string = string> = {
   scrollPosition: {
     current: ScrollPosition;
   };
+  layoutMode: 'controlled' | 'uncontrolled';
 };
 export declare const EMPTY_RENDER_CONTEXT: {
   firstRowIndex: number;
@@ -46,9 +54,18 @@ export declare const Virtualization: {
       container: React.RefObject<HTMLElement | null>;
     } & Record<string, React.RefObject<HTMLElement | null>>>> & Dimensions.State) => number;
     context: (state: BaseState) => Record<string, any>;
+    layoutMode: (state: BaseState) => "controlled" | "uncontrolled";
     scrollPosition: (state: BaseState) => {
       current: ScrollPosition;
     };
+    pinnedLeftOffsetSelector: (args_0: Virtualization.State<Layout<{
+      scroller: React.RefObject<HTMLElement | null>;
+      container: React.RefObject<HTMLElement | null>;
+    } & Record<string, React.RefObject<HTMLElement | null>>>> & Dimensions.State) => number;
+    pinnedRightOffsetSelector: (args_0: Virtualization.State<Layout<{
+      scroller: React.RefObject<HTMLElement | null>;
+      container: React.RefObject<HTMLElement | null>;
+    } & Record<string, React.RefObject<HTMLElement | null>>>> & Dimensions.State) => number;
   };
 };
 export declare namespace Virtualization {
@@ -83,6 +100,6 @@ declare function useVirtualization(store: Store<BaseState>, params: ParamsWithDe
   scheduleUpdateRenderContext: () => void;
 };
 export declare function areRenderContextsEqual(context1: RenderContext, context2: RenderContext): boolean;
-export declare function computeOffsetLeft(columnPositions: number[], renderContext: ColumnsRenderContext, pinnedLeftLength: number): number;
+export declare function computeOffsetLeft(columnPositions: number[], renderContext: ColumnsRenderContext, pinnedLeftLength: number, layoutMode?: VirtualizationState['layoutMode']): number;
 export declare function roundToDecimalPlaces(value: number, decimals: number): number;
 export {};

package/features/virtualization/virtualization.js

@@ -42,14 +42,23 @@ const EMPTY_RENDER_CONTEXT = exports.EMPTY_RENDER_CONTEXT = {
 };
 const selectors = (() => {
   const firstRowIndexSelector = (0, _store.createSelector)(state => state.virtualization.renderContext.firstRowIndex);
+  const scrollPositionSelector = (0, _store.createSelector)(state => state.virtualization.scrollPosition);
+  const layoutModeSelector = (0, _store.createSelector)(state => state.virtualization.layoutMode);
   return {
     store: (0, _store.createSelector)(state => state.virtualization),
     renderContext: (0, _store.createSelector)(state => state.virtualization.renderContext),
     enabledForRows: (0, _store.createSelector)(state => state.virtualization.enabledForRows),
     enabledForColumns: (0, _store.createSelector)(state => state.virtualization.enabledForColumns),
-    offsetTop: (0, _store.createSelector)(_dimensions.Dimensions.selectors.rowPositions, firstRowIndexSelector, (rowPositions, firstRowIndex) => rowPositions[firstRowIndex] ?? 0),
+    offsetTop: (0, _store.createSelector)(layoutModeSelector, _dimensions.Dimensions.selectors.dimensions, _dimensions.Dimensions.selectors.rowPositions, firstRowIndexSelector, (layoutMode, dimensions, rowPositions, firstRowIndex) => {
+      return (layoutMode === 'uncontrolled' ? dimensions.topContainerHeight : 0) + (rowPositions[firstRowIndex] ?? 0);
+    }),
     context: (0, _store.createSelector)(state => state.virtualization.context),
-    scrollPosition: (0, _store.createSelector)(state => state.virtualization.scrollPosition)
+    layoutMode: layoutModeSelector,
+    scrollPosition: scrollPositionSelector,
+    pinnedLeftOffsetSelector: (0, _store.createSelector)(scrollPositionSelector, scrollPosition => scrollPosition.current.left),
+    pinnedRightOffsetSelector: (0, _store.createSelector)(scrollPositionSelector, _dimensions.Dimensions.selectors.dimensions, _dimensions.Dimensions.selectors.columnsTotalWidth, _dimensions.Dimensions.selectors.needsVerticalScrollbar, (scrollPosition, dimensions, columnsTotalWidth, needsVerticalScrollbar) => {
+      return Math.max(columnsTotalWidth, dimensions.viewportOuterSize.width) - dimensions.viewportOuterSize.width - scrollPosition.current.left + (needsVerticalScrollbar ? dimensions.scrollbarSize : 0);
+    })
   };
 })();
 const Virtualization = exports.Virtualization = {
@@ -68,7 +77,8 @@ function initializeState(params) {
       context: {},
       scrollPosition: {
         current: _models.ScrollPosition.EMPTY
-      }
+      },
+      layoutMode: params.virtualization.layoutMode ?? 'uncontrolled'
     }, params.initialState?.virtualization),
     // FIXME: refactor once the state shape is settled
     getters: null
@@ -365,7 +375,7 @@ function useVirtualization(store, params, api) {
       }
       const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
       const isVirtualFocusColumn = focusedVirtualCell?.rowIndex === rowIndex;
-      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length);
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length, store.state.virtualization.layoutMode);
       const showBottomBorder = isLastVisibleInSection && rowParams.position === 'top';
       const firstColumnIndex = currentRenderContext.firstColumnIndex;
       const lastColumnIndex = currentRenderContext.lastColumnIndex;
@@ -735,9 +745,14 @@ function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength) {
-  const left = (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
-  return Math.abs(left);
+function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength, layoutMode = 'uncontrolled') {
+  let offset = columnPositions[renderContext.firstColumnIndex] ?? 0;
+  /* CSS sticky leaves elements in the normal flow of the DOM, so we
+   * don't need to add the offset of the pinned columns. */
+  if (layoutMode === 'uncontrolled') {
+    offset -= columnPositions[pinnedLeftLength] ?? 0;
+  }
+  return Math.abs(offset);
 }
 function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
   if (isRtl) {

package/features/virtualization/virtualization.mjs

@@ -33,14 +33,23 @@ export const EMPTY_RENDER_CONTEXT = {
 };
 const selectors = (() => {
   const firstRowIndexSelector = createSelector(state => state.virtualization.renderContext.firstRowIndex);
+  const scrollPositionSelector = createSelector(state => state.virtualization.scrollPosition);
+  const layoutModeSelector = createSelector(state => state.virtualization.layoutMode);
   return {
     store: createSelector(state => state.virtualization),
     renderContext: createSelector(state => state.virtualization.renderContext),
     enabledForRows: createSelector(state => state.virtualization.enabledForRows),
     enabledForColumns: createSelector(state => state.virtualization.enabledForColumns),
-    offsetTop: createSelector(Dimensions.selectors.rowPositions, firstRowIndexSelector, (rowPositions, firstRowIndex) => rowPositions[firstRowIndex] ?? 0),
+    offsetTop: createSelector(layoutModeSelector, Dimensions.selectors.dimensions, Dimensions.selectors.rowPositions, firstRowIndexSelector, (layoutMode, dimensions, rowPositions, firstRowIndex) => {
+      return (layoutMode === 'uncontrolled' ? dimensions.topContainerHeight : 0) + (rowPositions[firstRowIndex] ?? 0);
+    }),
     context: createSelector(state => state.virtualization.context),
-    scrollPosition: createSelector(state => state.virtualization.scrollPosition)
+    layoutMode: layoutModeSelector,
+    scrollPosition: scrollPositionSelector,
+    pinnedLeftOffsetSelector: createSelector(scrollPositionSelector, scrollPosition => scrollPosition.current.left),
+    pinnedRightOffsetSelector: createSelector(scrollPositionSelector, Dimensions.selectors.dimensions, Dimensions.selectors.columnsTotalWidth, Dimensions.selectors.needsVerticalScrollbar, (scrollPosition, dimensions, columnsTotalWidth, needsVerticalScrollbar) => {
+      return Math.max(columnsTotalWidth, dimensions.viewportOuterSize.width) - dimensions.viewportOuterSize.width - scrollPosition.current.left + (needsVerticalScrollbar ? dimensions.scrollbarSize : 0);
+    })
   };
 })();
 export const Virtualization = {
@@ -59,7 +68,8 @@ function initializeState(params) {
       context: {},
       scrollPosition: {
         current: ScrollPosition.EMPTY
-      }
+      },
+      layoutMode: params.virtualization.layoutMode ?? 'uncontrolled'
     }, params.initialState?.virtualization),
     // FIXME: refactor once the state shape is settled
     getters: null
@@ -356,7 +366,7 @@ function useVirtualization(store, params, api) {
       }
       const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
       const isVirtualFocusColumn = focusedVirtualCell?.rowIndex === rowIndex;
-      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length);
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length, store.state.virtualization.layoutMode);
       const showBottomBorder = isLastVisibleInSection && rowParams.position === 'top';
       const firstColumnIndex = currentRenderContext.firstColumnIndex;
       const lastColumnIndex = currentRenderContext.lastColumnIndex;
@@ -726,9 +736,14 @@ export function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-export function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength) {
-  const left = (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
-  return Math.abs(left);
+export function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength, layoutMode = 'uncontrolled') {
+  let offset = columnPositions[renderContext.firstColumnIndex] ?? 0;
+  /* CSS sticky leaves elements in the normal flow of the DOM, so we
+   * don't need to add the offset of the pinned columns. */
+  if (layoutMode === 'uncontrolled') {
+    offset -= columnPositions[pinnedLeftLength] ?? 0;
+  }
+  return Math.abs(offset);
 }
 function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
   if (isRtl) {

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-virtualizer v1.0.0-beta.1
+ * @mui/x-virtualizer v1.0.0-rc.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-virtualizer v1.0.0-beta.1
+ * @mui/x-virtualizer v1.0.0-rc.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-virtualizer",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-rc.0",
   "author": "MUI Team",
   "description": "MUI virtualization library",
   "license": "MIT",
@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@mui/utils": "^7.3.7",
-    "@mui/x-internals": "9.0.0-alpha.4"
+    "@mui/utils": "9.0.0-beta.1",
+    "@mui/x-internals": "9.0.0-rc.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",