@mui/x-virtualizer 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -5,6 +5,217 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.1
+
+_Aug 15, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Y-axes can now be grouped by category when using `band` and `point` scales.
+- 📚 Documentation improvements
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.1`
+
+- [DataGrid] Fix scroll jumping (#19156) @romgrk
+- [DataGrid] Fix scroll restoration (#19182) @romgrk
+- [DataGrid] Fix "no row with id" error (#19193) @romgrk
+
+#### `@mui/x-data-grid-pro@8.10.1` [![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.10.1`.
+
+#### `@mui/x-data-grid-premium@8.10.1` [![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.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.10.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.10.0`.
+
+### Charts
+
+- Axes can now be grouped by category when using `band` and `point` scales
+
+  <img width="643" height="455" alt="Bar chart with y-axis grouped per categories" src="https://github.com/user-attachments/assets/59044afe-bcc5-4152-8bf1-225db0635025" />
+
+#### `@mui/x-charts@8.10.1`
+
+- [charts] Allow y-axis to be grouped (#19081) @JCQuintas
+- [charts] Fix default axis highlight for axes without data attribute (#18985) @alexfauquette
+- [charts] Fix tooltip mark unexpected wrapping in mobile (#19122) @bernardobelchior
+- [charts] Prevent overflow on charts tooltip (#19123) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.10.1` [![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.10.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.1` [![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.10.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add all planned charts on the overview page (#19077) @prakhargupta1
+- [docs] Add future charts components link in the sidebar (#19140) @prakhargupta1
+- [docs] Fix Heatmap docs duplicate text (#19138) @JCQuintas
+- [docs] Remove preview from Toolbar & Funnel (#19131) @mnajdova
+- [docs] Reproduce npm sparkline (#19089) @alexfauquette
+
+### Core
+
+- [core] Fix licensing model name (#19025) @oliviertassinari
+- [core] Fix usage of `:catalog` for `@babel/runtime` (#19028) @oliviertassinari
+- [core] Refactor virtualizer API (#18995) @romgrk
+
+### Miscellaneous
+
+- [code-infra] Remove namespaces (#19071) @Janpot
+- [code-infra] Fix `fs-extra` removal from `formattedTSDemos` script (#19132) @bernardobelchior
+- [code-infra] Remove unused code and dependency (#19139) @bernardobelchior
+- [code-infra] Replace `fs-extra` with `node:fs` where possible (#19127) @bernardobelchior
+- [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
+- [internal] Fix writing style action name @oliviertassinari
+- [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari
+- [support-infra] Remove default issue label (#19104) @oliviertassinari
+
+## 8.10.0
+
+_Aug 8, 2025_
+
+We'd like to extend a big thank you to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 [`FunnelChart`](https://mui.com/x/react-charts/funnel/) marked as stable
+- 📈 [Zoom slider](https://mui.com/x/react-charts/zoom-and-pan/#zoom-slider) and [Preview](https://mui.com/x/react-charts/zoom-and-pan/#preview) marked as stable
+- 📈 Supporting [label groups](https://mui.com/x/react-charts/axis/#grouped-axes) in band and point axis
+- 🌎 Improve Norwegian Nynorsk (nn-NO) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@AnderzL7, @aqeelat, @dwrth, @noobyogi0010, @nusr, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @oliviertassinari, @rita-codes, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.0`
+
+- [DataGrid] Move spread operator in `BaseSelect` to allow `variant` change (#19026) @dwrth
+- [DataGrid] Use `use-sync-external-store` shim (#19063) @romgrk
+- [DataGrid] Allow skipping cache in `dataSource.fetchRows()` API method (#18904) @MBilalShafi
+- [DataGrid] Do not call `preProcessEditCellProps()` if cell is not editable based on `isCellEditable()` (#18405) @nusr
+- [DataGrid] Fix `renderCountry` throwing an error when used in tree data (#19068) @cherniavskii
+- [DataGrid] Fix performance issue for root level "select all" (#19015) @MBilalShafi
+- [DataGrid] Fix pagination `slotProps` being ignored by the grid (#19095) @romgrk
+- [l10n] Improve Norwegian Nynorsk (nn-NO) locale (#19076) @AnderzL7
+
+#### `@mui/x-data-grid-pro@8.10.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.10.0`, plus:
+
+- [DataGridPro] Fix row reorder not working with column reorder disabled (#19016) @MBilalShafi
+- [DataGridPro] Fix header filters cache sharing issue (#19090) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.10.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.10.0`, plus:
+
+- [DataGridPremium] Allow additional derived columns customization via `valueFormatter` (#18982) @arminmeh
+- [DataGridPremium] Fix complex `singleSelect` columns not working in pivot model (#18971) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+- [pickers] `MuiPickersLayout-toolbar` is overlapping the Calendar in RTL `MobileDatePicker` variant (#18981) @rita-codes
+
+#### `@mui/x-date-pickers-pro@8.10.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.10.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.10.0`
+
+- [charts] Add `groups` to `band` and `point` axis config (#18766) @JCQuintas
+- [charts] Animation example using `motion` library (#18993) @JCQuintas
+- [charts] Deprecate `Unstable_` radar exports (#19079) @JCQuintas
+- [charts] Improve grouped axis logic (#19069) @JCQuintas
+- [charts] Fix type assertion in axis highlight components (#19060) @sai6855
+- [charts] Remove unnecessary type assertion in tooltip `valueFormatter` in heatmap (#19047) @sai6855
+
+#### `@mui/x-charts-pro@8.10.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.10.0`, plus:
+
+- [charts-pro] Fix `slotProps.tooltip.trigger` not respected in `ScatterChartPro` and `FunnelChart` (#18902) @bernardobelchior
+- [charts-pro] Fix zoom filtering adjusting axis too soon (#18992) @bernardobelchior
+- [charts-pro] Mark `FunnelChart` as stable (#19048) @JCQuintas
+- [charts-pro] Mark zoom slider and preview as stable (#19049) @JCQuintas
+- [charts-pro] Refactor `createAxisFilterMapper` (#18998) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.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.10.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add CSS bundler breaking change to migration guide (#17436) @romgrk
+- [docs] `RichTreeViewPro` demo for dragging via custom drag-handle is not working properly (#19008) @rita-codes
+- [docs] Fix broken link to D3 in Charts (#19020) @oliviertassinari
+- [docs] Revise the Charts Animation doc (#18990) @mapache-salvaje
+- [docs] Fix incorrect code in line chart preview (#19023) @noobyogi0010
+- [docs] Improve bundling instructions for the Data Grid (#19065) @romgrk
+- [docs] Reduce image size in the inventory grid demo (#19004) @arminmeh
+
+### Core
+
+- [core] Fix ESLint reference name @oliviertassinari
+
+### Miscellaneous
+
+- [infra] Remove bundle size tracking for subpaths (#19072) @Janpot
+- [infra] Accept `PORT` env on `docs:dev` script (#19014) @JCQuintas
+- [infra] Skip codesandbox iframe demos in regressions tests (#18970) @cherniavskii
+- [infra] Remove package.json `module` field (#18961) @Janpot
+- [internal] Remove peer dependency on `@mui/system` (#19062) @aqeelat
+
 ## 8.9.2
 
 _Jul 31, 2025_
@@ -418,8 +629,8 @@ Same changes as in `@mui/x-tree-view@8.7.0`, plus:
 
 - [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
 - [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
-- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
-- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [code-infra] Migrate to flat ESLint config (#18562) @brijeshb42
+- [code-infra] Refactor ESLint config (#18643) @LukasTy
 - [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
 - [infra] Move pushArgos script to code-infra (#18667) @Janpot
 - [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
@@ -1333,7 +1544,7 @@ Same changes as in `@mui/x-tree-view@8.2.0`.
 - [core] Fix all Vale errors @oliviertassinari
 - [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
 - [core] Remove empty version (#17582) @oliviertassinari
-- [core] Remove eslint from codemod spec files (#17443) @alexfauquette
+- [core] Remove ESLint from codemod spec files (#17443) @alexfauquette
 - [core] Remove unnecessary versions (#17597) @oliviertassinari
 - [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
 - [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
@@ -6827,7 +7038,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`.
 
 ### Core
 
-- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [core] Add ESLint rule to restrict import from `../internals` root (#13633) @JCQuintas
 - [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
 - [license] Allow usage of Charts and Tree View Pro package for old premium licenses (#13619) @flaviendelangle
 
@@ -6965,7 +7176,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`.
 
 - [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
 - [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
-- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Fix ESLint for react compiler (#13444) @alexfauquette
 - [charts] Improve themeAugmentation typing (#13433) @noraleonte
 - [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
 - [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
@@ -7512,7 +7723,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle
 - [code-infra] Change package manager to `pnpm` (#11875) @LukasTy
-- [code-infra] Closer sync with eslint config of codebase (#12864) @oliviertassinari
+- [code-infra] Closer sync with ESLint config of codebase (#12864) @oliviertassinari
 - [support-infra] Add release announcement to GitHub workflows (#11867) (#12843) @michelengelen
 
 ## 7.3.0

package/esm/features/colspan.d.ts

@@ -6,6 +6,10 @@ import type { CellColSpanInfo } from "../models/colspan.js";
 import { Virtualization } from "./virtualization.js";
 type ColumnIndex = number;
 type ColspanMap = Map<RowId, Record<ColumnIndex, CellColSpanInfo>>;
+export type ColspanParams = {
+  enabled: boolean;
+  getColspan: (rowId: RowId, column: ColumnWithWidth, columnIndex: integer) => integer;
+};
 export declare const Colspan: {
   initialize: typeof initializeState;
   use: typeof useColspan;

package/esm/features/colspan.js

@@ -14,6 +14,7 @@ function initializeState(_params) {
   };
 }
 function useColspan(store, params, api) {
+  const getColspan = params.colspan?.getColspan;
   const resetColSpan = () => {
     store.state.colspanMap = new Map();
   };
@@ -22,14 +23,14 @@ function useColspan(store, params, api) {
   };
 
   // Calculate `colSpan` for each cell in the row
-  const calculateColSpan = useEventCallback((rowId, minFirstColumn, maxLastColumn, columns) => {
+  const calculateColSpan = useEventCallback(getColspan ? (rowId, minFirstColumn, maxLastColumn, columns) => {
     for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
-      const cellProps = calculateCellColSpan(store.state.colspanMap, i, rowId, minFirstColumn, maxLastColumn, columns, params.getColspan);
+      const cellProps = calculateCellColSpan(store.state.colspanMap, i, rowId, minFirstColumn, maxLastColumn, columns, getColspan);
       if (cellProps.colSpan > 1) {
         i += cellProps.colSpan - 1;
       }
     }
-  });
+  } : () => {});
   api.calculateColSpan = calculateColSpan;
   return {
     resetColSpan,

package/esm/features/dimensions.d.ts

@@ -1,6 +1,15 @@
 import { Store } from '@mui/x-internals/store';
 import { ColumnWithWidth, DimensionsState, RowId, RowsMetaState, Size } from "../models/index.js";
 import type { BaseState, VirtualizerParams } from "../useVirtualizer.js";
+export type DimensionsParams = {
+  rowHeight: number;
+  columnsTotalWidth: number;
+  leftPinnedWidth: number;
+  rightPinnedWidth: number;
+  topPinnedHeight: number;
+  bottomPinnedHeight: number;
+  scrollbarSize?: number;
+};
 export declare const Dimensions: {
   initialize: typeof initializeState;
   use: typeof useDimensions;
@@ -8,6 +17,7 @@ export declare const Dimensions: {
     rootSize: (state: BaseState) => Size;
     dimensions: (state: BaseState) => DimensionsState;
     rowHeight: (state: BaseState) => number;
+    contentHeight: (state: BaseState) => number;
     rowsMeta: (state: BaseState) => RowsMetaState;
     columnPositions: (_: any, columns: ColumnWithWidth[]) => number[];
     needsHorizontalScrollbar: (state: BaseState) => boolean;

package/esm/features/dimensions.js

@@ -9,8 +9,9 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { throttle } from '@mui/x-internals/throttle';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import { roundToDecimalPlaces } from '@mui/x-internals/math';
-import { useStore, useStoreEffect, createSelectorMemoized } from '@mui/x-internals/store';
+import { useStore, createSelectorMemoized } from '@mui/x-internals/store';
 import { Size } from "../models/index.js";
+
 /* eslint-disable import/export, @typescript-eslint/no-redeclare */
 /* eslint-disable no-underscore-dangle */
 
@@ -24,15 +25,11 @@ const EMPTY_DIMENSIONS = {
   hasScrollX: false,
   hasScrollY: false,
   scrollbarSize: 0,
-  headerHeight: 0,
-  groupHeaderHeight: 0,
-  headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
   columnsTotalWidth: 0,
   leftPinnedWidth: 0,
   rightPinnedWidth: 0,
-  headersTotalHeight: 0,
   topContainerHeight: 0,
   bottomContainerHeight: 0
 };
@@ -40,6 +37,7 @@ const selectors = {
   rootSize: state => state.rootSize,
   dimensions: state => state.dimensions,
   rowHeight: state => state.dimensions.rowHeight,
+  contentHeight: state => state.dimensions.contentSize.height,
   rowsMeta: state => state.rowsMeta,
   columnPositions: createSelectorMemoized((_, columns) => {
     const positions = [];
@@ -87,15 +85,15 @@ function useDimensions(store, params, _api) {
     refs,
     dimensions: {
       rowHeight,
-      headerHeight,
       columnsTotalWidth,
-      groupHeaderHeight,
-      headerFilterHeight,
-      headersTotalHeight,
       leftPinnedWidth,
-      rightPinnedWidth
-    }
+      rightPinnedWidth,
+      topPinnedHeight,
+      bottomPinnedHeight
+    },
+    onResize
   } = params;
+  const containerNode = refs.container.current;
   const updateDimensions = React.useCallback(() => {
     if (isFirstSizing.current) {
       return;
@@ -106,9 +104,9 @@ function useDimensions(store, params, _api) {
     // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
     // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
     // https://github.com/mui/mui-x/issues/15721
-    const scrollbarSize = measureScrollbarSize(params.refs.container.current, params.scrollbarSize);
-    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
-    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
+    const scrollbarSize = measureScrollbarSize(containerNode, params.dimensions.scrollbarSize);
+    const topContainerHeight = topPinnedHeight + rowsMeta.pinnedTopRowsTotalHeight;
+    const bottomContainerHeight = bottomPinnedHeight + rowsMeta.pinnedBottomRowsTotalHeight;
     const contentSize = {
       width: columnsTotalWidth,
       height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
@@ -172,15 +170,11 @@ function useDimensions(store, params, _api) {
       hasScrollX,
       hasScrollY,
       scrollbarSize,
-      headerHeight,
-      groupHeaderHeight,
-      headerFilterHeight,
       rowWidth,
       rowHeight,
       columnsTotalWidth,
       leftPinnedWidth,
       rightPinnedWidth,
-      headersTotalHeight,
       topContainerHeight,
       bottomContainerHeight
     };
@@ -191,21 +185,16 @@ function useDimensions(store, params, _api) {
     store.update({
       dimensions: newDimensions
     });
-  }, [store, params.refs.container, params.scrollbarSize, params.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+    onResize?.(newDimensions.root);
+  }, [store, containerNode, params.dimensions.scrollbarSize, params.autoHeight, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
   const {
-    resizeThrottleMs,
-    onResize
+    resizeThrottleMs
   } = params;
   const updateDimensionCallback = useEventCallback(updateDimensions);
-  const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? throttle(() => {
-    updateDimensionCallback();
-    onResize?.(store.state.rootSize);
-  }, resizeThrottleMs) : undefined, [resizeThrottleMs, onResize, store, updateDimensionCallback]);
+  const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? throttle(updateDimensionCallback, resizeThrottleMs) : undefined, [resizeThrottleMs, updateDimensionCallback]);
   React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
-  useLayoutEffect(() => observeRootNode(refs.container.current, store), [refs, store]);
-  useLayoutEffect(updateDimensions, [updateDimensions]);
-  useStoreEffect(store, selectors.rootSize, (_, size) => {
-    params.onResize?.(size);
+  const setRootSize = useEventCallback(rootSize => {
+    store.state.rootSize = rootSize;
     if (isFirstSizing.current || !debouncedUpdateDimensions) {
       // We want to initialize the grid dimensions as soon as possible to avoid flickering
       isFirstSizing.current = false;
@@ -214,6 +203,8 @@ function useDimensions(store, params, _api) {
       debouncedUpdateDimensions();
     }
   });
+  useLayoutEffect(() => observeRootNode(containerNode, store, setRootSize), [containerNode, store, setRootSize]);
+  useLayoutEffect(updateDimensions, [updateDimensions]);
   const rowsMeta = useRowsMeta(store, params, updateDimensions);
   return {
     updateDimensions,
@@ -250,7 +241,6 @@ function useRowsMeta(store, params, updateDimensions) {
     return entry;
   });
   const {
-    rowIdToIndexMap,
     applyRowHeight
   } = params;
   const processHeightEntry = React.useCallback(row => {
@@ -282,12 +272,7 @@ function useRowsMeta(store, params, updateDimensions) {
       }
     }
     if (getRowSpacing) {
-      const indexRelativeToCurrentPage = rowIdToIndexMap.get(row.id) ?? -1;
-      const spacing = getRowSpacing(row, {
-        isFirstVisible: indexRelativeToCurrentPage === 0,
-        isLastVisible: indexRelativeToCurrentPage === rows.length - 1,
-        indexRelativeToCurrentPage
-      });
+      const spacing = getRowSpacing(row);
       entry.spacingTop = spacing.top ?? 0;
       entry.spacingBottom = spacing.bottom ?? 0;
     } else {
@@ -296,17 +281,17 @@ function useRowsMeta(store, params, updateDimensions) {
     }
     applyRowHeight?.(entry, row);
     return entry;
-  }, [store, rows, getRowHeightProp, getRowHeightEntry, getEstimatedRowHeight, rowHeight, getRowSpacing, rowIdToIndexMap, applyRowHeight]);
+  }, [store, getRowHeightProp, getRowHeightEntry, getEstimatedRowHeight, rowHeight, getRowSpacing, applyRowHeight]);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    const pinnedTopRowsTotalHeight = pinnedRows.top.reduce((acc, row) => {
+    const pinnedTopRowsTotalHeight = pinnedRows?.top.reduce((acc, row) => {
       const entry = processHeightEntry(row);
       return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
-    }, 0);
-    const pinnedBottomRowsTotalHeight = pinnedRows.bottom.reduce((acc, row) => {
+    }, 0) ?? 0;
+    const pinnedBottomRowsTotalHeight = pinnedRows?.bottom.reduce((acc, row) => {
       const entry = processHeightEntry(row);
       return acc + entry.content + entry.spacingTop + entry.spacingBottom + entry.detail;
-    }, 0);
+    }, 0) ?? 0;
     const positions = [];
     const currentPageTotalHeight = rows.reduce((acc, row) => {
       positions.push(acc);
@@ -362,7 +347,7 @@ function useRowsMeta(store, params, updateDimensions) {
       const entry = entries[i];
       const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
       const rowId = entry.target.__mui_id;
-      const focusedVirtualRowId = params.focusedVirtualCell()?.id;
+      const focusedVirtualRowId = params.focusedVirtualCell?.()?.id;
       if (focusedVirtualRowId === rowId && height === 0) {
         // Focused virtual row has 0 height.
         // We don't want to store it to avoid scroll jumping.
@@ -401,7 +386,7 @@ function useRowsMeta(store, params, updateDimensions) {
     resetRowHeights
   };
 }
-function observeRootNode(node, store) {
+function observeRootNode(node, store, setRootSize) {
   if (!node) {
     return undefined;
   }
@@ -411,9 +396,7 @@ function observeRootNode(node, store) {
     height: roundToDecimalPlaces(bounds.height, 1)
   };
   if (store.state.rootSize === Size.EMPTY || !Size.equals(initialSize, store.state.rootSize)) {
-    store.update({
-      rootSize: initialSize
-    });
+    setRootSize(initialSize);
   }
   if (typeof ResizeObserver === 'undefined') {
     return undefined;
@@ -427,9 +410,7 @@ function observeRootNode(node, store) {
       height: roundToDecimalPlaces(entry.contentRect.height, 1)
     };
     if (!Size.equals(rootSize, store.state.rootSize)) {
-      store.update({
-        rootSize
-      });
+      setRootSize(rootSize);
     }
   });
   observer.observe(node);

package/esm/features/virtualization.d.ts

@@ -5,6 +5,16 @@ import type { CellColSpanInfo } from "../models/colspan.js";
 import { Dimensions } from "./dimensions.js";
 import type { BaseState, VirtualizerParams } from "../useVirtualizer.js";
 import { PinnedRowPosition, RenderContext, ColumnsRenderContext, ColumnWithWidth, RowId, RowEntry } from "../models/index.js";
+export type VirtualizationParams = {
+  /** @default false */
+  isRtl?: boolean;
+  /** The row buffer in pixels to render before and after the viewport.
+   * @default 150 */
+  rowBufferPx?: number;
+  /** The column buffer in pixels to render before and after the viewport.
+   * @default 150 */
+  columnBufferPx?: number;
+};
 export type VirtualizationState = {
   enabled: boolean;
   enabledForRows: boolean;
@@ -44,16 +54,16 @@ type RequiredAPI = Dimensions.API & AbstractAPI;
 declare function useVirtualization(store: Store<BaseState>, params: VirtualizerParams, api: RequiredAPI): {
   getters: {
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
-    getRows: (rowParams: {
+    getRows: (rowParams?: {
       rows?: RowEntry[];
       position?: PinnedRowPosition;
       renderContext?: RenderContext;
-    } | undefined, unstable_rowTree: Record<RowId, any>) => React.ReactNode[];
+    }, unstable_rowTree?: Record<RowId, any>) => React.ReactNode[];
     getContainerProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
     };
     getScrollerProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
       onScroll: () => void;
       onWheel: ((event: React.WheelEvent) => void) | undefined;
       onTouchMove: ((event: React.TouchEvent) => void) | undefined;
@@ -62,22 +72,19 @@ declare function useVirtualization(store: Store<BaseState>, params: VirtualizerP
       tabIndex: number | undefined;
     };
     getContentProps: () => {
-      style: React.CSSProperties;
-      role: string;
       ref: (node: HTMLDivElement | null) => void;
-    };
-    getRenderZoneProps: () => {
+      style: React.CSSProperties;
       role: string;
     };
     getScrollbarVerticalProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
       scrollPosition: React.RefObject<{
         top: number;
         left: number;
       }>;
     };
     getScrollbarHorizontalProps: () => {
-      ref: React.RefObject<HTMLDivElement | null>;
+      ref: (node: HTMLDivElement | null) => void;
       scrollPosition: React.RefObject<{
         top: number;
         left: number;