@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

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

@@ -1,145 +1,81 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-var _excluded = ["style"],
-  _excluded2 = ["style"];
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useTheme } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
+import { useLazyRef } from '../../utils/useLazyRef';
+import { useResizeObserver } from '../../utils/useResizeObserver';
+import { useRunOnce } from '../../utils/useRunOnce';
+import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
+import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
+import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
-import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridVisibleRows, getVisibleRows } from '../../utils/useGridVisibleRows';
 import { clamp } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
-
-// Uses binary search to avoid looping through all possible positions
+import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
+import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function binarySearch(offset, positions) {
-  var sliceStart = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  var sliceEnd = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : positions.length;
-  if (positions.length <= 0) {
-    return -1;
-  }
-  if (sliceStart >= sliceEnd) {
-    return sliceStart;
-  }
-  var pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
-  var itemOffset = positions[pivot];
-  return offset <= itemOffset ? binarySearch(offset, positions, sliceStart, pivot) : binarySearch(offset, positions, pivot + 1, sliceEnd);
-}
-function exponentialSearch(offset, positions, index) {
-  var interval = 1;
-  while (index < positions.length && Math.abs(positions[index]) < offset) {
-    index += interval;
-    interval *= 2;
-  }
-  return binarySearch(offset, positions, Math.floor(index / 2), Math.min(index, positions.length));
-}
-export var getRenderableIndexes = function getRenderableIndexes(_ref) {
-  var firstIndex = _ref.firstIndex,
-    lastIndex = _ref.lastIndex,
-    buffer = _ref.buffer,
-    minFirstIndex = _ref.minFirstIndex,
-    maxLastIndex = _ref.maxLastIndex;
-  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-};
-export var areRenderContextsEqual = 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;
-};
-// The `maxSize` is 3 so that reselect caches the `renderedColumns` values for the pinned left,
-// unpinned, and pinned right sections.
-var MEMOIZE_OPTIONS = {
-  maxSize: 3
-};
-export var useGridVirtualScroller = function useGridVirtualScroller(props) {
-  var _currentPage$range3, _currentPage$range4;
+export var EMPTY_DETAIL_PANELS = Object.freeze(new Map());
+export var useGridVirtualScroller = function useGridVirtualScroller() {
   var apiRef = useGridPrivateApiContext();
   var rootProps = useGridRootProps();
   var visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   var enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector);
   var enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  var ref = props.ref,
-    onRenderZonePositioning = props.onRenderZonePositioning,
-    _props$renderZoneMinC = props.renderZoneMinColumnIndex,
-    renderZoneMinColumnIndex = _props$renderZoneMinC === void 0 ? 0 : _props$renderZoneMinC,
-    _props$renderZoneMaxC = props.renderZoneMaxColumnIndex,
-    renderZoneMaxColumnIndex = _props$renderZoneMaxC === void 0 ? visibleColumns.length : _props$renderZoneMaxC,
-    getRowProps = props.getRowProps;
+  var dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  var outerSize = dimensions.viewportOuterSize;
+  var pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  var pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  var hasBottomPinnedRows = pinnedRows.bottom.length > 0;
+  var _React$useState = React.useState(EMPTY_DETAIL_PANELS),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    panels = _React$useState2[0],
+    setPanels = _React$useState2[1];
   var theme = useTheme();
   var columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   var cellFocus = useGridSelector(apiRef, gridFocusCellSelector);
   var cellTabIndex = useGridSelector(apiRef, gridTabIndexCellSelector);
   var rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   var selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
   var currentPage = useGridVisibleRows(apiRef, rootProps);
+  var gridRootRef = apiRef.current.rootElementRef;
+  var mainRef = apiRef.current.mainElementRef;
+  var scrollerRef = apiRef.current.virtualScrollerRef;
   var renderZoneRef = React.useRef(null);
-  var rootRef = React.useRef(null);
-  var handleRef = useForkRef(ref, rootRef);
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    renderContext = _React$useState2[0],
-    setRenderContextState = _React$useState2[1];
-  var prevRenderContext = React.useRef(renderContext);
+  var scrollbarVerticalRef = React.useRef(null);
+  var scrollbarHorizontalRef = React.useRef(null);
+  var contentHeight = dimensions.contentSize.height;
+  var columnsTotalWidth = dimensions.columnsTotalWidth;
+  useResizeObserver(mainRef, function () {
+    return apiRef.current.resize();
+  });
+  var previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
+  var previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
+  var renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   var scrollPosition = React.useRef({
     top: 0,
     left: 0
-  });
-  var _React$useState3 = React.useState({
-      width: null,
-      height: null
-    }),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    containerDimensions = _React$useState4[0],
-    setContainerDimensions = _React$useState4[1];
+  }).current;
   var prevTotalWidth = React.useRef(columnsTotalWidth);
