@mui/x-data-grid 7.2.0 → 7.3.1

package/hooks/features/columnResize/useGridColumnResize.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
+import useLazyRef from '@mui/utils/useLazyRef';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol } from '../../../utils/domUtils';
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from '../../utils';
@@ -173,6 +174,25 @@ export const columnResizeStateInitializer = state => _extends({}, state, {
     resizingColumnField: ''
   }
 });
+function createResizeRefs() {
+  return {
+    colDef: undefined,
+    initialColWidth: 0,
+    initialTotalWidth: 0,
+    previousMouseClickEvent: undefined,
+    columnHeaderElement: undefined,
+    headerFilterElement: undefined,
+    groupHeaderElements: [],
+    cellElements: [],
+    leftPinnedCellsAfter: [],
+    rightPinnedCellsBefore: [],
+    fillerLeft: undefined,
+    fillerRight: undefined,
+    leftPinnedHeadersAfter: [],
+    rightPinnedHeadersBefore: []
+  };
+}
+
 /**
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
@@ -180,18 +200,7 @@ export const columnResizeStateInitializer = state => _extends({}, state, {
 export const useGridColumnResize = (apiRef, props) => {
   const theme = useTheme();
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
-  const colDefRef = React.useRef();
-  const previousMouseClickEvent = React.useRef();
-  const columnHeaderElementRef = React.useRef();
-  const headerFilterElementRef = React.useRef();
-  const groupHeaderElementsRef = React.useRef([]);
-  const cellElementsRef = React.useRef([]);
-  const leftPinnedCellsAfterRef = React.useRef([]);
-  const rightPinnedCellsBeforeRef = React.useRef([]);
-  const fillerLeftRef = React.useRef();
-  const fillerRightRef = React.useRef();
-  const leftPinnedHeadersAfterRef = React.useRef([]);
-  const rightPinnedHeadersBeforeRef = React.useRef([]);
+  const refs = useLazyRef(createResizeRefs).current;
 
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
@@ -201,22 +210,25 @@ export const useGridColumnResize = (apiRef, props) => {
   const stopResizeEventTimeout = useTimeout();
   const touchId = React.useRef();
   const updateWidth = newWidth => {
-    logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
-    const prevWidth = columnHeaderElementRef.current.offsetWidth;
+    logger.debug(`Updating width to ${newWidth} for col ${refs.colDef.field}`);
+    const prevWidth = refs.columnHeaderElement.offsetWidth;
     const widthDiff = newWidth - prevWidth;
-    colDefRef.current.computedWidth = newWidth;
-    colDefRef.current.width = newWidth;
-    colDefRef.current.flex = 0;
-    columnHeaderElementRef.current.style.width = `${newWidth}px`;
-    columnHeaderElementRef.current.style.minWidth = `${newWidth}px`;
-    columnHeaderElementRef.current.style.maxWidth = `${newWidth}px`;
-    const headerFilterElement = headerFilterElementRef.current;
+    const columnWidthDiff = newWidth - refs.initialColWidth;
+    const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
+    apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    refs.colDef.computedWidth = newWidth;
+    refs.colDef.width = newWidth;
+    refs.colDef.flex = 0;
+    refs.columnHeaderElement.style.width = `${newWidth}px`;
+    refs.columnHeaderElement.style.minWidth = `${newWidth}px`;
+    refs.columnHeaderElement.style.maxWidth = `${newWidth}px`;
+    const headerFilterElement = refs.headerFilterElement;
     if (headerFilterElement) {
       headerFilterElement.style.width = `${newWidth}px`;
       headerFilterElement.style.minWidth = `${newWidth}px`;
       headerFilterElement.style.maxWidth = `${newWidth}px`;
     }
-    groupHeaderElementsRef.current.forEach(element => {
+    refs.groupHeaderElements.forEach(element => {
       const div = element;
       let finalWidth;
       if (div.getAttribute('aria-colspan') === '1') {
@@ -230,7 +242,7 @@ export const useGridColumnResize = (apiRef, props) => {
       div.style.minWidth = finalWidth;
       div.style.maxWidth = finalWidth;
     });
-    cellElementsRef.current.forEach(element => {
+    refs.cellElements.forEach(element => {
       const div = element;
       let finalWidth;
       if (div.getAttribute('aria-colspan') === '1') {
@@ -242,22 +254,22 @@ export const useGridColumnResize = (apiRef, props) => {
       }
       div.style.setProperty('--width', finalWidth);
     });
-    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, colDefRef.current.field);
+    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
     if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
-      updateProperty(fillerLeftRef.current, 'width', widthDiff);
-      leftPinnedCellsAfterRef.current.forEach(cell => {
+      updateProperty(refs.fillerLeft, 'width', widthDiff);
+      refs.leftPinnedCellsAfter.forEach(cell => {
         updateProperty(cell, 'left', widthDiff);
       });
-      leftPinnedHeadersAfterRef.current.forEach(header => {
+      refs.leftPinnedHeadersAfter.forEach(header => {
         updateProperty(header, 'left', widthDiff);
       });
     }
     if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
-      updateProperty(fillerRightRef.current, 'width', widthDiff);
-      rightPinnedCellsBeforeRef.current.forEach(cell => {
+      updateProperty(refs.fillerRight, 'width', widthDiff);
+      refs.rightPinnedCellsBefore.forEach(cell => {
         updateProperty(cell, 'right', widthDiff);
       });
-      rightPinnedHeadersBeforeRef.current.forEach(header => {
+      refs.rightPinnedHeadersBefore.forEach(header => {
         updateProperty(header, 'right', widthDiff);
       });
     }
@@ -267,21 +279,36 @@ export const useGridColumnResize = (apiRef, props) => {
     stopListening();
 
     // Prevent double-clicks from being interpreted as two separate clicks
-    if (previousMouseClickEvent.current) {
-      const prevEvent = previousMouseClickEvent.current;
+    if (refs.previousMouseClickEvent) {
+      const prevEvent = refs.previousMouseClickEvent;
       const prevTimeStamp = prevEvent.timeStamp;
       const prevClientX = prevEvent.clientX;
       const prevClientY = prevEvent.clientY;
 
       // Check if the current event is part of a double-click
       if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
-        previousMouseClickEvent.current = undefined;
+        refs.previousMouseClickEvent = undefined;
         return;
       }
     }
-    if (colDefRef.current) {
-      apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
-      logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+    if (refs.colDef) {
+      apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width);
+      logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
+      const columnsState = gridColumnsStateSelector(apiRef.current.state);
+      refs.groupHeaderElements.forEach(element => {
+        const fields = getFieldsFromGroupHeaderElem(element);
+        const div = element;
+        const newWidth = fields.reduce((acc, field) => {
+          if (columnsState.columnVisibilityModel[field] !== false) {
+            return acc + columnsState.lookup[field].computedWidth;
+          }
+          return acc;
+        }, 0);
+        const finalWidth = `${newWidth}px`;
+        div.style.width = finalWidth;
+        div.style.minWidth = finalWidth;
+        div.style.maxWidth = finalWidth;
+      });
     }
     stopResizeEventTimeout.start(0, () => {
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
@@ -289,23 +316,25 @@ export const useGridColumnResize = (apiRef, props) => {
   };
   const storeReferences = (colDef, separator, xStart) => {
     const root = apiRef.current.rootElementRef.current;
-    colDefRef.current = colDef;
-    columnHeaderElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersContainerRef.current, colDef.field);
+    refs.initialColWidth = colDef.computedWidth;
+    refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth;
+    refs.colDef = colDef;
+    refs.columnHeaderElement = findHeaderElementFromField(apiRef.current.columnHeadersContainerRef.current, colDef.field);
     const headerFilterElement = root.querySelector(`.${gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
     if (headerFilterElement) {
-      headerFilterElementRef.current = headerFilterElement;
+      refs.headerFilterElement = headerFilterElement;
     }
-    groupHeaderElementsRef.current = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
-    cellElementsRef.current = findGridCellElementsFromCol(columnHeaderElementRef.current, apiRef.current);
-    fillerLeftRef.current = findGridElement(apiRef.current, 'filler--pinnedLeft');
-    fillerRightRef.current = findGridElement(apiRef.current, 'filler--pinnedRight');
-    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, colDefRef.current.field);
-    leftPinnedCellsAfterRef.current = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, columnHeaderElementRef.current);
-    rightPinnedCellsBeforeRef.current = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, columnHeaderElementRef.current);
-    leftPinnedHeadersAfterRef.current = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, columnHeaderElementRef.current);
-    rightPinnedHeadersBeforeRef.current = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, columnHeaderElementRef.current);
+    refs.groupHeaderElements = findGroupHeaderElementsFromField(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
+    refs.cellElements = findGridCellElementsFromCol(refs.columnHeaderElement, apiRef.current);
+    refs.fillerLeft = findGridElement(apiRef.current, 'filler--pinnedLeft');
+    refs.fillerRight = findGridElement(apiRef.current, 'filler--pinnedRight');
+    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
+    refs.leftPinnedCellsAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedCellsAfterCol(apiRef.current, refs.columnHeaderElement);
+    refs.rightPinnedCellsBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedCellsBeforeCol(apiRef.current, refs.columnHeaderElement);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== GridPinnedColumnPosition.LEFT ? [] : findLeftPinnedHeadersAfterCol(apiRef.current, refs.columnHeaderElement);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== GridPinnedColumnPosition.RIGHT ? [] : findRightPinnedHeadersBeforeCol(apiRef.current, refs.columnHeaderElement);
     resizeDirection.current = getResizeDirection(separator, theme.direction);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };
   const handleResizeMouseUp = useEventCallback(finishResize);
   const handleResizeMouseMove = useEventCallback(nativeEvent => {
@@ -314,12 +343,12 @@ export const useGridColumnResize = (apiRef, props) => {
       handleResizeMouseUp(nativeEvent);
       return;
     }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
+    newWidth = clamp(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params = {
-      element: columnHeaderElementRef.current,
-      colDef: colDefRef.current,
+      element: refs.columnHeaderElement,
+      colDef: refs.colDef,
       width: newWidth
     };
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
@@ -342,12 +371,12 @@ export const useGridColumnResize = (apiRef, props) => {
       handleTouchEnd(nativeEvent);
       return;
     }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
+    newWidth = clamp(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params = {
-      element: columnHeaderElementRef.current,
-      colDef: colDefRef.current,
+      element: refs.columnHeaderElement,
+      colDef: refs.colDef,
       width: newWidth
     };
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
@@ -391,10 +420,10 @@ export const useGridColumnResize = (apiRef, props) => {
     setTimeout(() => {
       doc.removeEventListener('click', preventClick, true);
     }, 100);
-    if (columnHeaderElementRef.current) {
-      columnHeaderElementRef.current.style.pointerEvents = 'unset';
+    if (refs.columnHeaderElement) {
+      refs.columnHeaderElement.style.pointerEvents = 'unset';
     }
-  }, [apiRef, columnHeaderElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+  }, [apiRef, refs, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
   const handleResizeStart = React.useCallback(({
     field
   }) => {
@@ -435,7 +464,7 @@ export const useGridColumnResize = (apiRef, props) => {
     storeReferences(colDef, event.currentTarget, event.clientX);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
-    previousMouseClickEvent.current = event.nativeEvent;
+    refs.previousMouseClickEvent = event.nativeEvent;
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
 

package/hooks/features/columns/gridColumnsUtils.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, GridColumnsInitialState } from './gridColumnsInterfaces';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridApiCommon } from '../../../models/api/gridApiCommon';
 import { GridRowEntry } from '../../../models/gridRows';
+import type { GridDimensions } from '../dimensions/gridDimensionsApi';
 export declare const COLUMNS_DIMENSION_PROPERTIES: readonly ["maxWidth", "minWidth", "width", "flex"];
 export type GridColumnDimensionProperties = (typeof COLUMNS_DIMENSION_PROPERTIES)[number];
 /**
@@ -31,7 +33,7 @@ export declare function computeFlexColumnsWidth({ initialFreeSpace, totalFlexUni
  * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
  * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
  */
