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

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -1,310 +1,144 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _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, sliceStart = 0, sliceEnd = positions.length) {
-  if (positions.length <= 0) {
-    return -1;
-  }
-  if (sliceStart >= sliceEnd) {
-    return sliceStart;
-  }
-  const pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
-  const itemOffset = positions[pivot];
-  return offset <= itemOffset ? binarySearch(offset, positions, sliceStart, pivot) : binarySearch(offset, positions, pivot + 1, sliceEnd);
-}
-function exponentialSearch(offset, positions, index) {
-  let 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 const getRenderableIndexes = ({
-  firstIndex,
-  lastIndex,
-  buffer,
-  minFirstIndex,
-  maxLastIndex
-}) => {
-  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
-};
-export const 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.
-const MEMOIZE_OPTIONS = {
-  maxSize: 3
-};
-export const useGridVirtualScroller = props => {
-  var _currentPage$range3, _currentPage$range4;
+export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
+export const useGridVirtualScroller = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector);
   const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
-  const {
-    ref,
-    onRenderZonePositioning,
-    renderZoneMinColumnIndex = 0,
-    renderZoneMaxColumnIndex = visibleColumns.length,
-    getRowProps
-  } = props;
+  const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
+  const outerSize = dimensions.viewportOuterSize;
+  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const hasBottomPinnedRows = pinnedRows.bottom.length > 0;
+  const [panels, setPanels] = React.useState(EMPTY_DETAIL_PANELS);
   const theme = useTheme();
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
-  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
   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 mainRef = apiRef.current.mainElementRef;
+  const scrollerRef = apiRef.current.virtualScrollerRef;
   const renderZoneRef = React.useRef(null);
-  const rootRef = React.useRef(null);
-  const handleRef = useForkRef(ref, rootRef);
-  const [renderContext, setRenderContextState] = React.useState(null);
-  const prevRenderContext = React.useRef(renderContext);
+  const scrollbarVerticalRef = React.useRef(null);
+  const scrollbarHorizontalRef = React.useRef(null);
+  const contentHeight = dimensions.contentSize.height;
+  const columnsTotalWidth = dimensions.columnsTotalWidth;
+  useResizeObserver(mainRef, () => apiRef.current.resize());
+  const previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
+  const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
+  const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollPosition = React.useRef({
     top: 0,
     left: 0
-  });
-  const [containerDimensions, setContainerDimensions] = React.useState({
-    width: null,
-    height: null
-  });
+  }).current;
   const 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.
-  const [hoveredRowId, setHoveredRowId] = React.useState(null);
-  const rowStyleCache = React.useRef(Object.create(null));
-  const prevGetRowProps = React.useRef();
-  const prevRootRowStyle = React.useRef();
-  const getRenderedColumnsRef = React.useRef(defaultMemoize((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.
-    let focusedCellColumnIndexNotInRange;
-    const 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;
-      }
+  const getRenderedColumns = useLazyRef(createGetRenderedColumns).current;
+  const indexOfRowWithFocusedCell = React.useMemo(() => {
+    if (cellFocus !== null) {
+      return currentPage.rows.findIndex(row => row.id === cellFocus.id);
     }
-    return {
-      focusedCellColumnIndexNotInRange,
-      renderedColumns
-    };
-  }, MEMOIZE_OPTIONS));
+    return -1;
+  }, [cellFocus, currentPage.rows]);
   const indexOfColumnWithFocusedCell = React.useMemo(() => {
     if (cellFocus !== null) {
       return visibleColumns.findIndex(column => column.field === cellFocus.field);
     }
     return -1;
   }, [cellFocus, visibleColumns]);
