@mui/x-data-grid 8.0.0-alpha.9 → 8.0.0-beta.0

package/modern/hooks/features/sorting/useGridSorting.js

@@ -88,7 +88,7 @@ export const useGridSorting = (apiRef, props) => {
           })
         });
       }
-      const sortModel = gridSortModelSelector(state, undefined, apiRef.current.instanceId);
+      const sortModel = gridSortModelSelector(apiRef);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList
@@ -100,14 +100,12 @@ export const useGridSorting = (apiRef, props) => {
       });
     });
     apiRef.current.publishEvent('sortedRowsSet');
-    apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);
   const setSortModel = React.useCallback(model => {
     const currentModel = gridSortModelSelector(apiRef);
     if (currentModel !== model) {
       logger.debug(`Setting sort model`);
       apiRef.current.setState(mergeStateWithSortModel(model, props.disableMultipleColumnsSorting));
-      apiRef.current.forceUpdate();
       apiRef.current.applySorting();
     }
   }, [apiRef, logger, props.disableMultipleColumnsSorting]);

package/modern/hooks/features/statePersistence/gridStatePersistenceInterface.d.ts

@@ -0,0 +1,40 @@
+import { GridInitialStateCommunity } from "../../../models/gridStateCommunity.js";
+export interface GridStatePersistenceApi<InitialState extends GridInitialStateCommunity> {
+  /**
+   * Generates a serializable object containing the exportable parts of the DataGrid state.
+   * These values can then be passed to the `initialState` prop or injected using the `restoreState` method.
+   * @param {GridExportStateParams} params With all properties from [[GridExportStateParams]]
+   * @returns {GridInitialState} The exported state.
+   */
+  exportState: (params?: GridExportStateParams) => InitialState;
+  /**
+   * Inject the given values into the state of the DataGrid.
+   * @param {GridInitialState} stateToRestore The exported state to restore.
+   */
+  restoreState: (stateToRestore: InitialState) => void;
+}
+export interface GridRestoreStatePreProcessingValue {
+  /**
+   * Functions to run after the state has been updated but before re-rendering.
+   * This is usually used to apply derived states like `applyFilters` or `applySorting`
+   */
+  callbacks: (() => void)[];
+}
+/**
+ * Object passed as parameter in the `exportState()` grid API method.
+ * @demos
+ *   - [Restore state with `apiRef`](/x/react-data-grid/state/#restore-the-state-with-apiref)
+ */
+export interface GridExportStateParams {
+  /**
+   * By default, the grid exports all the models.
+   * You can switch this property to `true` to only exports models that are either controlled, initialized or modified.
+   * For instance, with this property, if you don't control or initialize the `filterModel` and you did not apply any filter, the model won't be exported.
+   * Note that the column dimensions are not a model. The grid only exports the dimensions of the modified columns even when `exportOnlyDirtyModels` is false.
+   * @default false
+   */
+  exportOnlyDirtyModels?: boolean;
+}
+export interface GridRestoreStatePreProcessingContext<I extends GridInitialStateCommunity> {
+  stateToRestore: I;
+}

package/modern/hooks/features/statePersistence/index.d.ts

@@ -0,0 +1 @@
+export type { GridStatePersistenceApi, GridExportStateParams } from './gridStatePersistenceInterface';

package/modern/hooks/features/statePersistence/useGridStatePersistence.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+export declare const useGridStatePersistence: (apiRef: RefObject<GridPrivateApiCommunity>) => void;

package/modern/hooks/features/statePersistence/useGridStatePersistence.js

