@mui/x-data-grid 7.0.0-beta.7 → 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/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/node/internals/index.js

@@ -757,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) {

package/node/models/api/index.js

@@ -156,15 +156,4 @@ Object.keys(_gridScrollApi).forEach(function (key) {
       return _gridScrollApi[key];
     }
   });
-});
-var _gridVirtualizationApi = require("./gridVirtualizationApi");
-Object.keys(_gridVirtualizationApi).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridVirtualizationApi[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridVirtualizationApi[key];
-    }
-  });
 });

package/node/utils/createSelector.js

@@ -7,7 +7,7 @@ exports.createSelectorMemoized = exports.createSelector = void 0;
 var _reselect = require("reselect");
 var _warning = require("./warning");
 const cache = new WeakMap();
-const missingInstanceIdWarning = (0, _warning.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 = (0, _warning.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/node/utils/domUtils.js

@@ -205,7 +205,7 @@ 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.gridClasses.row}`);
 }
 function parseCellColIndex(col) {

package/node/utils/keyboardUtils.js

@@ -18,7 +18,7 @@ const isEscapeKey = key => key === 'Escape';
 exports.isEscapeKey = isEscapeKey;
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.0.0-beta.7",
+  "version": "7.0.0",
   "description": "The community edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -37,14 +37,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.0",
-    "@mui/system": "^5.15.9",
-    "@mui/utils": "^5.15.9",
+    "@mui/system": "^5.15.14",
+    "@mui/utils": "^5.15.14",
     "clsx": "^2.1.0",
     "prop-types": "^15.8.1",
     "reselect": "^4.1.8"
   },
   "peerDependencies": {
-    "@mui/material": "^5.15.0",
+    "@mui/material": "^5.15.14",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/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;
 }
@@ -16,7 +16,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   if (a && b && c && d && e && f) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam != null ? instanceIdParam : isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID;
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
       const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
       const va = a(state, instanceId);
       const vb = b(state, instanceId);
@@ -28,7 +28,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   } else if (a && b && c && d && e) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam != null ? instanceIdParam : isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID;
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
       const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
       const va = a(state, instanceId);
       const vb = b(state, instanceId);
@@ -39,7 +39,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   } else if (a && b && c && d) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam != null ? instanceIdParam : isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID;
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
       const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
       const va = a(state, instanceId);
       const vb = b(state, instanceId);
@@ -49,7 +49,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   } else if (a && b && c) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam != null ? instanceIdParam : isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID;
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
       const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
       const va = a(state, instanceId);
       const vb = b(state, instanceId);
@@ -58,7 +58,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
   } else if (a && b) {
     selector = (stateOrApiRef, instanceIdParam) => {
       const isAPIRef = checkIsAPIRef(stateOrApiRef);
-      const instanceId = instanceIdParam != null ? instanceIdParam : isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID;
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
       const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
       const va = a(state, instanceId);
       return b(va);
@@ -75,7 +75,7 @@ export const createSelector = (a, b, c, d, e, f, ...rest) => {
 export const createSelectorMemoized = (...args) => {
   const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
-    const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId != null ? instanceId : DEFAULT_INSTANCE_ID;
+    const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
     const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
     if (process.env.NODE_ENV !== 'production') {
       if (cacheKey.id === 'default') {
@@ -83,8 +83,8 @@ export const createSelectorMemoized = (...args) => {
       }
     }
     const cacheArgsInit = cache.get(cacheKey);
-    const cacheArgs = cacheArgsInit != null ? cacheArgsInit : new Map();
-    const cacheFn = cacheArgs == null ? void 0 : cacheArgs.get(args);
+    const cacheArgs = cacheArgsInit ?? new Map();
+    const cacheFn = cacheArgs?.get(args);
     if (cacheArgs && cacheFn) {
       // We pass the cache key because the called selector might have as
       // dependency another selector created with this `createSelector`.