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

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

@@ -12,6 +12,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _utils = require("@mui/utils");
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _styles = require("@mui/material/styles");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
@@ -34,13 +36,31 @@ var _useGridVirtualization = require("./useGridVirtualization");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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
+};
 const EMPTY_DETAIL_PANELS = exports.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;
 const useGridVirtualScroller = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
-  const enabled = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationEnabledSelector);
-  const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector);
+  const enabled = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationEnabledSelector) && !isJSDOM;
+  const enabledForColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationColumnEnabledSelector) && !isJSDOM;
   const dimensions = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
   const outerSize = dimensions.viewportOuterSize;
   const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
@@ -62,19 +82,34 @@ const useGridVirtualScroller = () => {
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
   (0, _useResizeObserver.useResizeObserver)(mainRef, () => apiRef.current.resize());
-  const previousContext = React.useRef(_useGridVirtualization.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(_useGridVirtualization.EMPTY_RENDER_CONTEXT);
   const renderContext = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridRenderContextSelector);
-  const scrollPosition = React.useRef({
-    top: 0,
-    left: 0
-  }).current;
-  const prevTotalWidth = React.useRef(columnsTotalWidth);
+  const scrollTimeout = (0, _useTimeout.default)();
+  const frozenContext = React.useRef(undefined);
+  const scrollCache = (0, _useLazyRef.default)(() => 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;
     }
@@ -94,41 +129,67 @@ 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 = (0, _utils.unstable_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) {
@@ -161,8 +222,7 @@ const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
-    const columnPositions = (0, _gridColumnsSelector.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;
@@ -180,8 +240,8 @@ 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 ? (0, _utils3.range)(0, params.rows.length) : (0, _utils3.range)(firstRowToRender, lastRowToRender);
     let virtualRowIndex = -1;
     if (!isPinnedSection && focusedCell.rowIndex !== -1) {
@@ -196,6 +256,7 @@ const useGridVirtualScroller = () => {
     }
     const rows = [];
     const rowProps = rootProps.slotProps?.row;
+    const columnPositions = (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef);
     rowIndexes.forEach(rowIndexInPage => {
       const {
         id,
@@ -260,6 +321,10 @@ 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__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
@@ -331,11 +396,11 @@ const useGridVirtualScroller = () => {
   }, [enabled, gridRootRef, scrollerRef]);
   (0, _useRunOnce.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
     });
   });
@@ -382,26 +447,31 @@ exports.useGridVirtualScroller = useGridVirtualScroller;
 function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef.current.state);
   const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);
+  const visibleColumns = (0, _gridColumnsSelector.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: (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state),
     columnPositions: (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef),
     rows: currentPage.rows,
     range: currentPage.range,
     pinnedColumns: (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef),
-    visibleColumns: (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef)
+    visibleColumns
   };
 }
-function computeRenderContext(inputs, scrollPosition) {
+function computeRenderContext(inputs, scrollPosition, scrollCache) {
   let renderContext;
   if (!inputs.enabled) {
     renderContext = {
@@ -419,7 +489,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;
@@ -430,7 +503,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];
@@ -451,10 +527,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) {
@@ -465,14 +541,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);
 }
 
 /**
@@ -480,27 +556,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 = (0, _gridColumnsUtils.getFirstNonSpannedColumnToRender)({
     firstColumnToRender: initialFirstColumnToRender,
-    apiRef,
+    apiRef: inputs.apiRef,
     firstRowToRender,
     lastRowToRender,
-    visibleRows: rows
+    visibleRows: inputs.rows
   });
   return {
     firstRowIndex: firstRowToRender,
@@ -533,22 +615,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 [(0, _utils3.clamp)(firstIndex - buffer, minFirstIndex, maxLastIndex), (0, _utils3.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 [(0, _utils3.clamp)(firstIndexPadded, minFirstIndex, maxLastIndex), (0, _utils3.clamp)(lastIndexPadded, minFirstIndex, maxLastIndex)];
 }
 function areRenderContextsEqual(context1, context2) {
   if (context1 === context2) {
@@ -560,4 +652,66 @@ function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeft
   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/node/hooks/utils/useLazyRef.js

@@ -1,19 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLazyRef = useLazyRef;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const UNINITIALIZED = {};
-
-// See https://github.com/facebook/react/issues/14490 for when to use this.
-function useLazyRef(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
+Object.defineProperty(exports, "useLazyRef", {
+  enumerable: true,
+  get: function () {
+    return _useLazyRef.default;
   }
-  return ref;
-}
+});
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));

package/node/hooks/utils/useOnMount.js

@@ -1,15 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useOnMount = useOnMount;
-var React = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const EMPTY = [];
-function useOnMount(fn) {
-  /* eslint-disable react-hooks/exhaustive-deps */
-  React.useEffect(fn, EMPTY);
-  /* eslint-enable react-hooks/exhaustive-deps */
-}
+Object.defineProperty(exports, "useOnMount", {
+  enumerable: true,
+  get: function () {
+    return _useOnMount.default;
+  }
+});
+var _useOnMount = _interopRequireDefault(require("@mui/utils/useOnMount"));

