@mui/x-data-grid 8.10.0 → 8.10.1

package/CHANGELOG.md

@@ -5,6 +5,102 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.1
+
+_Aug 15, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Y-axes can now be grouped by category when using `band` and `point` scales.
+- 📚 Documentation improvements
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.1`
+
+- [DataGrid] Fix scroll jumping (#19156) @romgrk
+- [DataGrid] Fix scroll restoration (#19182) @romgrk
+- [DataGrid] Fix "no row with id" error (#19193) @romgrk
+
+#### `@mui/x-data-grid-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@8.10.1`.
+
+#### `@mui/x-data-grid-premium@8.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@8.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-date-pickers@8.10.0`.
+
+### Charts
+
+- Axes can now be grouped by category when using `band` and `point` scales
+
+  <img width="643" height="455" alt="Bar chart with y-axis grouped per categories" src="https://github.com/user-attachments/assets/59044afe-bcc5-4152-8bf1-225db0635025" />
+
+#### `@mui/x-charts@8.10.1`
+
+- [charts] Allow y-axis to be grouped (#19081) @JCQuintas
+- [charts] Fix default axis highlight for axes without data attribute (#18985) @alexfauquette
+- [charts] Fix tooltip mark unexpected wrapping in mobile (#19122) @bernardobelchior
+- [charts] Prevent overflow on charts tooltip (#19123) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-charts@8.10.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-tree-view@8.10.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add all planned charts on the overview page (#19077) @prakhargupta1
+- [docs] Add future charts components link in the sidebar (#19140) @prakhargupta1
+- [docs] Fix Heatmap docs duplicate text (#19138) @JCQuintas
+- [docs] Remove preview from Toolbar & Funnel (#19131) @mnajdova
+- [docs] Reproduce npm sparkline (#19089) @alexfauquette
+
+### Core
+
+- [core] Fix licensing model name (#19025) @oliviertassinari
+- [core] Fix usage of `:catalog` for `@babel/runtime` (#19028) @oliviertassinari
+- [core] Refactor virtualizer API (#18995) @romgrk
+
+### Miscellaneous
+
+- [code-infra] Remove namespaces (#19071) @Janpot
+- [code-infra] Fix `fs-extra` removal from `formattedTSDemos` script (#19132) @bernardobelchior
+- [code-infra] Remove unused code and dependency (#19139) @bernardobelchior
+- [code-infra] Replace `fs-extra` with `node:fs` where possible (#19127) @bernardobelchior
+- [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
+- [internal] Fix writing style action name @oliviertassinari
+- [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari
+- [support-infra] Remove default issue label (#19104) @oliviertassinari
+
 ## 8.10.0
 
 _Aug 8, 2025_

package/components/GridRow.js

@@ -200,6 +200,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     }
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+
+  // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
+  if (!rowNode) {
+    return null;
+  }
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
@@ -211,11 +216,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  // XXX: fix this properly
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {

package/components/virtualization/GridVirtualScroller.js

@@ -90,7 +90,6 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
-    getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -119,11 +118,12 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })]
       }), getOverlay(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, {
+          role: "rowgroup",
           children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        }))
+        })
       })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, {

package/esm/DataGrid/index.js

@@ -1,2 +1,2 @@
-import "../index.css";
+import '../index.css';
 export * from "./DataGrid.js";

package/esm/components/GridRow.js

@@ -193,6 +193,11 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+
+  // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
+  if (!rowNode) {
+    return null;
+  }
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
@@ -204,11 +209,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  // XXX: fix this properly
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {

package/esm/components/virtualization/GridVirtualScroller.js

@@ -82,7 +82,6 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
-    getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -111,11 +110,12 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })]
       }), getOverlay(), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
-        children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
+        children: /*#__PURE__*/_jsxs(RenderZone, {
+          role: "rowgroup",
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        }))
+        })
       })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {

package/esm/hooks/core/useGridVirtualizer.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
 import { roundToDecimalPlaces } from '@mui/x-internals/math';
+import { lruMemoize } from '@mui/x-internals/lruMemoize';
 import { useStoreEffect } from '@mui/x-internals/store';
-import { useVirtualizer } from '@mui/x-virtualizer';
+import { useVirtualizer, Dimensions } from '@mui/x-virtualizer';
 import { useFirstRender } from "../utils/useFirstRender.js";
 import { createSelector } from "../../utils/createSelector.js";
 import { useGridSelector } from "../utils/useGridSelector.js";
-import { gridContentHeightSelector, gridHasFillerSelector, gridVerticalScrollbarWidthSelector } from "../features/dimensions/gridDimensionsSelectors.js";
+import { gridHasFillerSelector, gridVerticalScrollbarWidthSelector } from "../features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../features/density/index.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../features/columns/gridColumnsSelector.js";
 import { gridPinnedRowsSelector, gridRowCountSelector } from "../features/rows/gridRowsSelector.js";
@@ -31,6 +33,18 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
   return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 
+/** Translates virtualizer state to grid state */
+const addGridDimensionsCreator = () => lruMemoize((dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight) => {
+  return _extends({}, dimensions, {
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    headersTotalHeight
+  });
+}, {
+  maxSize: 1
+});
+
 /**
  * Virtualizer setup
  */
@@ -46,9 +60,6 @@ export function useGridVirtualizer(apiRef, rootProps) {
   const isRowSelected = id => rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
   const currentPage = useGridVisibleRows(apiRef);
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
-
-  /* TODO: extract dimensions code */
-  const contentHeight = useGridSelector(apiRef, gridContentHeightSelector);
   const verticalScrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const hasFiller = useGridSelector(apiRef, gridHasFillerSelector);
   const {
@@ -67,16 +78,17 @@ export function useGridVirtualizer(apiRef, rootProps) {
   const headersTotalHeight = getTotalHeaderHeight(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
-  const dimensions = {
+  const dimensionsParams = {
     rowHeight,
     headerHeight,
-    groupHeaderHeight,
-    headerFilterHeight,
     columnsTotalWidth,
-    headersTotalHeight,
     leftPinnedWidth,
-    rightPinnedWidth
+    rightPinnedWidth,
+    topPinnedHeight: headersTotalHeight,
+    bottomPinnedHeight: 0,
+    scrollbarSize: rootProps.scrollbarSize
   };
+  const addGridDimensions = useLazyRef(addGridDimensionsCreator).current;
 
   // </DIMENSIONS>
 
@@ -93,32 +105,42 @@ export function useGridVirtualizer(apiRef, rootProps) {
 
   const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   const virtualizer = useVirtualizer({
-    scrollbarSize: rootProps.scrollbarSize,
-    dimensions,
+    refs: {
+      container: apiRef.current.mainElementRef,
+      scroller: apiRef.current.virtualScrollerRef,
+      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+    },
+    dimensions: dimensionsParams,
+    virtualization: {
+      isRtl,
+      rowBufferPx: rootProps.rowBufferPx,
+      columnBufferPx: rootProps.columnBufferPx
+    },
+    colspan: {
+      enabled: hasColSpan,
+      getColspan: (rowId, column) => {
+        if (typeof column.colSpan === 'function') {
+          const row = apiRef.current.getRow(rowId);
+          const value = apiRef.current.getRowValue(row, column);
+          return column.colSpan(value, row, column, apiRef) ?? 0;
+        }
+        return column.colSpan ?? 1;
+      }
+    },
     initialState: {
       scroll: rootProps.initialState?.scroll,
-      dimensions: apiRef.current.state.dimensions,
       rowSpanning: apiRef.current.state.rowSpanning,
       virtualization: apiRef.current.state.virtualization
     },
-    isRtl,
     rows: currentPage.rows,
     range: currentPage.range,
-    rowIdToIndexMap: currentPage.rowIdToIndexMap,
     rowCount,
     columns: visibleColumns,
     pinnedRows,
     pinnedColumns,
-    refs: {
-      container: apiRef.current.mainElementRef,
-      scroller: apiRef.current.virtualScrollerRef,
-      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
-      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
-    },
-    hasColSpan,
-    contentHeight,
-    minimalContentHeight,
     autoHeight,
+    minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;
@@ -130,14 +152,20 @@ export function useGridVirtualizer(apiRef, rootProps) {
     getEstimatedRowHeight: React.useMemo(() => getEstimatedRowHeight ? rowEntry => getEstimatedRowHeight(_extends({}, rowEntry, {
       densityFactor: density
     })) : undefined, [getEstimatedRowHeight, density]),
-    getRowSpacing: React.useMemo(() => getRowSpacing ? (rowEntry, visibility) => getRowSpacing(_extends({}, rowEntry, visibility, {
-      indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
-    })) : undefined, [apiRef, getRowSpacing]),
+    getRowSpacing: React.useMemo(() => getRowSpacing ? rowEntry => {
+      const indexRelativeToCurrentPage = currentPage.rowIdToIndexMap.get(rowEntry.id) ?? -1;
+      const visibility = {
+        isFirstVisible: indexRelativeToCurrentPage === 0,
+        isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+        indexRelativeToCurrentPage
+      };
+      return getRowSpacing(_extends({}, rowEntry, visibility, {
+        indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
+      }));
+    } : undefined, [apiRef, getRowSpacing, currentPage.rows, currentPage.rowIdToIndexMap]),
     applyRowHeight: useEventCallback((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
     focusedVirtualCell: useEventCallback(() => focusedVirtualCell),
-    rowBufferPx: rootProps.rowBufferPx,
-    columnBufferPx: rootProps.columnBufferPx,
     resizeThrottleMs: rootProps.resizeThrottleMs,
     onResize: useEventCallback(size => apiRef.current.publishEvent('resize', size)),
     onWheel: useEventCallback(event => {
@@ -157,14 +185,6 @@ export function useGridVirtualizer(apiRef, rootProps) {
       });
     },
     scrollReset,
-    getColspan: (rowId, column) => {
-      if (typeof column.colSpan === 'function') {
-        const row = apiRef.current.getRow(rowId);
-        const value = apiRef.current.getRowValue(row, column);
-        return column.colSpan(value, row, column, apiRef) ?? 0;
-      }
-      return column.colSpan ?? 0;
-    },
     renderRow: params => /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
       row: params.model,
       rowId: params.id,
@@ -174,7 +194,7 @@ export function useGridVirtualizer(apiRef, rootProps) {
       columnsTotalWidth: columnsTotalWidth,
       rowHeight: params.baseRowHeight,
       pinnedColumns: pinnedColumns,
-      visibleColumns: params.columns,
+      visibleColumns: visibleColumns,
       firstColumnIndex: params.firstColumnIndex,
       lastColumnIndex: params.lastColumnIndex,
       focusedColumnIndex: params.focusedColumnIndex,
@@ -196,16 +216,16 @@ export function useGridVirtualizer(apiRef, rootProps) {
   //
   // TODO(v9): Remove this
   useFirstRender(() => {
-    apiRef.current.store.state.dimensions = virtualizer.store.state.dimensions;
+    apiRef.current.store.state.dimensions = addGridDimensions(virtualizer.store.state.dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight);
     apiRef.current.store.state.rowsMeta = virtualizer.store.state.rowsMeta;
     apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
   });
+  useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (_, dimensions) => {
+    apiRef.current.setState(gridState => _extends({}, gridState, {
+      dimensions: addGridDimensions(dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight)
+    }));
+  });
   useStoreEffect(virtualizer.store, identity, (_, state) => {
-    if (state.dimensions !== apiRef.current.state.dimensions) {
-      apiRef.current.setState(gridState => _extends({}, gridState, {
-        dimensions: state.dimensions
-      }));
-    }
     if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
       apiRef.current.setState(gridState => _extends({}, gridState, {
         rowsMeta: state.rowsMeta

package/esm/hooks/features/dataSource/cache.js

@@ -6,9 +6,6 @@ export class GridDataSourceCacheDefault {
     ttl = 300_000,
     getKey = getKeyDefault
   }) {
-    this.cache = void 0;
-    this.ttl = void 0;
-    this.getKey = void 0;
     this.cache = {};
     this.ttl = ttl;
     this.getKey = getKey;

package/esm/hooks/features/dataSource/gridDataSourceError.js

@@ -1,30 +1,30 @@
 export class GridGetRowsError extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+
+  /**
+   * The original error that caused this error
+   */
+
   constructor(options) {
     super(options.message);
-    /**
-     * The parameters used in the failed request
-     */
-    this.params = void 0;
-    /**
-     * The original error that caused this error
-     */
-    this.cause = void 0;
     this.name = 'GridGetRowsError';
     this.params = options.params;
     this.cause = options.cause;
   }
 }
 export class GridUpdateRowError extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+
+  /**
+   * The original error that caused this error
+   */
+
   constructor(options) {
     super(options.message);
-    /**
-     * The parameters used in the failed request
-     */
-    this.params = void 0;
-    /**
-     * The original error that caused this error
-     */
-    this.cause = void 0;
     this.name = 'GridUpdateRowError';
     this.params = options.params;
     this.cause = options.cause;

package/esm/hooks/features/dataSource/utils.js

@@ -18,57 +18,56 @@ export class CacheChunkManager {
    * Has no effect if cursor pagination is used.
    */
   constructor(chunkSize) {
-    this.chunkSize = void 0;
-    this.getCacheKeys = key => {
-      if (this.chunkSize < 1 || typeof key.start !== 'number') {
-        return [key];
-      }
-
-      // split the range into chunks
-      const chunkedKeys = [];
-      for (let i = key.start; i <= key.end; i += this.chunkSize) {
-        const end = Math.min(i + this.chunkSize - 1, key.end);
-        chunkedKeys.push(_extends({}, key, {
-          start: i,
-          end
-        }));
-      }
-      return chunkedKeys;
-    };
-    this.splitResponse = (key, response) => {
-      const cacheKeys = this.getCacheKeys(key);
-      if (cacheKeys.length === 1) {
-        return new Map([[key, response]]);
-      }
-      const responses = new Map();
-      cacheKeys.forEach(chunkKey => {
-        const isLastChunk = chunkKey.end === key.end;
-        const responseSlice = _extends({}, response, {
-          pageInfo: _extends({}, response.pageInfo, {
-            // If the original response had page info, update that information for all but last chunk and keep the original value for the last chunk
-            hasNextPage: response.pageInfo?.hasNextPage !== undefined && !isLastChunk ? true : response.pageInfo?.hasNextPage,
-            nextCursor: response.pageInfo?.nextCursor !== undefined && !isLastChunk ? response.rows[chunkKey.end + 1].id : response.pageInfo?.nextCursor
-          }),
-          rows: typeof chunkKey.start !== 'number' || typeof key.start !== 'number' ? response.rows : response.rows.slice(chunkKey.start - key.start, chunkKey.end - key.start + 1)
-        });
-        responses.set(chunkKey, responseSlice);
-      });
-      return responses;
-    };
     this.chunkSize = chunkSize;
   }
-}
-CacheChunkManager.mergeResponses = responses => {
-  if (responses.length === 1) {
-    return responses[0];
-  }
-  return responses.reduce((acc, response) => ({
-    rows: [...acc.rows, ...response.rows],
-    rowCount: response.rowCount,
-    pageInfo: response.pageInfo
-  }), {
-    rows: [],
-    rowCount: 0,
-    pageInfo: {}
-  });
-};
+  getCacheKeys = key => {
+    if (this.chunkSize < 1 || typeof key.start !== 'number') {
+      return [key];
+    }
+
+    // split the range into chunks
+    const chunkedKeys = [];
+    for (let i = key.start; i <= key.end; i += this.chunkSize) {
+      const end = Math.min(i + this.chunkSize - 1, key.end);
+      chunkedKeys.push(_extends({}, key, {
+        start: i,
+        end
+      }));
+    }
+    return chunkedKeys;
+  };
+  splitResponse = (key, response) => {
+    const cacheKeys = this.getCacheKeys(key);
+    if (cacheKeys.length === 1) {
+      return new Map([[key, response]]);
+    }
+    const responses = new Map();
+    cacheKeys.forEach(chunkKey => {
+      const isLastChunk = chunkKey.end === key.end;
+      const responseSlice = _extends({}, response, {
+        pageInfo: _extends({}, response.pageInfo, {
+          // If the original response had page info, update that information for all but last chunk and keep the original value for the last chunk
+          hasNextPage: response.pageInfo?.hasNextPage !== undefined && !isLastChunk ? true : response.pageInfo?.hasNextPage,
+          nextCursor: response.pageInfo?.nextCursor !== undefined && !isLastChunk ? response.rows[chunkKey.end + 1].id : response.pageInfo?.nextCursor
+        }),
+        rows: typeof chunkKey.start !== 'number' || typeof key.start !== 'number' ? response.rows : response.rows.slice(chunkKey.start - key.start, chunkKey.end - key.start + 1)
+      });
+      responses.set(chunkKey, responseSlice);
+    });
+    return responses;
+  };
+  static mergeResponses = responses => {
+    if (responses.length === 1) {
+      return responses[0];
+    }
+    return responses.reduce((acc, response) => ({
+      rows: [...acc.rows, ...response.rows],
+      rowCount: response.rowCount,
+      pageInfo: response.pageInfo
+    }), {
+      rows: [],
+      rowCount: 0,
+      pageInfo: {}
+    });
+  };
+}

package/esm/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -1,62 +1,5 @@
-import type { ElementSize } from "../../../models/elementSize.js";
-export interface GridDimensions {
-  /**
-   * Indicates that the dimensions have been initialized.
-   */
-  isReady: boolean;
-  /**
-   * The root container size.
-   */
-  root: ElementSize;
-  /**
-   * The viewport size including scrollbars.
-   */
-  viewportOuterSize: ElementSize;
-  /**
-   * The viewport size not including scrollbars.
-   */
-  viewportInnerSize: ElementSize;
-  /**
-   * The size of the main content (unpinned rows & columns).
-   */
-  contentSize: ElementSize;
-  /**
-   * The minimum size to display the grid, including all pinned sections and headers.
-   */
-  minimumSize: ElementSize;
-  /**
-   * Indicates if a scroll is currently needed to go from the beginning of the first column to the end of the last column.
-   */
-  hasScrollX: boolean;
-  /**
-   * Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row.
-   */
-  hasScrollY: boolean;
-  /**
-   * Size of the scrollbar used to scroll the rows in pixel.
-   * It is defined even when the scrollbar is currently not needed.
-   */
-  scrollbarSize: number;
-  /**
-   * Width of a row.
-   */
-  rowWidth: number;
-  /**
-   * Height of a row.
-   */
-  rowHeight: number;
-  /**
-   * Size of all the visible columns.
-   */
-  columnsTotalWidth: number;
-  /**
-   * Size of left pinned columns.
-   */
-  leftPinnedWidth: number;
-  /**
-   * Size of right pinned columns.
-   */
-  rightPinnedWidth: number;
+import type { DimensionsState } from '@mui/x-virtualizer/models';
+export interface GridDimensions extends DimensionsState {
   /**
    * Height of one column header.
    */
@@ -73,14 +16,6 @@ export interface GridDimensions {
    * Height of all the column headers.
    */
   headersTotalHeight: number;
-  /**
-   * Size of the top container.
-   */
-  topContainerHeight: number;
-  /**
-   * Size of the bottom container.
-   */
-  bottomContainerHeight: number;
 }
 export interface GridDimensionsApi {
   /**