@mui/x-virtualizer 0.2.8 → 0.2.10

package/CHANGELOG.md

@@ -5,6 +5,181 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.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.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.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.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.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.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.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.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.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.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.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.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.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.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.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.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.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.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.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.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
 ## 8.18.0
 
 <!-- generated comparing v8.17.0..master -->

package/esm/features/dimensions.d.ts

@@ -34,8 +34,8 @@ export declare namespace Dimensions {
 }
 declare function initializeState(params: VirtualizerParams): Dimensions.State;
 declare function useDimensions(store: Store<BaseState>, params: VirtualizerParams, _api: {}): {
-  updateDimensions: () => void;
-  debouncedUpdateDimensions: ((() => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
+  updateDimensions: (firstUpdate?: boolean) => void;
+  debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
   rowsMeta: {
     getRowHeight: (rowId: RowId) => any;
     setLastMeasuredRowIndex: (index: number) => void;
@@ -48,4 +48,5 @@ declare function useDimensions(store: Store<BaseState>, params: VirtualizerParam
     resetRowHeights: () => void;
   };
 };
+export declare function observeRootNode(node: Element | null, store: Store<BaseState>, setRootSize: (size: Size) => void): (() => void) | undefined;
 export {};

package/esm/features/dimensions.js

@@ -93,11 +93,14 @@ function useDimensions(store, params, _api) {
     },
     onResize
   } = params;
-  const containerNode = refs.container.current;
-  const updateDimensions = React.useCallback(() => {
+  const updateDimensions = React.useCallback(firstUpdate => {
+    if (firstUpdate) {
+      isFirstSizing.current = false;
+    }
     if (isFirstSizing.current) {
       return;
     }
+    const containerNode = refs.container.current;
     const rootSize = selectors.rootSize(store.state);
     const rowsMeta = selectors.rowsMeta(store.state);
 
@@ -192,24 +195,13 @@ function useDimensions(store, params, _api) {
       dimensions: newDimensions
     });
     onResize?.(newDimensions.root);
-  }, [store, containerNode, params.dimensions.scrollbarSize, params.autoHeight, params.disableHorizontalScroll, params.disableVerticalScroll, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
+  }, [store, refs.container, params.dimensions.scrollbarSize, params.autoHeight, params.disableHorizontalScroll, params.disableVerticalScroll, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
   const {
     resizeThrottleMs
   } = params;
   const updateDimensionCallback = useEventCallback(updateDimensions);
   const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? throttle(updateDimensionCallback, resizeThrottleMs) : undefined, [resizeThrottleMs, updateDimensionCallback]);
   React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
-  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;
-      updateDimensions();
-    } else {
-      debouncedUpdateDimensions();
-    }
-  });
-  useLayoutEffect(() => observeRootNode(containerNode, store, setRootSize), [containerNode, store, setRootSize]);
   useLayoutEffect(updateDimensions, [updateDimensions]);
   const rowsMeta = useRowsMeta(store, params, updateDimensions);
   return {
@@ -392,7 +384,7 @@ function useRowsMeta(store, params, updateDimensions) {
     resetRowHeights
   };
 }
-function observeRootNode(node, store, setRootSize) {
+export function observeRootNode(node, store, setRootSize) {
   if (!node) {
     return undefined;
   }

package/esm/features/virtualization.d.ts

@@ -31,6 +31,7 @@ export declare const Virtualization: {
   initialize: typeof initializeState;
   use: typeof useVirtualization;
   selectors: {
+    store: (state: BaseState) => VirtualizationState;
     renderContext: (state: BaseState) => RenderContext;
     enabledForRows: (state: BaseState) => boolean;
     enabledForColumns: (state: BaseState) => boolean;
@@ -60,14 +61,12 @@ declare function useVirtualization(store: Store<BaseState>, params: VirtualizerP
       position?: PinnedRowPosition;
       renderContext?: RenderContext;
     }, unstable_rowTree?: Record<RowId, any>) => React.ReactNode[];
+    rows: RowEntry[];
     getContainerProps: () => {
-      ref: (node: HTMLDivElement | null) => void;
+      ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
     };
     getScrollerProps: () => {
-      ref: (node: HTMLDivElement | null) => void;
-      onScroll: () => void;
-      onWheel: ((event: React.WheelEvent) => void) | undefined;
-      onTouchMove: ((event: React.TouchEvent) => void) | undefined;
+      ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
       style: React.CSSProperties;
       role: string;
       tabIndex: number | undefined;
@@ -101,6 +100,7 @@ declare function useVirtualization(store: Store<BaseState>, params: VirtualizerP
   useVirtualization: () => BaseState;
   setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
   forceUpdateRenderContext: () => void;
+  scheduleUpdateRenderContext: () => void;
   getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => CellColSpanInfo;
   calculateColSpan: (rowId: RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
   getHiddenCellsOrigin: () => Record<RowId, Record<number, number>>;

package/esm/features/virtualization.js

@@ -9,10 +9,10 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import * as platform from '@mui/x-internals/platform';
 import { useRunOnce } from '@mui/x-internals/useRunOnce';
-import { useFirstRender } from '@mui/x-internals/useFirstRender';
 import { createSelector, useStore, useStoreEffect } from '@mui/x-internals/store';
+import reactMajor from '@mui/x-internals/reactMajor';
 import { PinnedRows, PinnedColumns } from "../models/core.js";
-import { Dimensions } from "./dimensions.js";
+import { Dimensions, observeRootNode } from "./dimensions.js";
 import { ScrollDirection } from "../models/index.js";
 
 /* eslint-disable import/export, @typescript-eslint/no-redeclare */
@@ -31,6 +31,7 @@ export const EMPTY_RENDER_CONTEXT = {
   lastColumnIndex: 0
 };
 const selectors = {
+  store: createSelector(state => state.virtualization),
   renderContext: createSelector(state => state.virtualization.renderContext),
   enabledForRows: createSelector(state => state.virtualization.enabledForRows),
   enabledForColumns: createSelector(state => state.virtualization.enabledForColumns)
@@ -88,7 +89,7 @@ function useVirtualization(store, params, api) {
   const needsHorizontalScrollbar = useStore(store, Dimensions.selectors.needsHorizontalScrollbar);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
-  const [, setRefTick] = React.useState(0);
+  const isUpdateScheduled = React.useRef(false);
   const isRenderContextReady = React.useRef(false);
   const renderContext = useStore(store, selectors.renderContext);
   const enabledForRows = useStore(store, selectors.enabledForRows);
@@ -148,7 +149,7 @@ function useVirtualization(store, params, api) {
     // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
       top: clamp(scroller.scrollTop, 0, maxScrollTop),
-      left: isRtl ? clamp(scroller.scrollLeft, -maxScrollLeft, 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
+      left: isRtl ? clamp(scroller.scrollLeft, -Math.abs(maxScrollLeft), 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -195,7 +196,7 @@ function useVirtualization(store, params, api) {
     }
     return nextRenderContext;
   });
-  const forceUpdateRenderContext = useEventCallback(() => {
+  const forceUpdateRenderContext = () => {
     // skip update if dimensions are not ready and virtualization is enabled
     if (!Dimensions.selectors.dimensions(store.state).isReady && (enabledForRows || enabledForColumns)) {
       return;
@@ -205,7 +206,22 @@ function useVirtualization(store, params, api) {
     // Reset the frozen context when the render context changes, see the illustration in https://github.com/mui/mui-x/pull/12353
     frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
+  };
+  const forceUpdateRenderContextCallback = useEventCallback(forceUpdateRenderContext);
+  useStoreEffect(store, Dimensions.selectors.dimensions, (previous, next) => {
+    if (next.isReady) {
+      forceUpdateRenderContext();
+    }
   });
+  useEnhancedEffect(() => {
+    if (isUpdateScheduled.current) {
+      forceUpdateRenderContext();
+      isUpdateScheduled.current = false;
+    }
+  });
+  const scheduleUpdateRenderContext = () => {
+    isUpdateScheduled.current = true;
+  };
   const handleScroll = useEventCallback(() => {
     if (ignoreNextScrollEvent.current) {
       ignoreNextScrollEvent.current = false;
@@ -379,8 +395,8 @@ function useVirtualization(store, params, api) {
     if (!isRenderContextReady.current) {
       return;
     }
-    forceUpdateRenderContext();
-  }, [enabledForColumns, enabledForRows, forceUpdateRenderContext]);
+    forceUpdateRenderContextCallback();
+  }, [enabledForColumns, enabledForRows, forceUpdateRenderContextCallback]);
   useEnhancedEffect(() => {
     if (refs.scroller.current) {
       refs.scroller.current.scrollLeft = 0;
@@ -436,21 +452,77 @@ function useVirtualization(store, params, api) {
   const refSetter = name => node => {
     if (node && refs[name].current !== node) {
       refs[name].current = node;
-      setRefTick(tick => tick + 1);
     }
   };
+  const isFirstSizing = React.useRef(true);
+  const containerCleanup = React.useRef(undefined);
+  const containerRef = useEventCallback(node => {
+    if (!node) {
+      // Cleanup for R18
+      containerCleanup.current?.();
+      return;
+    }
+    refs.container.current = node;
+    const unsubscribe = observeRootNode(node, store, rootSize => {
+      if (rootSize.width === 0 && rootSize.height === 0 && store.state.rootSize.height !== 0 && store.state.rootSize.width !== 0) {
+        return;
+      }
+      store.state.rootSize = rootSize;
+      if (isFirstSizing.current || !api.debouncedUpdateDimensions) {
+        // We want to initialize the grid dimensions as soon as possible to avoid flickering
+        api.updateDimensions(isFirstSizing.current);
+        isFirstSizing.current = false;
+      } else {
+        api.debouncedUpdateDimensions();
+      }
+    });
+    containerCleanup.current = () => {
+      unsubscribe?.();
+      refs.container.current = null;
+    };
+    if (reactMajor >= 19) {
+      /* eslint-disable-next-line consistent-return */
+      return containerCleanup.current;
+    }
+  });
+  const scrollerCleanup = React.useRef(undefined);
+  const scrollerRef = useEventCallback(node => {
+    if (!node) {
+      // Cleanup for R18
+      scrollerCleanup.current?.();
+      return;
+    }
+    scrollerCleanup.current?.();
+    refs.scroller.current = node;
+    const opts = {
+      passive: true
+    };
+    node.addEventListener('scroll', handleScroll, opts);
+    node.addEventListener('wheel', onWheel, opts);
+    node.addEventListener('touchmove', onTouchMove, opts);
+    scrollerCleanup.current = () => {
+      node.removeEventListener('scroll', handleScroll, opts);
+      node.removeEventListener('wheel', onWheel, opts);
+      node.removeEventListener('touchmove', onTouchMove, opts);
+      refs.scroller.current = null;
+    };
+    if (reactMajor >= 19) {
+      /* eslint-disable-next-line consistent-return */
+      return scrollerCleanup.current;
+    }
+  });
+  const scrollbarVerticalRef = useEventCallback(refSetter('scrollbarVertical'));
+  const scrollbarHorizontalRef = useEventCallback(refSetter('scrollbarHorizontal'));
   const getters = {
     setPanels,
     getOffsetTop,
     getRows,
+    rows: params.rows,
     getContainerProps: () => ({
-      ref: refSetter('container')
+      ref: containerRef
     }),
     getScrollerProps: () => ({
-      ref: refSetter('scroller'),
-      onScroll: handleScroll,
-      onWheel,
-      onTouchMove,
+      ref: scrollerRef,
       style: scrollerStyle,
       role: 'presentation',
       // `tabIndex` shouldn't be used along role=presentation, but it fixes a Firefox bug
@@ -463,28 +535,17 @@ function useVirtualization(store, params, api) {
       role: 'presentation'
     }),
     getScrollbarVerticalProps: () => ({
-      ref: refSetter('scrollbarVertical'),
+      ref: scrollbarVerticalRef,
       scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
-      ref: refSetter('scrollbarHorizontal'),
+      ref: scrollbarHorizontalRef,
       scrollPosition
     }),
     getScrollAreaProps: () => ({
       scrollPosition
     })
   };
-  useFirstRender(() => {
-    store.state = _extends({}, store.state, {
-      getters
-    });
-  });
-  React.useEffect(() => {
-    store.update({
-      getters
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, Object.values(getters));
 
   /* Placeholder API functions for colspan & rowspan to re-implement */
 
@@ -502,6 +563,7 @@ function useVirtualization(store, params, api) {
     useVirtualization: () => useStore(store, state => state),
     setPanels,
     forceUpdateRenderContext,
+    scheduleUpdateRenderContext,
     getCellColSpanInfo,
     calculateColSpan,
     getHiddenCellsOrigin
@@ -577,7 +639,6 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
   //     lastColumnIndex: 1,
   //   };
   // }
-
   if (inputs.enabledForColumns) {
     let firstColumnIndex = 0;
     let lastColumnIndex = inputs.columnPositions.length;

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-virtualizer v0.2.8
+ * @mui/x-virtualizer v0.2.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/useVirtualizer.d.ts

@@ -99,8 +99,8 @@ export type VirtualizerParams = {
 export declare const useVirtualizer: (params: VirtualizerParams) => {
   store: Store<Dimensions.State & Virtualization.State & Colspan.State & Rowspan.State>;
   api: {
-    updateDimensions: () => void;
-    debouncedUpdateDimensions: ((() => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
+    updateDimensions: (firstUpdate?: boolean) => void;
+    debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
     rowsMeta: {
       getRowHeight: (rowId: import("./models/index.js").RowId) => any;
       setLastMeasuredRowIndex: (index: number) => void;
@@ -121,14 +121,12 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
         position?: import("./models/index.js").PinnedRowPosition;
         renderContext?: RenderContext;
       }, unstable_rowTree?: Record<import("./models/index.js").RowId, any>) => React.ReactNode[];
+      rows: RowEntry[];
       getContainerProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
       };
       getScrollerProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        onScroll: () => void;
-        onWheel: ((event: React.WheelEvent) => void) | undefined;
-        onTouchMove: ((event: React.TouchEvent) => void) | undefined;
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
         style: React.CSSProperties;
         role: string;
         tabIndex: number | undefined;
@@ -162,6 +160,7 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
     useVirtualization: () => BaseState;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
     forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
     getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo;
     calculateColSpan: (rowId: import("./models/index.js").RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
     getHiddenCellsOrigin: () => Record<import("./models/index.js").RowId, Record<number, number>>;

package/features/dimensions.d.ts

@@ -34,8 +34,8 @@ export declare namespace Dimensions {
 }
 declare function initializeState(params: VirtualizerParams): Dimensions.State;
 declare function useDimensions(store: Store<BaseState>, params: VirtualizerParams, _api: {}): {
-  updateDimensions: () => void;
-  debouncedUpdateDimensions: ((() => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
+  updateDimensions: (firstUpdate?: boolean) => void;
+  debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
   rowsMeta: {
     getRowHeight: (rowId: RowId) => any;
     setLastMeasuredRowIndex: (index: number) => void;
@@ -48,4 +48,5 @@ declare function useDimensions(store: Store<BaseState>, params: VirtualizerParam
     resetRowHeights: () => void;
   };
 };
+export declare function observeRootNode(node: Element | null, store: Store<BaseState>, setRootSize: (size: Size) => void): (() => void) | undefined;
 export {};

package/features/dimensions.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Dimensions = void 0;
+exports.observeRootNode = observeRootNode;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
@@ -99,11 +100,14 @@ function useDimensions(store, params, _api) {
     },
     onResize
   } = params;
-  const containerNode = refs.container.current;
-  const updateDimensions = React.useCallback(() => {
+  const updateDimensions = React.useCallback(firstUpdate => {
+    if (firstUpdate) {
+      isFirstSizing.current = false;
+    }
     if (isFirstSizing.current) {
       return;
     }
+    const containerNode = refs.container.current;
     const rootSize = selectors.rootSize(store.state);
     const rowsMeta = selectors.rowsMeta(store.state);
 
@@ -198,24 +202,13 @@ function useDimensions(store, params, _api) {
       dimensions: newDimensions
     });
     onResize?.(newDimensions.root);
-  }, [store, containerNode, params.dimensions.scrollbarSize, params.autoHeight, params.disableHorizontalScroll, params.disableVerticalScroll, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
+  }, [store, refs.container, params.dimensions.scrollbarSize, params.autoHeight, params.disableHorizontalScroll, params.disableVerticalScroll, onResize, rowHeight, columnsTotalWidth, leftPinnedWidth, rightPinnedWidth, topPinnedHeight, bottomPinnedHeight]);
   const {
     resizeThrottleMs
   } = params;
   const updateDimensionCallback = (0, _useEventCallback.default)(updateDimensions);
   const debouncedUpdateDimensions = React.useMemo(() => resizeThrottleMs > 0 ? (0, _throttle.throttle)(updateDimensionCallback, resizeThrottleMs) : undefined, [resizeThrottleMs, updateDimensionCallback]);
   React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
-  const setRootSize = (0, _useEventCallback.default)(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;
-      updateDimensions();
-    } else {
-      debouncedUpdateDimensions();
-    }
-  });
-  (0, _useEnhancedEffect.default)(() => observeRootNode(containerNode, store, setRootSize), [containerNode, store, setRootSize]);
   (0, _useEnhancedEffect.default)(updateDimensions, [updateDimensions]);
   const rowsMeta = useRowsMeta(store, params, updateDimensions);
   return {

package/features/virtualization.d.ts

@@ -31,6 +31,7 @@ export declare const Virtualization: {
   initialize: typeof initializeState;
   use: typeof useVirtualization;
   selectors: {
+    store: (state: BaseState) => VirtualizationState;
     renderContext: (state: BaseState) => RenderContext;
     enabledForRows: (state: BaseState) => boolean;
     enabledForColumns: (state: BaseState) => boolean;
@@ -60,14 +61,12 @@ declare function useVirtualization(store: Store<BaseState>, params: VirtualizerP
       position?: PinnedRowPosition;
       renderContext?: RenderContext;
     }, unstable_rowTree?: Record<RowId, any>) => React.ReactNode[];
+    rows: RowEntry[];
     getContainerProps: () => {
-      ref: (node: HTMLDivElement | null) => void;
+      ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
     };
     getScrollerProps: () => {
-      ref: (node: HTMLDivElement | null) => void;
-      onScroll: () => void;
-      onWheel: ((event: React.WheelEvent) => void) | undefined;
-      onTouchMove: ((event: React.TouchEvent) => void) | undefined;
+      ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
       style: React.CSSProperties;
       role: string;
       tabIndex: number | undefined;
@@ -101,6 +100,7 @@ declare function useVirtualization(store: Store<BaseState>, params: VirtualizerP
   useVirtualization: () => BaseState;
   setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
   forceUpdateRenderContext: () => void;
+  scheduleUpdateRenderContext: () => void;
   getCellColSpanInfo: (rowId: RowId, columnIndex: integer) => CellColSpanInfo;
   calculateColSpan: (rowId: RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
   getHiddenCellsOrigin: () => Record<RowId, Record<number, number>>;

package/features/virtualization.js

@@ -19,8 +19,8 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var platform = _interopRequireWildcard(require("@mui/x-internals/platform"));
 var _useRunOnce = require("@mui/x-internals/useRunOnce");
-var _useFirstRender = require("@mui/x-internals/useFirstRender");
 var _store = require("@mui/x-internals/store");
+var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
 var _core = require("../models/core");
 var _dimensions = require("./dimensions");
 var _models = require("../models");
@@ -40,6 +40,7 @@ const EMPTY_RENDER_CONTEXT = exports.EMPTY_RENDER_CONTEXT = {
   lastColumnIndex: 0
 };
 const selectors = {
+  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)
@@ -97,7 +98,7 @@ function useVirtualization(store, params, api) {
   const needsHorizontalScrollbar = (0, _store.useStore)(store, _dimensions.Dimensions.selectors.needsHorizontalScrollbar);
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
-  const [, setRefTick] = React.useState(0);
+  const isUpdateScheduled = React.useRef(false);
   const isRenderContextReady = React.useRef(false);
   const renderContext = (0, _store.useStore)(store, selectors.renderContext);
   const enabledForRows = (0, _store.useStore)(store, selectors.enabledForRows);
@@ -157,7 +158,7 @@ function useVirtualization(store, params, api) {
     // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
       top: clamp(scroller.scrollTop, 0, maxScrollTop),
-      left: isRtl ? clamp(scroller.scrollLeft, -maxScrollLeft, 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
+      left: isRtl ? clamp(scroller.scrollLeft, -Math.abs(maxScrollLeft), 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -204,7 +205,7 @@ function useVirtualization(store, params, api) {
     }
     return nextRenderContext;
   });
-  const forceUpdateRenderContext = (0, _useEventCallback.default)(() => {
+  const forceUpdateRenderContext = () => {
     // skip update if dimensions are not ready and virtualization is enabled
     if (!_dimensions.Dimensions.selectors.dimensions(store.state).isReady && (enabledForRows || enabledForColumns)) {
       return;
@@ -214,7 +215,22 @@ function useVirtualization(store, params, api) {
     // Reset the frozen context when the render context changes, see the illustration in https://github.com/mui/mui-x/pull/12353
     frozenContext.current = undefined;
     updateRenderContext(nextRenderContext);
+  };
+  const forceUpdateRenderContextCallback = (0, _useEventCallback.default)(forceUpdateRenderContext);
+  (0, _store.useStoreEffect)(store, _dimensions.Dimensions.selectors.dimensions, (previous, next) => {
+    if (next.isReady) {
+      forceUpdateRenderContext();
+    }
   });
+  (0, _useEnhancedEffect.default)(() => {
+    if (isUpdateScheduled.current) {
+      forceUpdateRenderContext();
+      isUpdateScheduled.current = false;
+    }
+  });
+  const scheduleUpdateRenderContext = () => {
+    isUpdateScheduled.current = true;
+  };
   const handleScroll = (0, _useEventCallback.default)(() => {
     if (ignoreNextScrollEvent.current) {
       ignoreNextScrollEvent.current = false;
@@ -388,8 +404,8 @@ function useVirtualization(store, params, api) {
     if (!isRenderContextReady.current) {
       return;
     }
-    forceUpdateRenderContext();
-  }, [enabledForColumns, enabledForRows, forceUpdateRenderContext]);
+    forceUpdateRenderContextCallback();
+  }, [enabledForColumns, enabledForRows, forceUpdateRenderContextCallback]);
   (0, _useEnhancedEffect.default)(() => {
     if (refs.scroller.current) {
       refs.scroller.current.scrollLeft = 0;
@@ -445,21 +461,77 @@ function useVirtualization(store, params, api) {
   const refSetter = name => node => {
     if (node && refs[name].current !== node) {
       refs[name].current = node;
-      setRefTick(tick => tick + 1);
     }
   };
+  const isFirstSizing = React.useRef(true);
+  const containerCleanup = React.useRef(undefined);
+  const containerRef = (0, _useEventCallback.default)(node => {
+    if (!node) {
+      // Cleanup for R18
+      containerCleanup.current?.();
+      return;
+    }
+    refs.container.current = node;
+    const unsubscribe = (0, _dimensions.observeRootNode)(node, store, rootSize => {
+      if (rootSize.width === 0 && rootSize.height === 0 && store.state.rootSize.height !== 0 && store.state.rootSize.width !== 0) {
+        return;
+      }
+      store.state.rootSize = rootSize;
+      if (isFirstSizing.current || !api.debouncedUpdateDimensions) {
+        // We want to initialize the grid dimensions as soon as possible to avoid flickering
+        api.updateDimensions(isFirstSizing.current);
+        isFirstSizing.current = false;
+      } else {
+        api.debouncedUpdateDimensions();
+      }
+    });
+    containerCleanup.current = () => {
+      unsubscribe?.();
+      refs.container.current = null;
+    };
+    if (_reactMajor.default >= 19) {
+      /* eslint-disable-next-line consistent-return */
+      return containerCleanup.current;
+    }
+  });
+  const scrollerCleanup = React.useRef(undefined);
+  const scrollerRef = (0, _useEventCallback.default)(node => {
+    if (!node) {
+      // Cleanup for R18
+      scrollerCleanup.current?.();
+      return;
+    }
+    scrollerCleanup.current?.();
+    refs.scroller.current = node;
+    const opts = {
+      passive: true
+    };
+    node.addEventListener('scroll', handleScroll, opts);
+    node.addEventListener('wheel', onWheel, opts);
+    node.addEventListener('touchmove', onTouchMove, opts);
+    scrollerCleanup.current = () => {
+      node.removeEventListener('scroll', handleScroll, opts);
+      node.removeEventListener('wheel', onWheel, opts);
+      node.removeEventListener('touchmove', onTouchMove, opts);
+      refs.scroller.current = null;
+    };
+    if (_reactMajor.default >= 19) {
+      /* eslint-disable-next-line consistent-return */
+      return scrollerCleanup.current;
+    }
+  });
+  const scrollbarVerticalRef = (0, _useEventCallback.default)(refSetter('scrollbarVertical'));
+  const scrollbarHorizontalRef = (0, _useEventCallback.default)(refSetter('scrollbarHorizontal'));
   const getters = {
     setPanels,
     getOffsetTop,
     getRows,
+    rows: params.rows,
     getContainerProps: () => ({
-      ref: refSetter('container')
+      ref: containerRef
     }),
     getScrollerProps: () => ({
-      ref: refSetter('scroller'),
-      onScroll: handleScroll,
-      onWheel,
-      onTouchMove,
+      ref: scrollerRef,
       style: scrollerStyle,
       role: 'presentation',
       // `tabIndex` shouldn't be used along role=presentation, but it fixes a Firefox bug
@@ -472,28 +544,17 @@ function useVirtualization(store, params, api) {
       role: 'presentation'
     }),
     getScrollbarVerticalProps: () => ({
-      ref: refSetter('scrollbarVertical'),
+      ref: scrollbarVerticalRef,
       scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
-      ref: refSetter('scrollbarHorizontal'),
+      ref: scrollbarHorizontalRef,
       scrollPosition
     }),
     getScrollAreaProps: () => ({
       scrollPosition
     })
   };
-  (0, _useFirstRender.useFirstRender)(() => {
-    store.state = (0, _extends2.default)({}, store.state, {
-      getters
-    });
-  });
-  React.useEffect(() => {
-    store.update({
-      getters
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, Object.values(getters));
 
   /* Placeholder API functions for colspan & rowspan to re-implement */
 
@@ -511,6 +572,7 @@ function useVirtualization(store, params, api) {
     useVirtualization: () => (0, _store.useStore)(store, state => state),
     setPanels,
     forceUpdateRenderContext,
+    scheduleUpdateRenderContext,
     getCellColSpanInfo,
     calculateColSpan,
     getHiddenCellsOrigin
@@ -586,7 +648,6 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
   //     lastColumnIndex: 1,
   //   };
   // }
-
   if (inputs.enabledForColumns) {
     let firstColumnIndex = 0;
     let lastColumnIndex = inputs.columnPositions.length;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-virtualizer v0.2.8
+ * @mui/x-virtualizer v0.2.10
  *
  * @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": "0.2.8",
+  "version": "0.2.10",
   "author": "MUI Team",
   "description": "MUI virtualization library",
   "license": "MIT",
@@ -29,7 +29,7 @@
   "dependencies": {
     "@babel/runtime": "^7.28.4",
     "@mui/utils": "^7.3.5",
-    "@mui/x-internals": "8.18.0"
+    "@mui/x-internals": "8.19.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",

package/useVirtualizer.d.ts

@@ -99,8 +99,8 @@ export type VirtualizerParams = {
 export declare const useVirtualizer: (params: VirtualizerParams) => {
   store: Store<Dimensions.State & Virtualization.State & Colspan.State & Rowspan.State>;
   api: {
-    updateDimensions: () => void;
-    debouncedUpdateDimensions: ((() => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
+    updateDimensions: (firstUpdate?: boolean) => void;
+    debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
     rowsMeta: {
       getRowHeight: (rowId: import("./models/index.js").RowId) => any;
       setLastMeasuredRowIndex: (index: number) => void;
@@ -121,14 +121,12 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
         position?: import("./models/index.js").PinnedRowPosition;
         renderContext?: RenderContext;
       }, unstable_rowTree?: Record<import("./models/index.js").RowId, any>) => React.ReactNode[];
+      rows: RowEntry[];
       getContainerProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
       };
       getScrollerProps: () => {
-        ref: (node: HTMLDivElement | null) => void;
-        onScroll: () => void;
-        onWheel: ((event: React.WheelEvent) => void) | undefined;
-        onTouchMove: ((event: React.TouchEvent) => void) | undefined;
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
         style: React.CSSProperties;
         role: string;
         tabIndex: number | undefined;
@@ -162,6 +160,7 @@ export declare const useVirtualizer: (params: VirtualizerParams) => {
     useVirtualization: () => BaseState;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
     forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
     getCellColSpanInfo: (rowId: import("./models/index.js").RowId, columnIndex: integer) => import("./models/index.js").CellColSpanInfo;
     calculateColSpan: (rowId: import("./models/index.js").RowId, minFirstColumn: integer, maxLastColumn: integer, columns: ColumnWithWidth[]) => void;
     getHiddenCellsOrigin: () => Record<import("./models/index.js").RowId, Record<number, number>>;