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

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

@@ -4,18 +4,17 @@ 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 { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 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 { gridFocusCellSelector, gridTabIndexCellSelector } from "../focus/gridFocusStateSelector.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";
@@ -26,6 +25,10 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -45,14 +48,6 @@ const createScrollCache = (isRtl, rowBufferPx, columnBufferPx, verticalBuffer, h
   direction: ScrollDirection.NONE,
   buffer: bufferForDirection(isRtl, ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
 });
-let isJSDOM = false;
-try {
-  if (typeof window !== 'undefined') {
-    isJSDOM = /jsdom/.test(window.navigator.userAgent);
-  }
-} catch (_) {
-  /* ignore */
-}
 export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
@@ -62,31 +57,68 @@ export const useGridVirtualScroller = () => {
   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 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 cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
-  const cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
-  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
-  const currentPage = useGridVisibleRows(apiRef, rootProps);
-  const gridRootRef = apiRef.current.rootElementRef;
+  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);
-  useResizeObserver(mainRef, () => apiRef.current.resize());
+  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;
+    if (!node) {
+      return undefined;
+    }
+    const initialRect = node.getBoundingClientRect();
+    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);
+    }
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const newSize = {
+        width: roundToDecimalPlaces(entry.contentRect.width, 1),
+        height: roundToDecimalPlaces(entry.contentRect.height, 1)
+      };
+      if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
+        return;
+      }
+      apiRef.current.publishEvent('resize', newSize);
+      lastSize = newSize;
+    });
+    observer.observe(node);
+    if (reactMajor >= 19) {
+      return () => {
+        mainRef.current = null;
+        observer.disconnect();
+      };
+    }
+    return undefined;
+  }, [apiRef, mainRef]);
 
   /*
    * Scroll context logic
@@ -103,17 +135,15 @@ export const useGridVirtualScroller = () => {
    * work that's not necessary. Thus we store the context at the start of the scroll in `frozenContext`, and the rows
    * that are part of this old context will keep their same render context as to avoid re-rendering.
    */
-  const scrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
+  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 frozenContext = React.useRef(undefined);
-  const scrollCache = useLazyRef(() => createScrollCache(isRtl, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
-  const focusedCell = {
-    rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
-    columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
-  };
+  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;
@@ -128,18 +158,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.current.state).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.current.state);
+    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: scrollerRef.current.scrollTop,
-      left: scrollerRef.current.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;
@@ -152,7 +192,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) {
@@ -174,7 +214,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);
 
