@mui/x-data-grid 8.10.0 → 8.10.2

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 {
   /**

package/esm/hooks/features/dimensions/useGridDimensions.js

@@ -3,7 +3,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useStoreEffect } from '@mui/x-internals/store';
-import { Dimensions } from '@mui/x-virtualizer';
 import { useGridEventPriority } from "../../utils/useGridEvent.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { createSelector } from "../../../utils/createSelector.js";
@@ -57,8 +56,6 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
   return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 export function useGridDimensions(apiRef, props) {
-  const logger = useGridLogger(apiRef, 'useResizeContainer');
-  const errorShown = React.useRef(false);
   const virtualizer = apiRef.current.virtualizer;
   const updateDimensions = virtualizer.api.updateDimensions;
   const getViewportPageSize = virtualizer.api.getViewportPageSize;
@@ -75,20 +72,28 @@ export function useGridDimensions(apiRef, props) {
   const handleRootMount = root => {
     setCSSVariables(root, gridDimensionsSelector(apiRef));
   };
-  const handleResize = size => {
-    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
-      logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
-      errorShown.current = true;
-    }
-    if (size.width === 0 && !errorShown.current && !isJSDOM) {
-      logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
-      errorShown.current = true;
-    }
-  };
   useGridEventPriority(apiRef, 'rootMount', handleRootMount);
-  useGridEventPriority(apiRef, 'resize', handleResize);
   useGridEventPriority(apiRef, 'debouncedResize', props.onResize);
-  useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (previous, next) => {
+  if (process.env.NODE_ENV !== 'production') {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const logger = useGridLogger(apiRef, 'useResizeContainer');
+    const errorShown = React.useRef(false);
+    useGridEventPriority(apiRef, 'resize', size => {
+      if (!getRootDimensions().isReady) {
+        return;
+      }
+      if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+        logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+        errorShown.current = true;
+      }
+      if (size.width === 0 && !errorShown.current && !isJSDOM) {
+        logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+        errorShown.current = true;
+      }
+    });
+    /* eslint-enable react-hooks/rules-of-hooks */
+  }
+  useStoreEffect(apiRef.current.store, s => s.dimensions, (previous, next) => {
     if (apiRef.current.rootElementRef.current) {
       setCSSVariables(apiRef.current.rootElementRef.current, next);
     }

package/esm/hooks/features/export/serializers/csvSerializer.js

@@ -44,10 +44,9 @@ export const serializeCellValue = (cellParams, options) => {
   return sanitizeCellValue(value, csvOptions);
 };
 class CSVRow {
+  rowString = '';
+  isEmpty = true;
   constructor(options) {
-    this.options = void 0;
-    this.rowString = '';
-    this.isEmpty = true;
     this.options = options;
   }
   addValue(value) {

package/esm/hooks/features/export/useGridPrintExport.js

@@ -107,11 +107,11 @@ export const useGridPrintExport = (apiRef, props) => {
 
     // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
     gridClone.style.contain = 'size';
-    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbarContainer}`)?.offsetHeight || 0;
+    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbar}`)?.offsetHeight || 0;
     let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
     const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
-      gridClone.querySelector(`.${gridClasses.toolbarContainer}`)?.remove();
+      gridClone.querySelector(`.${gridClasses.toolbar}`)?.remove();
       gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter && gridFooterElement) {
@@ -209,12 +209,7 @@ export const useGridPrintExport = (apiRef, props) => {
       }));
     }
     previousVirtualizationState.current = apiRef.current.state.virtualization;
-    apiRef.current.setState(state => _extends({}, state, {
-      virtualization: _extends({}, state.virtualization, {
-        enabled: false,
-        enabledForColumns: false
-      })
-    }));
+    apiRef.current.unstable_setVirtualization(false);
     await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);
     updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);
     await raf(); // wait for the state changes to take action

package/esm/hooks/features/filter/gridFilterUtils.js

@@ -3,7 +3,7 @@ import { warnOnce } from '@mui/x-internals/warning';
 import { GridLogicOperator } from "../../../models/index.js";
 import { getDefaultGridFilterModel } from "./gridFilterState.js";
 import { getPublicApiRef } from "../../../utils/getPublicApiRef.js";
