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

package/node/hooks/features/sorting/index.js

@@ -3,11 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  gridDateComparator: true,
-  gridNumberComparator: true,
-  gridStringOrNumberComparator: true
-};
 Object.defineProperty(exports, "gridDateComparator", {
   enumerable: true,
   get: function () {
@@ -20,6 +15,30 @@ Object.defineProperty(exports, "gridNumberComparator", {
     return _gridSortingUtils.gridNumberComparator;
   }
 });
+Object.defineProperty(exports, "gridSortColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortModelSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortModelSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowEntriesSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowEntriesSelector;
+  }
+});
+Object.defineProperty(exports, "gridSortedRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridSortingSelector.gridSortedRowIdsSelector;
+  }
+});
 Object.defineProperty(exports, "gridStringOrNumberComparator", {
   enumerable: true,
   get: function () {
@@ -27,15 +46,4 @@ Object.defineProperty(exports, "gridStringOrNumberComparator", {
   }
 });
 var _gridSortingSelector = require("./gridSortingSelector");
-Object.keys(_gridSortingSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _gridSortingSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridSortingSelector[key];
-    }
-  });
-});
 var _gridSortingUtils = require("./gridSortingUtils");

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

@@ -97,7 +97,7 @@ const useGridSorting = (apiRef, props) => {
           })
         });
       }
-      const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(state, apiRef.current.instanceId);
+      const sortModel = (0, _gridSortingSelector.gridSortModelSelector)(state, undefined, apiRef.current.instanceId);
       const sortRowList = (0, _gridSortingUtils.buildAggregatedSortingApplier)(sortModel, apiRef);
       const sortedRows = apiRef.current.applyStrategyProcessor('sorting', {
         sortRowList

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

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridFocusedVirtualCellSelector = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _reselect = require("reselect");
+var _createSelector = require("../../../utils/createSelector");
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+var _gridVirtualizationSelectors = require("./gridVirtualizationSelectors");
+var _focus = require("../focus");
+var _pagination = require("../pagination");
+const gridIsFocusedCellOutOfContext = (0, _reselect.createSelector)(_focus.gridFocusCellSelector, _gridVirtualizationSelectors.gridRenderContextSelector, _pagination.gridVisibleRowsSelector, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, (focusedCell, renderContext, currentPage, visibleColumns) => {
+  if (!focusedCell) {
+    return false;
+  }
+  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;
+});
+const gridFocusedVirtualCellSelector = exports.gridFocusedVirtualCellSelector = (0, _createSelector.createSelectorMemoized)(gridIsFocusedCellOutOfContext, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _pagination.gridVisibleRowsSelector, _focus.gridFocusCellSelector, (isFocusedCellOutOfRenderContext, visibleColumns, currentPage, focusedCell) => {
+  if (!isFocusedCellOutOfRenderContext) {
+    return null;
+  }
+  const rowIndex = currentPage.rowIdToIndexMap.get(focusedCell.id);
+  if (rowIndex === undefined) {
+    return null;
+  }
+  const columnIndex = visibleColumns.findIndex(column => column.field === focusedCell.field);
+  if (columnIndex === -1) {
+    return null;
+  }
+  return (0, _extends2.default)({}, focusedCell, {
+    rowIndex,
+    columnIndex
+  });
+});

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

@@ -15,16 +15,15 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _utils = require("@mui/utils");
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
-var _useResizeObserver = require("@mui/x-internals/useResizeObserver");
 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 _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
-var _gridFocusStateSelector = require("../focus/gridFocusStateSelector");
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 var _utils2 = require("../../utils");
 var platform = _interopRequireWildcard(require("../../../utils/platform"));
@@ -37,6 +36,10 @@ 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 _jsxRuntime = require("react/jsx-runtime");
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -56,14 +59,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 */
-}
 const useGridVirtualScroller = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -71,33 +66,70 @@ const useGridVirtualScroller = () => {
     unstable_listView: listView
   } = rootProps;
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, () => listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef.current.state)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef));
-  const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !isJSDOM;
-  const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !isJSDOM;
-  const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
-  const outerSize = dimensions.viewportOuterSize;
+  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, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedColumns = listView ? {
-    left: [],
-    right: []
-  } : pinnedColumnDefinitions;
+  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 = (0, _RtlProvider.useRtl)();
-  const cellFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusCellSelector);
-  const cellTabIndex = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
-  const rowsMeta = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
   const selectedRowsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSelectionSelector.selectedIdsLookupSelector);
