@mui/x-data-grid 7.1.1 → 7.3.0

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];
@@ -177,7 +190,9 @@ const useGridCellEditing = (apiRef, props) => {
   const updateCellModesModel = (0, _utils.unstable_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/node/hooks/features/editing/useGridRowEditing.js

@@ -251,7 +251,9 @@ const useGridRowEditing = (apiRef, props) => {
   const updateRowModesModel = (0, _utils.unstable_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/node/hooks/features/export/serializers/csvSerializer.js

@@ -9,12 +9,13 @@ var _colDef = require("../../../../colDef");
 var _warning = require("../../../../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/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;
   }

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

@@ -7,21 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowCount = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _filter = require("../filter");
 var _utils = require("../../utils");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _gridPaginationSelector = require("./gridPaginationSelector");
-var _gridPaginationUtils = require("./gridPaginationUtils");
 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; }
-/**
- * @requires useGridFilter (state)
- * @requires useGridDimensions (event) - can be after
- */
 const useGridRowCount = (apiRef, props) => {
   const logger = (0, _utils.useGridLogger)(apiRef, 'useGridRowCount');
   const visibleTopLevelRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
-  const rowCount = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationRowCountSelector);
+  const rowCountState = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationRowCountSelector);
+  const paginationMeta = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationMetaSelector);
+  const paginationModel = (0, _utils.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
+  const previousPageSize = (0, _useLazyRef.default)(() => (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef).pageSize);
   apiRef.current.registerControlState({
     stateId: 'paginationRowCount',
     propModel: props.rowCount,
@@ -34,7 +33,7 @@ const useGridRowCount = (apiRef, props) => {
    * API METHODS
    */
   const setRowCount = React.useCallback(newRowCount => {
-    if (rowCount === newRowCount) {
+    if (rowCountState === newRowCount) {
       return;
     }
     logger.debug("Setting 'rowCount' to", newRowCount);
@@ -43,7 +42,7 @@ const useGridRowCount = (apiRef, props) => {
         rowCount: newRowCount
       })
     }));
-  }, [apiRef, logger, rowCount]);
+  }, [apiRef, logger, rowCountState]);
   const paginationRowCountApi = {
     setRowCount
   };
@@ -83,21 +82,37 @@ const useGridRowCount = (apiRef, props) => {
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
 
   /**
-   * EFFECTS
+   * EVENTS
    */
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (props.paginationMode === 'server' && props.rowCount == null) {
-        (0, _gridPaginationUtils.noRowCountInServerMode)();
+  const handlePaginationModelChange = React.useCallback(model => {
+    if (props.paginationMode === 'client' || !previousPageSize.current) {
+      return;
+    }
+    if (model.pageSize !== previousPageSize.current) {
+      previousPageSize.current = model.pageSize;
+      if (rowCountState === -1) {
+        // Row count unknown and page size changed, reset the page
+        apiRef.current.setPage(0);
       }
     }
-  }, [props.rowCount, props.paginationMode]);
+  }, [props.paginationMode, previousPageSize, rowCountState, apiRef]);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'paginationModelChange', handlePaginationModelChange);
+
+  /**
+   * EFFECTS
+   */
   React.useEffect(() => {
     if (props.paginationMode === 'client') {
       apiRef.current.setRowCount(visibleTopLevelRowCount);
     } else if (props.rowCount != null) {
       apiRef.current.setRowCount(props.rowCount);
     }
-  }, [apiRef, visibleTopLevelRowCount, props.paginationMode, props.rowCount]);
+  }, [apiRef, props.paginationMode, visibleTopLevelRowCount, props.rowCount]);
+  const isLastPage = paginationMeta.hasNextPage === false;
+  React.useEffect(() => {
+    if (isLastPage && rowCountState === -1) {
+      apiRef.current.setRowCount(paginationModel.pageSize * paginationModel.page + visibleTopLevelRowCount);
+    }
+  }, [apiRef, visibleTopLevelRowCount, isLastPage, rowCountState, paginationModel]);
 };
 exports.useGridRowCount = useGridRowCount;

package/node/index.js

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

package/node/internals/utils/propValidation.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.validateProps = exports.propValidatorsDataGrid = exports.clearWarningsCache = void 0;
 var _utils = require("../../utils/utils");
 var _useGridApiEventHandler = require("../../hooks/utils/useGridApiEventHandler");