-export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, viewportInnerWidth: number) => GridColumnsState;
+export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, dimensions: GridDimensions | undefined) => GridColumnsState;
 /**
  * Apply the order and the dimensions of the initial state.
  * The columns not registered in `orderedFields` will be placed after the imported columns.
@@ -40,7 +42,7 @@ export declare const applyInitialState: (columnsState: GridColumnsRawState, init
 export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnVisibilityModel, keepOnlyColumnsToUpsert, }: {
     columnsToUpsert: readonly GridColDef[];
     initialState: GridColumnsInitialState | undefined;
-    columnVisibilityModel?: GridColumnVisibilityModel | undefined;
+    columnVisibilityModel?: GridColumnVisibilityModel;
     keepOnlyColumnsToUpsert: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
 }) => GridColumnsState;
@@ -51,4 +53,4 @@ export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender,
     lastRowToRender: number;
     visibleRows: GridRowEntry[];
 }): number;
-export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, headerHeight: number): number;
+export declare function getTotalHeaderHeight(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columnHeaderHeight' | 'headerFilterHeight'>): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -110,7 +110,7 @@ export function computeFlexColumnsWidth({
  * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
  * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
  */
-export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
+export const hydrateColumnsWidth = (rawState, dimensions) => {
   const columnsLookup = {};
   let totalFlexUnits = 0;
   let widthAllocatedBeforeFlex = 0;
@@ -136,10 +136,11 @@ export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
     }
     columnsLookup[columnField] = newColumn;
   });
