@mui/x-data-grid 8.18.0 → 8.20.0

package/esm/hooks/core/useGridProps.js

@@ -12,13 +12,19 @@ export const propsStateInitializer = (state, props) => {
   });
 };
 export const useGridProps = (apiRef, props) => {
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
     apiRef.current.setState(state => _extends({}, state, {
       props: {
         listView: props.listView,
         getRowId: props.getRowId,
-        isCellEditable: props.isCellEditable
+        isCellEditable: props.isCellEditable,
+        isRowSelectable: props.isRowSelectable
       }
     }));
-  }, [apiRef, props.listView, props.getRowId, props.isCellEditable]);
+  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable]);
 };

package/esm/hooks/core/useGridVirtualizer.d.ts

@@ -1,9 +1,83 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridPrivateApiCommunity } from "../../models/api/gridApiCommunity.js";
-import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
-type RootProps = DataGridProcessedProps;
+import * as React from 'react';
+import { Dimensions, Virtualization } from '@mui/x-virtualizer';
 /**
  * Virtualizer setup
  */
-export declare function useGridVirtualizer(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
-export {};
+export declare function useGridVirtualizer(): {
+  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
+  api: {
+    updateDimensions: (firstUpdate?: boolean) => void;
+    debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
+    rowsMeta: {
+      getRowHeight: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      setLastMeasuredRowIndex: (index: number) => void;
+      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer/models").RowId, height: number) => void;
+      hydrateRowsMeta: () => void;
+      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer/models").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("@mui/x-virtualizer/models").RowId) => any;
+      getRowHeightEntry: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      getLastMeasuredRowIndex: () => number;
+      resetRowHeights: () => void;
+    };
+  } & {
+    getters: {
+      setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+      getOffsetTop: () => number;
+      getRows: (rowParams?: {
+        rows?: import("@mui/x-virtualizer/models").RowEntry[];
+        position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
+        renderContext?: import("@mui/x-virtualizer/models").RenderContext;
+      }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
+      rows: import("@mui/x-virtualizer/models").RowEntry[];
+      getContainerProps: () => {
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
+      };
+      getScrollerProps: () => {
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
+        style: React.CSSProperties;
+        role: string;
+        tabIndex: number | undefined;
+      };
+      getContentProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        style: React.CSSProperties;
+        role: string;
+      };
+      getScrollbarVerticalProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+      getScrollbarHorizontalProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+      getScrollAreaProps: () => {
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+    };
+    useVirtualization: () => import("@mui/x-virtualizer").BaseState;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+    forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+  } & {
+    resetColSpan: () => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+  } & {
+    getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
+  } & {
+    getViewportPageSize: () => number;
+  };
+};

package/esm/hooks/core/useGridVirtualizer.js

@@ -6,7 +6,7 @@ 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, Dimensions } from '@mui/x-virtualizer';
+import { useVirtualizer, Dimensions, Virtualization, EMPTY_RENDER_CONTEXT } from '@mui/x-virtualizer';
 import { useFirstRender } from "../utils/useFirstRender.js";
 import { createSelector } from "../../utils/createSelector.js";
 import { useGridSelector } from "../utils/useGridSelector.js";
@@ -22,10 +22,11 @@ import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../constants/dataGridPropsDef
 import { getValidRowHeight, minimalContentHeight, rowHeightWarning } from "../features/rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../features/columns/gridColumnsUtils.js";
 import { useGridOverlays } from "../features/overlays/useGridOverlays.js";
+import { useGridRootProps } from "../utils/useGridRootProps.js";
+import { useGridPrivateApiContext } from "../utils/useGridPrivateApiContext.js";
+import { useGridRowsMeta } from "../features/rows/useGridRowsMeta.js";
+import { eslintUseValue } from "../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-function identity(x) {
-  return x;
-}
 const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
   const colCount = visibleColumns.length;
   if (colCount === 0) {
@@ -49,8 +50,10 @@ const addGridDimensionsCreator = () => lruMemoize((dimensions, headerHeight, gro
 /**
  * Virtualizer setup
  */
-export function useGridVirtualizer(apiRef, rootProps) {
+export function useGridVirtualizer() {
   const isRtl = useRtl();
+  const rootProps = useGridRootProps();
+  const apiRef = useGridPrivateApiContext();
   const {
     listView
   } = rootProps;
@@ -105,9 +108,11 @@ export function useGridVirtualizer(apiRef, rootProps) {
   } = rootProps;
   // </ROWS_META>
 
-  const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   const RowSlot = rootProps.slots.row;
   const rowSlotProps = rootProps.slotProps?.row;
+  const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
+  // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
+  eslintUseValue(focusedVirtualCell);
   const virtualizer = useVirtualizer({
     refs: {
       container: apiRef.current.mainElementRef,
@@ -171,7 +176,7 @@ export function useGridVirtualizer(apiRef, rootProps) {
     } : undefined, [apiRef, getRowSpacing, currentPage.rows, currentPage.rowIdToIndexMap]),
     applyRowHeight: useEventCallback((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
-    focusedVirtualCell: useEventCallback(() => focusedVirtualCell),
+    focusedVirtualCell: useEventCallback(() => gridFocusedVirtualCellSelector(apiRef)),
     resizeThrottleMs: rootProps.resizeThrottleMs,
     onResize: useEventCallback(size => apiRef.current.publishEvent('resize', size)),
     onWheel: useEventCallback(event => {
@@ -227,23 +232,33 @@ export function useGridVirtualizer(apiRef, rootProps) {
     apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
   });
   useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (_, dimensions) => {
+    if (!dimensions.isReady) {
+      return;
+    }
     apiRef.current.setState(gridState => _extends({}, gridState, {
       dimensions: addGridDimensions(dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight)
     }));
   });
-  useStoreEffect(virtualizer.store, identity, (_, state) => {
-    if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
+  useStoreEffect(virtualizer.store, Dimensions.selectors.rowsMeta, (_, rowsMeta) => {
+    if (rowsMeta !== apiRef.current.state.rowsMeta) {
       apiRef.current.setState(gridState => _extends({}, gridState, {
-        rowsMeta: state.rowsMeta
+        rowsMeta
       }));
     }
-    if (state.virtualization !== apiRef.current.state.virtualization) {
+  });
+  useStoreEffect(virtualizer.store, Virtualization.selectors.store, (_, virtualization) => {
+    if (virtualization.renderContext === EMPTY_RENDER_CONTEXT) {
+      return;
+    }
+    if (virtualization !== apiRef.current.state.virtualization) {
       apiRef.current.setState(gridState => _extends({}, gridState, {
-        virtualization: state.virtualization
+        virtualization
       }));
     }
   });
   apiRef.current.register('private', {
     virtualizer
   });
+  useGridRowsMeta(apiRef, rootProps);
+  return virtualizer;
 }

package/esm/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -12,7 +12,9 @@ export const columnGroupsStateInitializer = (state, props, apiRef) => {
     lastColumnGroupingModel: props.columnGroupingModel
   };
   if (!props.columnGroupingModel) {
-    return state;
+    return _extends({}, state, {
+      columnGrouping: undefined
+    });
   }
   const columnFields = gridColumnFieldsSelector(apiRef);
   const visibleColumnFields = gridVisibleColumnFieldsSelector(apiRef);
@@ -65,6 +67,9 @@ export const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    if (!columnGroupingModel && !apiRef.current.caches.columnGrouping.lastColumnGroupingModel) {
+      return;
+    }
     apiRef.current.caches.columnGrouping.lastColumnGroupingModel = columnGroupingModel;
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};

package/esm/hooks/features/columnMenu/useGridColumnMenu.js

@@ -15,6 +15,16 @@ export const columnMenuStateInitializer = state => _extends({}, state, {
  */
 export const useGridColumnMenu = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridColumnMenu');
+  const subscriptionRefs = React.useRef({});
+  const unsubscribeFromScrollChange = React.useCallback(() => {
+    subscriptionRefs.current.wheel?.();
+    subscriptionRefs.current.touchMove?.();
+  }, []);
+  const subscribeToScrollChange = React.useCallback(() => {
+    unsubscribeFromScrollChange();
+    subscriptionRefs.current.wheel = apiRef.current.subscribeEvent('virtualScrollerWheel', apiRef.current.hideColumnMenu);
+    subscriptionRefs.current.touchMove = apiRef.current.subscribeEvent('virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
+  }, [apiRef, unsubscribeFromScrollChange]);
 
   /**
    * API METHODS
@@ -32,6 +42,7 @@ export const useGridColumnMenu = apiRef => {
           return state;
         }
         logger.debug('Opening Column Menu');
+        subscribeToScrollChange();
         return _extends({}, state, {
           columnMenu: {
             open: true,
@@ -41,7 +52,7 @@ export const useGridColumnMenu = apiRef => {
       });
       apiRef.current.hidePreferences();
     }
-  }, [apiRef, logger]);
+  }, [apiRef, logger, subscribeToScrollChange]);
   const hideColumnMenu = React.useCallback(() => {
     const columnMenuState = gridColumnMenuSelector(apiRef);
     if (columnMenuState.field) {
@@ -77,12 +88,13 @@ export const useGridColumnMenu = apiRef => {
     if (shouldUpdate) {
       apiRef.current.setState(state => {
         logger.debug('Hiding Column Menu');
+        unsubscribeFromScrollChange();
         return _extends({}, state, {
           columnMenu: newState
         });
       });
     }
-  }, [apiRef, logger]);
+  }, [apiRef, logger, unsubscribeFromScrollChange]);
   const toggleColumnMenu = React.useCallback(field => {
     logger.debug('Toggle Column Menu');
     const columnMenu = gridColumnMenuSelector(apiRef);
@@ -99,6 +111,4 @@ export const useGridColumnMenu = apiRef => {
   };
   useGridApiMethod(apiRef, columnMenuApi, 'public');
   useGridEvent(apiRef, 'columnResizeStart', hideColumnMenu);
-  useGridEvent(apiRef, 'virtualScrollerWheel', apiRef.current.hideColumnMenu);
-  useGridEvent(apiRef, 'virtualScrollerTouchMove', apiRef.current.hideColumnMenu);
 };

package/esm/hooks/features/columns/useGridColumnSpanning.js

@@ -5,10 +5,15 @@ import { useGridEvent } from "../../utils/useGridEvent.js";
  * @requires useGridParamsApi (method)
  */
 export const useGridColumnSpanning = apiRef => {
-  const virtualizer = apiRef.current.virtualizer;
-  const resetColSpan = virtualizer.api.resetColSpan;
-  const getCellColSpanInfo = virtualizer.api.getCellColSpanInfo;
-  const calculateColSpan = virtualizer.api.calculateColSpan;
+  const resetColSpan = () => {
+    return apiRef.current.virtualizer.api.resetColSpan();
+  };
+  const getCellColSpanInfo = (...params) => {
+    return apiRef.current.virtualizer.api.getCellColSpanInfo(...params);
+  };
+  const calculateColSpan = (...params) => {
+    apiRef.current.virtualizer.api.calculateColSpan(...params);
+  };
   const columnSpanningPublicApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo
   };

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

@@ -115,7 +115,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             params: fetchParams,
             cause: originalError
           }));
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
         }
       }
@@ -170,7 +170,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           params,
           cause: errorThrown
         }));
-      } else if (process.env.NODE_ENV !== 'production') {
+      } else {
         warnOnce(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
       }
       throw errorThrown; // Let the caller handle the error further

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

@@ -44,8 +44,10 @@ const EMPTY_DIMENSIONS = {
 export const dimensionsStateInitializer = (state, props, apiRef) => {
   const dimensions = EMPTY_DIMENSIONS;
   const density = gridDensityFactorSelector(apiRef);
+  const dimensionsWithStatic = _extends({}, dimensions, getStaticDimensions(props, apiRef, density, gridVisiblePinnedColumnDefinitionsSelector(apiRef)));
+  apiRef.current.store.state.dimensions = dimensionsWithStatic;
   return _extends({}, state, {
-    dimensions: _extends({}, dimensions, getStaticDimensions(props, apiRef, density, gridVisiblePinnedColumnDefinitionsSelector(apiRef)))
+    dimensions: dimensionsWithStatic
   });
 };
 const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
@@ -56,16 +58,17 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
   return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 export function useGridDimensions(apiRef, props) {
-  const virtualizer = apiRef.current.virtualizer;
-  const updateDimensions = virtualizer.api.updateDimensions;
-  const getViewportPageSize = virtualizer.api.getViewportPageSize;
   const getRootDimensions = React.useCallback(() => gridDimensionsSelector(apiRef), [apiRef]);
   const apiPublic = {
     getRootDimensions
   };
   const apiPrivate = {
-    updateDimensions,
-    getViewportPageSize
+    updateDimensions: () => {
+      return apiRef.current.virtualizer.api.updateDimensions();
+    },
+    getViewportPageSize: () => {
+      return apiRef.current.virtualizer.api.getViewportPageSize();
+    }
   };
   useGridApiMethod(apiRef, apiPublic, 'public');
   useGridApiMethod(apiRef, apiPrivate, 'private');
@@ -94,6 +97,9 @@ export function useGridDimensions(apiRef, props) {
     /* eslint-enable react-hooks/rules-of-hooks */
   }
   useStoreEffect(apiRef.current.store, s => s.dimensions, (previous, next) => {
+    if (!next.isReady) {
+      return;
+    }
     if (apiRef.current.rootElementRef.current) {
       setCSSVariables(apiRef.current.rootElementRef.current, next);
     }

package/esm/hooks/features/editing/useGridCellEditing.js

@@ -364,7 +364,7 @@ export const useGridCellEditing = (apiRef, props) => {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -448,7 +448,7 @@ export const useGridRowEditing = (apiRef, props) => {
         }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };

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

@@ -76,10 +76,8 @@ const serializeRow = ({
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (String(cellParams.formattedValue) === '[object Object]') {
-        warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
-      }
+    if (String(cellParams.formattedValue) === '[object Object]') {
+      warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
     }
     row.addValue(serializeCellValue(cellParams, {
       ignoreValueFormatter,

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

@@ -9,15 +9,15 @@ import { gridExpandedRowCountSelector } from "../filter/gridFilterSelector.js";
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../columns/gridColumnsSelector.js";
 import { gridClasses } from "../../../constants/gridClasses.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
-import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { GRID_ID_AUTOGENERATED } from "../rows/gridRowsUtils.js";
 import { defaultGetRowsToExport, getColumnsToExport } from "./utils.js";
 import { getDerivedPaginationModel } from "../pagination/useGridPaginationModel.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 import { GridPrintExportMenuItem } from "../../../components/toolbar/index.js";
-import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSelectionColDef.js";
+import { scrollbarSizeCssExpression } from "../../../components/virtualization/GridVirtualScrollbar.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const DEBUG_MODE = false;
 function raf() {
   return new Promise(resolve => {
     requestAnimationFrame(() => {
@@ -30,6 +30,10 @@ function buildPrintWindow(title) {
   iframeEl.style.position = 'absolute';
   iframeEl.style.width = '0px';
   iframeEl.style.height = '0px';
+  if (DEBUG_MODE) {
+    iframeEl.style.width = '100%';
+    iframeEl.style.height = '10000px';
+  }
   iframeEl.title = title || document.title;
   return iframeEl;
 }
@@ -97,40 +101,36 @@ export const useGridPrintExport = (apiRef, props) => {
     if (!printDoc) {
       return;
     }
-    const rowsMeta = gridRowsMetaSelector(apiRef);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);
+    const virtualScrollerContent = gridClone.querySelector(`.${gridClasses.virtualScrollerContent}`);
 
     // Allow to overflow to not hide the border of the last row
     const gridMain = gridClone.querySelector(`.${gridClasses.main}`);
     gridMain.style.overflow = 'visible';
-
-    // See https://support.google.com/chrome/thread/191619088?hl=en&msgid=193009642
-    gridClone.style.contain = 'size';
-    let gridToolbarElementHeight = gridRootElement.querySelector(`.${gridClasses.toolbar}`)?.offsetHeight || 0;
-    let gridFooterElementHeight = gridRootElement.querySelector(`.${gridClasses.footerContainer}`)?.offsetHeight || 0;
+    gridClone.querySelector(`.${gridClasses.virtualScrollerRenderZone}`).style.position = 'static';
+    virtualScrollerContent.style.flexBasis = 'auto';
+    gridClone.querySelector(`.${gridClasses['scrollbar--vertical']}`)?.remove();
+    if (!(virtualScrollerContent.nextSibling instanceof HTMLElement && virtualScrollerContent.nextSibling.classList.contains(gridClasses.filler))) {
+      const filler = document.createElement('div');
+      filler.style.height = scrollbarSizeCssExpression;
+      virtualScrollerContent.insertAdjacentElement('afterend', filler);
+    }
     const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
     if (normalizeOptions.hideToolbar) {
       gridClone.querySelector(`.${gridClasses.toolbar}`)?.remove();
-      gridToolbarElementHeight = 0;
     }
     if (normalizeOptions.hideFooter && gridFooterElement) {
       gridFooterElement.remove();
-      gridFooterElementHeight = 0;
     }
-
-    // Expand container height to accommodate all rows
-    const computedTotalHeight = rowsMeta.currentPageTotalHeight + getTotalHeaderHeight(apiRef, props) + gridToolbarElementHeight + gridFooterElementHeight;
-    gridClone.style.height = `${computedTotalHeight}px`;
+    gridClone.style.height = 'auto';
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
     if (!normalizeOptions.hideFooter && gridFooterElement) {
       // the footer is always being placed at the bottom of the page as if all rows are exported
       // so if getRowsToExport is being used to only export a subset of rows then we need to
       // adjust the footer position to be correctly placed at the bottom of the grid
-      gridFooterElement.style.position = 'absolute';
       gridFooterElement.style.width = '100%';
-      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
     }
 
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
@@ -158,13 +158,13 @@ export const useGridPrintExport = (apiRef, props) => {
     }
 
     // Trigger print
-    if (process.env.NODE_ENV !== 'test') {
+    if (process.env.NODE_ENV !== 'test' && !DEBUG_MODE) {
       // wait for remote stylesheets to load
       Promise.all(stylesheetLoadPromises).then(() => {
         printWindow.contentWindow.print();
       });
     }
-  }, [apiRef, doc, props]);
+  }, [apiRef, doc]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);

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

@@ -41,24 +41,18 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
   const hasSeveralItems = model.items.length > 1;
   let items;
   if (hasSeveralItems && disableMultipleColumnsFiltering) {
-    if (process.env.NODE_ENV !== 'production') {
-      warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
-    }
+    warnOnce(['MUI X: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the Data Grid, this prop is always `true`.'], 'error');
     items = [model.items[0]];
   } else {
     items = model.items;
   }
   const hasItemsWithoutIds = hasSeveralItems && items.some(item => item.id == null);
   const hasItemWithoutOperator = items.some(item => item.operator == null);
-  if (process.env.NODE_ENV !== 'production') {
-    if (hasItemsWithoutIds) {
-      warnOnce('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
-    }
+  if (hasItemsWithoutIds) {
+    warnOnce('MUI X: The `id` field is required on `filterModel.items` when you use multiple filters.', 'error');
   }
-  if (process.env.NODE_ENV !== 'production') {
-    if (hasItemWithoutOperator) {
-      warnOnce('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
-    }
+  if (hasItemWithoutOperator) {
+    warnOnce('MUI X: The `operator` field is required on `filterModel.items`, one or more of your filtering item has no `operator` provided.', 'error');
   }
   if (hasItemWithoutOperator || hasItemsWithoutIds) {
     return _extends({}, model, {

package/esm/hooks/features/filter/index.d.ts

@@ -1,4 +1,4 @@
 export type { GridFilterState, GridFilterInitialState } from "./gridFilterState.js";
 export { getDefaultGridFilterModel } from "./gridFilterState.js";
-export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from "./gridFilterSelector.js";
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "./gridFilterSelector.js";
 export type { GridFilterActiveItemsLookup } from "./gridFilterSelector.js";

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

@@ -1,2 +1,2 @@
 export { getDefaultGridFilterModel } from "./gridFilterState.js";
-export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from "./gridFilterSelector.js";
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector, gridExpandedSortedRowIndexLookupSelector } from "./gridFilterSelector.js";

package/esm/hooks/features/filter/useGridFilter.d.ts

@@ -9,4 +9,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">, configuration: GridConfiguration) => void;
+export declare const useGridFilter: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics" | "signature">, configuration: GridConfiguration) => void;

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

@@ -354,7 +354,9 @@ export const useGridFilter = (apiRef, props, configuration) => {
    * 1ST RENDER
    */
   useFirstRender(() => {
-    updateFilteredRows();
+    if (props.signature === 'DataGrid') {
+      updateFilteredRows();
+    }
   });
 
   /**

package/esm/hooks/features/focus/useGridFocus.js

@@ -224,7 +224,6 @@ export const useGridFocus = (apiRef, props) => {
     apiRef.current.setCellFocus(id, field);
   }, [apiRef]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    // GRID_CELL_NAVIGATION_KEY_DOWN handles the focus on Enter, Tab and navigation keys
     if (event.key === 'Enter' || event.key === 'Tab' || event.key === 'Shift' || isNavigationKey(event.key)) {
       return;
     }

package/esm/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters">) => void;
+export declare const useGridKeyboardNavigation: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "signature" | "headerFilters" | "tabNavigation">) => void;