@mui/x-data-grid 7.0.0-beta.7 → 7.0.0

package/hooks/features/sorting/useGridSorting.js

@@ -13,8 +13,7 @@ import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSort
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getTreeNodeDescendants } from '../rows/gridRowsUtils';
 export const sortingStateInitializer = (state, props) => {
-  var _ref, _props$sortModel, _props$initialState;
-  const sortModel = (_ref = (_props$sortModel = props.sortModel) != null ? _props$sortModel : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.sorting) == null ? void 0 : _props$initialState.sortModel) != null ? _ref : [];
+  const sortModel = props.sortModel ?? props.initialState?.sorting?.sortModel ?? [];
   return _extends({}, state, {
     sorting: {
       sortModel: sanitizeSortModel(sortModel, props.disableMultipleColumnsSorting),
@@ -28,7 +27,6 @@ export const sortingStateInitializer = (state, props) => {
  * @requires useGridColumns (event)
  */
 export const useGridSorting = (apiRef, props) => {
-  var _props$initialState3;
   const logger = useGridLogger(apiRef, 'useGridSorting');
   apiRef.current.registerControlState({
     stateId: 'sortModel',
@@ -42,7 +40,7 @@ export const useGridSorting = (apiRef, props) => {
     const existingIdx = sortModel.findIndex(c => c.field === field);
     let newSortModel = [...sortModel];
     if (existingIdx > -1) {
-      if ((sortItem == null ? void 0 : sortItem.sort) == null) {
+      if (sortItem?.sort == null) {
         newSortModel.splice(existingIdx, 1);
       } else {
         newSortModel.splice(existingIdx, 1, sortItem);
@@ -53,19 +51,17 @@ export const useGridSorting = (apiRef, props) => {
     return newSortModel;
   }, [apiRef]);
   const createSortItem = React.useCallback((col, directionOverride) => {
-    var _col$sortingOrder2;
     const sortModel = gridSortModelSelector(apiRef);
     const existing = sortModel.find(c => c.field === col.field);
     if (existing) {
-      var _col$sortingOrder;
-      const nextSort = directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder = col.sortingOrder) != null ? _col$sortingOrder : props.sortingOrder, existing.sort) : directionOverride;
+      const nextSort = directionOverride === undefined ? getNextGridSortDirection(col.sortingOrder ?? props.sortingOrder, existing.sort) : directionOverride;
       return nextSort === undefined ? undefined : _extends({}, existing, {
         sort: nextSort
       });
     }
     return {
       field: col.field,
-      sort: directionOverride === undefined ? getNextGridSortDirection((_col$sortingOrder2 = col.sortingOrder) != null ? _col$sortingOrder2 : props.sortingOrder) : directionOverride
+      sort: directionOverride === undefined ? getNextGridSortDirection(col.sortingOrder ?? props.sortingOrder) : directionOverride
     };
   }, [apiRef, props.sortingOrder]);
   const addColumnMenuItem = React.useCallback((columnMenuItems, colDef) => {
@@ -120,7 +116,7 @@ export const useGridSorting = (apiRef, props) => {
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
-      sortModel = (sortItem == null ? void 0 : sortItem.sort) == null ? [] : [sortItem];
+      sortModel = sortItem?.sort == null ? [] : [sortItem];
     } else {
       sortModel = upsertSortModel(column.field, sortItem);
     }
@@ -148,7 +144,6 @@ export const useGridSorting = (apiRef, props) => {
    * PRE-PROCESSING
    */
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2;
     const sortModelToExport = gridSortModelSelector(apiRef);
     const shouldExportSortModel =
     // Always export if the `exportOnlyDirtyModels` property is not activated
@@ -156,7 +151,7 @@ export const useGridSorting = (apiRef, props) => {
     // Always export if the model is controlled
     props.sortModel != null ||
     // Always export if the model has been initialized
-    ((_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.sorting) == null ? void 0 : _props$initialState2.sortModel) != null ||
+    props.initialState?.sorting?.sortModel != null ||
     // Export if the model is not empty
     sortModelToExport.length > 0;
     if (!shouldExportSortModel) {
@@ -167,10 +162,9 @@ export const useGridSorting = (apiRef, props) => {
         sortModel: sortModelToExport
       }
     });
-  }, [apiRef, props.sortModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.sorting) == null ? void 0 : _props$initialState3.sortModel]);
+  }, [apiRef, props.sortModel, props.initialState?.sorting?.sortModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto;
-    const sortModel = (_context$stateToResto = context.stateToRestore.sorting) == null ? void 0 : _context$stateToResto.sortModel;
+    const sortModel = context.stateToRestore.sorting?.sortModel;
     if (sortModel == null) {
       return params;
     }

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { Theme } from '@mui/material/styles';
 import { GridPinnedRowsPosition } from '../rows/gridRowsInterfaces';
 import type { GridRenderContext, GridColumnsRenderContext, GridRowEntry, GridRowId } from '../../../models';
-export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
 export type VirtualScroller = ReturnType<typeof useGridVirtualScroller>;
+export declare const EMPTY_DETAIL_PANELS: Readonly<Map<GridRowId, React.ReactNode>>;
 export declare const useGridVirtualScroller: () => {
     renderContext: GridRenderContext;
     setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<GridRowId, React.ReactNode>>>>;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useLazyRef from '@mui/utils/useLazyRef';
+import useTimeout from '@mui/utils/useTimeout';
 import { useTheme } from '@mui/material/styles';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -22,13 +24,31 @@ import { getMinimalContentHeight } from '../rows/gridRowsUtils';
 import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
 import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
 import { jsx as _jsx } from "react/jsx-runtime";
+const MINIMUM_COLUMN_WIDTH = 50;
+var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
+  ScrollDirection[ScrollDirection["NONE"] = 0] = "NONE";
+  ScrollDirection[ScrollDirection["UP"] = 1] = "UP";
+  ScrollDirection[ScrollDirection["DOWN"] = 2] = "DOWN";
+  ScrollDirection[ScrollDirection["LEFT"] = 3] = "LEFT";
+  ScrollDirection[ScrollDirection["RIGHT"] = 4] = "RIGHT";
+  return ScrollDirection;
+}(ScrollDirection || {});
+const EMPTY_SCROLL_POSITION = {
+  top: 0,
+  left: 0
+};
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
+const createScrollCache = (rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) => ({
+  direction: ScrollDirection.NONE,
+  buffer: bufferForDirection(ScrollDirection.NONE, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer)
+});
+const isJSDOM = typeof window !== 'undefined' ? /jsdom/.test(window.navigator.userAgent) : false;
 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 enabled = useGridSelector(apiRef, gridVirtualizationEnabledSelector) && !isJSDOM;
+  const enabledForColumns = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector) && !isJSDOM;
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
@@ -50,19 +70,34 @@ export const useGridVirtualScroller = () => {
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
   useResizeObserver(mainRef, () => apiRef.current.resize());
-  const previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
+
+  /*
+   * Scroll context logic
+   * ====================
+   * We only render the cells contained in the `renderContext`. However, when the user starts scrolling the grid
+   * in a direction, we want to render as many cells as possible in that direction, as to avoid presenting white
+   * areas if the user scrolls too fast/far and the viewport ends up in a region we haven't rendered yet. To render
+   * more cells, we store some offsets to add to the viewport in `scrollCache.buffer`. Those offsets make the render
+   * context wider in the direction the user is going, but also makes the buffer around the viewport `0` for the
+   * dimension (horizontal or vertical) in which the user is not scrolling. So if the normal viewport is 8 columns
+   * wide, with a 1 column buffer (10 columns total), then we want it to be exactly 8 columns wide during vertical
+   * scroll.
+   * However, we don't want the rows in the old context to re-render from e.g. 10 columns to 8 columns, because that's
+   * work that's not necessary. Thus we store the context at the start of the scroll in `frozenContext`, and the rows
+   * that are part of this old context will keep their same render context as to avoid re-rendering.
+   */
+  const scrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
+  const previousContextScrollPosition = React.useRef(EMPTY_SCROLL_POSITION);
   const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
-  const scrollPosition = React.useRef({
-    top: 0,
-    left: 0
-  }).current;
-  const prevTotalWidth = React.useRef(columnsTotalWidth);
+  const scrollTimeout = useTimeout();
+  const frozenContext = React.useRef(undefined);
+  const scrollCache = useLazyRef(() => createScrollCache(rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6)).current;
   const focusedCell = {
     rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
     columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
   };
-  const updateRenderContext = React.useCallback((nextRenderContext, rawRenderContext) => {
+  const updateRenderContext = React.useCallback(nextRenderContext => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
     }
@@ -82,41 +117,67 @@ export const useGridVirtualScroller = () => {
       previousRowContext.current = nextRenderContext;
       apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
     }
-    previousContext.current = rawRenderContext;
-    prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
+    previousContextScrollPosition.current = scrollPosition.current;
+  }, [apiRef, dimensions.isReady]);
   const triggerUpdateRenderContext = () => {
-    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
-    const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
+    const newScroll = {
+      top: scrollerRef.current.scrollTop,
+      left: scrollerRef.current.scrollLeft
+    };
+    const dx = newScroll.left - scrollPosition.current.left;
+    const dy = newScroll.top - scrollPosition.current.top;
+    const isScrolling = dx !== 0 || dy !== 0;
+    scrollPosition.current = newScroll;
+    const direction = isScrolling ? directionForDelta(dx, dy) : ScrollDirection.NONE;
 
     // 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;
+    const rowScroll = Math.abs(scrollPosition.current.top - previousContextScrollPosition.current.top);
+    const columnScroll = Math.abs(scrollPosition.current.left - previousContextScrollPosition.current.left);
+
+    // PERF: use the computed minimum column width instead of a static one
+    const didCrossThreshold = rowScroll >= dimensions.rowHeight || columnScroll >= MINIMUM_COLUMN_WIDTH;
+    const didChangeDirection = scrollCache.direction !== direction;
+    const shouldUpdate = didCrossThreshold || didChangeDirection;
     if (!shouldUpdate) {
-      return previousContext.current;
+      return renderContext;
+    }
+
+    // Render a new context
+
+    if (didChangeDirection) {
+      switch (direction) {
+        case ScrollDirection.NONE:
+        case ScrollDirection.LEFT:
+        case ScrollDirection.RIGHT:
+          frozenContext.current = undefined;
+          break;
+        default:
+          frozenContext.current = renderContext;
+          break;
+      }
     }
+    scrollCache.direction = direction;
+    scrollCache.buffer = bufferForDirection(direction, rootProps.rowBufferPx, rootProps.columnBufferPx, dimensions.rowHeight * 15, MINIMUM_COLUMN_WIDTH * 6);
+    const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
+    const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
 
     // Prevents batching render context changes
     ReactDOM.flushSync(() => {
-      updateRenderContext(nextRenderContext, rawRenderContext);
+      updateRenderContext(nextRenderContext);
     });
+    scrollTimeout.start(1000, triggerUpdateRenderContext);
     return nextRenderContext;
   };
   const forceUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
-    const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
-    updateRenderContext(nextRenderContext, rawRenderContext);
+    const nextRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
+    updateRenderContext(nextRenderContext);
   };
   const handleScroll = useEventCallback(event => {
     const {
       scrollTop,
       scrollLeft
     } = event.currentTarget;
-    scrollPosition.top = scrollTop;
-    scrollPosition.left = scrollLeft;
 
     // On iOS and macOS, negative offsets are possible when swiping past the start
     if (scrollTop < 0) {
@@ -146,12 +207,10 @@ export const useGridVirtualScroller = () => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
   const getRows = (params = {}) => {
-    var _params$renderContext, _params$rows, _rootProps$slotProps;
     if (!params.rows && !currentPage.range) {
       return [];
     }
-    const columnPositions = gridColumnPositionsSelector(apiRef);
-    const currentRenderContext = (_params$renderContext = params.renderContext) != null ? _params$renderContext : renderContext;
+    const baseRenderContext = params.renderContext ?? renderContext;
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -168,9 +227,9 @@ export const useGridVirtualScroller = () => {
         rowIndexOffset = pinnedRows.top.length;
         break;
     }
-    const rowModels = (_params$rows = params.rows) != null ? _params$rows : currentPage.rows;
-    const firstRowToRender = currentRenderContext.firstRowIndex;
-    const lastRowToRender = Math.min(currentRenderContext.lastRowIndex, rowModels.length);
+    const rowModels = params.rows ?? currentPage.rows;
+    const firstRowToRender = baseRenderContext.firstRowIndex;
+    const lastRowToRender = Math.min(baseRenderContext.lastRowIndex, rowModels.length);
     const rowIndexes = params.rows ? range(0, params.rows.length) : range(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
     if (!isPinnedSection && focusedCell.rowIndex !== -1) {
@@ -184,9 +243,9 @@ export const useGridVirtualScroller = () => {
       }
     }
     const rows = [];
-    const rowProps = (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.row;
+    const rowProps = rootProps.slotProps?.row;
+    const columnPositions = gridColumnPositionsSelector(apiRef);
     rowIndexes.forEach(rowIndexInPage => {
-      var _currentPage$range;
       const {
         id,
         model
@@ -219,7 +278,7 @@ export const useGridVirtualScroller = () => {
           });
         }
       }
-      const hasFocus = (cellFocus == null ? void 0 : cellFocus.id) === id;
+      const hasFocus = cellFocus?.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -250,8 +309,12 @@ export const useGridVirtualScroller = () => {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
+      let currentRenderContext = baseRenderContext;
+      if (!isPinnedSection && frozenContext.current && rowIndexInPage >= frozenContext.current.firstRowIndex && rowIndexInPage < frozenContext.current.lastRowIndex) {
+        currentRenderContext = frozenContext.current;
+      }
       const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
-      const rowIndex = ((currentPage == null || (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0) + rowIndexOffset + rowIndexInPage;
+      const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
@@ -275,8 +338,7 @@ export const useGridVirtualScroller = () => {
         rows.push(panel);
       }
       if (isLastVisible) {
-        var _apiRef$current$getIn, _apiRef$current;
-        rows.push((_apiRef$current$getIn = (_apiRef$current = apiRef.current).getInfiniteLoadingTriggerElement) == null ? void 0 : _apiRef$current$getIn.call(_apiRef$current, {
+        rows.push(apiRef.current.getInfiniteLoadingTriggerElement?.({
           lastRowId: id
         }));
       }
@@ -322,11 +384,11 @@ export const useGridVirtualScroller = () => {
   }, [enabled, gridRootRef, scrollerRef]);
   useRunOnce(outerSize.width !== 0, () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
-    const [initialRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
-    updateRenderContext(initialRenderContext, rawRenderContext);
+    const initialRenderContext = computeRenderContext(inputs, scrollPosition.current, scrollCache);
+    updateRenderContext(initialRenderContext);
     apiRef.current.publishEvent('scrollPositionChange', {
-      top: scrollPosition.top,
-      left: scrollPosition.left,
+      top: scrollPosition.current.top,
+      left: scrollPosition.current.left,
       renderContext: initialRenderContext
     });
   });
@@ -372,26 +434,31 @@ export const useGridVirtualScroller = () => {
 function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
+  const visibleColumns = gridVisibleColumnDefinitionsSelector(apiRef);
+  const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
+  const lastColumn = visibleColumns.at(-1);
   return {
     enabled,
     enabledForColumns,
     apiRef,
     autoHeight: rootProps.autoHeight,
-    rowBuffer: rootProps.rowBuffer,
-    columnBuffer: rootProps.columnBuffer,
+    rowBufferPx: rootProps.rowBufferPx,
+    columnBufferPx: rootProps.columnBufferPx,
     leftPinnedWidth: dimensions.leftPinnedWidth,
     columnsTotalWidth: dimensions.columnsTotalWidth,
     viewportInnerWidth: dimensions.viewportInnerSize.width,
     viewportInnerHeight: dimensions.viewportInnerSize.height,
+    lastRowHeight: lastRowId !== undefined ? apiRef.current.unstable_getRowHeight(lastRowId) : 0,
+    lastColumnWidth: lastColumn?.computedWidth ?? 0,
     rowsMeta: gridRowsMetaSelector(apiRef.current.state),
     columnPositions: gridColumnPositionsSelector(apiRef),
     rows: currentPage.rows,
     range: currentPage.range,
     pinnedColumns: gridVisiblePinnedColumnDefinitionsSelector(apiRef),
-    visibleColumns: gridVisibleColumnDefinitionsSelector(apiRef)
+    visibleColumns
   };
 }
-function computeRenderContext(inputs, scrollPosition) {
+function computeRenderContext(inputs, scrollPosition, scrollCache) {
   let renderContext;
   if (!inputs.enabled) {
     renderContext = {
@@ -409,7 +476,10 @@ function computeRenderContext(inputs, scrollPosition) {
 
     // 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 firstRowIndex = Math.min(getNearestIndexToRender(inputs, top, {
+      atStart: true,
+      lastPosition: inputs.rowsMeta.positions[inputs.rowsMeta.positions.length - 1] + inputs.lastRowHeight
+    }), 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;
@@ -420,7 +490,10 @@ function computeRenderContext(inputs, scrollPosition) {
         lastIndex: lastRowIndex,
         minFirstIndex: 0,
         maxLastIndex: inputs.rows.length,
-        buffer: inputs.rowBuffer
+        bufferBefore: scrollCache.buffer.rowBefore,
+        bufferAfter: scrollCache.buffer.rowAfter,
+        positions: inputs.rowsMeta.positions,
+        lastSize: inputs.lastRowHeight
       });
       for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
         const row = inputs.rows[i];
@@ -441,29 +514,28 @@ function computeRenderContext(inputs, scrollPosition) {
       lastColumnIndex
     };
   }
-  const actualRenderContext = deriveRenderContext(inputs.apiRef, inputs.rowBuffer, inputs.columnBuffer, inputs.rows, inputs.pinnedColumns, inputs.visibleColumns, renderContext);
-  return [actualRenderContext, renderContext];
+  const actualRenderContext = deriveRenderContext(inputs, renderContext, scrollCache);
+  return actualRenderContext;
 }
-function getNearestIndexToRender(inputs, offset) {
-  var _inputs$range, _inputs$range2;
+function getNearestIndexToRender(inputs, offset, options) {
   const lastMeasuredIndexRelativeToAllRows = inputs.apiRef.current.getLastMeasuredRowIndex();
   let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
-  if ((_inputs$range = inputs.range) != null && _inputs$range.lastRowIndex && !allRowsMeasured) {
+  if (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);
+  const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (inputs.range?.firstRowIndex || 0), 0, inputs.rowsMeta.positions.length);
   if (allRowsMeasured || inputs.rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
     // If all rows were measured (when no row has "auto" as height) or all rows before the offset
     // were measured, then use a binary search because it's faster.
-    return binarySearch(offset, inputs.rowsMeta.positions);
+    return binarySearch(offset, inputs.rowsMeta.positions, options);
   }
 
   // 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);
+  return exponentialSearch(offset, inputs.rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage, options);
 }
 
 /**
@@ -471,27 +543,33 @@ function getNearestIndexToRender(inputs, offset) {
  * computes the actual render context based on pinned elements, buffer dimensions and
  * spanning.
  */
-function deriveRenderContext(apiRef, rowBuffer, columnBuffer, rows, pinnedColumns, visibleColumns, nextRenderContext) {
+function deriveRenderContext(inputs, nextRenderContext, scrollCache) {
   const [firstRowToRender, lastRowToRender] = getIndexesToRender({
     firstIndex: nextRenderContext.firstRowIndex,
     lastIndex: nextRenderContext.lastRowIndex,
     minFirstIndex: 0,
-    maxLastIndex: rows.length,
-    buffer: rowBuffer
+    maxLastIndex: inputs.rows.length,
+    bufferBefore: scrollCache.buffer.rowBefore,
+    bufferAfter: scrollCache.buffer.rowAfter,
+    positions: inputs.rowsMeta.positions,
+    lastSize: inputs.lastRowHeight
   });
   const [initialFirstColumnToRender, lastColumnToRender] = getIndexesToRender({
     firstIndex: nextRenderContext.firstColumnIndex,
     lastIndex: nextRenderContext.lastColumnIndex,
-    minFirstIndex: pinnedColumns.left.length,
-    maxLastIndex: visibleColumns.length - pinnedColumns.right.length,
-    buffer: columnBuffer
+    minFirstIndex: inputs.pinnedColumns.left.length,
+    maxLastIndex: inputs.visibleColumns.length - inputs.pinnedColumns.right.length,
+    bufferBefore: scrollCache.buffer.columnBefore,
+    bufferAfter: scrollCache.buffer.columnAfter,
+    positions: inputs.columnPositions,
+    lastSize: inputs.lastColumnWidth
   });
   const firstColumnToRender = getFirstNonSpannedColumnToRender({
     firstColumnToRender: initialFirstColumnToRender,
-    apiRef,
+    apiRef: inputs.apiRef,
     firstRowToRender,
     lastRowToRender,
-    visibleRows: rows
+    visibleRows: inputs.rows
   });
   return {
     firstRowIndex: firstRowToRender,
@@ -516,7 +594,7 @@ function binarySearch(offset, positions, options = undefined, sliceStart = 0, sl
   const pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
   const position = positions[pivot];
   let isBefore;
-  if (options != null && options.atStart) {
+  if (options?.atStart) {
     const width = (pivot === positions.length - 1 ? options.lastPosition : positions[pivot + 1]) - position;
     isBefore = offset - width < position;
   } else {
@@ -524,22 +602,32 @@ function binarySearch(offset, positions, options = undefined, sliceStart = 0, sl
   }
   return isBefore ? binarySearch(offset, positions, options, sliceStart, pivot) : binarySearch(offset, positions, options, pivot + 1, sliceEnd);
 }
-function exponentialSearch(offset, positions, index) {
+function exponentialSearch(offset, positions, index, options = undefined) {
   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));
+  return binarySearch(offset, positions, options, Math.floor(index / 2), Math.min(index, positions.length));
 }
 function getIndexesToRender({
   firstIndex,
   lastIndex,
-  buffer,
+  bufferBefore,
+  bufferAfter,
   minFirstIndex,
-  maxLastIndex
+  maxLastIndex,
+  positions,
+  lastSize
 }) {
-  return [clamp(firstIndex - buffer, minFirstIndex, maxLastIndex), clamp(lastIndex + buffer, minFirstIndex, maxLastIndex)];
+  const firstPosition = positions[firstIndex] - bufferBefore;
+  const lastPosition = positions[lastIndex] + bufferAfter;
+  const firstIndexPadded = binarySearch(firstPosition, positions, {
+    atStart: true,
+    lastPosition: positions[positions.length - 1] + lastSize
+  });
+  const lastIndexPadded = binarySearch(lastPosition, positions);
+  return [clamp(firstIndexPadded, minFirstIndex, maxLastIndex), clamp(lastIndexPadded, minFirstIndex, maxLastIndex)];
 }
 export function areRenderContextsEqual(context1, context2) {
   if (context1 === context2) {
@@ -548,8 +636,69 @@ export function areRenderContextsEqual(context1, context2) {
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
 export function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
-  var _columnPositions$rend, _columnPositions$pinn;
   const factor = direction === 'ltr' ? 1 : -1;
-  const left = factor * ((_columnPositions$rend = columnPositions[renderContext.firstColumnIndex]) != null ? _columnPositions$rend : 0) - ((_columnPositions$pinn = columnPositions[pinnedLeftLength]) != null ? _columnPositions$pinn : 0);
+  const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
   return left;
+}
+function directionForDelta(dx, dy) {
+  if (dx === 0 && dy === 0) {
+    return ScrollDirection.NONE;
+  }
+  /* eslint-disable */
+  if (Math.abs(dy) >= Math.abs(dx)) {
+    if (dy > 0) {
+      return ScrollDirection.DOWN;
+    } else {
+      return ScrollDirection.UP;
+    }
+  } else {
+    if (dx > 0) {
+      return ScrollDirection.RIGHT;
+    } else {
+      return ScrollDirection.LEFT;
+    }
+  }
+  /* eslint-enable */
+}
+function bufferForDirection(direction, rowBufferPx, columnBufferPx, verticalBuffer, horizontalBuffer) {
+  switch (direction) {
+    case ScrollDirection.NONE:
+      return {
+        rowAfter: rowBufferPx,
+        rowBefore: rowBufferPx,
+        columnAfter: columnBufferPx,
+        columnBefore: columnBufferPx
+      };
+    case ScrollDirection.LEFT:
+      return {
+        rowAfter: 0,
+        rowBefore: 0,
+        columnAfter: 0,
+        columnBefore: horizontalBuffer
+      };
+    case ScrollDirection.RIGHT:
+      return {
+        rowAfter: 0,
+        rowBefore: 0,
+        columnAfter: horizontalBuffer,
+        columnBefore: 0
+      };
+    case ScrollDirection.UP:
+      return {
+        rowAfter: 0,
+        rowBefore: verticalBuffer,
+        columnAfter: 0,
+        columnBefore: 0
+      };
+    case ScrollDirection.DOWN:
+      return {
+        rowAfter: verticalBuffer,
+        rowBefore: 0,
+        columnAfter: 0,
+        columnBefore: 0
+      };
+    default:
+      // eslint unable to figure out enum exhaustiveness
+      throw new Error('unreachable');
+  }
 }

package/hooks/utils/useGridApiEventHandler.js

@@ -29,8 +29,7 @@ export function createUseGridApiEventHandler(registryContainer) {
     if (!subscription.current && handlerRef.current) {
       const enhancedHandler = (params, event, details) => {
         if (!event.defaultMuiPrevented) {
-          var _handlerRef$current;
-          (_handlerRef$current = handlerRef.current) == null || _handlerRef$current.call(handlerRef, params, event, details);
+          handlerRef.current?.(params, event, details);
         }
       };
       subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
@@ -41,8 +40,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       registryContainer.registry.register(objectRetainedByReact,
       // The callback below will be called once this reference stops being retained
       () => {
-        var _subscription$current;
-        (_subscription$current = subscription.current) == null || _subscription$current.call(subscription);
+        subscription.current?.();
         subscription.current = null;
         cleanupTokenRef.current = null;
       }, cleanupTokenRef.current);
@@ -58,8 +56,7 @@ export function createUseGridApiEventHandler(registryContainer) {
       if (!subscription.current && handlerRef.current) {
         const enhancedHandler = (params, event, details) => {
           if (!event.defaultMuiPrevented) {
-            var _handlerRef$current2;
-            (_handlerRef$current2 = handlerRef.current) == null || _handlerRef$current2.call(handlerRef, params, event, details);
+            handlerRef.current?.(params, event, details);
           }
         };
         subscription.current = apiRef.current.subscribeEvent(eventName, enhancedHandler, options);
@@ -71,8 +68,7 @@ export function createUseGridApiEventHandler(registryContainer) {
         cleanupTokenRef.current = null;
       }
       return () => {
-        var _subscription$current2;
-        (_subscription$current2 = subscription.current) == null || _subscription$current2.call(subscription);
+        subscription.current?.();
         subscription.current = null;
       };
     }, [apiRef, eventName, options]);
@@ -85,8 +81,7 @@ const registryContainer = {
 // TODO: move to @mui/x-data-grid/internals
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const unstable_resetCleanupTracking = () => {
-  var _registryContainer$re;
-  (_registryContainer$re = registryContainer.registry) == null || _registryContainer$re.reset();
+  registryContainer.registry?.reset();
   registryContainer.registry = null;
 };
 export const useGridApiEventHandler = createUseGridApiEventHandler(registryContainer);