@@ -14,7 +14,6 @@ export const useGridStatePersistence = apiRef => {
     response.callbacks.forEach(callback => {
       callback();
     });
-    apiRef.current.forceUpdate();
   }, [apiRef]);
   const statePersistenceApi = {
     exportState,

package/modern/hooks/features/virtualization/gridFocusedVirtualCellSelector.d.ts

@@ -0,0 +1,6 @@
+export declare const gridFocusedVirtualCellSelector: import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("../../..").GridCellCoordinates | null, {
+  rowIndex: number;
+  columnIndex: number;
+  id?: import("../../..").GridRowId | undefined;
+  field?: string | undefined;
+} | null>;

package/modern/hooks/features/virtualization/gridFocusedVirtualCellSelector.js

@@ -1,33 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { createSelector } from 'reselect';
-import { createSelectorMemoized } from "../../../utils/createSelector.js";
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { gridRenderContextSelector } from "./gridVirtualizationSelectors.js";
 import { gridFocusCellSelector } from "../focus/index.js";
 import { gridVisibleRowsSelector } from "../pagination/index.js";
-import { gridRowsLookupSelector } from "../rows/index.js";
-const gridIsFocusedCellOutOfContex = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, gridRowsLookupSelector, (focusedCell, renderContext, currentPage, visibleColumns, rows) => {
+const gridIsFocusedCellOutOfContext = createSelector(gridFocusCellSelector, gridRenderContextSelector, gridVisibleRowsSelector, gridVisibleColumnDefinitionsSelector, (focusedCell, renderContext, currentPage, visibleColumns) => {
   if (!focusedCell) {
     return false;
   }
-  const row = rows[focusedCell.id];
-  if (!row) {
-    return false;
-  }
-  const rowIndex = currentPage.rowToIndexMap.get(row);
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
   const columnIndex = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex).findIndex(column => column.field === focusedCell.field);
   const isInRenderContext = rowIndex !== undefined && columnIndex !== -1 && rowIndex >= renderContext.firstRowIndex && rowIndex <= renderContext.lastRowIndex;
   return !isInRenderContext;
 });
-export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContex, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridRowsLookupSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, rows, focusedCell) => {
+export const gridFocusedVirtualCellSelector = createSelectorMemoized(gridIsFocusedCellOutOfContext, gridVisibleColumnDefinitionsSelector, gridVisibleRowsSelector, gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, focusedCell) => {
   if (!isFocusedCellOutOfRenderContext) {
     return null;
   }
-  const row = rows[focusedCell.id];
-  if (!row) {
-    return null;
-  }
-  const rowIndex = currentPage.rowToIndexMap.get(row);
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
   if (rowIndex === undefined) {
     return null;
   }

package/modern/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -0,0 +1,36 @@
+import type { GridColumnsRenderContext } from '../../../models/params/gridScrollParams';
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+/**
+ * Get the columns state
+ * @category Virtualization
+ */
+export declare const gridVirtualizationSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./useGridVirtualization").GridVirtualizationState>;
+/**
+ * Get the enabled state for virtualization
+ * @category Virtualization
+ * @deprecated Use `gridVirtualizationColumnEnabledSelector` and `gridVirtualizationRowEnabledSelector`
+ */
+export declare const gridVirtualizationEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+/**
+ * Get the enabled state for column virtualization
+ * @category Virtualization
+ */
+export declare const gridVirtualizationColumnEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+/**
+ * Get the enabled state for row virtualization
+ * @category Virtualization
+ */
+export declare const gridVirtualizationRowEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+/**
+ * Get the render context
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export declare const gridRenderContextSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, import("../../..").GridRenderContext>;
+/**
+ * Get the render context, with only columns filled in.
+ * This is cached, so it can be used to only re-render when the column interval changes.
+ * @category Virtualization
+ * @ignore - do not document.
+ */
+export declare const gridRenderContextColumnsSelector: import("../../..").OutputSelector<GridStateCommunity, number, GridColumnsRenderContext>;

package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -1,9 +1,9 @@
-import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { createRootSelector, createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 /**
  * Get the columns state
  * @category Virtualization
  */
-export const gridVirtualizationSelector = state => state.virtualization;
+export const gridVirtualizationSelector = createRootSelector(state => state.virtualization);
 
 /**
  * Get the enabled state for virtualization
@@ -37,7 +37,7 @@ export const gridRenderContextSelector = createSelector(gridVirtualizationSelect
  * @category Virtualization
  * @ignore - do not document.
  */
-export const gridRenderContextColumnsSelector = createSelectorMemoized(state => state.virtualization.renderContext.firstColumnIndex, state => state.virtualization.renderContext.lastColumnIndex, (firstColumnIndex, lastColumnIndex) => ({
+export const gridRenderContextColumnsSelector = createSelectorMemoized(apiRef => apiRef.current.state.virtualization.renderContext.firstColumnIndex, apiRef => apiRef.current.state.virtualization.renderContext.lastColumnIndex, (firstColumnIndex, lastColumnIndex) => ({
   firstColumnIndex,
   lastColumnIndex
 }));

package/modern/hooks/features/virtualization/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useGridVirtualization.js";
+export * from "./gridVirtualizationSelectors.js";

package/modern/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { GridPinnedRowsPosition } from "../rows/gridRowsInterfaces.js";
+import { type GridRenderContext, type GridColumnsRenderContext, type GridRowEntry, type GridRowId } from "../../../models/index.js";
+export type VirtualScroller = ReturnType<typeof useGridVirtualScroller>;
+export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
+export declare const useGridVirtualScroller: () => {
+  renderContext: GridRenderContext;
+  setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<GridRowId, React.ReactNode>>>>;
+  getRows: (params?: {
+    rows?: GridRowEntry[];
+    position?: GridPinnedRowsPosition;
+    renderContext?: GridRenderContext;
+  }) => React.ReactNode[];
+  getContainerProps: () => {
+    ref: (node: HTMLDivElement | null) => (() => void) | undefined;
+  };
+  getScrollerProps: () => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    onScroll: () => void;
+    onWheel: (event: React.WheelEvent) => void;
+    onTouchMove: (event: React.TouchEvent) => void;
+    style: React.CSSProperties;
+    role: string;
+    tabIndex: number | undefined;
+  };
+  getContentProps: () => {
+    style: React.CSSProperties;
+    role: string;
+    ref: (node: HTMLDivElement | null) => void;
+  };
+  getRenderZoneProps: () => {
+    role: string;
+  };
+  getScrollbarVerticalProps: () => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    scrollPosition: React.RefObject<{
+      top: number;
+      left: number;
+    }>;
+  };
+  getScrollbarHorizontalProps: () => {
+    ref: React.RefObject<HTMLDivElement | null>;
+    scrollPosition: React.RefObject<{
+      top: number;
+      left: number;
+    }>;
+  };
+  getScrollAreaProps: () => {
+    scrollPosition: React.RefObject<{
+      top: number;
+      left: number;
+    }>;
+  };
+};
+export declare function areRenderContextsEqual(context1: GridRenderContext, context2: GridRenderContext): boolean;
+export declare function computeOffsetLeft(columnPositions: number[], renderContext: GridColumnsRenderContext, pinnedLeftLength: number): number;

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -1,23 +1,23 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useEventCallback from '@mui/utils/useEventCallback';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
 import { useRtl } from '@mui/system/RtlProvider';
 import reactMajor from '@mui/x-internals/reactMajor';
+import { gridDimensionsSelector, gridColumnsTotalWidthSelector, gridContentHeightSelector, gridHasFillerSelector, gridRowHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
 import { useRunOnce } from "../../utils/useRunOnce.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../columns/gridColumnsSelector.js";
-import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
 import { useGridVisibleRows, getVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { useGridApiEventHandler } from "../../utils/index.js";
+import { useGridApiOptionHandler } from "../../utils/index.js";
 import * as platform from "../../../utils/platform.js";
 import { clamp, range } from "../../../utils/utils.js";
-import { selectedIdsLookupSelector } from "../rowSelection/gridRowSelectionSelector.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { getFirstNonSpannedColumnToRender } from "../columns/gridColumnsUtils.js";
 import { gridRenderContextSelector, gridVirtualizationRowEnabledSelector, gridVirtualizationColumnEnabledSelector } from "./gridVirtualizationSelectors.js";
@@ -25,8 +25,11 @@ import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
 import { minimalContentHeight } from "../rows/gridRowsUtils.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "../columns/index.js";
 import { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
+import { roundToDecimalPlaces } from "../../../utils/roundToDecimalPlaces.js";
 import { isJSDOM } from "../../../utils/isJSDOM.js";
+import { gridRowSelectionManagerSelector } from "../rowSelection/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -52,31 +55,29 @@ export const useGridVirtualScroller = () => {
   const {
     unstable_listView: listView
   } = rootProps;
-  const visibleColumns = useGridSelector(apiRef, () => listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef));
+  const visibleColumns = useGridSelector(apiRef, () => listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef));
   const enabledForRows = useGridSelector(apiRef, gridVirtualizationRowEnabledSelector) && !isJSDOM;
   const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
-  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
-  const pinnedColumnDefinitions = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedColumns = listView ? {
-    left: [],
-    right: []
-  } : pinnedColumnDefinitions;
+  const pinnedColumnDefinitions = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+  const pinnedColumns = listView ? EMPTY_PINNED_COLUMN_FIELDS : pinnedColumnDefinitions;
   const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
   const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const isRtl = useRtl();
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
+  const rowSelectionManager = useGridSelector(apiRef, gridRowSelectionManagerSelector);
+  const currentPage = useGridVisibleRows(apiRef);
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;
   const scrollbarHorizontalRef = apiRef.current.virtualScrollbarHorizontalRef;
-  const contentHeight = dimensions.contentSize.height;
-  const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
   const isRenderContextReady = React.useRef(false);
+  const rowHeight = useGridSelector(apiRef, gridRowHeightSelector);
+  const contentHeight = useGridSelector(apiRef, gridContentHeightSelector);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const needsHorizontalScrollbar = useGridSelector(apiRef, needsHorizontalScrollbarSelector);
+  const verticalScrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
+  const gridHasFiller = useGridSelector(apiRef, gridHasFillerSelector);
   const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
@@ -84,7 +85,10 @@ export const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = roundDimensions(initialRect);
+    let lastSize = {
+      width: roundToDecimalPlaces(initialRect.width, 1),
+      height: roundToDecimalPlaces(initialRect.height, 1)
+    };
     if (!previousSize.current || lastSize.width !== previousSize.current.width && lastSize.height !== previousSize.current.height) {
       previousSize.current = lastSize;
       apiRef.current.publishEvent('resize', lastSize);
@@ -97,7 +101,10 @@ export const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = roundDimensions(entry.contentRect);
+      const newSize = {
+        width: roundToDecimalPlaces(entry.contentRect.width, 1),
+        height: roundToDecimalPlaces(entry.contentRect.height, 1)
+      };
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -137,7 +144,7 @@ export const useGridVirtualScroller = () => {
   const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   const scrollTimeout = useTimeout();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const updateRenderContext = React.useCallback(nextRenderContext => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
@@ -152,22 +159,28 @@ export const useGridVirtualScroller = () => {
     });
 
     // The lazy-loading hook is listening to `renderedRowsIntervalChange`,
-    // but only does something if the dimensions are also available.
-    // So we wait until we have valid dimensions before publishing the first event.
-    if (dimensions.isReady && didRowsIntervalChange) {
+    // but only does something if we already have a render context, because
+    // otherwise we would call an update directly on mount
+    const isReady = gridDimensionsSelector(apiRef).isReady;
+    if (isReady && didRowsIntervalChange) {
       previousRowContext.current = nextRenderContext;
       apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
     }
     previousContextScrollPosition.current = scrollPosition.current;
-  }, [apiRef, dimensions.isReady]);
+  }, [apiRef]);
   const triggerUpdateRenderContext = useEventCallback(() => {
     const scroller = scrollerRef.current;
     if (!scroller) {
       return undefined;
     }
+    const dimensions = gridDimensionsSelector(apiRef);
+    const maxScrollTop = Math.ceil(dimensions.minimumSize.height - dimensions.viewportOuterSize.height);
+    const maxScrollLeft = Math.ceil(dimensions.minimumSize.width - dimensions.viewportInnerSize.width);
+
+    // Clamp the scroll position to the viewport to avoid re-calculating the render context for scroll bounce
     const newScroll = {
-      top: scroller.scrollTop,
-      left: scroller.scrollLeft
+      top: clamp(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? clamp(scroller.scrollLeft, -maxScrollLeft, 0) : clamp(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -180,7 +193,7 @@ export const useGridVirtualScroller = () => {
     const columnScroll = Math.abs(scrollPosition.current.left - previousContextScrollPosition.current.left);
 
     // PERF: use the computed minimum column width instead of a static one
-    const didCrossThreshold = rowScroll >= dimensions.rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
+    const didCrossThreshold = rowScroll >= rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
     const didChangeDirection = scrollCache.direction !== direction;
     const shouldUpdate = didCrossThreshold || didChangeDirection;
     if (!shouldUpdate) {
@@ -202,7 +215,7 @@ export const useGridVirtualScroller = () => {
       }
     }
     scrollCache.direction = direction;
-    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    scrollCache.buffer = bufferForDirection(isRtl, direction, rootProps.rowBufferPx, rootProps.columnBufferPx, rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
@@ -214,40 +227,25 @@ export const useGridVirtualScroller = () => {
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {
+    // skip update if dimensions are not ready and virtualization is enabled
+    if (!gridDimensionsSelector(apiRef).isReady && (enabledForRows || enabledForColumns)) {
+      return;
+    }
     const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
     const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
     // 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 handleScroll = useEventCallback(event => {
+  const handleScroll = useEventCallback(() => {
     if (ignoreNextScrollEvent.current) {
       ignoreNextScrollEvent.current = false;
       return;
     }
-    const {
-      scrollTop,
-      scrollLeft
-    } = event.currentTarget;
-
-    // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollTop < 0) {
-      return;
-    }
-    if (!isRtl) {
-      if (scrollLeft < 0) {
-        return;
-      }
-    }
-    if (isRtl) {
-      if (scrollLeft > 0) {
-        return;
-      }
-    }
     const nextRenderContext = triggerUpdateRenderContext();
     apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollTop,
-      left: scrollLeft,
+      top: scrollPosition.current.top,
+      left: scrollPosition.current.left,
       renderContext: nextRenderContext
     });
   });
@@ -261,7 +259,12 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
-    const baseRenderContext = params.renderContext ?? renderContext;
+    let baseRenderContext = renderContext;
+    if (params.renderContext) {
+      baseRenderContext = params.renderContext;
+      baseRenderContext.firstColumnIndex = renderContext.firstColumnIndex;
+      baseRenderContext.lastColumnIndex = renderContext.lastColumnIndex;
+    }
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -331,12 +334,7 @@ export const useGridVirtualScroller = () => {
         }
       }
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
-      let isSelected;
-      if (selectedRowsLookup[id] == null) {
-        isSelected = false;
-      } else {
-        isSelected = apiRef.current.isRowSelectable(id);
-      }
+      const isSelected = rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
       let isFirstVisible = false;
       if (params.position === undefined) {
         isFirstVisible = rowIndexInPage === 0;
@@ -355,7 +353,7 @@ export const useGridVirtualScroller = () => {
         }
       }
       let currentRenderContext = baseRenderContext;
-      if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
+      if (frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
         currentRenderContext = frozenContext.current;
       }
       const isVirtualFocusRow = rowIndexInPage === virtualRowIndex;
@@ -369,9 +367,8 @@ export const useGridVirtualScroller = () => {
         rowId: id,
         index: rowIndex,
         selected: isSelected,
-        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
-        columnsTotalWidth: dimensions.columnsTotalWidth,
+        columnsTotalWidth: columnsTotalWidth,
         rowHeight: baseRowHeight,
         pinnedColumns: pinnedColumns,
         visibleColumns: visibleColumns,
@@ -382,8 +379,8 @@ export const useGridVirtualScroller = () => {
         isLastVisible: isLastVisible,
         isNotVisible: isVirtualFocusRow,
         showBottomBorder: showBottomBorder,
-        scrollbarWidth: dimensions.hasScrollY ? dimensions.scrollbarSize : 0,
-        gridHasFiller: dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width
+        scrollbarWidth: verticalScrollbarWidth,
+        gridHasFiller: gridHasFiller
       }, rowProps), id));
       if (isVirtualFocusRow) {
         return;
@@ -400,7 +397,6 @@ export const useGridVirtualScroller = () => {
     });
     return rows;
   };
-  const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth > outerSize.width;
   const scrollerStyle = React.useMemo(() => ({
     overflowX: !needsHorizontalScrollbar || listView ? 'hidden' : undefined,
     overflowY: rootProps.autoHeight ? 'hidden' : undefined
@@ -436,14 +432,11 @@ export const useGridVirtualScroller = () => {
       scrollerRef.current.scrollLeft = 0;
     }
   }, [listView, scrollerRef]);
-  useRunOnce(outerSize.width !== 0, () => {
-    const inputs = inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns);
-    const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
-    updateRenderContext(initialRenderContext);
+  useRunOnce(renderContext !== EMPTY_RENDER_CONTEXT, () => {
     apiRef.current.publishEvent('scrollPositionChange', {
       top: scrollPosition.current.top,
       left: scrollPosition.current.left,
-      renderContext: initialRenderContext
+      renderContext
     });
     isRenderContextReady.current = true;
     if (rootProps.initialState?.scroll && scrollerRef.current) {
@@ -496,9 +489,9 @@ export const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
-  useGridApiEventHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  useGridApiOptionHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -527,18 +520,25 @@ export const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      scrollPosition
+    }),
+    getScrollAreaProps: () => ({
+      scrollPosition
     })
   };
 };
+// dimension selectors
+function needsHorizontalScrollbarSelector(apiRef) {
+  return apiRef.current.state.dimensions.viewportOuterSize.width > 0 && apiRef.current.state.dimensions.columnsTotalWidth > apiRef.current.state.dimensions.viewportOuterSize.width;
+}
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
-  const dimensions = gridDimensionsSelector(apiRef.current.state);
+  const dimensions = gridDimensionsSelector(apiRef);
   const currentPage = getVisibleRows(apiRef, rootProps);
-  const visibleColumns = rootProps.unstable_listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
+  const visibleColumns = rootProps.unstable_listView ? [gridListColumnSelector(apiRef)] : gridVisibleColumnDefinitionsSelector(apiRef);
   const hiddenCellsOriginMap = gridRowSpanningHiddenCellsOriginMapSelector(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);
@@ -555,7 +555,7 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     viewportInnerHeight: dimensions.viewportInnerSize.height,
     lastRowHeight: lastRowId !== undefined ? apiRef.current.unstable_getRowHeight(lastRowId) : 0,
     lastColumnWidth: lastColumn?.computedWidth ?? 0,
-    rowsMeta: gridRowsMetaSelector(apiRef.current.state),
+    rowsMeta: gridRowsMetaSelector(apiRef),
     columnPositions: gridColumnPositionsSelector(apiRef),
     rows: currentPage.rows,
     range: currentPage.range,
@@ -573,6 +573,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return _extends({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -824,13 +829,4 @@ function bufferForDirection(isRtl, direction, rowBufferPx, columnBufferPx, verti
       // eslint unable to figure out enum exhaustiveness
       throw new Error('unreachable');
   }
-}
-
-// Round to avoid issues with subpixel rendering
-// https://github.com/mui/mui-x/issues/15721
-function roundDimensions(dimensions) {
-  return {
-    width: Math.round(dimensions.width * 10) / 10,
-    height: Math.round(dimensions.height * 10) / 10
-  };
 }

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

@@ -0,0 +1,21 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridRenderContext } from "../../../models/index.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+type RootProps = Pick<DataGridProcessedProps, 'disableVirtualization' | 'autoHeight'>;
+export type GridVirtualizationState = {
+  enabled: boolean;
+  enabledForColumns: boolean;
+  enabledForRows: boolean;
+  renderContext: GridRenderContext;
+};
+export declare const EMPTY_RENDER_CONTEXT: {
+  firstRowIndex: number;
+  lastRowIndex: number;
+  firstColumnIndex: number;
+  lastColumnIndex: number;
+};
+export declare const virtualizationStateInitializer: GridStateInitializer<RootProps>;
+export declare function useGridVirtualization(apiRef: RefObject<GridPrivateApiCommunity>, props: RootProps): void;
+export {};

package/modern/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./features/index.js";
+export * from "./utils/index.js";
+export * from "./core/index.js";