-  const getNearestIndexToRender = React.useCallback(offset => {
-    var _currentPage$range, _currentPage$range2;
-    const lastMeasuredIndexRelativeToAllRows = apiRef.current.getLastMeasuredRowIndex();
-    let 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;
-    }
-    const 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]);
-  const computeRenderContext = React.useCallback(() => {
-    if (!enabled) {
-      return {
-        firstRowIndex: 0,
-        lastRowIndex: currentPage.rows.length,
-        firstColumnIndex: 0,
-        lastColumnIndex: visibleColumns.length
-      };
-    }
-    const {
-      top,
-      left
-    } = scrollPosition.current;
-
-    // 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.
-    const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + containerDimensions.height);
-    let firstColumnIndex = 0;
-    let lastColumnIndex = columnPositions.length;
-    if (enabledForColumns) {
-      let hasRowWithAutoHeight = false;
-      const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-        firstIndex: firstRowIndex,
-        lastIndex: lastRowIndex,
-        minFirstIndex: 0,
-        maxLastIndex: currentPage.rows.length,
-        buffer: rootProps.rowBuffer
-      });
-      for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
-        const 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,
-      lastRowIndex,
-      firstColumnIndex,
-      lastColumnIndex
-    };
-  }, [enabled, enabledForColumns, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerDimensions]);
-  useEnhancedEffect(() => {
-    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(() => {
+    var _gridRootRef$current, _gridRootRef$current2;
+    const direction = theme.direction === 'ltr' ? 1 : -1;
+    const top = gridRowsMetaSelector(apiRef.current.state).positions[renderContext.firstRowIndex];
+    const left = direction * columnPositions[renderContext.firstColumnIndex] - columnPositions[pinnedColumns.left.length];
+    (_gridRootRef$current = gridRootRef.current) == null || _gridRootRef$current.style.setProperty('--DataGrid-offsetTop', `${top}px`);
+    (_gridRootRef$current2 = gridRootRef.current) == null || _gridRootRef$current2.style.setProperty('--DataGrid-offsetLeft', `${left}px`);
+  }, [apiRef, gridRootRef, theme.direction, columnPositions, pinnedColumns.left.length, renderContext]);
+  const updateRenderContext = React.useCallback((nextRenderContext, rawRenderContext) => {
+    if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
+      return;
     }
-  }, [enabled]);
-  useEnhancedEffect(() => {
-    setContainerDimensions({
-      width: rootRef.current.clientWidth,
-      height: rootRef.current.clientHeight
-    });
-  }, [rowsMeta.currentPageTotalHeight]);
-  const handleResize = React.useCallback(() => {
-    if (rootRef.current) {
-      setContainerDimensions({
-        width: rootRef.current.clientWidth,
-        height: rootRef.current.clientHeight
+    const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        virtualization: _extends({}, state.virtualization, {
+          renderContext: nextRenderContext
+        })
       });
-    }
-  }, []);
-  useGridApiEventHandler(apiRef, 'debouncedResize', handleResize);
-  const updateRenderZonePosition = React.useCallback(nextRenderContext => {
-    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: currentPage.rows.length,
-      buffer: rootProps.rowBuffer
-    });
-    const [initialFirstColumnToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstColumnIndex,
-      lastIndex: nextRenderContext.lastColumnIndex,
-      minFirstIndex: renderZoneMinColumnIndex,
-      maxLastIndex: renderZoneMaxColumnIndex,
-      buffer: rootProps.columnBuffer
     });