-  const initialFreeSpace = Math.max(viewportInnerWidth - widthAllocatedBeforeFlex, 0);
+  const availableWidth = dimensions === undefined ? 0 : dimensions.viewportOuterSize.width - (dimensions.hasScrollY ? dimensions.scrollbarSize : 0);
+  const initialFreeSpace = Math.max(availableWidth - widthAllocatedBeforeFlex, 0);
 
   // Allocate the remaining space to the flex columns
-  if (totalFlexUnits > 0 && viewportInnerWidth > 0) {
+  if (totalFlexUnits > 0 && availableWidth > 0) {
     const computedColumnWidths = computeFlexColumnsWidth({
       initialFreeSpace,
       totalFlexUnits,
@@ -282,7 +283,7 @@ export const createColumnsState = ({
   }
   const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
   const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
-  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.().viewportInnerSize.width ?? 0);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.() ?? undefined);
 };
 export function getFirstNonSpannedColumnToRender({
   firstColumnToRender,
@@ -304,10 +305,11 @@ export function getFirstNonSpannedColumnToRender({
   }
   return firstNonSpannedColumnToRender;
 }
-export function getTotalHeaderHeight(apiRef, headerHeight) {
+export function getTotalHeaderHeight(apiRef, props) {
   const densityFactor = gridDensityFactorSelector(apiRef);
   const maxDepth = gridColumnGroupsHeaderMaxDepthSelector(apiRef);
   const isHeaderFilteringEnabled = gridHeaderFilteringEnabledSelector(apiRef);
-  const multiplicationFactor = isHeaderFilteringEnabled ? 2 : 1;
-  return Math.floor(headerHeight * densityFactor) * ((maxDepth ?? 0) + multiplicationFactor);
+  const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
+  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
 }

package/hooks/features/columns/useGridColumns.js

@@ -133,7 +133,7 @@ export function useGridColumns(apiRef, props) {
       lookup: _extends({}, columnsState.lookup, {
         [field]: newColumn
       })
-    }), apiRef.current.getRootDimensions().viewportInnerSize.width));
+    }), apiRef.current.getRootDimensions()));
     apiRef.current.publishEvent('columnWidthChange', {
       element: apiRef.current.getColumnHeaderElement(field),
       colDef: newColumn,
@@ -237,14 +237,15 @@ export function useGridColumns(apiRef, props) {
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   useGridRegisterPipeProcessor(apiRef, 'preferencePanel', preferencePanelPreProcessing);
 
-  /**
+  /*
    * EVENTS
    */
+
   const prevInnerWidth = React.useRef(null);
   const handleGridSizeChange = viewportInnerSize => {
     if (prevInnerWidth.current !== viewportInnerSize.width) {
       prevInnerWidth.current = viewportInnerSize.width;
-      setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), viewportInnerSize.width));
+      setGridColumnsState(hydrateColumnsWidth(gridColumnsStateSelector(apiRef.current.state), apiRef.current.getRootDimensions()));
     }
   };
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
@@ -264,7 +265,7 @@ export function useGridColumns(apiRef, props) {
   }, [apiRef, logger, setGridColumnsState]);
   useGridRegisterPipeApplier(apiRef, 'hydrateColumns', hydrateColumns);
 