-  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
-  const gridRootRef = apiRef.current.rootElementRef;
+  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 = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
-  (0, _useResizeObserver.useResizeObserver)(mainRef, () => apiRef.current.resize());
+  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;
+    if (!node) {
+      return undefined;
+    }
+    const initialRect = node.getBoundingClientRect();
+    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);
+    }
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      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;
+      }
+      apiRef.current.publishEvent('resize', newSize);
+      lastSize = newSize;
+    });
+    observer.observe(node);
+    if (_reactMajor.default >= 19) {
+      return () => {
+        mainRef.current = null;
+        observer.disconnect();
+      };
+    }
+    return undefined;
+  }, [apiRef, mainRef]);
 
   /*
    * Scroll context logic
@@ -114,17 +146,15 @@ 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(_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 = (0, _useLazyRef.default)(() => 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 = (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;
@@ -139,18 +169,28 @@ 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 = (0, _gridDimensionsSelectors.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 = (0, _utils.unstable_useEventCallback)(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) {
+      return undefined;
+    }
+    const dimensions = (0, _gridDimensionsSelectors.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: (0, _utils3.clamp)(scroller.scrollTop, 0, maxScrollTop),
+      left: isRtl ? (0, _utils3.clamp)(scroller.scrollLeft, -maxScrollLeft, 0) : (0, _utils3.clamp)(scroller.scrollLeft, 0, maxScrollLeft)
     };
     const dx = newScroll.left - scrollPosition.current.left;
     const dy = newScroll.top - scrollPosition.current.top;
@@ -163,7 +203,7 @@ 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) {
@@ -185,7 +225,7 @@ 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);
 
@@ -197,36 +237,25 @@ const useGridVirtualScroller = () => {
     return nextRenderContext;
   });
   const forceUpdateRenderContext = () => {
+    // skip update if dimensions are not ready and virtualization is enabled
+    if (!(0, _gridDimensionsSelectors.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 = (0, _utils.unstable_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 = (0, _utils.unstable_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
     });
   });
@@ -240,7 +269,12 @@ 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;
@@ -262,14 +296,14 @@ const useGridVirtualScroller = () => {
     const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
     const rowIndexes = params.rows ? (0, _utils3.range)(0, params.rows.length) : (0, _utils3.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 = [];
@@ -309,7 +343,6 @@ 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) {
@@ -334,39 +367,37 @@ 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__*/(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,
-        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);
@@ -381,7 +412,6 @@ 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
@@ -397,49 +427,92 @@ const useGridVirtualScroller = () => {
     }
     return size;
   }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
-  React.useEffect(() => {
-    apiRef.current.publishEvent('virtualScrollerContentSizeChange');
-  }, [apiRef, contentSize]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
-  (0, _utils.unstable_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]);
+  (0, _utils.unstable_useEnhancedEffect)(() => {
+    if (!isRenderContextReady.current) {
+      return;
     }
-  }, [enabledForColumns, enabledForRows, gridRootRef, scrollerRef]);
+    apiRef.current.updateRenderContext?.();
+  }, [apiRef, enabledForColumns, enabledForRows]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     if (listView) {
       scrollerRef.current.scrollLeft = 0;
     }
   }, [listView, scrollerRef]);
-  (0, _useRunOnce.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) {
+      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
   });
-  (0, _utils2.useGridApiEventHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
-  (0, _utils2.useGridApiEventHandler)(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
-  (0, _utils2.useGridApiEventHandler)(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
+  (0, _utils2.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  (0, _utils2.useGridApiOptionHandler)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  (0, _utils2.useGridApiOptionHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: mainRef
+      ref: mainRefCallback
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,
@@ -454,22 +527,32 @@ 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
     })
   };
 };
 exports.useGridVirtualScroller = useGridVirtualScroller;
+// 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 = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);
@@ -497,7 +580,8 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     pinnedColumns: (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
-    listView: rootProps.unstable_listView ?? false
+    listView: rootProps.unstable_listView ?? false,
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight
   };
 }
 function computeRenderContext(inputs, scrollPosition, scrollCache) {
@@ -507,6 +591,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
@@ -545,11 +634,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