-    const firstColumnToRender = getFirstNonSpannedColumnToRender({
-      firstColumnToRender: initialFirstColumnToRender,
-      apiRef,
-      firstRowToRender,
-      lastRowToRender,
-      visibleRows: currentPage.rows
-    });
-    const direction = theme.direction === 'ltr' ? 1 : -1;
-    const top = gridRowsMetaSelector(apiRef.current.state).positions[firstRowToRender];
-    const left = direction * gridColumnPositionsSelector(apiRef)[firstColumnToRender]; // Call directly the selector because it might be outdated when this method is called
-    renderZoneRef.current.style.transform = `translate3d(${left}px, ${top}px, 0px)`;
-    if (typeof onRenderZonePositioning === 'function') {
-      onRenderZonePositioning({
-        top,
-        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]);
-  const getRenderContext = React.useCallback(() => prevRenderContext.current, []);
-  const setRenderContext = React.useCallback(nextRenderContext => {
-    if (prevRenderContext.current && areRenderContextsEqual(nextRenderContext, prevRenderContext.current)) {
-      updateRenderZonePosition(nextRenderContext);
-      return;
+    previousContext.current = rawRenderContext;
+    prevTotalWidth.current = dimensions.columnsTotalWidth;
+  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
+  const triggerUpdateRenderContext = () => {
+    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
+
+    // Since previous render, we have scrolled...
+    const topRowsScrolled = Math.abs(rawRenderContext.firstRowIndex - previousContext.current.firstRowIndex);
+    const bottomRowsScrolled = Math.abs(rawRenderContext.lastRowIndex - previousContext.current.lastRowIndex);
+    const topColumnsScrolled = Math.abs(rawRenderContext.firstColumnIndex - previousContext.current.firstColumnIndex);
+    const bottomColumnsScrolled = Math.abs(rawRenderContext.lastColumnIndex - previousContext.current.lastColumnIndex);
+    const 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);
-    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: currentPage.rows.length,
-      buffer: rootProps.rowBuffer
-    });
-    apiRef.current.publishEvent('renderedRowsIntervalChange', {
-      firstRowToRender,
-      lastRowToRender
+
+    // Prevents batching render context changes
+    ReactDOM.flushSync(() => {
+      updateRenderContext(nextRenderContext, rawRenderContext);
     });
-    prevRenderContext.current = nextRenderContext;
-  }, [apiRef, setRenderContextState, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer, updateRenderZonePosition]);
-  useEnhancedEffect(() => {
-    if (containerDimensions.width == null) {
-      return;
-    }
-    const initialRenderContext = computeRenderContext();
-    setRenderContext(initialRenderContext);
-    const {
-      top,
-      left
-    } = scrollPosition.current;
-    const params = {
-      top,
-      left,
-      renderContext: initialRenderContext
-    };
-    apiRef.current.publishEvent('scrollPositionChange', params);
-  }, [apiRef, computeRenderContext, containerDimensions.width, setRenderContext]);
+    return nextRenderContext;
+  };
+  const forceUpdateRenderContext = () => {
+    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
+    updateRenderContext(nextRenderContext, rawRenderContext);
+  };
   const handleScroll = useEventCallback(event => {
     const {
       scrollTop,
       scrollLeft
     } = event.currentTarget;
-    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') {
@@ -317,26 +151,12 @@ export const useGridVirtualScroller = props => {
         return;
       }
     }
-
-    // When virtualization is disabled, the context never changes during scroll
-    const nextRenderContext = enabled ? computeRenderContext() : prevRenderContext.current;
-    const topRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
-    const bottomRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastRowIndex - prevRenderContext.current.lastRowIndex);
-    const topColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
-    const bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
-    const shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth;
+    const 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(() => {
-        setRenderContext(nextRenderContext);
-      });
-      prevTotalWidth.current = columnsTotalWidth;
-    }
+      renderContext: nextRenderContext
+    });
   });
   const handleWheel = useEventCallback(event => {
     apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
@@ -344,139 +164,90 @@ export const useGridVirtualScroller = props => {
   const handleTouchMove = useEventCallback(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
-  const indexOfRowWithFocusedCell = React.useMemo(() => {
-    if (cellFocus !== null) {
-      return currentPage.rows.findIndex(row => row.id === cellFocus.id);
+  const minFirstColumn = pinnedColumns.left.length;
+  const maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
+  const getRows = (params = {}) => {
+    var _params$rows, _rootProps$slotProps;
+    const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
+    const isPinnedSection = params.position !== undefined;
+    let 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', (params, event) => {
-    var _params$id;
-    if (event.currentTarget.contains(event.relatedTarget)) {
-      return;
-    }
-    setHoveredRowId((_params$id = params.id) != null ? _params$id : null);
-  });
-  useGridApiEventHandler(apiRef, 'rowMouseOut', (params, event) => {
-    if (event.currentTarget.contains(event.relatedTarget)) {
-      return;
-    }
-    setHoveredRowId(null);
-  });
-  const getRows = (params = {
-    renderContext
-  }) => {
-    var _rootProps$slotProps;
-    const {
-      onRowRender,
-      renderContext: nextRenderContext,
-      minFirstColumn = renderZoneMinColumnIndex,
-      maxLastColumn = renderZoneMaxColumnIndex,
-      availableSpace = containerDimensions.width,
-      rowIndexOffset = 0,
-      position = 'center'
-    } = params;
-    if (!nextRenderContext || availableSpace == null) {
-      return null;
-    }
-    const rowBuffer = enabled ? rootProps.rowBuffer : 0;
-    const columnBuffer = enabled ? rootProps.columnBuffer : 0;
-    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstRowIndex,
-      lastIndex: nextRenderContext.lastRowIndex,
-      minFirstIndex: 0,
-      maxLastIndex: currentPage.rows.length,
-      buffer: rowBuffer
-    });
-    const renderedRows = [];
-    if (params.rows) {
-      params.rows.forEach(row => {
-        renderedRows.push(row);
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn,
-          maxLastColumn,
-          columns: visibleColumns
-        });
-      });
-    } else {
-      if (!currentPage.range) {
-        return null;
-      }
-      for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
-        const row = currentPage.rows[i];
-        renderedRows.push(row);
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn,
-          maxLastColumn,
-          columns: visibleColumns
-        });
-      }
+    const firstRowToRender = renderContext.firstRowIndex;
+    const lastRowToRender = renderContext.lastRowIndex;
+    const firstColumnToRender = renderContext.firstColumnIndex;
+    const lastColumnToRender = renderContext.lastColumnIndex;
+    if (!params.rows && !currentPage.range) {
+      return [];
     }
+    const 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.
-
     let isRowWithFocusedCellNotInRange = false;
-    if (indexOfRowWithFocusedCell > -1) {
+    if (!isPinnedSection && indexOfRowWithFocusedCell > -1 && (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell)) {
+      isRowWithFocusedCellNotInRange = true;
       const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
-      if (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell) {
-        isRowWithFocusedCellNotInRange = true;
-        if (indexOfRowWithFocusedCell > firstRowToRender) {
-          renderedRows.push(rowWithFocusedCell);
-        } else {
-          renderedRows.unshift(rowWithFocusedCell);
-        }
-        apiRef.current.calculateColSpan({
-          rowId: rowWithFocusedCell.id,
-          minFirstColumn,
-          maxLastColumn,
-          columns: visibleColumns
-        });
+      if (indexOfRowWithFocusedCell > firstRowToRender) {
+        renderedRows.push(rowWithFocusedCell);
+      } else {
+        renderedRows.unshift(rowWithFocusedCell);
       }
     }
-    const [initialFirstColumnToRender, lastColumnToRender] = getRenderableIndexes({
-      firstIndex: nextRenderContext.firstColumnIndex,
-      lastIndex: nextRenderContext.lastColumnIndex,
-      minFirstIndex: minFirstColumn,
-      maxLastIndex: maxLastColumn,
-      buffer: columnBuffer
-    });
-    const firstColumnToRender = getFirstNonSpannedColumnToRender({
-      firstColumnToRender: initialFirstColumnToRender,
-      apiRef,
-      firstRowToRender,
-      lastRowToRender,
-      visibleRows: currentPage.rows
-    });
     let isColumnWihFocusedCellNotInRange = false;
-    if (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell) {
+    if (!isPinnedSection && (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell)) {
       isColumnWihFocusedCellNotInRange = true;
     }
     const {
       focusedCellColumnIndexNotInRange,
       renderedColumns
-    } = getRenderedColumnsRef.current(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1);
-    const _ref = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row) || {},
-      {
-        style: rootRowStyle
-      } = _ref,
-      rootRowProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-    const invalidatesCachedRowStyle = prevGetRowProps.current !== getRowProps || prevRootRowStyle.current !== rootRowStyle;
-    if (invalidatesCachedRowStyle) {
-      rowStyleCache.current = Object.create(null);
-    }
+    } = getRenderedColumns(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1);
+    renderedRows.forEach(row => {
+      apiRef.current.calculateColSpan({
+        rowId: row.id,
+        minFirstColumn,
+        maxLastColumn,
+        columns: visibleColumns
+      });
+      if (pinnedColumns.left.length > 0) {
+        apiRef.current.calculateColSpan({
+          rowId: row.id,
+          minFirstColumn: 0,
+          maxLastColumn: pinnedColumns.left.length,
+          columns: visibleColumns
+        });
+      }
+      if (pinnedColumns.right.length > 0) {
+        apiRef.current.calculateColSpan({
+          rowId: row.id,
+          minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
+          maxLastColumn: visibleColumns.length,
+          columns: visibleColumns
+        });
+      }
+    });
     const rows = [];
+    const rowProps = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row;
     let isRowWithFocusedCellRendered = false;
     for (let i = 0; i < renderedRows.length; i += 1) {
-      var _currentPage$range5;
+      var _currentPage$range;
       const {
         id,
         model
       } = renderedRows[i];
       const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
-      const lastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === currentPage.rows.length : firstRowToRender + i === currentPage.rows.length - 1;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -484,8 +255,21 @@ export const useGridVirtualScroller = props => {
       } else {
         isSelected = apiRef.current.isRowSelectable(id);
       }
-      if (onRowRender) {
-        onRowRender(id);
+      let isFirstVisible = false;
+      if (params.position === undefined) {
+        isFirstVisible = i === 0;
+      }
+      let isLastVisible = false;
+      if (isLastSection) {
+        if (!isPinnedSection) {
+          const lastIndex = currentPage.rows.length - 1;
+          const isLastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === lastIndex + 1 : firstRowToRender + i === lastIndex;
+          if (isLastVisibleRowIndex) {
+            isLastVisible = true;
+          }
+        } else {
+          isLastVisible = i === renderedRows.length - 1;
+        }
       }
       const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
       const columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
@@ -495,16 +279,7 @@ export const useGridVirtualScroller = props => {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
-      const _ref2 = typeof getRowProps === 'function' && getRowProps(id, model) || {},
-        {
-          style: rowStyle
-        } = _ref2,
-        rowProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-      if (!rowStyleCache.current[id]) {
-        const style = _extends({}, rowStyle, rootRowStyle);
-        rowStyleCache.current[id] = style;
-      }
-      let index = rowIndexOffset + ((currentPage == null || (_currentPage$range5 = currentPage.range) == null ? void 0 : _currentPage$range5.firstRowIndex) || 0) + firstRowToRender + i;
+      let 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;
@@ -514,87 +289,315 @@ export const useGridVirtualScroller = props => {
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
-        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-        isNotVisible: isRowNotVisible,
+        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));
+      const panel = panels.get(id);
+      if (panel) {
+        rows.push(panel);
+      }
     }
-    prevGetRowProps.current = getRowProps;
-    prevRootRowStyle.current = rootRowStyle;
     return rows;
   };
-  const needsHorizontalScrollbar = containerDimensions.width && columnsTotalWidth >= containerDimensions.width;
+  const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth >= outerSize.width;
+  const scrollerStyle = React.useMemo(() => ({
+    overflowX: !needsHorizontalScrollbar ? 'hidden' : undefined,
+    overflowY: rootProps.autoHeight ? 'hidden' : undefined
+  }), [needsHorizontalScrollbar, rootProps.autoHeight]);
   const contentSize = React.useMemo(() => {
     // 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.
-    const height = Math.max(rowsMeta.currentPageTotalHeight, 1);
-    let shouldExtendContent = false;
-    if (rootRef != null && rootRef.current && height <= (rootRef == null ? void 0 : rootRef.current.clientHeight)) {
-      shouldExtendContent = true;
-    }
+    const height = Math.max(contentHeight, 1);
     const size = {
       width: needsHorizontalScrollbar ? columnsTotalWidth : 'auto',
-      height,
-      minHeight: shouldExtendContent ? '100%' : 'auto'
+      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(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
-  const rootStyle = React.useMemo(() => {
-    const style = {};
-    if (!needsHorizontalScrollbar) {
-      style.overflowX = 'hidden';
-    }
-    if (rootProps.autoHeight) {
-      style.overflowY = 'hidden';
+  useEnhancedEffect(() => {
+    // FIXME: Is this really necessary?
+    apiRef.current.resize();
+  }, [apiRef, rowsMeta.currentPageTotalHeight]);
+  useEnhancedEffect(() => {
+    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, () => {
+    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    const [initialRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
+    updateRenderContext(initialRenderContext, rawRenderContext);
+    apiRef.current.publishEvent('scrollPositionChange', {
+      top: scrollPosition.top,
+      left: scrollPosition.left,
+      renderContext: initialRenderContext
+    });
+  });
   apiRef.current.register('private', {
-    getRenderContext
+    updateRenderContext: forceUpdateRenderContext
   });
   return {
     renderContext,
-    updateRenderZonePosition,
+    setPanels,
     getRows,
-    getRootProps: (inputProps = {}) => _extends({
-      ref: handleRef,
+    getContainerProps: () => ({
+      ref: mainRef
+    }),
+    getScrollerProps: () => ({
+      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: ({
-      style
-    } = {}) => ({
-      style: style ? _extends({}, style, contentSize) : contentSize,
+    getContentProps: () => ({
+      style: contentSize,
       role: 'presentation'
     }),
     getRenderZoneProps: () => ({
       ref: renderZoneRef,
       role: 'rowgroup'
+    }),
+    getScrollbarVerticalProps: () => ({
+      ref: scrollbarVerticalRef,
+      role: 'presentation'
+    }),
+    getScrollbarHorizontalProps: () => ({
+      ref: scrollbarHorizontalRef,
+      role: 'presentation'
     })
   };
-};
+};
+function createGetRenderedColumns() {
+  return defaultMemoize((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.
+    let focusedCellColumnIndexNotInRange;
+    const 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,
+      renderedColumns
+    };
+  });
+}
+function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
+  const dimensions = gridDimensionsSelector(apiRef.current.state);
+  const currentPage = getVisibleRows(apiRef, rootProps);
+  return {
+    enabled,
+    enabledForColumns,
+    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) {
+  let renderContext;
+  if (!inputs.enabled) {
+    renderContext = {
+      firstRowIndex: 0,
+      lastRowIndex: inputs.rows.length,
+      firstColumnIndex: 0,
+      lastColumnIndex: inputs.visibleColumns.length
+    };
+  } else {
+    const {
+      top,
+      left
+    } = scrollPosition;
+    const 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.
+    const firstRowIndex = Math.min(getNearestIndexToRender(inputs, top), inputs.rowsMeta.positions.length - 1);
+    const lastRowIndex = inputs.autoHeight ? firstRowIndex + inputs.rows.length : getNearestIndexToRender(inputs, top + inputs.viewportInnerHeight);
+    let firstColumnIndex = 0;
+    let lastColumnIndex = inputs.columnPositions.length;
+    if (inputs.enabledForColumns) {
+      let hasRowWithAutoHeight = false;
+      const [firstRowToRender, lastRowToRender] = getIndexesToRender({
+        firstIndex: firstRowIndex,
+        lastIndex: lastRowIndex,
+        minFirstIndex: 0,
+        maxLastIndex: inputs.rows.length,
+        buffer: inputs.rowBuffer
+      });
+      for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+        const 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,
+      lastRowIndex,
+      firstColumnIndex,
+      lastColumnIndex
+    };
+  }
+  const 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;
+  const lastMeasuredIndexRelativeToAllRows = inputs.apiRef.current.getLastMeasuredRowIndex();
+  let 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;
+  }
+  const 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) {
+  const [firstRowToRender, lastRowToRender] = getIndexesToRender({
+    firstIndex: nextRenderContext.firstRowIndex,
+    lastIndex: nextRenderContext.lastRowIndex,
+    minFirstIndex: 0,
+    maxLastIndex: rows.length,
+    buffer: rowBuffer
+  });
+  const [initialFirstColumnToRender, lastColumnToRender] = getIndexesToRender({
+    firstIndex: nextRenderContext.firstColumnIndex,
+    lastIndex: nextRenderContext.lastColumnIndex,
+    minFirstIndex: pinnedColumns.left.length,
+    maxLastIndex: visibleColumns.length - pinnedColumns.right.length,
+    buffer: columnBuffer
+  });
+  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef,
+    firstRowToRender,
+    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, options = undefined, sliceStart = 0, sliceEnd = positions.length) {
+  if (positions.length <= 0) {
+    return -1;
+  }
+  if (sliceStart >= sliceEnd) {
+    return sliceStart;
+  }
+  const pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
+  const position = positions[pivot];
+  let isBefore;
+  if (options != null && options.atStart) {
+    const 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) {
+  let 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({
+  firstIndex,
+  lastIndex,
+  buffer,
+  minFirstIndex,
+  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;
+}