@mui/x-data-grid 7.2.0 → 7.3.0

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

@@ -8,6 +8,7 @@ exports.useGridColumnResize = exports.columnResizeStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _styles = require("@mui/material/styles");
 var _domUtils = require("../../../utils/domUtils");
 var _gridColumnResizeApi = require("./gridColumnResizeApi");
@@ -182,26 +183,34 @@ const columnResizeStateInitializer = state => (0, _extends2.default)({}, state,
     resizingColumnField: ''
   }
 });
+exports.columnResizeStateInitializer = columnResizeStateInitializer;
+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
  */
-exports.columnResizeStateInitializer = columnResizeStateInitializer;
 const useGridColumnResize = (apiRef, props) => {
   const theme = (0, _styles.useTheme)();
   const logger = (0, _utils2.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 = (0, _useLazyRef.default)(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.
@@ -211,22 +220,25 @@ const useGridColumnResize = (apiRef, props) => {
   const stopResizeEventTimeout = (0, _useTimeout.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') {
@@ -240,7 +252,7 @@ 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') {
@@ -252,22 +264,22 @@ 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 === _gridColumnsInterfaces.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 === _gridColumnsInterfaces.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);
       });
     }
@@ -277,21 +289,21 @@ 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);
@@ -299,23 +311,25 @@ const useGridColumnResize = (apiRef, props) => {
   };
   const storeReferences = (colDef, separator, xStart) => {
     const root = apiRef.current.rootElementRef.current;
-    colDefRef.current = colDef;
-    columnHeaderElementRef.current = (0, _domUtils.findHeaderElementFromField)(apiRef.current.columnHeadersContainerRef.current, colDef.field);
+    refs.initialColWidth = colDef.computedWidth;
+    refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth;
+    refs.colDef = colDef;
+    refs.columnHeaderElement = (0, _domUtils.findHeaderElementFromField)(apiRef.current.columnHeadersContainerRef.current, colDef.field);
     const headerFilterElement = root.querySelector(`.${_gridClasses.gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
     if (headerFilterElement) {
-      headerFilterElementRef.current = headerFilterElement;
+      refs.headerFilterElement = headerFilterElement;
     }
-    groupHeaderElementsRef.current = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
-    cellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(columnHeaderElementRef.current, apiRef.current);
-    fillerLeftRef.current = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedLeft');
-    fillerRightRef.current = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedRight');
-    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, colDefRef.current.field);
-    leftPinnedCellsAfterRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedCellsAfterCol)(apiRef.current, columnHeaderElementRef.current);
-    rightPinnedCellsBeforeRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, columnHeaderElementRef.current);
-    leftPinnedHeadersAfterRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, columnHeaderElementRef.current);
-    rightPinnedHeadersBeforeRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, columnHeaderElementRef.current);
+    refs.groupHeaderElements = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
+    refs.cellElements = (0, _domUtils.findGridCellElementsFromCol)(refs.columnHeaderElement, apiRef.current);
+    refs.fillerLeft = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedLeft');
+    refs.fillerRight = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedRight');
+    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
+    refs.leftPinnedCellsAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedCellsAfterCol)(apiRef.current, refs.columnHeaderElement);
+    refs.rightPinnedCellsBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, refs.columnHeaderElement);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, refs.columnHeaderElement);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.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 = (0, _utils.unstable_useEventCallback)(finishResize);
   const handleResizeMouseMove = (0, _utils.unstable_useEventCallback)(nativeEvent => {
@@ -324,12 +338,12 @@ const useGridColumnResize = (apiRef, props) => {
       handleResizeMouseUp(nativeEvent);
       return;
     }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = (0, _utils3.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
+    newWidth = (0, _utils3.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);
@@ -352,12 +366,12 @@ const useGridColumnResize = (apiRef, props) => {
       handleTouchEnd(nativeEvent);
       return;
     }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = (0, _utils3.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
+    newWidth = (0, _utils3.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);
@@ -401,10 +415,10 @@ 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
   }) => {
@@ -445,7 +459,7 @@ const useGridColumnResize = (apiRef, props) => {
     storeReferences(colDef, event.currentTarget, event.clientX);
     const doc = (0, _utils.unstable_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/node/hooks/features/columns/gridColumnsUtils.js

@@ -319,10 +319,11 @@ function getFirstNonSpannedColumnToRender({
   }
   return firstNonSpannedColumnToRender;
 }
-function getTotalHeaderHeight(apiRef, headerHeight) {
+function getTotalHeaderHeight(apiRef, props) {
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
   const isHeaderFilteringEnabled = (0, _gridHeaderFilteringSelectors.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/node/hooks/features/density/useGridDensity.js

@@ -11,6 +11,7 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useGridLogger = require("../../utils/useGridLogger");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _densitySelector = require("./densitySelector");
+var _pipeProcessing = require("../../core/pipeProcessing");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const densityStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
@@ -36,14 +37,39 @@ const useGridDensity = (apiRef, props) => {
       density: newDensity
     }));
   });
+  const densityApi = {
+    setDensity
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, densityApi, 'public');
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedDensity = (0, _densitySelector.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 (0, _extends2.default)({}, prevState, {
+      density: exportedDensity
+    });
+  }, [apiRef, props.density, props.initialState?.density]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredDensity = context.stateToRestore?.density ? context.stateToRestore.density : (0, _densitySelector.gridDensitySelector)(apiRef.current.state);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      density: restoredDensity
+    }));
+    return params;
+  }, [apiRef]);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   React.useEffect(() => {
     if (props.density) {
       apiRef.current.setDensity(props.density);
     }
   }, [apiRef, props.density]);
-  const densityApi = {
-    setDensity
-  };
-  (0, _useGridApiMethod.useGridApiMethod)(apiRef, densityApi, 'public');
 };
 exports.useGridDensity = useGridDensity;

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

@@ -39,6 +39,7 @@ const EMPTY_DIMENSIONS = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
   columnsTotalWidth: 0,
@@ -64,8 +65,9 @@ function useGridDimensions(apiRef, props) {
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.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((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 6);
-  const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight);
+  const headersTotalHeight = (0, _gridColumnsUtils.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();
@@ -187,6 +189,7 @@ function useGridDimensions(apiRef, props) {
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      headerFilterHeight,
       rowWidth,
       rowHeight,
       columnsTotalWidth,
@@ -202,7 +205,7 @@ 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/node/hooks/features/editing/useGridCellEditing.js

@@ -162,13 +162,26 @@ 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);
+      }
+    }
+  };
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStart', runIfEditModeIsCell(handleCellEditStart));
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellEditStop', runIfEditModeIsCell(handleCellEditStop));
   (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStart', props.onCellEditStart);
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStop', props.onCellEditStop);
+  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'cellEditStop', runIfNoFieldErrors(props.onCellEditStop));
   const getCellMode = React.useCallback((id, field) => {
     const editingState = (0, _gridEditingSelectors.gridEditRowsStateSelector)(apiRef.current.state);
     const isEditing = editingState[id] && editingState[id][field];

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

@@ -116,7 +116,7 @@ const useGridPrintExport = (apiRef, props) => {
     }
 
     // Expand container height to accommodate all rows
-    const computedTotalHeight = rowsMeta.currentPageTotalHeight + (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props.columnHeaderHeight) + gridToolbarElementHeight + gridFooterElementHeight;
+    const computedTotalHeight = rowsMeta.currentPageTotalHeight + (0, _gridColumnsUtils.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';
@@ -190,7 +190,7 @@ 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/node/hooks/features/pagination/gridPaginationSelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
+exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = exports.gridPaginationMetaSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridFilterSelector = require("../filter/gridFilterSelector");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
@@ -27,6 +27,12 @@ const gridPaginationModelSelector = exports.gridPaginationModelSelector = (0, _c
  */
 const gridPaginationRowCountSelector = exports.gridPaginationRowCountSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.rowCount);
 
+/**
+ * Get the pagination meta
+ * @category Pagination
+ */
+const gridPaginationMetaSelector = exports.gridPaginationMetaSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.meta);
+
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
@@ -43,7 +49,7 @@ const gridPageSizeSelector = exports.gridPageSizeSelector = (0, _createSelector.
  * Get the amount of pages needed to display all the rows if the pagination is enabled
  * @category Pagination
  */
-const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelector.createSelector)(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => (0, _gridPaginationUtils.getPageCount)(rowCount, pageSize));
+const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelector.createSelector)(gridPaginationModelSelector, gridPaginationRowCountSelector, (paginationModel, rowCount) => (0, _gridPaginationUtils.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/node/hooks/features/pagination/gridPaginationUtils.js

@@ -3,20 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.throwIfPageSizeExceedsTheLimit = exports.noRowCountInServerMode = exports.getValidPage = exports.getPageCount = exports.getDefaultGridPaginationModel = exports.defaultPageSize = void 0;
-var _warning = require("../../../utils/warning");
+exports.throwIfPageSizeExceedsTheLimit = exports.getValidPage = exports.getPageCount = exports.getDefaultGridPaginationModel = exports.defaultPageSize = void 0;
 var _utils = require("../../utils");
 const MAX_PAGE_SIZE = 100;
 const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 exports.defaultPageSize = defaultPageSize;
-const getPageCount = (rowCount, pageSize) => {
+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;
 };
 exports.getPageCount = getPageCount;
-const noRowCountInServerMode = exports.noRowCountInServerMode = (0, _warning.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');
 const getDefaultGridPaginationModel = autoPageSize => ({
   page: 0,
   pageSize: autoPageSize ? 0 : 100

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

@@ -9,14 +9,17 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _gridPaginationUtils = require("./gridPaginationUtils");
 var _useGridPaginationModel = require("./useGridPaginationModel");
 var _useGridRowCount = require("./useGridRowCount");
+var _useGridPaginationMeta = require("./useGridPaginationMeta");
 const paginationStateInitializer = (state, props) => {
   const paginationModel = (0, _extends2.default)({}, (0, _gridPaginationUtils.getDefaultGridPaginationModel)(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
   (0, _gridPaginationUtils.throwIfPageSizeExceedsTheLimit)(paginationModel.pageSize, props.signature);
   const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
+  const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return (0, _extends2.default)({}, state, {
     pagination: {
       paginationModel,
-      rowCount
+      rowCount,
+      meta
     }
   });
 };
@@ -27,6 +30,7 @@ const paginationStateInitializer = (state, props) => {
  */
 exports.paginationStateInitializer = paginationStateInitializer;
 const useGridPagination = (apiRef, props) => {
+  (0, _useGridPaginationMeta.useGridPaginationMeta)(apiRef, props);
   (0, _useGridPaginationModel.useGridPaginationModel)(apiRef, props);
   (0, _useGridRowCount.useGridRowCount)(apiRef, props);
 };

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

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridPaginationMeta = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("../../utils");
+var _pipeProcessing = require("../../core/pipeProcessing");
+var _gridPaginationSelector = require("./gridPaginationSelector");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useGridPaginationMeta = (apiRef, props) => {
+  const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPaginationMeta');
+  const paginationMeta = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationMetaSelector);
+  apiRef.current.registerControlState({
+    stateId: 'paginationMeta',
+    propModel: props.paginationMeta,
+    propOnChange: props.onPaginationMetaChange,
+    stateSelector: _gridPaginationSelector.gridPaginationMetaSelector,
+    changeEvent: 'paginationMetaChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPaginationMeta = React.useCallback(newPaginationMeta => {
+    if (paginationMeta === newPaginationMeta) {
+      return;
+    }
+    logger.debug("Setting 'paginationMeta' to", newPaginationMeta);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      pagination: (0, _extends2.default)({}, state.pagination, {
+        meta: newPaginationMeta
+      })
+    }));
+  }, [apiRef, logger, paginationMeta]);
+  const paginationMetaApi = {
+    setPaginationMeta
+  };
+  (0, _utils.useGridApiMethod)(apiRef, paginationMetaApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedPaginationMeta = (0, _gridPaginationSelector.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 (0, _extends2.default)({}, prevState, {
+      pagination: (0, _extends2.default)({}, 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 : (0, _gridPaginationSelector.gridPaginationMetaSelector)(apiRef);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      pagination: (0, _extends2.default)({}, state.pagination, {
+        meta: restoredPaginationMeta
+      })
+    }));
+    return params;
+  }, [apiRef]);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (props.paginationMeta) {
+      apiRef.current.setPaginationMeta(props.paginationMeta);
+    }
+  }, [apiRef, props.paginationMeta]);
+};
+exports.useGridPaginationMeta = useGridPaginationMeta;

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

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