@mui/x-data-grid 6.20.1 → 6.20.4

package/CHANGELOG.md

@@ -3,6 +3,69 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.20.4
+
+_Jul 18, 2024_
+
+We'd like to offer a big thanks to the 1 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.20.4`
+
+- [DataGrid] Enable flip on preferences panel (#13812) @romgrk
+
+#### `@mui/x-data-grid-pro@6.20.4` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.20.4`.
+
+#### `@mui/x-data-grid-premium@6.20.4` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.20.4`.
+
+## v6.20.3
+
+_Jun 28, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.20.3`
+
+- [DataGrid] Make `rowCount` part of the state (#12406) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@6.20.3` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.20.3`.
+
+#### `@mui/x-data-grid-premium@6.20.3` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.20.3`.
+
+### Core
+
+- [core] Update release readme with `pnpm` notice (#13577) @LukasTy
+
+## 6.20.2
+
+_Jun 20, 2024_
+
+We'd like to offer a big thanks to the 2 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.20.2`
+
+- [fields] Do not apply digit editing when pressing `Space` (#13516) @flaviendelangle
+- [pickers] Fix controlled `view` behavior (#13559) @LukasTy
+
 ## 6.20.1
 
 _Jun 6, 2024_

package/DataGrid/DataGrid.js

@@ -495,6 +495,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: PropTypes.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: PropTypes.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].

package/components/GridPagination.js

@@ -6,8 +6,7 @@ import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter';
-import { gridPaginationModelSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { gridPaginationModelSelector, gridPaginationRowCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridPaginationRoot = styled(TablePagination)(({
   theme
@@ -32,11 +31,7 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
-  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-  const rowCount = React.useMemo(() => {
-    var _ref, _rootProps$rowCount;
-    return (_ref = (_rootProps$rowCount = rootProps.rowCount) != null ? _rootProps$rowCount : visibleTopLevelRowCount) != null ? _ref : 0;
-  }, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
   const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
   const handlePageSizeChange = React.useCallback(event => {
     const pageSize = Number(event.target.value);

package/components/panel/GridPanel.js

@@ -56,7 +56,10 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [apiRef]);
   const modifiers = React.useMemo(() => [{
     name: 'flip',
-    enabled: false
+    enabled: true,
+    options: {
+      rootBoundary: 'document'
+    }
   }, {
     name: 'isPlaced',
     enabled: true,

package/hooks/features/export/useGridPrintExport.js

@@ -8,7 +8,7 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getColumnsToExport } from './utils';
-import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
+import { getDerivedPaginationModel } from '../pagination/useGridPaginationModel';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
 import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
@@ -226,9 +226,13 @@ export const useGridPrintExport = (apiRef, props) => {
         page: 0,
         pageSize: visibleRowCount
       };
-      apiRef.current.updateControlState('pagination',
-      // Using signature `DataGridPro` to allow more than 100 rows in the print export
-      mergeStateWithPaginationModel(visibleRowCount, 'DataGridPro', paginationModel));
+      apiRef.current.setState(state => _extends({}, state, {
+        pagination: _extends({}, state.pagination, {
+          paginationModel: getDerivedPaginationModel(state.pagination,
+          // Using signature `DataGridPro` to allow more than 100 rows in the print export
+          'DataGridPro', paginationModel)
+        })
+      }));
       apiRef.current.forceUpdate();
     }
     await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns, options == null ? void 0 : options.includeCheckboxes);

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

@@ -1,14 +1,16 @@
 import { GridPaginationModel } from '../../../models/gridPaginationProps';
 export interface GridPaginationState {
     paginationModel: GridPaginationModel;
+    rowCount: number;
 }
 export interface GridPaginationInitialState {
     paginationModel?: Partial<GridPaginationModel>;
+    rowCount?: number;
 }
 /**
- * The pagination API interface that is available in the grid `apiRef`.
+ * The pagination model API interface that is available in the grid `apiRef`.
  */
-export interface GridPaginationApi {
+export interface GridPaginationModelApi {
     /**
      * Sets the displayed page to the value given by `page`.
      * @param {number} page The new page number.
@@ -25,3 +27,18 @@ export interface GridPaginationApi {
      */
     setPaginationModel: (model: GridPaginationModel) => void;
 }
+/**
+ * The pagination row count API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationRowCountApi {
+    /**
+     * Sets the `rowCount` to a new value.
+     * @param {number} rowCount The new row count value.
+     */
+    setRowCount: (rowCount: number) => void;
+}
+/**
+ * The pagination API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationApi extends GridPaginationModelApi, GridPaginationRowCountApi {
+}

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

@@ -9,6 +9,11 @@ export declare const gridPaginationSelector: (state: GridStateCommunity) => impo
  * @category Pagination
  */
 export declare const gridPaginationModelSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel>;
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export declare const gridPaginationRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination

package/hooks/features/pagination/gridPaginationSelector.js

@@ -1,5 +1,5 @@
 import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { gridFilteredTopLevelRowCountSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
+import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 import { getPageCount } from './gridPaginationUtils';
 
@@ -15,6 +15,12 @@ export const gridPaginationSelector = state => state.pagination;
  */
 export const gridPaginationModelSelector = createSelector(gridPaginationSelector, pagination => pagination.paginationModel);
 
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export const gridPaginationRowCountSelector = createSelector(gridPaginationSelector, pagination => pagination.rowCount);
+
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
@@ -31,7 +37,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(gridPaginationModelSelector, gridFilteredTopLevelRowCountSelector, (paginationModel, visibleTopLevelRowCount) => getPageCount(visibleTopLevelRowCount, paginationModel.pageSize));
+export const gridPageCountSelector = createSelector(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => getPageCount(rowCount, pageSize));
 
 /**
  * Get the index of the first and the last row to include in the current page if the pagination is enabled.

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

@@ -2,14 +2,9 @@ import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-import { GridPaginationState } from './gridPaginationInterfaces';
-import { GridPaginationModel } from '../../../models/gridPaginationProps';
 export declare const paginationStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'paginationModel' | 'rowCount' | 'initialState' | 'autoPageSize' | 'signature'>>;
-export declare const mergeStateWithPaginationModel: (rowCount: number, signature: DataGridProcessedProps['signature'], paginationModelProp?: GridPaginationModel) => (paginationState: GridPaginationState) => {
-    paginationModel: GridPaginationModel;
-};
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-export declare const useGridPagination: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'paginationModel' | 'onPaginationModelChange' | 'autoPageSize' | 'rowCount' | 'initialState' | 'paginationMode' | 'signature' | 'rowHeight'>) => void;
+export declare const useGridPagination: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

package/hooks/features/pagination/useGridPagination.js

@@ -1,175 +1,25 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import * as React from 'react';
-import { gridFilteredTopLevelRowCountSelector } from '../filter';
-import { gridDensityFactorSelector } from '../density';
-import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { gridPaginationModelSelector } from './gridPaginationSelector';
-import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
-import { getPageCount, noRowCountInServerMode, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
+import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from './gridPaginationUtils';
+import { useGridPaginationModel } from './useGridPaginationModel';
+import { useGridRowCount } from './useGridRowCount';
 export const paginationStateInitializer = (state, props) => {
-  var _props$paginationMode, _props$initialState;
+  var _props$paginationMode, _props$initialState, _ref, _props$rowCount, _props$initialState2;
   const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), (_props$paginationMode = props.paginationModel) != null ? _props$paginationMode : (_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.pagination) == null ? void 0 : _props$initialState.paginationModel);
   throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
+  const rowCount = (_ref = (_props$rowCount = props.rowCount) != null ? _props$rowCount : (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.pagination) == null ? void 0 : _props$initialState2.rowCount) != null ? _ref : 0;
   return _extends({}, state, {
     pagination: {
-      paginationModel
+      paginationModel,
+      rowCount
     }
   });
 };
-export const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp) => paginationState => {
-  var _paginationModelProp$;
-  let paginationModel = paginationState.paginationModel;
-  const pageSize = (_paginationModelProp$ = paginationModelProp == null ? void 0 : paginationModelProp.pageSize) != null ? _paginationModelProp$ : paginationModel.pageSize;
-  const pageCount = getPageCount(rowCount, pageSize);
-  if (paginationModelProp && ((paginationModelProp == null ? void 0 : paginationModelProp.page) !== paginationModel.page || (paginationModelProp == null ? void 0 : paginationModelProp.pageSize) !== paginationModel.pageSize)) {
-    paginationModel = paginationModelProp;
-  }
-  const validPage = getValidPage(paginationModel.page, pageCount);
-  if (validPage !== paginationModel.page) {
-    paginationModel = _extends({}, paginationModel, {
-      page: validPage
-    });
-  }
-  throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, signature);
-  return {
-    paginationModel
-  };
-};
 
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
 export const useGridPagination = (apiRef, props) => {
-  var _props$initialState3;
-  const logger = useGridLogger(apiRef, 'useGridPagination');
-  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
-  apiRef.current.registerControlState({
-    stateId: 'pagination',
-    propModel: props.paginationModel,
-    propOnChange: props.onPaginationModelChange,
-    stateSelector: gridPaginationModelSelector,
-    changeEvent: 'paginationModelChange'
-  });
-
-  /**
-   * API METHODS
-   */
-  const setPage = React.useCallback(page => {
-    const currentModel = gridPaginationModelSelector(apiRef);
-    if (page === currentModel.page) {
-      return;
-    }
-    logger.debug(`Setting page to ${page}`);
-    apiRef.current.setPaginationModel({
-      page,
-      pageSize: currentModel.pageSize
-    });
-  }, [apiRef, logger]);
-  const setPageSize = React.useCallback(pageSize => {
-    const currentModel = gridPaginationModelSelector(apiRef);
-    if (pageSize === currentModel.pageSize) {
-      return;
-    }
-    logger.debug(`Setting page size to ${pageSize}`);
-    apiRef.current.setPaginationModel({
-      pageSize,
-      page: currentModel.page
-    });
-  }, [apiRef, logger]);
-  const setPaginationModel = React.useCallback(paginationModel => {
-    var _props$rowCount;
-    const currentModel = gridPaginationModelSelector(apiRef);
-    if (paginationModel === currentModel) {
-      return;
-    }
-    logger.debug("Setting 'paginationModel' to", paginationModel);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel((_props$rowCount = props.rowCount) != null ? _props$rowCount : visibleTopLevelRowCount, props.signature, paginationModel), 'setPaginationModel');
-    apiRef.current.forceUpdate();
-  }, [apiRef, logger, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  const pageApi = {
-    setPage,
-    setPageSize,
-    setPaginationModel
-  };
-  useGridApiMethod(apiRef, pageApi, 'public');
-
-  /**
-   * PRE-PROCESSING
-   */
-  const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    var _props$initialState2;
-    const paginationModel = gridPaginationModelSelector(apiRef);
-    const shouldExportPaginationModel =
-    // Always export if the `exportOnlyDirtyModels` property is not activated
-    !context.exportOnlyDirtyModels ||
-    // Always export if the `paginationModel` is controlled
-    props.paginationModel != null ||
-    // Always export if the `paginationModel` has been initialized
-    ((_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.pagination) == null ? void 0 : _props$initialState2.paginationModel) != null ||
-    // Export if `page` or `pageSize` is not equal to the default value
-    paginationModel.page !== 0 && paginationModel.pageSize !== defaultPageSize(props.autoPageSize);
-    if (!shouldExportPaginationModel) {
-      return prevState;
-    }
-    return _extends({}, prevState, {
-      pagination: _extends({}, prevState.pagination, {
-        paginationModel
-      })
-    });
-  }, [apiRef, props.paginationModel, (_props$initialState3 = props.initialState) == null || (_props$initialState3 = _props$initialState3.pagination) == null ? void 0 : _props$initialState3.paginationModel, props.autoPageSize]);
-  const stateRestorePreProcessing = React.useCallback((params, context) => {
-    var _context$stateToResto, _context$stateToResto2, _props$rowCount2;
-    const paginationModel = (_context$stateToResto = context.stateToRestore.pagination) != null && _context$stateToResto.paginationModel ? _extends({}, getDefaultGridPaginationModel(props.autoPageSize), (_context$stateToResto2 = context.stateToRestore.pagination) == null ? void 0 : _context$stateToResto2.paginationModel) : gridPaginationModelSelector(apiRef);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel((_props$rowCount2 = props.rowCount) != null ? _props$rowCount2 : visibleTopLevelRowCount, props.signature, paginationModel), 'stateRestorePreProcessing');
-    return params;
-  }, [apiRef, props.autoPageSize, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EVENTS
-   */
-  const handlePaginationModelChange = () => {
-    var _apiRef$current$virtu;
-    const paginationModel = gridPaginationModelSelector(apiRef);
-    if ((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current) {
-      apiRef.current.scrollToIndexes({
-        rowIndex: paginationModel.page * paginationModel.pageSize
-      });
-    }
-    apiRef.current.forceUpdate();
-  };
-  const handleUpdateAutoPageSize = React.useCallback(() => {
-    const dimensions = apiRef.current.getRootDimensions();
-    if (!props.autoPageSize || !dimensions) {
-      return;
-    }
-    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
-    const maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
-    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
-  }, [apiRef, props.autoPageSize, rowHeight]);
-  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
-  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (props.paginationMode === 'server' && props.rowCount == null) {
-        noRowCountInServerMode();
-      }
-    }
-  }, [props.rowCount, props.paginationMode]);
-  React.useEffect(() => {
-    var _props$rowCount3;
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel((_props$rowCount3 = props.rowCount) != null ? _props$rowCount3 : visibleTopLevelRowCount, props.signature, props.paginationModel));
-  }, [apiRef, props.paginationModel, props.rowCount, props.paginationMode, visibleTopLevelRowCount, props.signature]);
-  React.useEffect(() => {
-    handleUpdateAutoPageSize();
-  }, [handleUpdateAutoPageSize]);
+  useGridPaginationModel(apiRef, props);
+  useGridRowCount(apiRef, props);
 };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridPaginationState } from './gridPaginationInterfaces';
+import { GridPaginationModel } from '../../../models/gridPaginationProps';
+export declare const getDerivedPaginationModel: (paginationState: GridPaginationState, signature: DataGridProcessedProps['signature'], paginationModelProp?: GridPaginationModel) => GridPaginationModel;
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export declare const useGridPaginationModel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'paginationModel' | 'onPaginationModelChange' | 'autoPageSize' | 'initialState' | 'paginationMode' | 'signature' | 'rowHeight'>) => void;

package/hooks/features/pagination/useGridPaginationModel.js

@@ -0,0 +1,176 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridDensityFactorSelector } from '../density';
+import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPageCountSelector, gridPaginationModelSelector } from './gridPaginationSelector';
+import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
+export const getDerivedPaginationModel = (paginationState, signature, paginationModelProp) => {
+  var _paginationModelProp$;
+  let paginationModel = paginationState.paginationModel;
+  const rowCount = paginationState.rowCount;
+  const pageSize = (_paginationModelProp$ = paginationModelProp == null ? void 0 : paginationModelProp.pageSize) != null ? _paginationModelProp$ : paginationModel.pageSize;
+  const pageCount = getPageCount(rowCount, pageSize);
+  if (paginationModelProp && ((paginationModelProp == null ? void 0 : paginationModelProp.page) !== paginationModel.page || (paginationModelProp == null ? void 0 : paginationModelProp.pageSize) !== paginationModel.pageSize)) {
+    paginationModel = paginationModelProp;
+  }
+  const validPage = getValidPage(paginationModel.page, pageCount);
+  if (validPage !== paginationModel.page) {
+    paginationModel = _extends({}, paginationModel, {
+      page: validPage
+    });
+  }
+  throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, signature);
+  return paginationModel;
+};
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridPaginationModel = (apiRef, props) => {
+  var _props$initialState2;
+  const logger = useGridLogger(apiRef, 'useGridPaginationModel');
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  apiRef.current.registerControlState({
+    stateId: 'paginationModel',
+    propModel: props.paginationModel,
+    propOnChange: props.onPaginationModelChange,
+    stateSelector: gridPaginationModelSelector,
+    changeEvent: 'paginationModelChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPage = React.useCallback(page => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (page === currentModel.page) {
+      return;
+    }
+    logger.debug(`Setting page to ${page}`);
+    apiRef.current.setPaginationModel({
+      page,
+      pageSize: currentModel.pageSize
+    });
+  }, [apiRef, logger]);
+  const setPageSize = React.useCallback(pageSize => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (pageSize === currentModel.pageSize) {
+      return;
+    }
+    logger.debug(`Setting page size to ${pageSize}`);
+    apiRef.current.setPaginationModel({
+      pageSize,
+      page: currentModel.page
+    });
+  }, [apiRef, logger]);
+  const setPaginationModel = React.useCallback(paginationModel => {
+    const currentModel = gridPaginationModelSelector(apiRef);
+    if (paginationModel === currentModel) {
+      return;
+    }
+    logger.debug("Setting 'paginationModel' to", paginationModel);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+  }, [apiRef, logger, props.signature]);
+  const paginationModelApi = {
+    setPage,
+    setPageSize,
+    setPaginationModel
+  };
+  useGridApiMethod(apiRef, paginationModelApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState;
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    const shouldExportPaginationModel =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `paginationModel` is controlled
+    props.paginationModel != null ||
+    // Always export if the `paginationModel` has been initialized
+    ((_props$initialState = props.initialState) == null || (_props$initialState = _props$initialState.pagination) == null ? void 0 : _props$initialState.paginationModel) != null ||
+    // Export if `page` or `pageSize` is not equal to the default value
+    paginationModel.page !== 0 && paginationModel.pageSize !== defaultPageSize(props.autoPageSize);
+    if (!shouldExportPaginationModel) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        paginationModel
+      })
+    });
+  }, [apiRef, props.paginationModel, (_props$initialState2 = props.initialState) == null || (_props$initialState2 = _props$initialState2.pagination) == null ? void 0 : _props$initialState2.paginationModel, props.autoPageSize]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    var _context$stateToResto, _context$stateToResto2;
+    const paginationModel = (_context$stateToResto = context.stateToRestore.pagination) != null && _context$stateToResto.paginationModel ? _extends({}, getDefaultGridPaginationModel(props.autoPageSize), (_context$stateToResto2 = context.stateToRestore.pagination) == null ? void 0 : _context$stateToResto2.paginationModel) : gridPaginationModelSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+    return params;
+  }, [apiRef, props.autoPageSize, props.signature]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EVENTS
+   */
+  const handlePaginationModelChange = () => {
+    var _apiRef$current$virtu;
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    if ((_apiRef$current$virtu = apiRef.current.virtualScrollerRef) != null && _apiRef$current$virtu.current) {
+      apiRef.current.scrollToIndexes({
+        rowIndex: paginationModel.page * paginationModel.pageSize
+      });
+    }
+  };
+  const handleUpdateAutoPageSize = React.useCallback(() => {
+    if (!props.autoPageSize) {
+      return;
+    }
+    const dimensions = apiRef.current.getRootDimensions() || {
+      viewportInnerSize: {
+        height: 0
+      }
+    };
+    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+    const maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
+    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
+  }, [apiRef, props.autoPageSize, rowHeight]);
+  const handleRowCountChange = React.useCallback(newRowCount => {
+    if (newRowCount == null) {
+      return;
+    }
+    const paginationModel = gridPaginationModelSelector(apiRef);
+    const pageCount = gridPageCountSelector(apiRef);
+    if (paginationModel.page > pageCount - 1) {
+      apiRef.current.setPage(Math.max(0, pageCount - 1));
+    }
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
+  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
+  useGridApiEventHandler(apiRef, 'rowCountChange', handleRowCountChange);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
+      })
+    }));
+  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
+};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export declare const useGridRowCount: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rowCount' | 'initialState' | 'paginationMode' | 'onRowCountChange'>) => void;