@mui/x-data-grid 8.9.2 → 8.10.1

package/esm/hooks/features/rowSelection/useGridRowSelection.js

@@ -43,7 +43,8 @@ export const useGridRowSelection = (apiRef, props) => {
       callback(...args);
     }
   }, [props.rowSelection]);
-  const applyAutoSelection = props.signature !== GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants);
+  const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
+  const applyAutoSelection = props.signature !== GridSignature.DataGrid && (props.rowSelectionPropagation?.parents || props.rowSelectionPropagation?.descendants) && isNestedData;
   const propRowSelectionModel = React.useMemo(() => {
     return props.rowSelectionModel;
   }, [props.rowSelectionModel]);
@@ -62,7 +63,6 @@ export const useGridRowSelection = (apiRef, props) => {
   } = props;
   const canHaveMultipleSelection = isMultipleRowSelectionEnabled(props);
   const tree = useGridSelector(apiRef, gridRowTreeSelector);
-  const isNestedData = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector) > 1;
   const expandMouseRowRangeSelection = React.useCallback(id => {
     let endId = id;
     const startId = lastRowToggled.current ?? id;

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

@@ -137,6 +137,11 @@ export const findRowsToSelect = (apiRef, tree, selectedRow, autoSelectDescendant
         }
       }
     };
+    // For root level rows, we don't need to traverse parents
+    const rowNode = tree[selectedRow];
+    if (!rowNode || rowNode.parent === GRID_ROOT_GROUP_ID) {
+      return;
+    }
     traverseParents(selectedRow);
   }
 };

package/esm/index.js

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

package/esm/internals/index.d.ts

