@mui/x-data-grid 7.1.1 → 7.3.0

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -1,6 +1,7 @@
 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 { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
@@ -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,21 @@ 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}`);
     }
     stopResizeEventTimeout.start(0, () => {
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
@@ -289,23 +301,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 +328,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 +356,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 +405,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 +449,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/modern/hooks/features/columns/gridColumnsUtils.js

@@ -304,10 +304,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/modern/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/modern/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/modern/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];
@@ -168,7 +181,9 @@ export const useGridCellEditing = (apiRef, props) => {
   const updateCellModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
-      onCellModesModelChange(newModel, {});
+      onCellModesModelChange(newModel, {
+        api: apiRef.current
+      });
     }
     if (props.cellModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win

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

@@ -242,7 +242,9 @@ export const useGridRowEditing = (apiRef, props) => {
   const updateRowModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
-      onRowModesModelChange(newModel, {});
+      onRowModesModelChange(newModel, {
+        api: apiRef.current
+      });
     }
     if (props.rowModesModel && isNewModelDifferentFromProp) {
       return; // The prop always win

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

@@ -2,12 +2,13 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
 import { buildWarning } from '../../../../utils/warning';
 function sanitizeCellValue(value, delimiterCharacter, shouldAppendQuotes) {
   if (typeof value === 'string') {
-    // Make sure value containing delimiter or line break won't be split into multiple rows
-    if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
-      if (shouldAppendQuotes) {
-        return `"${value.replace(/"/g, '""')}"`;
+    if (shouldAppendQuotes) {
+      const escapedValue = value.replace(/"/g, '""');
+      // Make sure value containing delimiter or line break won't be split into multiple rows
+      if ([delimiterCharacter, '\n', '\r', '"'].some(delimiter => value.includes(delimiter))) {
+        return `"${escapedValue}"`;
       }
-      return `${value.replace(/"/g, '""')}`;
+      return escapedValue;
     }
     return value;
   }

package/modern/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/modern/hooks/features/pagination/gridPaginationSelector.js

@@ -21,6 +21,12 @@ export const gridPaginationModelSelector = createSelector(gridPaginationSelector
  */
 export const gridPaginationRowCountSelector = createSelector(gridPaginationSelector, pagination => pagination.rowCount);
 
+/**
+ * Get the pagination meta
+ * @category Pagination
+ */
+export const gridPaginationMetaSelector = createSelector(gridPaginationSelector, pagination => pagination.meta);
+
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
@@ -37,7 +43,7 @@ export const gridPageSizeSelector = createSelector(gridPaginationModelSelector,
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-export const gridPageCountSelector = createSelector(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => getPageCount(rowCount, pageSize));
+export const gridPageCountSelector = createSelector(gridPaginationModelSelector, gridPaginationRowCountSelector, (paginationModel, rowCount) => getPageCount(rowCount, paginationModel.pageSize, paginationModel.page));
 
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.

package/modern/hooks/features/pagination/gridPaginationUtils.js

@@ -1,14 +1,16 @@
-import { buildWarning } from '../../../utils/warning';
 import { GridSignature } from '../../utils';
 const MAX_PAGE_SIZE = 100;
 export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
-export const getPageCount = (rowCount, pageSize) => {
+export const getPageCount = (rowCount, pageSize, page) => {
   if (pageSize > 0 && rowCount > 0) {
     return Math.ceil(rowCount / pageSize);
   }
+  if (rowCount === -1) {
+    // With unknown row-count, we can assume a page after the current one
+    return page + 2;
+  }
   return 0;
 };
-export const noRowCountInServerMode = buildWarning(["MUI X: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
 export const getDefaultGridPaginationModel = autoPageSize => ({
   page: 0,
   pageSize: autoPageSize ? 0 : 100

package/modern/hooks/features/pagination/useGridPagination.js

@@ -2,14 +2,17 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from './gridPaginationUtils';
 import { useGridPaginationModel } from './useGridPaginationModel';
 import { useGridRowCount } from './useGridRowCount';
+import { useGridPaginationMeta } from './useGridPaginationMeta';
 export const paginationStateInitializer = (state, props) => {
   const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
   throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
   const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
+  const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return _extends({}, state, {
     pagination: {
       paginationModel,
-      rowCount
+      rowCount,
+      meta
     }
   });
 };
@@ -19,6 +22,7 @@ export const paginationStateInitializer = (state, props) => {
  * @requires useGridDimensions (event) - can be after
  */
 export const useGridPagination = (apiRef, props) => {
+  useGridPaginationMeta(apiRef, props);
   useGridPaginationModel(apiRef, props);
   useGridRowCount(apiRef, props);
 };

package/modern/hooks/features/pagination/useGridPaginationMeta.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridLogger, useGridSelector, useGridApiMethod } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPaginationMetaSelector } from './gridPaginationSelector';
+export const useGridPaginationMeta = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridPaginationMeta');
+  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
+  apiRef.current.registerControlState({
+    stateId: 'paginationMeta',
+    propModel: props.paginationMeta,
+    propOnChange: props.onPaginationMetaChange,
+    stateSelector: gridPaginationMetaSelector,
+    changeEvent: 'paginationMetaChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPaginationMeta = React.useCallback(newPaginationMeta => {
+    if (paginationMeta === newPaginationMeta) {
+      return;
+    }
+    logger.debug("Setting 'paginationMeta' to", newPaginationMeta);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        meta: newPaginationMeta
+      })
+    }));
+  }, [apiRef, logger, paginationMeta]);
+  const paginationMetaApi = {
+    setPaginationMeta
+  };
+  useGridApiMethod(apiRef, paginationMetaApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedPaginationMeta = gridPaginationMetaSelector(apiRef);
+    const shouldExportRowCount =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `paginationMeta` is controlled
+    props.paginationMeta != null ||
+    // Always export if the `paginationMeta` has been initialized
+    props.initialState?.pagination?.meta != null;
+    if (!shouldExportRowCount) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        meta: exportedPaginationMeta
+      })
+    });
+  }, [apiRef, props.paginationMeta, props.initialState?.pagination?.meta]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredPaginationMeta = context.stateToRestore.pagination?.meta ? context.stateToRestore.pagination.meta : gridPaginationMetaSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        meta: restoredPaginationMeta
+      })
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (props.paginationMeta) {
+      apiRef.current.setPaginationMeta(props.paginationMeta);
+    }
+  }, [apiRef, props.paginationMeta]);
+};

package/modern/hooks/features/pagination/useGridPaginationModel.js

@@ -9,7 +9,8 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
   let paginationModel = paginationState.paginationModel;
   const rowCount = paginationState.rowCount;
   const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
-  const pageCount = getPageCount(rowCount, pageSize);
+  const page = paginationModelProp?.page ?? paginationModel.page;
+  const pageCount = getPageCount(rowCount, pageSize, page);
   if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
     paginationModel = paginationModelProp;
   }