@@ -186,36 +226,25 @@ export const useGridVirtualScroller = () => {
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {
+    // skip update if dimensions are not ready and virtualization is enabled
+    if (!gridDimensionsSelector(apiRef.current.state).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 {
-      scrollTop,
-      scrollLeft
-    } = event.currentTarget;
-
-    // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (scrollTop < 0) {
+  const handleScroll = useEventCallback(() => {
+    if (ignoreNextScrollEvent.current) {
+      ignoreNextScrollEvent.current = false;
       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
     });
   });
@@ -229,7 +258,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;
@@ -251,14 +285,14 @@ export const useGridVirtualScroller = () => {
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
     const rowIndexes = params.rows ? range(0, params.rows.length) : range(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
-    if (!isPinnedSection && focusedCell.rowIndex !== -1) {
-      if (focusedCell.rowIndex < firstRowToRender) {
-        virtualRowIndex = focusedCell.rowIndex;
-        rowIndexes.unshift(virtualRowIndex);
+    if (!isPinnedSection && focusedVirtualCell) {
+      if (focusedVirtualCell.rowIndex < firstRowToRender) {
+        rowIndexes.unshift(focusedVirtualCell.rowIndex);
+        virtualRowIndex = focusedVirtualCell.rowIndex;
       }
-      if (focusedCell.rowIndex >= lastRowToRender) {
-        virtualRowIndex = focusedCell.rowIndex;
-        rowIndexes.push(virtualRowIndex);
+      if (focusedVirtualCell.rowIndex > lastRowToRender) {
+        rowIndexes.push(focusedVirtualCell.rowIndex);
+        virtualRowIndex = focusedVirtualCell.rowIndex;
       }
     }
     const rows = [];
@@ -298,7 +332,6 @@ export const useGridVirtualScroller = () => {
           });
         }
       }
-      const hasFocus = cellFocus?.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -323,39 +356,37 @@ export const useGridVirtualScroller = () => {
           isLastVisible = isLastVisibleInSection;
         }
       }
-      const isVirtualRow = rowIndexInPage === virtualRowIndex;
-      const isNotVisible = isVirtualRow;
-      let tabbableCell = null;
-      if (cellTabIndex !== null && cellTabIndex.id === id) {
-        const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
-        tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
-      }
       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;
+      const isVirtualFocusColumn = focusedVirtualCell?.rowIndex === rowIndex;
       const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, pinnedColumns.left.length);
       const showBottomBorder = isLastVisibleInSection && params.position === 'top';
+      const firstColumnIndex = currentRenderContext.firstColumnIndex;
+      const lastColumnIndex = currentRenderContext.lastColumnIndex;
       rows.push(/*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
         index: rowIndex,
         selected: isSelected,
-        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
         offsetLeft: offsetLeft,
-        dimensions: dimensions,
+        columnsTotalWidth: columnsTotalWidth,
         rowHeight: baseRowHeight,
-        tabbableCell: tabbableCell,
         pinnedColumns: pinnedColumns,
         visibleColumns: visibleColumns,
-        renderContext: currentRenderContext,
-        focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
+        firstColumnIndex: firstColumnIndex,
+        lastColumnIndex: lastColumnIndex,
+        focusedColumnIndex: isVirtualFocusColumn ? focusedVirtualCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isNotVisible,
-        showBottomBorder: showBottomBorder
+        isNotVisible: isVirtualFocusRow,
+        showBottomBorder: showBottomBorder,
+        scrollbarWidth: verticalScrollbarWidth,
+        gridHasFiller: gridHasFiller
       }, rowProps), id));
-      if (isNotVisible) {
+      if (isVirtualFocusRow) {
         return;
       }
       const panel = panels.get(id);
@@ -370,7 +401,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
@@ -386,49 +416,92 @@ export const useGridVirtualScroller = () => {
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
-  React.useEffect(() => {
-    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
-  }, [apiRef, contentSize]);
-  useEnhancedEffect(() => {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
-  useEnhancedEffect(() => {
-    // TODO a scroll reset should not be necessary
-    if (enabledForColumns) {
-      scrollerRef.current.scrollLeft = 0;
+  const onContentSizeApplied = React.useCallback(node => {
+    if (!node) {
+      return;
     }
-    if (enabledForRows) {
-      scrollerRef.current.scrollTop = 0;
+    apiRef.current.publishEvent('virtualScrollerContentSizeChange', {
+      columnsTotalWidth,
+      contentHeight
+    });
+  }, [apiRef, columnsTotalWidth, contentHeight]);
+  useEnhancedEffect(() => {
+    if (!isRenderContextReady.current) {
+      return;
     }
-  }, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
+    apiRef.current.updateRenderContext?.();
+  }, [apiRef, enabledForColumns, enabledForRows]);
   useEnhancedEffect(() => {
     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);
+  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) {
+      const scroller = scrollerRef.current;
+      const {
+        top,
+        left
+      } = rootProps.initialState.scroll;
+
+      // On initial mount, if we have columns available, we can restore the horizontal scroll immediately, but we need to skip the resulting scroll event, otherwise we would recalculate the render context at position top=0, left=restoredValue, but the initial render context is already calculated based on the initial value of scrollPosition ref.
+      const isScrollRestored = {
+        top: !(top > 0),
+        left: !(left > 0)
+      };
+      if (!isScrollRestored.left && columnsTotalWidth) {
+        scroller.scrollLeft = left;
+        ignoreNextScrollEvent.current = true;
+        isScrollRestored.left = true;
+      }
+
+      // For the sake of completeness, but I'm not sure if contentHeight is ever available at this point. Maybe when virtualisation is disabled?
+      if (!isScrollRestored.top && contentHeight) {
+        scroller.scrollTop = top;
+        ignoreNextScrollEvent.current = true;
+        isScrollRestored.top = true;
+      }
+
+      // To restore the vertical scroll, we need to wait until the rows are available in the DOM (otherwise there's nowhere to scroll), but before paint to avoid reflows
+      if (!isScrollRestored.top || !isScrollRestored.left) {
+        const unsubscribeContentSizeChange = apiRef.current.subscribeEvent('virtualScrollerContentSizeChange', params => {
+          if (!isScrollRestored.left && params.columnsTotalWidth) {
+            scroller.scrollLeft = left;
+            ignoreNextScrollEvent.current = true;
+            isScrollRestored.left = true;
+          }
+          if (!isScrollRestored.top && params.contentHeight) {
+            scroller.scrollTop = top;
+            ignoreNextScrollEvent.current = true;
+            isScrollRestored.top = true;
+          }
+          if (isScrollRestored.left && isScrollRestored.top) {
+            unsubscribeContentSizeChange();
+          }
+        });
+        return unsubscribeContentSizeChange;
+      }
+    }
+    return undefined;
   });
   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,
     getRows,
     getContainerProps: () => ({
-      ref: mainRef
+      ref: mainRefCallback
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,
@@ -443,21 +516,31 @@ export const useGridVirtualScroller = () => {
     }),
     getContentProps: () => ({
       style: contentSize,
-      role: 'presentation'
+      role: 'presentation',
+      ref: onContentSizeApplied
     }),
     getRenderZoneProps: () => ({
       role: 'rowgroup'
     }),
     getScrollbarVerticalProps: () => ({
       ref: scrollbarVerticalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
     }),
     getScrollbarHorizontalProps: () => ({
       ref: scrollbarHorizontalRef,
-      role: 'presentation'
+      role: 'presentation',
+      scrollPosition
+    }),
+    getScrollAreaProps: () => ({
+      scrollPosition
     })
   };
 };
+// dimension selectors
+function needsHorizontalScrollbarSelector(state) {
+  return state.dimensions.viewportOuterSize.width > 0 && state.dimensions.columnsTotalWidth > state.dimensions.viewportOuterSize.width;
+}
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
@@ -485,7 +568,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
-    listView: rootProps.unstable_listView ?? false
+    listView: rootProps.unstable_listView ?? false,
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
@@ -495,6 +579,11 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
     firstColumnIndex: 0,
     lastColumnIndex: inputs.visibleColumns.length
   };
+  if (inputs.listView) {
+    return _extends({}, renderContext, {
+      lastColumnIndex: 1
+    });
+  }
   const {
     top,
     left
@@ -533,11 +622,13 @@ function computeRenderContext(inputs, scrollPosition, scrollCache) {
       positions: inputs.rowsMeta.positions,
       lastSize: inputs.lastRowHeight
     });
-    for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-      const row = inputs.rows[i];
-      hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+    if (!inputs.virtualizeColumnsWithAutoRowHeight) {
+      for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+        const row = inputs.rows[i];
+        hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+      }
     }
-    if (!hasRowWithAutoHeight) {
+    if (!hasRowWithAutoHeight || inputs.virtualizeColumnsWithAutoRowHeight) {
       firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
         atStart: true,
         lastPosition: inputs.columnsTotalWidth

package/modern/hooks/utils/index.js

@@ -1,4 +1,4 @@
-export * from "./useGridApiEventHandler.js";
+export { useGridApiEventHandler, useGridApiOptionHandler, unstable_resetCleanupTracking } from "./useGridApiEventHandler.js";
 export * from "./useGridApiMethod.js";
 export * from "./useGridLogger.js";
 export { useGridSelector } from "./useGridSelector.js";