-  /**
+  /*
    * EFFECTS
    */
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`

package/hooks/features/density/useGridDensity.d.ts

@@ -3,4 +3,4 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
-export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density' | 'onDensityChange'>) => void;
+export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density' | 'onDensityChange' | 'initialState'>) => void;

package/hooks/features/density/useGridDensity.js

@@ -4,6 +4,7 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export const densityStateInitializer = (state, props) => _extends({}, state, {
   density: props.initialState?.density ?? props.density ?? 'standard'
 });
@@ -26,13 +27,38 @@ export const useGridDensity = (apiRef, props) => {
       density: newDensity
     }));
   });
+  const densityApi = {
+    setDensity
+  };
+  useGridApiMethod(apiRef, densityApi, 'public');
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedDensity = gridDensitySelector(apiRef.current.state);
+    const shouldExportRowCount =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `density` is controlled
+    props.density != null ||
+    // Always export if the `density` has been initialized
+    props.initialState?.density != null;
+    if (!shouldExportRowCount) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      density: exportedDensity
+    });
+  }, [apiRef, props.density, props.initialState?.density]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredDensity = context.stateToRestore?.density ? context.stateToRestore.density : gridDensitySelector(apiRef.current.state);
+    apiRef.current.setState(state => _extends({}, state, {
+      density: restoredDensity
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   React.useEffect(() => {
     if (props.density) {
       apiRef.current.setDensity(props.density);
     }
   }, [apiRef, props.density]);
-  const densityApi = {
-    setDensity
-  };
-  useGridApiMethod(apiRef, densityApi, 'public');
 };

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

@@ -58,9 +58,13 @@ export interface GridDimensions {
      */
     rightPinnedWidth: number;
     /**
-     * Height of one headers.
+     * Height of one column header.
      */
     headerHeight: number;
+    /**
+     * Height of header filters.
+     */
+    headerFilterHeight: number;
     /**
      * Height of all the column headers.
      */

package/hooks/features/dimensions/useGridDimensions.d.ts

@@ -3,7 +3,7 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridDimensions } from './gridDimensionsApi';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight'>;
+type RootProps = Pick<DataGridProcessedProps, 'onResize' | 'scrollbarSize' | 'pagination' | 'paginationMode' | 'autoHeight' | 'getRowHeight' | 'rowHeight' | 'resizeThrottleMs' | 'columnHeaderHeight' | 'headerFilterHeight'>;
 export type GridDimensionsState = GridDimensions;
 export declare const dimensionsStateInitializer: GridStateInitializer<RootProps>;
 export declare function useGridDimensions(apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: RootProps): void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -29,6 +29,7 @@ const EMPTY_DIMENSIONS = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
   columnsTotalWidth: 0,
@@ -53,8 +54,9 @@ export function useGridDimensions(apiRef, props) {
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces(gridColumnsTotalWidthSelector(apiRef), 6);
-  const headersTotalHeight = getTotalHeaderHeight(apiRef, props.columnHeaderHeight);
+  const headersTotalHeight = getTotalHeaderHeight(apiRef, props);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
   const [savedSize, setSavedSize] = React.useState();
@@ -176,6 +178,7 @@ export function useGridDimensions(apiRef, props) {
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      headerFilterHeight,
       rowWidth,
       rowHeight,
       columnsTotalWidth,
@@ -191,7 +194,7 @@ export function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
     resize,
     getRootDimensions

package/hooks/features/editing/useGridCellEditing.js

@@ -153,13 +153,26 @@ export const useGridCellEditing = (apiRef, props) => {
       cellToFocusAfter
     });
   }, [apiRef]);
+  const runIfNoFieldErrors = callback => async (...args) => {
+    if (callback) {
+      const {
+        id,
+        field
+      } = args[0];
+      const editRowsState = apiRef.current.state.editRows;
+      const hasFieldErrors = editRowsState[id][field]?.error;
+      if (!hasFieldErrors) {
+        callback(...args);
+      }
+    }
+  };
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
   useGridApiEventHandler(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
   useGridApiEventHandler(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
   useGridApiOptionHandler(apiRef, 'cellEditStart', props.onCellEditStart);
-  useGridApiOptionHandler(apiRef, 'cellEditStop', props.onCellEditStop);
+  useGridApiOptionHandler(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
   const getCellMode = React.useCallback((id, field) => {
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
     const isEditing = editingState[id] && editingState[id][field];

package/hooks/features/export/useGridPrintExport.d.ts

@@ -7,4 +7,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridSorting (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridPrintExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight'>) => void;
+export declare const useGridPrintExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight' | 'headerFilterHeight'>) => void;

package/hooks/features/export/useGridPrintExport.js

@@ -107,7 +107,7 @@ export const useGridPrintExport = (apiRef, props) => {
     }
 
     // Expand container height to accommodate all rows
-    const computedTotalHeight = rowsMeta.currentPageTotalHeight + getTotalHeaderHeight(apiRef, props.columnHeaderHeight) + gridToolbarElementHeight + gridFooterElementHeight;
+    const computedTotalHeight = rowsMeta.currentPageTotalHeight + getTotalHeaderHeight(apiRef, props) + gridToolbarElementHeight + gridFooterElementHeight;
     gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
@@ -181,7 +181,7 @@ export const useGridPrintExport = (apiRef, props) => {
         printWindow.contentWindow.print();
       });
     }
-  }, [apiRef, doc, props.columnHeaderHeight]);
+  }, [apiRef, doc, props]);
   const handlePrintWindowAfterPrint = React.useCallback(printWindow => {
     // Remove the print iframe
     doc.current.body.removeChild(printWindow);

package/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const headerFilteringStateInitializer: GridStateInitializer;
-export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedPropsWithShared, 'signature' | 'headerFilters'>) => void;
+export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'signature' | 'headerFilters'>) => void;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -10,4 +10,4 @@ import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGrid
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedPropsWithShared, 'pagination' | 'paginationMode' | 'getRowId' | 'experimentalFeatures' | 'signature' | 'headerFilters'>) => void;
+export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode' | 'getRowId' | 'experimentalFeatures' | 'signature' | 'headerFilters'>) => void;

package/hooks/features/pagination/gridPaginationInterfaces.d.ts

@@ -1,11 +1,13 @@
-import { GridPaginationModel } from '../../../models/gridPaginationProps';
+import { GridPaginationMeta, GridPaginationModel } from '../../../models/gridPaginationProps';
 export interface GridPaginationState {
     paginationModel: GridPaginationModel;
     rowCount: number;
+    meta: GridPaginationMeta;
 }
 export interface GridPaginationInitialState {
     paginationModel?: Partial<GridPaginationModel>;
     rowCount?: number;
+    meta?: GridPaginationMeta;
 }
 /**
  * The pagination model API interface that is available in the grid `apiRef`.
@@ -37,8 +39,18 @@ export interface GridPaginationRowCountApi {
      */
     setRowCount: (rowCount: number) => void;
 }
+/**
+ * The pagination meta API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationMetaApi {
+    /**
+     * Sets the `paginationMeta` to a new value.
+     * @param {GridPaginationMeta} paginationMeta The new pagination meta value.
+     */
+    setPaginationMeta: (paginationMeta: GridPaginationMeta) => void;
+}
 /**
  * The pagination API interface that is available in the grid `apiRef`.
  */
-export interface GridPaginationApi extends GridPaginationModelApi, GridPaginationRowCountApi {
+export interface GridPaginationApi extends GridPaginationModelApi, GridPaginationRowCountApi, GridPaginationMetaApi {
 }