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

package/modern/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) {
@@ -149,8 +210,7 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
-    const columnPositions = gridColumnPositionsSelector(apiRef);
-    const currentRenderContext = 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,8 +228,8 @@ export const useGridVirtualScroller = () => {
         break;
     }
     const rowModels = params.rows ?? currentPage.rows;
-    const firstRowToRender = currentRenderContext.firstRowIndex;
-    const lastRowToRender = Math.min(currentRenderContext.lastRowIndex, rowModels.length);
+    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,6 +244,7 @@ export const useGridVirtualScroller = () => {
     }
     const rows = [];
     const rowProps = rootProps.slotProps?.row;
+    const columnPositions = gridColumnPositionsSelector(apiRef);
     rowIndexes.forEach(rowIndexInPage => {
       const {
         id,
@@ -248,6 +309,10 @@ 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?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
@@ -319,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
     });
   });
@@ -369,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 = {
@@ -406,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;
@@ -417,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];
@@ -438,10 +514,10 @@ 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) {
+function getNearestIndexToRender(inputs, offset, options) {
   const lastMeasuredIndexRelativeToAllRows = inputs.apiRef.current.getLastMeasuredRowIndex();
   let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
   if (inputs.range?.lastRowIndex && !allRowsMeasured) {
@@ -452,14 +528,14 @@ function getNearestIndexToRender(inputs, offset) {
   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);
 }
 
 /**
@@ -467,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,
@@ -520,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) {
@@ -547,4 +639,66 @@ export function computeOffsetLeft(columnPositions, renderContext, direction, pin
   const factor = direction === 'ltr' ? 1 : -1;
   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/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.7
+ * @mui/x-data-grid v7.0.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -62,6 +62,7 @@ export * from '../utils/fastMemo';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export * from '../utils/getPublicApiRef';
+export * from '../utils/cellBorderUtils';
 export { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 export * from '../hooks/utils';
 export { serializeCellValue } from '../hooks/features/export/serializers/csvSerializer';

package/modern/models/api/index.js

@@ -12,5 +12,4 @@ export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
-export * from './gridVirtualizationApi';
 export {};

package/modern/utils/createSelector.js

@@ -1,7 +1,7 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { buildWarning } from './warning';
 const cache = new WeakMap();
-const missingInstanceIdWarning = buildWarning(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
+const missingInstanceIdWarning = buildWarning(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
 }

package/modern/utils/domUtils.js

@@ -181,7 +181,7 @@ export function findGridCells(api, field) {
 }
 function queryRows(api) {
   return api.virtualScrollerRef.current.querySelectorAll(
-  // Use > to ignore rows from nested data grids (e.g. in detail panel)
+  // Use > to ignore rows from nested data grids (for example in detail panel)
   `:scope > div > div > .${gridClasses.row}`);
 }
 function parseCellColIndex(col) {

package/modern/utils/keyboardUtils.js

@@ -8,7 +8,7 @@ export const isEscapeKey = key => key === 'Escape';
  */
 export const isTabKey = key => key === 'Tab';
 
-// Non printable keys have a name, e.g. "ArrowRight", see the whole list:
+// Non printable keys have a name, for example "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 // So event.key.length === 1 is often enough.
 //

package/node/DataGrid/DataGrid.js

@@ -108,10 +108,10 @@ DataGridRaw.propTypes = {
    */
   clipboardCopyCellDelimiter: _propTypes.default.string,
   /**
-   * Number of extra columns to be rendered before/after the visible slice.
-   * @default 3
+   * Column region in pixels to render before/after the viewport
+   * @default 150
    */
-  columnBuffer: _propTypes.default.number,
+  columnBufferPx: _propTypes.default.number,
   columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -122,11 +122,6 @@ DataGridRaw.propTypes = {
    * Set of columns of type [[GridColDef]][].
    */
   columns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  columnThreshold: _propTypes.default.number,
   /**
    * Set the column visibility model of the Data Grid.
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
@@ -474,6 +469,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnWidthChange: _propTypes.default.func,
+  /**
+   * Callback fired when the density changes.
+   * @param {GridDensity} density New density value.
+   */
+  onDensityChange: _propTypes.default.func,
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -616,10 +616,10 @@ DataGridRaw.propTypes = {
    */
   processRowUpdate: _propTypes.default.func,
   /**
-   * Number of extra rows to be rendered before/after the visible slice.
-   * @default 3
+   * Row region in pixels to render before/after the viewport
+   * @default 150
    */
-  rowBuffer: _propTypes.default.number,
+  rowBufferPx: _propTypes.default.number,
   /**
    * Set the total number of rows, if it is different from the length of the value `rows` prop.
    * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
@@ -643,8 +643,9 @@ DataGridRaw.propTypes = {
   rowPositionsDebounceMs: _propTypes.default.number,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  rows: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * If `false`, the row selection mode is disabled.
    * @default true
@@ -659,11 +660,6 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
-  /**
-   * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  rowThreshold: _propTypes.default.number,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */

package/node/DataGrid/useDataGridProps.js

@@ -34,12 +34,10 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   autoPageSize: false,
   checkboxSelection: false,
   checkboxSelectionVisibleOnly: false,
-  columnBuffer: 3,
-  rowBuffer: 3,
-  columnThreshold: 3,
-  rowThreshold: 3,
+  columnBufferPx: 150,
+  rowBufferPx: 150,
+  rows: [],
   rowSelection: true,
-  density: 'standard',
   disableColumnFilter: false,
   disableColumnMenu: false,
   disableColumnSelector: false,

package/node/components/GridPagination.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridPagination = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TablePagination = _interopRequireWildcard(require("@mui/material/TablePagination"));
 var _styles = require("@mui/material/styles");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
@@ -88,4 +89,11 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange
   }, apiRef.current.getLocaleText('MuiTablePagination'), props));
-});
+});
+process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  component: _propTypes.default.elementType
+} : void 0;

package/node/components/cell/GridActionsCell.js

@@ -137,7 +137,7 @@ function GridActionsCell(props) {
     }
     if (newIndex !== focusedButtonIndex) {
       event.preventDefault(); // Prevent scrolling
-      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+      event.stopPropagation(); // Don't stop propagation for other keys, for example ArrowUp
       setFocusedButtonIndex(newIndex);
     }
   };

package/node/components/cell/GridActionsCellItem.js

@@ -70,6 +70,10 @@ process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: _propTypes.default.elementType,
   icon: _propTypes.default.element,
   label: _propTypes.default.string.isRequired,
   showInMenu: _propTypes.default.bool