@@ -63,6 +63,8 @@ export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hoo
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
+export { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+export type { GridRowReorderState } from "../hooks/features/rowReorder/gridRowReorderInterfaces.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
 export type { GridSortingModelApplier } from "../hooks/features/sorting/gridSortingState.js";

package/esm/internals/index.js

@@ -51,6 +51,7 @@ export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hoo
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
+export { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
 export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";

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/nnNO.js

@@ -3,10 +3,9 @@ const nnNOGrid = {
   // Root
   noRowsLabel: 'Ingen rader',
   noResultsOverlayLabel: 'Fann ingen resultat.',
-  // noColumnsOverlayLabel: 'No columns',
-  // noColumnsOverlayManageColumns: 'Manage columns',
-  // emptyPivotOverlayLabel: 'Add fields to rows, columns, and values to create a pivot table',
-
+  noColumnsOverlayLabel: 'Ingen kolonner',
+  noColumnsOverlayManageColumns: 'Vel kolonner',
+  emptyPivotOverlayLabel: 'Legg til felt i rader, kolonner og verdiar for å opprette ein pivot-tabell',
   // Density selector toolbar button text
   toolbarDensity: 'Tettheit',
   toolbarDensityLabel: 'Tettheit',
@@ -33,18 +32,15 @@ const nnNOGrid = {
   toolbarExportPrint: 'Skriv ut',
   toolbarExportExcel: 'Last ned som Excel',
   // Toolbar pivot button
-  // toolbarPivot: 'Pivot',
-
+  toolbarPivot: 'Pivot',
   // Toolbar AI Assistant button
-  // toolbarAssistant: 'AI Assistant',
-
+  toolbarAssistant: 'AI Assistent',
   // Columns management text
   columnsManagementSearchTitle: 'Søk',
   columnsManagementNoColumns: 'Ingen kolonner',
   columnsManagementShowHideAllText: 'Vis/skjul alle',
   columnsManagementReset: 'Nullstill',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementDeleteIconLabel: 'Tøm',
   // Filter panel text
   filterPanelAddFilter: 'Legg til filter',
   filterPanelRemoveAll: 'Fjern alle',
@@ -58,9 +54,9 @@ const nnNOGrid = {
   filterPanelInputPlaceholder: 'Filter verdi',
   // Filter operators text
   filterOperatorContains: 'inneheld',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'inneheld ikkje',
   filterOperatorEquals: 'er lik',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'er ikkje lik',
   filterOperatorStartsWith: 'startar med',
   filterOperatorEndsWith: 'sluttar med',
   filterOperatorIs: 'er',
@@ -80,9 +76,9 @@ const nnNOGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Inneheld',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Inneheld ikkje',
   headerFilterOperatorEquals: 'Lik',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Er ikkje lik',
   headerFilterOperatorStartsWith: 'Startar på',
   headerFilterOperatorEndsWith: 'Sluttar på',
   headerFilterOperatorIs: 'Er',
@@ -100,15 +96,14 @@ const nnNOGrid = {
   'headerFilterOperator>=': 'Større enn eller lik',
   'headerFilterOperator<': 'Mindre enn',
   'headerFilterOperator<=': 'Mindre enn eller lik',
-  // headerFilterClear: 'Clear filter',
-
+  headerFilterClear: 'Tøm filter',
   // Filter values text
   filterValueAny: 'nokon',
   filterValueTrue: 'sant',
   filterValueFalse: 'usant',
   // Column menu text
   columnMenuLabel: 'Meny',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} kolonne meny`,
   columnMenuShowColumns: 'Vis kolonner',
   columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filter',
@@ -116,8 +111,7 @@ const nnNOGrid = {
   columnMenuUnsort: 'Usorter',
   columnMenuSortAsc: 'Sorter AUKANDE',
   columnMenuSortDesc: 'Sorter SYNKANDE',
-  // columnMenuManagePivot: 'Manage pivot',
-
+  columnMenuManagePivot: 'Behandle pivot',
   // Column header text
   columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktive filter` : `${count} aktivt filter`,
   columnHeaderFiltersLabel: 'Vis filter',
@@ -152,23 +146,23 @@ const nnNOGrid = {
   groupColumn: name => `Grupper på ${name}`,
   unGroupColumn: name => `Slutt å grupper på ${name}`,
   // Master/detail
-  detailPanelToggle: 'Utvid/kollaps detalj panel',
-  expandDetailPanel: 'Utvid',
-  collapseDetailPanel: 'Kolaps',
+  detailPanelToggle: 'Vis/gøym detaljpanel',
+  expandDetailPanel: 'Vis',
+  collapseDetailPanel: 'Gøym',
   // Pagination
   paginationRowsPerPage: 'Rader per side:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} av ${count !== -1 ? count : `flere enn ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `omtrent ${estimated}` : `flere enn ${to}`;
+    return `${from}–${to} av ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Gå til første side';
@@ -190,83 +184,78 @@ const nnNOGrid = {
   aggregationFunctionLabelAvg: 'snitt',
   aggregationFunctionLabelMin: 'min',
   aggregationFunctionLabelMax: 'maks',
-  aggregationFunctionLabelSize: 'størrelse'
-
+  aggregationFunctionLabelSize: 'størrelse',
   // Pivot panel
-  // pivotToggleLabel: 'Pivot',
-  // pivotRows: 'Rows',
-  // pivotColumns: 'Columns',
-  // pivotValues: 'Values',
-  // pivotCloseButton: 'Close pivot settings',
-  // pivotSearchButton: 'Search fields',
-  // pivotSearchControlPlaceholder: 'Search fields',
-  // pivotSearchControlLabel: 'Search fields',
-  // pivotSearchControlClear: 'Clear search',
-  // pivotNoFields: 'No fields',
-  // pivotMenuMoveUp: 'Move up',
-  // pivotMenuMoveDown: 'Move down',
-  // pivotMenuMoveToTop: 'Move to top',
-  // pivotMenuMoveToBottom: 'Move to bottom',
-  // pivotMenuRows: 'Rows',
-  // pivotMenuColumns: 'Columns',
-  // pivotMenuValues: 'Values',
-  // pivotMenuOptions: 'Field options',
-  // pivotMenuAddToRows: 'Add to Rows',
-  // pivotMenuAddToColumns: 'Add to Columns',
-  // pivotMenuAddToValues: 'Add to Values',
-  // pivotMenuRemove: 'Remove',
-  // pivotDragToRows: 'Drag here to create rows',
-  // pivotDragToColumns: 'Drag here to create columns',
-  // pivotDragToValues: 'Drag here to create values',
-  // pivotYearColumnHeaderName: '(Year)',
-  // pivotQuarterColumnHeaderName: '(Quarter)',
-
+  pivotToggleLabel: 'Pivot',
+  pivotRows: 'Rader',
+  pivotColumns: 'Kolonner',
+  pivotValues: 'Verdiar',
+  pivotCloseButton: 'Lukk pivotinnstillingar',
+  pivotSearchButton: 'Søk felt',
+  pivotSearchControlPlaceholder: 'Søk felt',
+  pivotSearchControlLabel: 'Søk felt',
+  pivotSearchControlClear: 'Tøm søk',
+  pivotNoFields: 'Ingen felt',
+  pivotMenuMoveUp: 'Flytt opp',
+  pivotMenuMoveDown: 'Flytt ned',
+  pivotMenuMoveToTop: 'Flytt til toppen',
+  pivotMenuMoveToBottom: 'Flytt til botnen',
+  pivotMenuRows: 'Rader',
+  pivotMenuColumns: 'Kolonner',
+  pivotMenuValues: 'Verdiar',
+  pivotMenuOptions: 'Feltalternativ',
+  pivotMenuAddToRows: 'Legg til i Rader',
+  pivotMenuAddToColumns: 'Legg til i Kolonner',
+  pivotMenuAddToValues: 'Legg til i Verdiar',
+  pivotMenuRemove: 'Fjern',
+  pivotDragToRows: 'Dra hit for å opprette rader',
+  pivotDragToColumns: 'Dra hit for å opprette kolonner',
+  pivotDragToValues: 'Dra hit for å opprette verdiar',
+  pivotYearColumnHeaderName: '(År)',
+  pivotQuarterColumnHeaderName: '(Kvartal)',
   // AI Assistant panel
-  // aiAssistantPanelTitle: 'AI Assistant',
-  // aiAssistantPanelClose: 'Close AI Assistant',
-  // aiAssistantPanelNewConversation: 'New conversation',
-  // aiAssistantPanelConversationHistory: 'Conversation history',
-  // aiAssistantPanelEmptyConversation: 'No prompt history',
-  // aiAssistantSuggestions: 'Suggestions',
-
+  aiAssistantPanelTitle: 'AI Assistent',
+  aiAssistantPanelClose: 'Lukk AI Assistent',
+  aiAssistantPanelNewConversation: 'Ny samtale',
+  aiAssistantPanelConversationHistory: 'Samtalehistorikk',
+  aiAssistantPanelEmptyConversation: 'Ingen prompt-historikk',
+  aiAssistantSuggestions: 'Forslag',
   // Prompt field
-  // promptFieldLabel: 'Prompt',
-  // promptFieldPlaceholder: 'Type a prompt…',
-  // promptFieldPlaceholderWithRecording: 'Type or record a prompt…',
-  // promptFieldPlaceholderListening: 'Listening for prompt…',
-  // promptFieldSpeechRecognitionNotSupported: 'Speech recognition is not supported in this browser',
-  // promptFieldSend: 'Send',
-  // promptFieldRecord: 'Record',
-  // promptFieldStopRecording: 'Stop recording',
-
+  promptFieldLabel: 'Prompt',
+  promptFieldPlaceholder: 'Skriv ein prompt…',
+  promptFieldPlaceholderWithRecording: 'Skriv eller spel inn ein prompt…',
+  promptFieldPlaceholderListening: 'Lyttar etter prompt…',
+  promptFieldSpeechRecognitionNotSupported: 'Talegjenkjenning er ikkje støtta i denne nettlesaren',
+  promptFieldSend: 'Send',
+  promptFieldRecord: 'Spel inn',
+  promptFieldStopRecording: 'Stopp opptak',
   // Prompt
-  // promptRerun: 'Run again',
-  // promptProcessing: 'Processing…',
-  // promptAppliedChanges: 'Applied changes',
-
+  promptRerun: 'Kjør på nytt',
+  promptProcessing: 'Behandlar…',
+  promptAppliedChanges: 'Brukte endringar',
   // Prompt changes
-  // promptChangeGroupDescription: (column: string) => `Group by ${column}`,
-  // promptChangeAggregationLabel: (column: string, aggregation: string) => `${column} (${aggregation})`,
-  // promptChangeAggregationDescription: (column: string, aggregation: string) => `Aggregate ${column} (${aggregation})`,
-  // promptChangeFilterLabel: (column: string, operator: string, value: string) => {
-  //   if (operator === 'is any of') {
-  //     return `${column} is any of: ${value}`;
-  //   }
-  //   return `${column} ${operator} ${value}`;
-  // },
-  // promptChangeFilterDescription: (column: string, operator: string, value: string) => {
-  //   if (operator === 'is any of') {
-  //     return `Filter where ${column} is any of: ${value}`;
-  //   }
-  //   return `Filter where ${column} ${operator} ${value}`;
-  // },
-  // promptChangeSortDescription: (column: string, direction: string) => `Sort by ${column} (${direction})`,
-  // promptChangePivotEnableLabel: 'Pivot',
-  // promptChangePivotEnableDescription: 'Enable pivot',
-  // promptChangePivotColumnsLabel: (count: number) => `Columns (${count})`,
-  // promptChangePivotColumnsDescription: (column: string, direction: string) => `${column}${direction ? ` (${direction})` : ''}`,
-  // promptChangePivotRowsLabel: (count: number) => `Rows (${count})`,
-  // promptChangePivotValuesLabel: (count: number) => `Values (${count})`,
-  // promptChangePivotValuesDescription: (column: string, aggregation: string) => `${column} (${aggregation})`,
+  promptChangeGroupDescription: column => `Grupper etter ${column}`,
+  promptChangeAggregationLabel: (column, aggregation) => `${column} (${aggregation})`,
+  promptChangeAggregationDescription: (column, aggregation) => `Aggreger ${column} (${aggregation})`,
+  promptChangeFilterLabel: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `${column} er ein av: ${value}`;
+    }
+    return `${column} ${operator} ${value}`;
+  },
+  promptChangeFilterDescription: (column, operator, value) => {
+    if (operator === 'is any of') {
+      return `Filter der ${column} er ein av: ${value}`;
+    }
+    return `Filter der ${column} ${operator} ${value}`;
+  },
+  promptChangeSortDescription: (column, direction) => `Sorter etter ${column} (${direction})`,
+  promptChangePivotEnableLabel: 'Pivot',
+  promptChangePivotEnableDescription: 'Aktiver pivot',
+  promptChangePivotColumnsLabel: count => `Kolonner (${count})`,
+  promptChangePivotColumnsDescription: (column, direction) => `${column}${direction ? ` (${direction})` : ''}`,
+  promptChangePivotRowsLabel: count => `Rader (${count})`,
+  promptChangePivotValuesLabel: count => `Verdiar (${count})`,
+  promptChangePivotValuesDescription: (column, aggregation) => `${column} (${aggregation})`
 };
 export const nnNO = getGridLocalization(nnNOGrid);

package/esm/material/index.js

@@ -159,9 +159,9 @@ const BaseSelect = forwardRef(function BaseSelect(props, ref) {
       labelId: labelId,
       label: label,
       displayEmpty: true,
-      onChange: onChange
+      onChange: onChange,
+      variant: "outlined"
     }, rest, {
-      variant: "outlined",
       notched: true,
       inputProps: slotProps?.htmlInput,
       onOpen: onOpen,

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/models/gridStateCommunity.d.ts

@@ -8,6 +8,7 @@ import type { GridVisibleRowsLookupState } from "../hooks/features/filter/gridFi
 import type { GridColumnResizeState } from "../hooks/features/columnResize/index.js";
 import type { GridRowSpanningState } from "../hooks/features/rows/useGridRowSpanning.js";
 import type { GridListViewState } from "../hooks/features/listView/useGridListView.js";
+import type { GridRowReorderState } from "../hooks/features/rowReorder/gridRowReorderInterfaces.js";
 /**
  * Some props are passed on the state to enable grid selectors to select
  * and react to them.
@@ -41,6 +42,7 @@ export interface GridStateCommunity {
   columnResize: GridColumnResizeState;
   rowSpanning: GridRowSpanningState;
   listViewColumn: GridListViewState;
+  rowReorder: GridRowReorderState;
 }
 /**
  * The initial state of Data Grid.

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;