-const propValidatorsDataGrid = exports.propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.signature === _useGridApiEventHandler.GridSignature.DataGrid && props.paginationMode === 'client' && (0, _utils.isNumber)(props.rowCount) && 'MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. `rowCount` is only meant to be used with `paginationMode="server"`.' || undefined];
+const propValidatorsDataGrid = exports.propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === _useGridApiEventHandler.GridSignature.DataGrid && props.paginationMode === 'client' && (0, _utils.isNumber)(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
 const warnOnce = message => {
   if (!warnedOnceCache.has(message)) {

package/node/locales/daDK.js

@@ -36,10 +36,9 @@ const daDKGrid = {
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Søg',
+  columnsManagementNoColumns: 'Ingen søjler',
+  columnsManagementShowHideAllText: 'Vis/Shjul Alle',
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelRemoveAll: 'Fjern alle',

package/node/locales/deDE.js

@@ -36,10 +36,9 @@ const deDEGrid = {
   toolbarExportPrint: 'Drucken',
   toolbarExportExcel: 'Download als Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Suche',
+  columnsManagementNoColumns: 'Keine Spalten',
+  columnsManagementShowHideAllText: 'Alle anzeigen/verbergen',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelRemoveAll: 'Alle entfernen',

package/node/locales/frFR.js

@@ -22,7 +22,7 @@ const frFRGrid = {
   // Filters toolbar button text
   toolbarFilters: 'Filtres',
   toolbarFiltersLabel: 'Afficher les filtres',
-  toolbarFiltersTooltipHide: 'Cacher les filtres',
+  toolbarFiltersTooltipHide: 'Masquer les filtres',
   toolbarFiltersTooltipShow: 'Afficher les filtres',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} filtres actifs` : `${count} filtre actif`,
   // Quick filter toolbar field
@@ -36,10 +36,9 @@ const frFRGrid = {
   toolbarExportPrint: 'Imprimer',
   toolbarExportExcel: 'Télécharger pour Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Rechercher',
+  columnsManagementNoColumns: 'Pas de colonnes',
+  columnsManagementShowHideAllText: 'Afficher/masquer toutes',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
   filterPanelRemoveAll: 'Tout supprimer',
@@ -100,7 +99,7 @@ const frFRGrid = {
   columnMenuShowColumns: 'Afficher les colonnes',
   columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
-  columnMenuHideColumn: 'Cacher',
+  columnMenuHideColumn: 'Masquer',
   columnMenuUnsort: 'Annuler le tri',
   columnMenuSortAsc: 'Tri ascendant',
   columnMenuSortDesc: 'Tri descendant',

package/node/locales/svSE.js

@@ -36,10 +36,9 @@ const svSEGrid = {
   toolbarExportPrint: 'Skriv ut',
   toolbarExportExcel: 'Ladda ner som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Sök',
+  columnsManagementNoColumns: 'Inga kolumner',
+  columnsManagementShowHideAllText: 'Visa/Dölj alla',
   // Filter panel text
   filterPanelAddFilter: 'Lägg till filter',
   filterPanelRemoveAll: 'Ta bort alla',

package/node/models/api/index.js

@@ -69,17 +69,6 @@ Object.keys(_gridSortApi).forEach(function (key) {
     }
   });
 });
-var _gridLocaleTextApi = require("./gridLocaleTextApi");
-Object.keys(_gridLocaleTextApi).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridLocaleTextApi[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridLocaleTextApi[key];
-    }
-  });
-});
 var _gridCsvExportApi = require("./gridCsvExportApi");
 Object.keys(_gridCsvExportApi).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/node/utils/cellBorderUtils.js

@@ -5,9 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.shouldCellShowRightBorder = exports.shouldCellShowLeftBorder = void 0;
 var _gridColumnsInterfaces = require("../hooks/features/columns/gridColumnsInterfaces");
-const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp) => {
+const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp, gridHasFiller) => {
   const isSectionLastCell = indexInSection === sectionLength - 1;
-  return showCellVerticalBorderRootProp && (pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT && isSectionLastCell;
+  if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT && isSectionLastCell) {
+    return true;
+  }
+  if (showCellVerticalBorderRootProp) {
+    if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT) {
+      return true;
+    }
+    if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT) {
+      return !isSectionLastCell;
+    }
+    // pinnedPosition === undefined, middle section
+    return !isSectionLastCell || gridHasFiller;
+  }
+  return false;
 };
 exports.shouldCellShowRightBorder = shouldCellShowRightBorder;
 const shouldCellShowLeftBorder = (pinnedPosition, indexInSection) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "7.1.1",
+  "version": "7.3.0",
   "description": "The Community plan edition of the Data Grid components (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",

package/themeAugmentation/overrides.d.ts

@@ -5,4 +5,10 @@ export interface DataGridComponentNameToClassKey {
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey extends DataGridComponentNameToClassKey {
     }
+    interface Mixins {
+        MuiDataGrid?: {
+            containerBackground?: string;
+            pinnedBackground?: string;
+        };
+    }
 }

package/utils/cellBorderUtils.d.ts

@@ -1,3 +1,3 @@
 import { GridPinnedColumnPosition } from '../hooks/features/columns/gridColumnsInterfaces';
-export declare const shouldCellShowRightBorder: (pinnedPosition: GridPinnedColumnPosition | undefined, indexInSection: number, sectionLength: number, showCellVerticalBorderRootProp: boolean) => boolean;
+export declare const shouldCellShowRightBorder: (pinnedPosition: GridPinnedColumnPosition | undefined, indexInSection: number, sectionLength: number, showCellVerticalBorderRootProp: boolean, gridHasFiller: boolean) => boolean;
 export declare const shouldCellShowLeftBorder: (pinnedPosition: GridPinnedColumnPosition | undefined, indexInSection: number) => boolean;