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

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -1,33 +1,47 @@
-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 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 { 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 * 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";
-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 { gridFocusedVirtualCellSelector } from "./gridFocusedVirtualCellSelector.js";
-import { isJSDOM } from "../../../utils/isJSDOM.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EMPTY_DETAIL_PANELS = void 0;
+exports.areRenderContextsEqual = areRenderContextsEqual;
+exports.computeOffsetLeft = computeOffsetLeft;
+exports.useGridVirtualScroller = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _reactMajor = _interopRequireDefault(require("@mui/x-internals/reactMajor"));
+var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
+var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
+var _useGridRootProps = require("../../utils/useGridRootProps");
+var _useGridSelector = require("../../utils/useGridSelector");
+var _useRunOnce = require("../../utils/useRunOnce");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
+var _utils = require("../../utils");
+var platform = _interopRequireWildcard(require("../../../utils/platform"));
+var _utils2 = require("../../../utils/utils");
+var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
+var _gridColumnsUtils = require("../columns/gridColumnsUtils");
+var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
+var _useGridVirtualization = require("./useGridVirtualization");
+var _gridRowSpanningSelectors = require("../rows/gridRowSpanningSelectors");
+var _gridListViewSelectors = require("../listView/gridListViewSelectors");
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+var _columns = require("../columns");
+var _gridFocusedVirtualCellSelector = require("./gridFocusedVirtualCellSelector");
+var _roundToDecimalPlaces = require("../../../utils/roundToDecimalPlaces");
+var _isJSDOM = require("../../../utils/isJSDOM");
+var _rowSelection = require("../rowSelection");
+var _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
   ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
@@ -41,42 +55,40 @@ const EMPTY_SCROLL_POSITION = {
   top: 0,
   left: 0
 };
-export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
+const EMPTY_DETAIL_PANELS = exports.EMPTY_DETAIL_PANELS = Object.freeze(new Map());
 const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-export const useGridVirtualScroller = () => {
-  const apiRef = useGridPrivateApiContext();
-  const rootProps = useGridRootProps();
+const useGridVirtualScroller = () => {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     unstable_listView: listView
   } = rootProps;
-  const visibleColumns = useGridSelector(apiRef, () => listView ? [gridListColumnSelector(apiRef.current.state)] : 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 visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, () => listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef));
+  const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !_isJSDOM.isJSDOM;
+  const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !_isJSDOM.isJSDOM;
+  const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
+  const pinnedColumnDefinitions = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
+  const pinnedColumns = listView ? _columns.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 isRtl = (0, _RtlProvider.useRtl)();
+  const rowSelectionManager = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.gridRowSelectionManagerSelector);
+  const currentPage = (0, _useGridVisibleRows.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 hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
   const isRenderContextReady = React.useRef(false);
+  const rowHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridRowHeightSelector);
+  const contentHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridContentHeightSelector);
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
+  const needsHorizontalScrollbar = (0, _useGridSelector.useGridSelector)(apiRef, needsHorizontalScrollbarSelector);
+  const verticalScrollbarWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
+  const gridHasFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
   const previousSize = React.useRef(null);
   const mainRefCallback = React.useCallback(node => {
     mainRef.current = node;
@@ -84,7 +96,10 @@ export const useGridVirtualScroller = () => {
       return undefined;
     }
     const initialRect = node.getBoundingClientRect();
-    let lastSize = roundDimensions(initialRect);
+    let lastSize = {
+      width: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(initialRect.width, 1),
+      height: (0, _roundToDecimalPlaces.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 +112,10 @@ export const useGridVirtualScroller = () => {
       if (!entry) {
         return;
       }
-      const newSize = roundDimensions(entry.contentRect);
+      const newSize = {
+        width: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(entry.contentRect.width, 1),
+        height: (0, _roundToDecimalPlaces.roundToDecimalPlaces)(entry.contentRect.height, 1)
+      };
       if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
         return;
       }
@@ -105,7 +123,7 @@ export const useGridVirtualScroller = () => {
       lastSize = newSize;
     });
     observer.observe(node);
-    if (reactMajor >= 19) {
+    if (_reactMajor.default >= 19) {
       return () => {
         mainRef.current = null;
         observer.disconnect();
@@ -132,42 +150,48 @@ export const useGridVirtualScroller = () => {
   const scrollPosition = React.useRef(rootProps.initialState?.scroll ?? EMPTY_SCROLL_POSITION);
   const ignoreNextScrollEvent = React.useRef(false);
   const previousContextScrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
-  const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
-  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
-  const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
-  const scrollTimeout = useTimeout();
+  const previousRowContext = React.useRef(_useGridVirtualization.EMPTY_RENDER_CONTEXT);
+  const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
+  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
+  const scrollTimeout = (0, _useTimeout.default)();
   const frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
+  const scrollCache = (0, _useLazyRef.default)(() => 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;
     }
     const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
     apiRef.current.setState(state => {
-      return _extends({}, state, {
-        virtualization: _extends({}, state.virtualization, {
+      return (0, _extends2.default)({}, state, {
+        virtualization: (0, _extends2.default)({}, state.virtualization, {
           renderContext: nextRenderContext
         })
       });
     });
 
     // 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 = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef).isReady;
+    if (isReady && didRowsIntervalChange) {
       previousRowContext.current = nextRenderContext;
       apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
     }
     previousContextScrollPosition.current = scrollPosition.current;
-  }, [apiRef, dimensions.isReady]);
-  const triggerUpdateRenderContext = useEventCallback(() => {
+  }, [apiRef]);
+  const triggerUpdateRenderContext = (0, _useEventCallback.default)(() => {
     const scroller = scrollerRef.current;
     if (!scroller) {
       return undefined;
     }
+    const dimensions = (0, _gridDimensionsSelectors.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: (0, _utils2.clamp)(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? (0, _utils2.clamp)(scroller.scrollLeft, -maxScrollLeft, 0) : (0, _utils2.clamp)(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -180,7 +204,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 +226,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,54 +238,44 @@ export const useGridVirtualScroller = () => {
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {
+    // skip update if dimensions are not ready and virtualization is enabled
+    if (!(0, _gridDimensionsSelectors.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 = (0, _useEventCallback.default)(() => {
     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
     });
   });
-  const handleWheel = useEventCallback(event => {
+  const handleWheel = (0, _useEventCallback.default)(event => {
     apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
   });
-  const handleTouchMove = useEventCallback(event => {
+  const handleTouchMove = (0, _useEventCallback.default)(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
   const getRows = (params = {}) => {
     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;
@@ -281,7 +295,7 @@ export const useGridVirtualScroller = () => {
     const rowModels = params.rows ?? currentPage.rows;
     const firstRowToRender = baseRenderContext.firstRowIndex;
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
-    const rowIndexes = params.rows ? range(0, params.rows.length) : range(firstRowToRender, lastRowToRender);
+    const rowIndexes = params.rows ? (0, _utils2.range)(0, params.rows.length) : (0, _utils2.range)(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
     if (!isPinnedSection && focusedVirtualCell) {
       if (focusedVirtualCell.rowIndex < firstRowToRender) {
@@ -295,7 +309,7 @@ export const useGridVirtualScroller = () => {
     }
     const rows = [];
     const rowProps = rootProps.slotProps?.row;
-    const columnPositions = gridColumnPositionsSelector(apiRef);
+    const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
     rowIndexes.forEach(rowIndexInPage => {
       const {
         id,
@@ -331,12 +345,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 +364,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;
@@ -364,14 +373,13 @@ export const useGridVirtualScroller = () => {
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
       const firstColumnIndex = currentRenderContext.firstColumnIndex;
       const lastColumnIndex = currentRenderContext.lastColumnIndex;
-      rows.push(/*#__PURE__*/_jsx(rootProps.slots.row, _extends({
+      rows.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
         row: model,
         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 +390,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 +408,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
@@ -412,7 +419,7 @@ export const useGridVirtualScroller = () => {
       flexShrink: 0
     };
     if (size.flexBasis === 0) {
-      size.flexBasis = minimalContentHeight; // Give room to show the overlay when there no rows.
+      size.flexBasis = _gridRowsUtils.minimalContentHeight; // Give room to show the overlay when there no rows.
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
@@ -425,25 +432,22 @@ export const useGridVirtualScroller = () => {
       contentHeight
     });
   }, [apiRef, columnsTotalWidth, contentHeight]);
-  useEnhancedEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (!isRenderContextReady.current) {
       return;
     }
     apiRef.current.updateRenderContext?.();
   }, [apiRef, enabledForColumns, enabledForRows]);
-  useEnhancedEffect(() => {
+  (0, _useEnhancedEffect.default)(() => {
     if (listView) {
       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);
+  (0, _useRunOnce.useRunOnce)(renderContext !== _useGridVirtualization.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 +500,9 @@ export const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
-  useGridApiEventHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
-  useGridApiEventHandler(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  (0, _utils.useGridApiOptionHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -527,19 +531,27 @@ export const useGridVirtualScroller = () => {
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      scrollPosition
+    }),
+    getScrollAreaProps: () => ({
+      scrollPosition
     })
   };
 };
+exports.useGridVirtualScroller = useGridVirtualScroller;
+// 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 currentPage = getVisibleRows(apiRef, rootProps);
-  const visibleColumns = rootProps.unstable_listView ? [gridListColumnSelector(apiRef.current.state)] : gridVisibleColumnDefinitionsSelector(apiRef);
-  const hiddenCellsOriginMap = gridRowSpanningHiddenCellsOriginMapSelector(apiRef);
+  const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef);
+  const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);
+  const visibleColumns = rootProps.unstable_listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+  const hiddenCellsOriginMap = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsOriginMapSelector)(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);
   return {
@@ -555,11 +567,11 @@ 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),
-    columnPositions: gridColumnPositionsSelector(apiRef),
+    rowsMeta: (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef),
+    columnPositions: (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef),
     rows: currentPage.rows,
     range: currentPage.range,
-    pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
+    pinnedColumns: (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
     listView: rootProps.unstable_listView ?? false,
@@ -573,6 +585,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return (0, _extends2.default)({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -637,7 +654,7 @@ function getNearestIndexToRender(inputs, offset, options) {
     // Check if all rows in this page are already measured
     allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= inputs.range.lastRowIndex;
   }
-  const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
+  const lastMeasuredIndexRelativeToCurrentPage = (0, _utils2.clamp)(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
   if (allRowsMeasured || inputs.rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
     // If all rows were measured (when no row has "auto" as height) or all rows before the offset
     // were measured, then use a binary search because it's faster.
@@ -677,7 +694,7 @@ function deriveRenderContext(inputs, nextRenderContext, scrollCache) {
     positions: inputs.columnPositions,
     lastSize: inputs.lastColumnWidth
   });
-  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+  const firstColumnToRender = (0, _gridColumnsUtils.getFirstNonSpannedColumnToRender)({
     firstColumnToRender: initialFirstColumnToRender,
     apiRef: inputs.apiRef,
     firstRowToRender,
@@ -740,15 +757,15 @@ function getIndexesToRender({
     lastPosition: positions[positions.length - 1] + lastSize
   });
   const lastIndexPadded = binarySearch(lastPosition, positions);
-  return [clamp(firstIndexPadded, minFirstIndex, maxLastIndex), clamp(lastIndexPadded, minFirstIndex, maxLastIndex)];
+  return [(0, _utils2.clamp)(firstIndexPadded, minFirstIndex, maxLastIndex), (0, _utils2.clamp)(lastIndexPadded, minFirstIndex, maxLastIndex)];
 }
-export function areRenderContextsEqual(context1, context2) {
+function areRenderContextsEqual(context1, context2) {
   if (context1 === context2) {
     return true;
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-export function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength) {
+function computeOffsetLeft(columnPositions, renderContext, pinnedLeftLength) {
   const left = (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return Math.abs(left);
 }
@@ -824,13 +841,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/hooks/features/virtualization/useGridVirtualization.d.ts

@@ -1,21 +1,21 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridRenderContext } from '../../../models';
-import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import { GridStateInitializer } from '../../utils/useGridInitializeState';
+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;
+  enabled: boolean;
+  enabledForColumns: boolean;
+  enabledForRows: boolean;
+  renderContext: GridRenderContext;
 };
 export declare const EMPTY_RENDER_CONTEXT: {
-    firstRowIndex: number;
-    lastRowIndex: number;
-    firstColumnIndex: number;
-    lastColumnIndex: number;
+  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 {};
+export {};