@mui/x-data-grid 7.0.0-beta.6 → 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/hooks/utils/useLazyRef.js

@@ -1,11 +1 @@
-import * as React from 'react';
-const UNINITIALIZED = {};
-
-// See https://github.com/facebook/react/issues/14490 for when to use this.
-export function useLazyRef(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
-  }
-  return ref;
-}
+export { default as useLazyRef } from '@mui/utils/useLazyRef';

package/modern/hooks/utils/useOnMount.js

@@ -1,7 +1 @@
-import * as React from 'react';
-const EMPTY = [];
-export function useOnMount(fn) {
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(fn, EMPTY);
-  /* eslint-enable react-hooks/exhaustive-deps */
-}
+export { default as useOnMount } from '@mui/utils/useOnMount';

package/modern/hooks/utils/useTimeout.js

@@ -1,36 +1 @@
-'use client';
-
-import { useLazyRef } from './useLazyRef';
-import { useOnMount } from './useOnMount';
-export class Timeout {
-  constructor() {
-    this.currentId = null;
-    this.clear = () => {
-      if (this.currentId !== null) {
-        clearTimeout(this.currentId);
-        this.currentId = null;
-      }
-    };
-    this.disposeEffect = () => {
-      return this.clear;
-    };
-  }
-  static create() {
-    return new Timeout();
-  }
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setTimeout(() => {
-      this.currentId = null;
-      fn();
-    }, delay);
-  }
-}
-export function useTimeout() {
-  const timeout = useLazyRef(Timeout.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
+export { default as useTimeout } from '@mui/utils/useTimeout';

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.0.0-beta.6
+ * @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

@@ -3,7 +3,6 @@ export { GridVirtualScrollerContent } from '../components/virtualization/GridVir
 export { GridVirtualScrollerRenderZone } from '../components/virtualization/GridVirtualScrollerRenderZone';
 export { GridHeaders } from '../components/GridHeaders';
 export { GridBaseColumnHeaders } from '../components/columnHeaders/GridBaseColumnHeaders';
-export { GridColumnHeadersInner } from '../components/columnHeaders/GridColumnHeadersInner';
 export { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
 export { getGridFilter } from '../components/panel/filterPanel/GridFilterPanel';
 export { useGridRegisterPipeProcessor } from '../hooks/core/pipeProcessing';
@@ -49,6 +48,7 @@ export { dimensionsStateInitializer, useGridDimensions } from '../hooks/features
 export { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
 export { useGridVirtualScroller, EMPTY_DETAIL_PANELS } from '../hooks/features/virtualization/useGridVirtualScroller';
 export * from '../hooks/features/virtualization';
+export { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
@@ -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/internals/utils/getPinnedCellOffset.js

@@ -0,0 +1,17 @@
+import { GridPinnedColumnPosition } from '../../hooks/features/columns';
+export const getPinnedCellOffset = (pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions) => {
+  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+  let pinnedOffset;
+  switch (pinnedPosition) {
+    case GridPinnedColumnPosition.LEFT:
+      pinnedOffset = columnPositions[columnIndex];
+      break;
+    case GridPinnedColumnPosition.RIGHT:
+      pinnedOffset = dimensions.columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth;
+      break;
+    default:
+      pinnedOffset = 0;
+      break;
+  }
+  return pinnedOffset;
+};