package/node/hooks/utils/useTimeout.js

@@ -1,43 +1,13 @@
 "use strict";
-'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Timeout = void 0;
-exports.useTimeout = useTimeout;
-var _useLazyRef = require("./useLazyRef");
-var _useOnMount = require("./useOnMount");
-class Timeout {
-  constructor() {
-    this.currentId = null;
-    this.clear = () => {
-      if (this.currentId !== null) {
-        clearTimeout(this.currentId);
-        this.currentId = null;
-      }
-    };
-    this.disposeEffect = () => {
-      return this.clear;
-    };
+Object.defineProperty(exports, "useTimeout", {
+  enumerable: true,
+  get: function () {
+    return _useTimeout.default;
   }
-  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);
-  }
-}
-exports.Timeout = Timeout;
-function useTimeout() {
-  const timeout = (0, _useLazyRef.useLazyRef)(Timeout.create).current;
-  (0, _useOnMount.useOnMount)(timeout.disposeEffect);
-  return timeout;
-}
+});
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));

package/node/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/node/internals/index.js

@@ -9,7 +9,6 @@ var _exportNames = {
   GridVirtualScrollerRenderZone: true,
   GridHeaders: true,
   GridBaseColumnHeaders: true,
-  GridColumnHeadersInner: true,
   DATA_GRID_DEFAULT_SLOTS_COMPONENTS: true,
   getGridFilter: true,
   useGridRegisterPipeProcessor: true,
@@ -72,6 +71,8 @@ var _exportNames = {
   useGridStatePersistence: true,
   useGridVirtualScroller: true,
   EMPTY_DETAIL_PANELS: true,
+  useGridColumnResize: true,
+  columnResizeStateInitializer: true,
   useTimeout: true,
   useGridVisibleRows: true,
   getVisibleRows: true,
@@ -120,12 +121,6 @@ Object.defineProperty(exports, "GridBaseColumnHeaders", {
     return _GridBaseColumnHeaders.GridBaseColumnHeaders;
   }
 });
-Object.defineProperty(exports, "GridColumnHeadersInner", {
-  enumerable: true,
-  get: function () {
-    return _GridColumnHeadersInner.GridColumnHeadersInner;
-  }
-});
 Object.defineProperty(exports, "GridHeaders", {
   enumerable: true,
   get: function () {
@@ -180,6 +175,12 @@ Object.defineProperty(exports, "columnMenuStateInitializer", {
     return _useGridColumnMenu.columnMenuStateInitializer;
   }
 });
+Object.defineProperty(exports, "columnResizeStateInitializer", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnResize.columnResizeStateInitializer;
+  }
+});
 Object.defineProperty(exports, "columnsStateInitializer", {
   enumerable: true,
   get: function () {
@@ -414,6 +415,12 @@ Object.defineProperty(exports, "useGridColumnMenu", {
     return _useGridColumnMenu.useGridColumnMenu;
   }
 });
+Object.defineProperty(exports, "useGridColumnResize", {
+  enumerable: true,
+  get: function () {
+    return _useGridColumnResize.useGridColumnResize;
+  }
+});
 Object.defineProperty(exports, "useGridColumnSpanning", {
   enumerable: true,
   get: function () {
@@ -605,7 +612,6 @@ var _GridVirtualScrollerContent = require("../components/virtualization/GridVirt
 var _GridVirtualScrollerRenderZone = require("../components/virtualization/GridVirtualScrollerRenderZone");
 var _GridHeaders = require("../components/GridHeaders");
 var _GridBaseColumnHeaders = require("../components/columnHeaders/GridBaseColumnHeaders");
-var _GridColumnHeadersInner = require("../components/columnHeaders/GridColumnHeadersInner");
 var _defaultGridSlotsComponents = require("../constants/defaultGridSlotsComponents");
 var _GridFilterPanel = require("../components/panel/filterPanel/GridFilterPanel");
 var _pipeProcessing = require("../hooks/core/pipeProcessing");
@@ -693,6 +699,7 @@ Object.keys(_virtualization).forEach(function (key) {
     }
   });
 });
+var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _useGridVisibleRows = require("../hooks/utils/useGridVisibleRows");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");
@@ -750,6 +757,18 @@ Object.keys(_getPublicApiRef).forEach(function (key) {
     }
   });
 });
+var _cellBorderUtils = require("../utils/cellBorderUtils");
+Object.keys(_cellBorderUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _cellBorderUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cellBorderUtils[key];
+    }
+  });
+});
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _utils3 = require("../hooks/utils");
 Object.keys(_utils3).forEach(function (key) {