-import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
+import { gridColumnFieldsSelector, gridColumnLookupSelector, gridColumnVisibilityModelSelector } from "../columns/index.js";
 let hasEval;
 function getHasEval() {
   if (hasEval !== undefined) {
@@ -191,7 +191,16 @@ const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   if (quickFilterValues.length === 0) {
     return null;
   }
-  const columnFields = shouldQuickFilterExcludeHiddenColumns(filterModel) ? gridVisibleColumnFieldsSelector(apiRef) : gridColumnFieldsSelector(apiRef);
+  const allColumnFields = gridColumnFieldsSelector(apiRef);
+  const columnVisibilityModel = gridColumnVisibilityModelSelector(apiRef);
+  let columnFields;
+  if (shouldQuickFilterExcludeHiddenColumns(filterModel)) {
+    // Do not use gridVisibleColumnFieldsSelector here, because quick filter won't work in the list view mode
+    // See https://github.com/mui/mui-x/issues/19145
+    columnFields = allColumnFields.filter(field => columnVisibilityModel[field] !== false);
+  } else {
+    columnFields = allColumnFields;
+  }
   const appliersPerField = [];
   const {
     ignoreDiacritics

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.10.0
+ * @mui/x-data-grid v8.10.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/esm/internals/utils/cache.js

@@ -1,7 +1,6 @@
 import { getKeyDefault } from "../../hooks/features/dataSource/cache.js";
 export class TestCache {
   constructor() {
-    this.cache = void 0;
     this.cache = new Map();
   }
   set(key, value) {

package/esm/locales/fiFI.js

@@ -3,8 +3,8 @@ const fiFIGrid = {
   // Root
   noRowsLabel: 'Ei rivejä',
   noResultsOverlayLabel: 'Ei tuloksia.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
+  noColumnsOverlayLabel: 'Ei sarakkeita',
+  noColumnsOverlayManageColumns: 'Hallitse sarakkeita',
   // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
 
   // Density selector toolbar button text
@@ -58,9 +58,9 @@ const fiFIGrid = {
   filterPanelInputPlaceholder: 'Suodattimen arvo',
   // Filter operators text
   filterOperatorContains: 'sisältää',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'ei sisällä',
   filterOperatorEquals: 'on yhtä suuri kuin',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'on eri suuri kuin',
   filterOperatorStartsWith: 'alkaa',
   filterOperatorEndsWith: 'päättyy',
   filterOperatorIs: 'on',
@@ -80,9 +80,9 @@ const fiFIGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Sisältää',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Ei sisällä',
   headerFilterOperatorEquals: 'On yhtä suuri kuin',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'On eri suuri kuin',
   headerFilterOperatorStartsWith: 'Alkaa',
   headerFilterOperatorEndsWith: 'Päättyy',
   headerFilterOperatorIs: 'On',

package/esm/models/api/gridApiCommon.d.ts

@@ -31,7 +31,7 @@ import type { GridHeaderFilteringApi, GridHeaderFilteringPrivateApi } from "./gr
 import type { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridColumnResizeApi } from "../../hooks/features/columnResize/index.js";
 import type { GridPivotingPrivateApiCommunity } from "../../hooks/features/pivoting/gridPivotingInterfaces.js";
-export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi, GridColumnResizeApi {}
+export interface GridApiCommon<GridState extends GridStateCommunity = GridStateCommunity, GridInitialState extends GridInitialStateCommunity = GridInitialStateCommunity> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi, GridColumnResizeApi {}
 export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi, GridParamsPrivateApi, GridPivotingPrivateApiCommunity {
   virtualizer: Virtualizer;
 }

package/esm/models/gridRowSelectionManager.js

@@ -1,6 +1,5 @@
 class IncludeManager {
   constructor(model) {
-    this.data = void 0;
     this.data = model.ids;
   }
   has(id) {
@@ -15,7 +14,6 @@ class IncludeManager {
 }
 class ExcludeManager {
   constructor(model) {
-    this.data = void 0;
     this.data = model.ids;
   }
   has(id) {

package/esm/utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js

@@ -1,11 +1,9 @@
 export class FinalizationRegistryBasedCleanupTracking {
-  constructor() {
-    this.registry = new FinalizationRegistry(unsubscribe => {
-      if (typeof unsubscribe === 'function') {
-        unsubscribe();
-      }
-    });
-  }
+  registry = (() => new FinalizationRegistry(unsubscribe => {
+    if (typeof unsubscribe === 'function') {
+      unsubscribe();
+    }
+  }))();
   register(object, unsubscribe, unregisterToken) {
     this.registry.register(object, unsubscribe, unregisterToken);
   }

package/esm/utils/cleanupTracking/TimerBasedCleanupTracking.js

@@ -1,9 +1,9 @@
 // If no effect ran after this amount of time, we assume that the render was not committed by React
 const CLEANUP_TIMER_LOOP_MILLIS = 1000;
 export class TimerBasedCleanupTracking {
+  timeouts = (() => new Map())();
+  cleanupTimeout = (() => CLEANUP_TIMER_LOOP_MILLIS)();
   constructor(timeout = CLEANUP_TIMER_LOOP_MILLIS) {
-    this.timeouts = new Map();
-    this.cleanupTimeout = CLEANUP_TIMER_LOOP_MILLIS;
     this.cleanupTimeout = timeout;
   }
   register(object, unsubscribe, unregisterToken) {

package/hooks/core/useGridVirtualizer.js

@@ -8,9 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridVirtualizer = useGridVirtualizer;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _math = require("@mui/x-internals/math");
+var _lruMemoize = require("@mui/x-internals/lruMemoize");
 var _store = require("@mui/x-internals/store");
 var _xVirtualizer = require("@mui/x-virtualizer");
 var _useFirstRender = require("../utils/useFirstRender");
@@ -39,6 +41,18 @@ const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_gridColum
   return (0, _math.roundToDecimalPlaces)(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 
+/** Translates virtualizer state to grid state */
+const addGridDimensionsCreator = () => (0, _lruMemoize.lruMemoize)((dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight) => {
+  return (0, _extends2.default)({}, dimensions, {
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    headersTotalHeight
+  });
+}, {
+  maxSize: 1
+});
+
 /**
  * Virtualizer setup
  */
@@ -54,9 +68,6 @@ function useGridVirtualizer(apiRef, rootProps) {
   const isRowSelected = id => rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef);
   const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
-
-  /* TODO: extract dimensions code */
-  const contentHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridContentHeightSelector);
   const verticalScrollbarWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
   const hasFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
   const {
@@ -75,16 +86,17 @@ function useGridVirtualizer(apiRef, rootProps) {
   const headersTotalHeight = (0, _gridColumnsUtils.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 = (0, _useLazyRef.default)(addGridDimensionsCreator).current;
 
   // </DIMENSIONS>
 
@@ -101,32 +113,42 @@ function useGridVirtualizer(apiRef, rootProps) {
 
   const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
   const virtualizer = (0, _xVirtualizer.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: _gridRowsUtils.minimalContentHeight,
     autoHeight,
+    minimalContentHeight: _gridRowsUtils.minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;
@@ -138,14 +160,20 @@ function useGridVirtualizer(apiRef, rootProps) {
     getEstimatedRowHeight: React.useMemo(() => getEstimatedRowHeight ? rowEntry => getEstimatedRowHeight((0, _extends2.default)({}, rowEntry, {
       densityFactor: density
     })) : undefined, [getEstimatedRowHeight, density]),
-    getRowSpacing: React.useMemo(() => getRowSpacing ? (rowEntry, visibility) => getRowSpacing((0, _extends2.default)({}, 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((0, _extends2.default)({}, rowEntry, visibility, {
+        indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
+      }));
+    } : undefined, [apiRef, getRowSpacing, currentPage.rows, currentPage.rowIdToIndexMap]),
     applyRowHeight: (0, _useEventCallback.default)((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
     focusedVirtualCell: (0, _useEventCallback.default)(() => focusedVirtualCell),
-    rowBufferPx: rootProps.rowBufferPx,
-    columnBufferPx: rootProps.columnBufferPx,
     resizeThrottleMs: rootProps.resizeThrottleMs,
     onResize: (0, _useEventCallback.default)(size => apiRef.current.publishEvent('resize', size)),
     onWheel: (0, _useEventCallback.default)(event => {
@@ -165,14 +193,6 @@ 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__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
       row: params.model,
       rowId: params.id,
@@ -182,7 +202,7 @@ 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,
@@ -204,16 +224,16 @@ function useGridVirtualizer(apiRef, rootProps) {
   //
   // TODO(v9): Remove this
   (0, _useFirstRender.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;
   });
+  (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Dimensions.selectors.dimensions, (_, dimensions) => {
+    apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
+      dimensions: addGridDimensions(dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight)
+    }));
+  });
   (0, _store.useStoreEffect)(virtualizer.store, identity, (_, state) => {
-    if (state.dimensions !== apiRef.current.state.dimensions) {
-      apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
-        dimensions: state.dimensions
-      }));
-    }
     if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
       apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
         rowsMeta: state.rowsMeta

package/hooks/features/dataSource/cache.js

@@ -13,9 +13,6 @@ 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;