-  // Each visible row (not to be confused with a filter result) is composed of a central row element
-  // and up to two additional row elements for pinned columns (left and right).
-  // When hovering any of these elements, the :hover styles are applied only to the row element that
-  // was actually hovered, not its additional siblings. To make it look like a contiguous row,
-  // we add/remove the .Mui-hovered class to all of the row elements inside one visible row.
-  var _React$useState5 = React.useState(null),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    hoveredRowId = _React$useState6[0],
-    setHoveredRowId = _React$useState6[1];
-  var rowStyleCache = React.useRef(Object.create(null));
-  var prevGetRowProps = React.useRef();
-  var prevRootRowStyle = React.useRef();
-  var getRenderedColumnsRef = React.useRef(defaultMemoize(function (columns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, indexOfColumnWithFocusedCell) {
-    // If the selected column is not within the current range of columns being displayed,
-    // we need to render it at either the left or right of the columns,
-    // depending on whether it is above or below the range.
-    var focusedCellColumnIndexNotInRange;
-    var renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender);
-    if (indexOfColumnWithFocusedCell > -1) {
-      // check if it is not on the left pinned column.
-      if (firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-      // check if it is not on the right pinned column.
-      else if (lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
+  var getRenderedColumns = useLazyRef(createGetRenderedColumns).current;
+  var indexOfRowWithFocusedCell = React.useMemo(function () {
+    if (cellFocus !== null) {
+      return currentPage.rows.findIndex(function (row) {
+        return row.id === cellFocus.id;
+      });
     }
-    return {
-      focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-      renderedColumns: renderedColumns
-    };
-  }, MEMOIZE_OPTIONS));
+    return -1;
+  }, [cellFocus, currentPage.rows]);
   var indexOfColumnWithFocusedCell = React.useMemo(function () {
     if (cellFocus !== null) {
       return visibleColumns.findIndex(function (column) {
@@ -148,187 +84,77 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  var getNearestIndexToRender = React.useCallback(function (offset) {
-    var _currentPage$range, _currentPage$range2;
-    var lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
-    var allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
-    if ((_currentPage$range = currentPage.range) != null && _currentPage$range.lastRowIndex && !allRowsMeasured) {
-      // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
-    }
-    var lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (((_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.firstRowIndex) || 0), 0, rowsMeta.positions.length);
-    if (allRowsMeasured || 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.
-      return binarySearch(offset, rowsMeta.positions);
-    }
-
-    // Otherwise, use an exponential search.
-    // If rows have "auto" as height, their positions will be based on estimated heights.
-    // In this case, we can skip several steps until we find a position higher than the offset.
-    // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
-  }, [apiRef, (_currentPage$range3 = currentPage.range) == null ? void 0 : _currentPage$range3.firstRowIndex, (_currentPage$range4 = currentPage.range) == null ? void 0 : _currentPage$range4.lastRowIndex, rowsMeta.positions]);
-  var computeRenderContext = React.useCallback(function () {
-    if (!enabled) {
-      return {
-        firstRowIndex: 0,
-        lastRowIndex: currentPage.rows.length,
-        firstColumnIndex: 0,
-        lastColumnIndex: visibleColumns.length
-      };
-    }
-    var _ref2 = scrollPosition.current,
-      top = _ref2.top,
-      left = _ref2.left;
-
-    // Clamp the value because the search may return an index out of bounds.
-    // In the last index, this is not needed because Array.slice doesn't include it.
-    var firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    var lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
-    var firstColumnIndex = 0;
-    var lastColumnIndex = columnPositions.length;
-    if (enabledForColumns) {
-      var hasRowWithAutoHeight = false;
-      var _getRenderableIndexes = getRenderableIndexes({
-          firstIndex: firstRowIndex,
-          lastIndex: lastRowIndex,
-          minFirstIndex: 0,
-          maxLastIndex: currentPage.rows.length,
-          buffer: rootProps.rowBuffer
-        }),
-        _getRenderableIndexes2 = _slicedToArray(_getRenderableIndexes, 2),
-        firstRowToRender = _getRenderableIndexes2[0],
-        lastRowToRender = _getRenderableIndexes2[1];
-      for (var i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-        var row = currentPage.rows[i];
-        hasRowWithAutoHeight = apiRef.current.rowHasAutoHeight(row.id);
-      }
-      if (!hasRowWithAutoHeight) {
-        firstColumnIndex = binarySearch(Math.abs(left), columnPositions);
-        lastColumnIndex = binarySearch(Math.abs(left) + containerDimensions.width, columnPositions);
-      }
-    }
-    return {
-      firstRowIndex: firstRowIndex,
-      lastRowIndex: lastRowIndex,
-      firstColumnIndex: firstColumnIndex,
-      lastColumnIndex: lastColumnIndex
-    };
-  }, [enabled, enabledForColumns, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
-  useEnhancedEffect(function () {
-    if (enabled) {
-      // TODO a scroll reset should not be necessary
-      rootRef.current.scrollLeft = 0;
-      rootRef.current.scrollTop = 0;
-    } else {
-      renderZoneRef.current.style.transform = "translate3d(0px, 0px, 0px)";
+  React.useEffect(function () {
+    var _gridRootRef$current, _gridRootRef$current2;
+    var direction = theme.direction === 'ltr' ? 1 : -1;
+    var top = gridRowsMetaSelector(apiRef.current.state).positions[renderContext.firstRowIndex];
+    var left = direction * columnPositions[renderContext.firstColumnIndex] - columnPositions[pinnedColumns.left.length];
+    (_gridRootRef$current = gridRootRef.current) == null || _gridRootRef$current.style.setProperty('--DataGrid-offsetTop', "".concat(top, "px"));
+    (_gridRootRef$current2 = gridRootRef.current) == null || _gridRootRef$current2.style.setProperty('--DataGrid-offsetLeft', "".concat(left, "px"));
+  }, [apiRef, gridRootRef, theme.direction, columnPositions, pinnedColumns.left.length, renderContext]);
+  var updateRenderContext = React.useCallback(function (nextRenderContext, rawRenderContext) {
+    if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
+      return;
     }
-  }, [enabled]);
-  useEnhancedEffect(function () {
-    setContainerDimensions({
-      width: rootRef.current.clientWidth,
-      height: rootRef.current.clientHeight
-    });
-  }, [rowsMeta.currentPageTotalHeight]);
-  var handleResize = React.useCallback(function () {
-    if (rootRef.current) {
-      setContainerDimensions({
-        width: rootRef.current.clientWidth,
-        height: rootRef.current.clientHeight
+    var didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        virtualization: _extends({}, state.virtualization, {
+          renderContext: nextRenderContext
+        })
       });
-    }
-  }, []);
-  useGridApiEventHandler(apiRef, 'debouncedResize', handleResize);
-  var updateRenderZonePosition = React.useCallback(function (nextRenderContext) {
-    var _getRenderableIndexes3 = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstRowIndex,
-        lastIndex: nextRenderContext.lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rootProps.rowBuffer
-      }),
-      _getRenderableIndexes4 = _slicedToArray(_getRenderableIndexes3, 2),
-      firstRowToRender = _getRenderableIndexes4[0],
-      lastRowToRender = _getRenderableIndexes4[1];
-    var _getRenderableIndexes5 = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstColumnIndex,
-        lastIndex: nextRenderContext.lastColumnIndex,
-        minFirstIndex: renderZoneMinColumnIndex,
-        maxLastIndex: renderZoneMaxColumnIndex,
-        buffer: rootProps.columnBuffer
-      }),
-      _getRenderableIndexes6 = _slicedToArray(_getRenderableIndexes5, 1),
-      initialFirstColumnToRender = _getRenderableIndexes6[0];
-    var firstColumnToRender = getFirstNonSpannedColumnToRender({
-      firstColumnToRender: initialFirstColumnToRender,
-      apiRef: apiRef,
-      firstRowToRender: firstRowToRender,
-      lastRowToRender: lastRowToRender,
-      visibleRows: currentPage.rows
     });
-    var direction = theme.direction === 'ltr' ? 1 : -1;
-    var top = gridRowsMetaSelector(apiRef.current.state).positions[firstRowToRender];
-    var left = direction * gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
-    renderZoneRef.current.style.transform = "translate3d(".concat(left, "px, ").concat(top, "px, 0px)");
-    if (typeof onRenderZonePositioning === 'function') {
-      onRenderZonePositioning({
-        top: top,
-        left: left
-      });
+
+    // 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) {
+      previousRowContext.current = nextRenderContext;
+      apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
     }
-  }, [apiRef, currentPage.rows, onRenderZonePositioning, renderZoneMinColumnIndex, renderZoneMaxColumnIndex, rootProps.columnBuffer, rootProps.rowBuffer, theme.direction]);
-  var getRenderContext = React.useCallback(function () {
-    return prevRenderContext.current;
-  }, []);
-  var setRenderContext = React.useCallback(function (nextRenderContext) {
-    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
-      updateRenderZonePosition(nextRenderContext);
-      return;
+    previousContext.current = rawRenderContext;
+    prevTotalWidth.current = dimensions.columnsTotalWidth;
+  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
+  var triggerUpdateRenderContext = function triggerUpdateRenderContext() {
+    var inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    var _computeRenderContext = computeRenderContext(inputs, scrollPosition),
+      _computeRenderContext2 = _slicedToArray(_computeRenderContext, 2),
+      nextRenderContext = _computeRenderContext2[0],
+      rawRenderContext = _computeRenderContext2[1];
+
+    // Since previous render, we have scrolled...
+    var topRowsScrolled = Math.abs(rawRenderContext.firstRowIndex - previousContext.current.firstRowIndex);
+    var bottomRowsScrolled = Math.abs(rawRenderContext.lastRowIndex - previousContext.current.lastRowIndex);
+    var topColumnsScrolled = Math.abs(rawRenderContext.firstColumnIndex - previousContext.current.firstColumnIndex);
+    var bottomColumnsScrolled = Math.abs(rawRenderContext.lastColumnIndex - previousContext.current.lastColumnIndex);
+    var shouldUpdate = topRowsScrolled >= rootProps.rowThreshold || bottomRowsScrolled >= rootProps.rowThreshold || topColumnsScrolled >= rootProps.columnThreshold || bottomColumnsScrolled >= rootProps.columnThreshold || prevTotalWidth.current !== dimensions.columnsTotalWidth;
+    if (!shouldUpdate) {
+      return previousContext.current;
     }
-    setRenderContextState(nextRenderContext);
-    updateRenderZonePosition(nextRenderContext);
-    var _getRenderableIndexes7 = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstRowIndex,
-        lastIndex: nextRenderContext.lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rootProps.rowBuffer
-      }),
-      _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
-      firstRowToRender = _getRenderableIndexes8[0],
-      lastRowToRender = _getRenderableIndexes8[1];
-    apiRef.current.publishEvent('renderedRowsIntervalChange', {
-      firstRowToRender: firstRowToRender,
-      lastRowToRender: lastRowToRender
+
+    // Prevents batching render context changes
+    ReactDOM.flushSync(function () {
+      updateRenderContext(nextRenderContext, rawRenderContext);
     });
-    prevRenderContext.current = nextRenderContext;
-  }, [apiRef, setRenderContextState, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer, updateRenderZonePosition]);
-  useEnhancedEffect(function () {
-    if (containerDimensions.width == null) {
-      return;
-    }
-    var initialRenderContext = computeRenderContext();
-    setRenderContext(initialRenderContext);
-    var _ref3 = scrollPosition.current,
-      top = _ref3.top,
-      left = _ref3.left;
-    var params = {
-      top: top,
-      left: left,
-      renderContext: initialRenderContext
-    };
-    apiRef.current.publishEvent('scrollPositionChange', params);
-  }, [apiRef, computeRenderContext, containerDimensions.width, setRenderContext]);
+    return nextRenderContext;
+  };
+  var forceUpdateRenderContext = function forceUpdateRenderContext() {
+    var inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    var _computeRenderContext3 = computeRenderContext(inputs, scrollPosition),
+      _computeRenderContext4 = _slicedToArray(_computeRenderContext3, 2),
+      nextRenderContext = _computeRenderContext4[0],
+      rawRenderContext = _computeRenderContext4[1];
+    updateRenderContext(nextRenderContext, rawRenderContext);
+  };
   var handleScroll = useEventCallback(function (event) {
     var _event$currentTarget = event.currentTarget,
       scrollTop = _event$currentTarget.scrollTop,
       scrollLeft = _event$currentTarget.scrollLeft;
-    scrollPosition.current.top = scrollTop;
-    scrollPosition.current.left = scrollLeft;
+    scrollPosition.top = scrollTop;
+    scrollPosition.left = scrollLeft;
 
     // On iOS and macOS, negative offsets are possible when swiping past the start
-    if (!prevRenderContext.current || scrollTop < 0) {
+    if (scrollTop < 0) {
       return;
     }
     if (theme.direction === 'ltr') {
@@ -341,26 +167,12 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         return;
       }
     }
-
-    // When virtualization is disabled, the context never changes during scroll
-    var nextRenderContext = enabled ? computeRenderContext() : prevRenderContext.current;
-    var topRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
-    var bottomRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastRowIndex - prevRenderContext.current.lastRowIndex);
-    var topColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
-    var bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
-    var shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth;
+    var nextRenderContext = triggerUpdateRenderContext();
     apiRef.current.publishEvent('scrollPositionChange', {
       top: scrollTop,
       left: scrollLeft,
-      renderContext: shouldSetState ? nextRenderContext : prevRenderContext.current
-    }, event);
-    if (shouldSetState) {
-      // Prevents batching render context changes
-      ReactDOM.flushSync(function () {
-        setRenderContext(nextRenderContext);
-      });
-      prevTotalWidth.current = columnsTotalWidth;
-    }
+      renderContext: nextRenderContext
+    });
   });
   var handleWheel = useEventCallback(function (event) {
     apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
@@ -368,262 +180,235 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   var handleTouchMove = useEventCallback(function (event) {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
-  var indexOfRowWithFocusedCell = React.useMemo(function () {
-    if (cellFocus !== null) {
-      return currentPage.rows.findIndex(function (row) {
-        return row.id === cellFocus.id;
-      });
+  var minFirstColumn = pinnedColumns.left.length;
+  var maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
+  var getRows = function getRows() {
+    var _params$rows, _rootProps$slotProps;
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
+    var isPinnedSection = params.position !== undefined;
+    var rowIndexOffset;
+    // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
+    // eslint-disable-next-line default-case
+    switch (params.position) {
+      case 'top':
+        rowIndexOffset = 0;
+        break;
+      case 'bottom':
+        rowIndexOffset = pinnedRows.top.length + currentPage.rows.length;
+        break;
+      case undefined:
+        rowIndexOffset = pinnedRows.top.length;
+        break;
     }
-    return -1;
-  }, [cellFocus, currentPage.rows]);
-  useGridApiEventHandler(apiRef, 'rowMouseOver', function (params, event) {
-    var _params$id;
-    if (event.currentTarget.contains(event.relatedTarget)) {
-      return;
+    var firstRowToRender = renderContext.firstRowIndex;
+    var lastRowToRender = renderContext.lastRowIndex;
+    var firstColumnToRender = renderContext.firstColumnIndex;
+    var lastColumnToRender = renderContext.lastColumnIndex;
+    if (!params.rows && !currentPage.range) {
+      return [];
     }
-    setHoveredRowId((_params$id = params.id) != null ? _params$id : null);
-  });
-  useGridApiEventHandler(apiRef, 'rowMouseOut', function (params, event) {
-    if (event.currentTarget.contains(event.relatedTarget)) {
-      return;
+    var renderedRows = (_params$rows = params.rows) != null ? _params$rows : currentPage.rows.slice(firstRowToRender, lastRowToRender);
+
+    // If the selected row is not within the current range of rows being displayed,
+    // we need to render it at either the top or bottom of the rows,
+    // depending on whether it is above or below the range.
+    var isRowWithFocusedCellNotInRange = false;
+    if (!isPinnedSection && indexOfRowWithFocusedCell > -1 && (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell)) {
+      isRowWithFocusedCellNotInRange = true;
+      var rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
+      if (indexOfRowWithFocusedCell > firstRowToRender) {
+        renderedRows.push(rowWithFocusedCell);
+      } else {
+        renderedRows.unshift(rowWithFocusedCell);
+      }
     }
-    setHoveredRowId(null);
-  });
-  var getRows = function getRows() {
-    var _rootProps$slotProps;
-    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-      renderContext: renderContext
-    };
-    var onRowRender = params.onRowRender,
-      nextRenderContext = params.renderContext,
-      _params$minFirstColum = params.minFirstColumn,
-      minFirstColumn = _params$minFirstColum === void 0 ? renderZoneMinColumnIndex : _params$minFirstColum,
-      _params$maxLastColumn = params.maxLastColumn,
-      maxLastColumn = _params$maxLastColumn === void 0 ? renderZoneMaxColumnIndex : _params$maxLastColumn,
-      _params$availableSpac = params.availableSpace,
-      availableSpace = _params$availableSpac === void 0 ? containerDimensions.width : _params$availableSpac,
-      _params$rowIndexOffse = params.rowIndexOffset,
-      rowIndexOffset = _params$rowIndexOffse === void 0 ? 0 : _params$rowIndexOffse,
-      _params$position = params.position,
-      position = _params$position === void 0 ? 'center' : _params$position;
-    if (!nextRenderContext || availableSpace == null) {
-      return null;
+    var isColumnWihFocusedCellNotInRange = false;
+    if (!isPinnedSection && (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell)) {
+      isColumnWihFocusedCellNotInRange = true;
     }
-    var rowBuffer = enabled ? rootProps.rowBuffer : 0;
-    var columnBuffer = enabled ? rootProps.columnBuffer : 0;
-    var _getRenderableIndexes9 = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstRowIndex,
-        lastIndex: nextRenderContext.lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rowBuffer
-      }),
-      _getRenderableIndexes10 = _slicedToArray(_getRenderableIndexes9, 2),
-      firstRowToRender = _getRenderableIndexes10[0],
-      lastRowToRender = _getRenderableIndexes10[1];
-    var renderedRows = [];
-    if (params.rows) {
-      params.rows.forEach(function (row) {
-        renderedRows.push(row);
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: minFirstColumn,
-          maxLastColumn: maxLastColumn,
-          columns: visibleColumns
-        });
+    var _getRenderedColumns = getRenderedColumns(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1),
+      focusedCellColumnIndexNotInRange = _getRenderedColumns.focusedCellColumnIndexNotInRange,
+      renderedColumns = _getRenderedColumns.renderedColumns;
+    renderedRows.forEach(function (row) {
+      apiRef.current.calculateColSpan({
+        rowId: row.id,
+        minFirstColumn: minFirstColumn,
+        maxLastColumn: maxLastColumn,
+        columns: visibleColumns
       });
-    } else {
-      if (!currentPage.range) {
-        return null;
-      }
-      for (var i = firstRowToRender; i < lastRowToRender; i += 1) {
-        var row = currentPage.rows[i];
-        renderedRows.push(row);
+      if (pinnedColumns.left.length > 0) {
         apiRef.current.calculateColSpan({
           rowId: row.id,
-          minFirstColumn: minFirstColumn,
-          maxLastColumn: maxLastColumn,
+          minFirstColumn: 0,
+          maxLastColumn: pinnedColumns.left.length,
           columns: visibleColumns
         });
       }
-    }
-    // If the selected row is not within the current range of rows being displayed,
-    // we need to render it at either the top or bottom of the rows,
-    // depending on whether it is above or below the range.
-
-    var isRowWithFocusedCellNotInRange = false;
-    if (indexOfRowWithFocusedCell > -1) {
-      var rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
-      if (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell) {
-        isRowWithFocusedCellNotInRange = true;
-        if (indexOfRowWithFocusedCell > firstRowToRender) {
-          renderedRows.push(rowWithFocusedCell);
-        } else {
-          renderedRows.unshift(rowWithFocusedCell);
-        }
+      if (pinnedColumns.right.length > 0) {
         apiRef.current.calculateColSpan({
-          rowId: rowWithFocusedCell.id,
-          minFirstColumn: minFirstColumn,
-          maxLastColumn: maxLastColumn,
+          rowId: row.id,
+          minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
+          maxLastColumn: visibleColumns.length,
           columns: visibleColumns
         });
       }
-    }
-    var _getRenderableIndexes11 = getRenderableIndexes({
-        firstIndex: nextRenderContext.firstColumnIndex,
-        lastIndex: nextRenderContext.lastColumnIndex,
-        minFirstIndex: minFirstColumn,
-        maxLastIndex: maxLastColumn,
-        buffer: columnBuffer
-      }),
-      _getRenderableIndexes12 = _slicedToArray(_getRenderableIndexes11, 2),
-      initialFirstColumnToRender = _getRenderableIndexes12[0],
-      lastColumnToRender = _getRenderableIndexes12[1];
-    var firstColumnToRender = getFirstNonSpannedColumnToRender({
-      firstColumnToRender: initialFirstColumnToRender,
-      apiRef: apiRef,
-      firstRowToRender: firstRowToRender,
-      lastRowToRender: lastRowToRender,
-      visibleRows: currentPage.rows
     });
-    var isColumnWihFocusedCellNotInRange = false;
-    if (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell) {
-      isColumnWihFocusedCellNotInRange = true;
-    }
-    var _getRenderedColumnsRe = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1),
-      focusedCellColumnIndexNotInRange = _getRenderedColumnsRe.focusedCellColumnIndexNotInRange,
-      renderedColumns = _getRenderedColumnsRe.renderedColumns;
-    var _ref4 = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row) || {},
-      rootRowStyle = _ref4.style,
-      rootRowProps = _objectWithoutProperties(_ref4, _excluded);
-    var invalidatesCachedRowStyle = prevGetRowProps.current !== getRowProps || prevRootRowStyle.current !== rootRowStyle;
-    if (invalidatesCachedRowStyle) {
-      rowStyleCache.current = Object.create(null);
-    }
     var rows = [];
+    var rowProps = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row;
     var isRowWithFocusedCellRendered = false;
-    for (var _i = 0; _i < renderedRows.length; _i += 1) {
-      var _currentPage$range5;
-      var _renderedRows$_i = renderedRows[_i],
-        _id = _renderedRows$_i.id,
-        _model = _renderedRows$_i.model;
-      var isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === _id;
-      var lastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + _i === currentPage.rows.length : firstRowToRender + _i === currentPage.rows.length - 1;
-      var baseRowHeight = !apiRef.current.rowHasAutoHeight(_id) ? apiRef.current.unstable_getRowHeight(_id) : 'auto';
+    for (var i = 0; i < renderedRows.length; i += 1) {
+      var _currentPage$range;
+      var _renderedRows$i = renderedRows[i],
+        id = _renderedRows$i.id,
+        model = _renderedRows$i.model;
+      var isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
+      var baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       var isSelected = void 0;
-      if (selectedRowsLookup[_id] == null) {
+      if (selectedRowsLookup[id] == null) {
         isSelected = false;
       } else {
-        isSelected = apiRef.current.isRowSelectable(_id);
+        isSelected = apiRef.current.isRowSelectable(id);
+      }
+      var isFirstVisible = false;
+      if (params.position === undefined) {
+        isFirstVisible = i === 0;
       }
-      if (onRowRender) {
-        onRowRender(_id);
+      var isLastVisible = false;
+      if (isLastSection) {
+        if (!isPinnedSection) {
+          var lastIndex = currentPage.rows.length - 1;
+          var isLastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === lastIndex + 1 : firstRowToRender + i === lastIndex;
+          if (isLastVisibleRowIndex) {
+            isLastVisible = true;
+          }
+        } else {
+          isLastVisible = i === renderedRows.length - 1;
+        }
       }
-      var focusedCell = cellFocus !== null && cellFocus.id === _id ? cellFocus.field : null;
+      var focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
       var columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
       var renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell ? [columnWithFocusedCellNotInRange].concat(_toConsumableArray(renderedColumns)) : renderedColumns;
       var tabbableCell = null;
-      if (cellTabIndex !== null && cellTabIndex.id === _id) {
-        var cellParams = apiRef.current.getCellParams(_id, cellTabIndex.field);
+      if (cellTabIndex !== null && cellTabIndex.id === id) {
+        var cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
-      var _ref5 = typeof getRowProps === 'function' && getRowProps(_id, _model) || {},
-        rowStyle = _ref5.style,
-        rowProps = _objectWithoutProperties(_ref5, _excluded2);
-      if (!rowStyleCache.current[_id]) {
-        var style = _extends({}, rowStyle, rootRowStyle);
-        rowStyleCache.current[_id] = style;
-      }
-      var index = rowIndexOffset + ((currentPage == null || (_currentPage$range5 = currentPage.range) == null ? void 0 : _currentPage$range5.firstRowIndex) || 0) + firstRowToRender + _i;
-      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === _id) {
+      var index = rowIndexOffset + ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + firstRowToRender + i;
+      if (isRowWithFocusedCellNotInRange && (cellFocus == null ? void 0 : cellFocus.id) === id) {
         index = indexOfRowWithFocusedCell;
         isRowWithFocusedCellRendered = true;
       } else if (isRowWithFocusedCellRendered) {
         index -= 1;
       }
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
-        row: _model,
-        rowId: _id,
-        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-        isNotVisible: isRowNotVisible,
+        row: model,
+        rowId: id,
+        index: index,
         rowHeight: baseRowHeight,
         focusedCell: focusedCell,
         tabbableCell: tabbableCell,
+        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
         renderedColumns: renderedColumnsWithFocusedCell,
         visibleColumns: visibleColumns,
+        pinnedColumns: pinnedColumns,
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
-        index: index,
-        containerWidth: availableSpace,
-        isLastVisible: lastVisibleRowIndex,
-        position: position
-      }, rowProps, rootRowProps, {
-        hovered: hoveredRowId === _id,
-        style: rowStyleCache.current[_id]
-      }), _id));
+        dimensions: dimensions,
+        isFirstVisible: isFirstVisible,
+        isLastVisible: isLastVisible,
+        isNotVisible: isRowNotVisible
+      }, rowProps), id));
+      var panel = panels.get(id);
+      if (panel) {
+        rows.push(panel);
+      }
     }
-    prevGetRowProps.current = getRowProps;
-    prevRootRowStyle.current = rootRowStyle;
     return rows;
   };
-  var needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth >= containerDimensions.width;
+  var needsHorizontalScrollbar = outerSize.width && columnsTotalWidth >= outerSize.width;
+  var scrollerStyle = React.useMemo(function () {
+    return {
+      overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
+      overflowY: rootProps.autoHeight ? 'hidden' : undefined
+    };
+  }, [needsHorizontalScrollbar, rootProps.autoHeight]);
   var contentSize = React.useMemo(function () {
     // In cases where the columns exceed the available width,
     // the horizontal scrollbar should be shown even when there're no rows.
     // Keeping 1px as minimum height ensures that the scrollbar will visible if necessary.
-    var height = Math.max(rowsMeta.currentPageTotalHeight, 1);
-    var shouldExtendContent = false;
-    if (rootRef != null && rootRef.current && height <= (rootRef == null ? void 0 : rootRef.current.clientHeight)) {
-      shouldExtendContent = true;
-    }
+    var height = Math.max(contentHeight, 1);
     var size = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height: height,
-      minHeight: shouldExtendContent ? '100%' : 'auto'
+      height: height
     };
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
+    if (rootProps.autoHeight) {
+      if (currentPage.rows.length === 0) {
+        size.height = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
+      } else {
+        size.height = contentHeight;
+      }
     }
     return size;
-  }, [apiRef, rootRef, columnsTotalWidth, rowsMeta.currentPageTotalHeight, needsHorizontalScrollbar, rootProps.autoHeight, rootProps.rowHeight, currentPage.rows.length]);
+  }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);
   React.useEffect(function () {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
-  var rootStyle = React.useMemo(function () {
-    var style = {};
-    if (!needsHorizontalScrollbar) {
-      style.overflowX = 'hidden';
-    }
-    if (rootProps.autoHeight) {
-      style.overflowY = 'hidden';
+  useEnhancedEffect(function () {
+    // FIXME: Is this really necessary?
+    apiRef.current.resize();
+  }, [apiRef, rowsMeta.currentPageTotalHeight]);
+  useEnhancedEffect(function () {
+    if (enabled) {
+      // TODO a scroll reset should not be necessary
+      scrollerRef.current.scrollLeft = 0;
+      scrollerRef.current.scrollTop = 0;
+    } else {
+      var _gridRootRef$current3, _gridRootRef$current4;
+      (_gridRootRef$current3 = gridRootRef.current) == null || _gridRootRef$current3.style.setProperty('--DataGrid-offsetTop', '0px');
+      (_gridRootRef$current4 = gridRootRef.current) == null || _gridRootRef$current4.style.setProperty('--DataGrid-offsetLeft', '0px');
     }
-    return style;
-  }, [needsHorizontalScrollbar, rootProps.autoHeight]);
+  }, [enabled, gridRootRef, scrollerRef]);
+  useRunOnce(outerSize.width !== 0, function () {
+    var inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    var _computeRenderContext5 = computeRenderContext(inputs, scrollPosition),
+      _computeRenderContext6 = _slicedToArray(_computeRenderContext5, 2),
+      initialRenderContext = _computeRenderContext6[0],
+      rawRenderContext = _computeRenderContext6[1];
+    updateRenderContext(initialRenderContext, rawRenderContext);
+    apiRef.current.publishEvent('scrollPositionChange', {
+      top: scrollPosition.top,
+      left: scrollPosition.left,
+      renderContext: initialRenderContext
+    });
+  });
   apiRef.current.register('private', {
-    getRenderContext: getRenderContext
+    updateRenderContext: forceUpdateRenderContext
   });
   return {
     renderContext: renderContext,
-    updateRenderZonePosition: updateRenderZonePosition,
+    setPanels: setPanels,
     getRows: getRows,
-    getRootProps: function getRootProps() {
-      var inputProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return _extends({
-        ref: handleRef,
+    getContainerProps: function getContainerProps() {
+      return {
+        ref: mainRef
+      };
+    },
+    getScrollerProps: function getScrollerProps() {
+      return {
+        ref: scrollerRef,
+        tabIndex: -1,
         onScroll: handleScroll,
         onWheel: handleWheel,
-        onTouchMove: handleTouchMove
-      }, inputProps, {
-        style: inputProps.style ? _extends({}, inputProps.style, rootStyle) : rootStyle,
+        onTouchMove: handleTouchMove,
+        style: scrollerStyle,
         role: 'presentation'
-      });
+      };
     },
     getContentProps: function getContentProps() {
-      var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-        style = _ref6.style;
       return {
-        style: style ? _extends({}, style, contentSize) : contentSize,
+        style: contentSize,
         role: 'presentation'
       };
     },
@@ -632,6 +417,228 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         ref: renderZoneRef,
         role: 'rowgroup'
       };
+    },
+    getScrollbarVerticalProps: function getScrollbarVerticalProps() {
+      return {
+        ref: scrollbarVerticalRef,
+        role: 'presentation'
+      };
+    },
+    getScrollbarHorizontalProps: function getScrollbarHorizontalProps() {
+      return {
+        ref: scrollbarHorizontalRef,
+        role: 'presentation'
+      };
     }
   };
-};
+};
+function createGetRenderedColumns() {
+  return defaultMemoize(function (columns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, indexOfColumnWithFocusedCell) {
+    // If the selected column is not within the current range of columns being displayed,
+    // we need to render it at either the left or right of the columns,
+    // depending on whether it is above or below the range.
+    var focusedCellColumnIndexNotInRange;
+    var renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender);
+    if (indexOfColumnWithFocusedCell > -1) {
+      // check if it is not on the left pinned column.
+      if (firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn) {
+        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
+      }
+      // check if it is not on the right pinned column.
+      else if (lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn) {
+        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
+      }
+    }
+    return {
+      focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
+      renderedColumns: renderedColumns
+    };
+  });
+}
+function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
+  var dimensions = gridDimensionsSelector(apiRef.current.state);
+  var currentPage = getVisibleRows(apiRef, rootProps);
+  return {
+    enabled: enabled,
+    enabledForColumns: enabledForColumns,
+    apiRef: apiRef,
+    autoHeight: rootProps.autoHeight,
+    rowBuffer: rootProps.rowBuffer,
+    columnBuffer: rootProps.columnBuffer,
+    leftPinnedWidth: dimensions.leftPinnedWidth,
+    columnsTotalWidth: dimensions.columnsTotalWidth,
+    viewportInnerWidth: dimensions.viewportInnerSize.width,
+    viewportInnerHeight: dimensions.viewportInnerSize.height,
+    rowsMeta: gridRowsMetaSelector(apiRef.current.state),
+    columnPositions: gridColumnPositionsSelector(apiRef),
+    rows: currentPage.rows,
+    range: currentPage.range,
+    pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
+    visibleColumns: gridVisibleColumnDefinitionsSelector(apiRef)
+  };
+}
+function computeRenderContext(inputs, scrollPosition) {
+  var renderContext;
+  if (!inputs.enabled) {
+    renderContext = {
+      firstRowIndex: 0,
+      lastRowIndex: inputs.rows.length,
+      firstColumnIndex: 0,
+      lastColumnIndex: inputs.visibleColumns.length
+    };
+  } else {
+    var top = scrollPosition.top,
+      left = scrollPosition.left;
+    var realLeft = Math.abs(left) + inputs.leftPinnedWidth;
+
+    // Clamp the value because the search may return an index out of bounds.
+    // In the last index, this is not needed because Array.slice doesn't include it.
+    var firstRowIndex = Math.min(getNearestIndexToRender(inputs, top), inputs.rowsMeta.positions.length - 1);
+    var lastRowIndex = inputs.autoHeight ? firstRowIndex + inputs.rows.length : getNearestIndexToRender(inputs, top + inputs.viewportInnerHeight);
+    var firstColumnIndex = 0;
+    var lastColumnIndex = inputs.columnPositions.length;
+    if (inputs.enabledForColumns) {
+      var hasRowWithAutoHeight = false;
+      var _getIndexesToRender = getIndexesToRender({
+          firstIndex: firstRowIndex,
+          lastIndex: lastRowIndex,
+          minFirstIndex: 0,
+          maxLastIndex: inputs.rows.length,
+          buffer: inputs.rowBuffer
+        }),
+        _getIndexesToRender2 = _slicedToArray(_getIndexesToRender, 2),
+        firstRowToRender = _getIndexesToRender2[0],
+        lastRowToRender = _getIndexesToRender2[1];
+      for (var i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+        var row = inputs.rows[i];
+        hasRowWithAutoHeight = inputs.apiRef.current.rowHasAutoHeight(row.id);
+      }
+      if (!hasRowWithAutoHeight) {
+        firstColumnIndex = binarySearch(realLeft, inputs.columnPositions, {
+          atStart: true,
+          lastPosition: inputs.columnsTotalWidth
+        });
+        lastColumnIndex = binarySearch(realLeft + inputs.viewportInnerWidth, inputs.columnPositions);
+      }
+    }
+    renderContext = {
+      firstRowIndex: firstRowIndex,
+      lastRowIndex: lastRowIndex,
+      firstColumnIndex: firstColumnIndex,
+      lastColumnIndex: lastColumnIndex
+    };
+  }
+  var actualRenderContext = deriveRenderContext(inputs.apiRef, inputs.rowBuffer, inputs.columnBuffer, inputs.rows, inputs.pinnedColumns, inputs.visibleColumns, renderContext);
+  return [actualRenderContext, renderContext];
+}
+function getNearestIndexToRender(inputs, offset) {
+  var _inputs$range, _inputs$range2;
+  var lastMeasuredIndexRelativeToAllRows = inputs.apiRef.current.getLastMeasuredRowIndex();
+  var allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
+  if ((_inputs$range = inputs.range) != null && _inputs$range.lastRowIndex && !allRowsMeasured) {
+    // Check if all rows in this page are already measured
+    allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= inputs.range.lastRowIndex;
+  }
+  var lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (((_inputs$range2 = inputs.range) == null ? void 0 : _inputs$range2.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.
+    return binarySearch(offset, inputs.rowsMeta.positions);
+  }
+
+  // Otherwise, use an exponential search.
+  // If rows have "auto" as height, their positions will be based on estimated heights.
+  // In this case, we can skip several steps until we find a position higher than the offset.
+  // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+  return exponentialSearch(offset, inputs.rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
+}
+
+/**
+ * Accepts as input a raw render context (the area visible in the viewport) and adds
+ * computes the actual render context based on pinned elements, buffer dimensions and
+ * spanning.
+ */
+function deriveRenderContext(apiRef, rowBuffer, columnBuffer, rows, pinnedColumns, visibleColumns, nextRenderContext) {
+  var _getIndexesToRender3 = getIndexesToRender({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: rows.length,
+      buffer: rowBuffer
+    }),
+    _getIndexesToRender4 = _slicedToArray(_getIndexesToRender3, 2),
+    firstRowToRender = _getIndexesToRender4[0],
+    lastRowToRender = _getIndexesToRender4[1];
+  var _getIndexesToRender5 = getIndexesToRender({
+      firstIndex: nextRenderContext.firstColumnIndex,
+      lastIndex: nextRenderContext.lastColumnIndex,
+      minFirstIndex: pinnedColumns.left.length,
+      maxLastIndex: visibleColumns.length - pinnedColumns.right.length,
+      buffer: columnBuffer
+    }),
+    _getIndexesToRender6 = _slicedToArray(_getIndexesToRender5, 2),
+    initialFirstColumnToRender = _getIndexesToRender6[0],
+    lastColumnToRender = _getIndexesToRender6[1];
+  var firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef: apiRef,
+    firstRowToRender: firstRowToRender,
+    lastRowToRender: lastRowToRender,
+    visibleRows: rows
+  });
+  return {
+    firstRowIndex: firstRowToRender,
+    lastRowIndex: lastRowToRender,
+    firstColumnIndex: firstColumnToRender,
+    lastColumnIndex: lastColumnToRender
+  };
+}
+/**
+ * Use binary search to avoid looping through all possible positions.
+ * The `options.atStart` provides the possibility to match for the first element that
+ * intersects the screen, even if said element's start position is before `offset`. In
+ * other words, we search for `offset + width`.
+ */
+function binarySearch(offset, positions) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  var sliceStart = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var sliceEnd = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : positions.length;
+  if (positions.length <= 0) {
+    return -1;
+  }
+  if (sliceStart >= sliceEnd) {
+    return sliceStart;
+  }
+  var pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
+  var position = positions[pivot];
+  var isBefore;
+  if (options != null && options.atStart) {
+    var width = (pivot === positions.length - 1 ? options.lastPosition : positions[pivot + 1]) - position;
+    isBefore = offset - width < position;
+  } else {
+    isBefore = offset <= position;
+  }
+  return isBefore ? binarySearch(offset, positions, options, sliceStart, pivot) : binarySearch(offset, positions, options, pivot + 1, sliceEnd);
+}
+function exponentialSearch(offset, positions, index) {
+  var interval = 1;
+  while (index < positions.length && Math.abs(positions[index]) < offset) {
+    index += interval;
+    interval *= 2;
+  }
+  return binarySearch(offset, positions, undefined, Math.floor(index / 2), Math.min(index, positions.length));
+}
+function getIndexesToRender(_ref) {
+  var firstIndex = _ref.firstIndex,
+    lastIndex = _ref.lastIndex,
+    buffer = _ref.buffer,
+    minFirstIndex = _ref.minFirstIndex,
+    maxLastIndex = _ref.maxLastIndex;
+  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+}
+export 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;
+}