@mui/x-data-grid 6.20.1 → 6.20.4

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

@@ -0,0 +1,94 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { gridFilteredTopLevelRowCountSelector } from '../filter';
+import { useGridLogger, useGridSelector, useGridApiMethod } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPaginationRowCountSelector } from './gridPaginationSelector';
+import { noRowCountInServerMode } from './gridPaginationUtils';
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridRowCount = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridRowCount');
+  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+  const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
+  apiRef.current.registerControlState({
+    stateId: 'paginationRowCount',
+    propModel: props.rowCount,
+    propOnChange: props.onRowCountChange,
+    stateSelector: gridPaginationRowCountSelector,
+    changeEvent: 'rowCountChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setRowCount = React.useCallback(newRowCount => {
+    if (rowCount === newRowCount) {
+      return;
+    }
+    logger.debug("Setting 'rowCount' to", newRowCount);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        rowCount: newRowCount
+      })
+    }));
+  }, [apiRef, logger, rowCount]);
+  const paginationRowCountApi = {
+    setRowCount
+  };
+  useGridApiMethod(apiRef, paginationRowCountApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedRowCount = gridPaginationRowCountSelector(apiRef);
+    const shouldExportRowCount =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `rowCount` is controlled
+    props.rowCount != null ||
+    // Always export if the `rowCount` has been initialized
+    props.initialState?.pagination?.rowCount != null;
+    if (!shouldExportRowCount) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        rowCount: exportedRowCount
+      })
+    });
+  }, [apiRef, props.rowCount, props.initialState?.pagination?.rowCount]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredRowCount = context.stateToRestore.pagination?.rowCount ? context.stateToRestore.pagination.rowCount : gridPaginationRowCountSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        rowCount: restoredRowCount
+      })
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (props.paginationMode === 'server' && props.rowCount == null) {
+        noRowCountInServerMode();
+      }
+    }
+  }, [props.rowCount, props.paginationMode]);
+  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]);
+};

package/modern/index.js

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

package/node/DataGrid/DataGrid.js

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

package/node/components/GridPagination.js

@@ -13,7 +13,6 @@ var _styles = require("@mui/material/styles");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _filter = require("../hooks/features/filter");
 var _gridPaginationSelector = require("../hooks/features/pagination/gridPaginationSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 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); }
@@ -41,8 +40,7 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
-  const visibleTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
-  const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const rowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.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/node/components/panel/GridPanel.js

@@ -65,7 +65,10 @@ const GridPanel = exports.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/node/hooks/features/export/useGridPrintExport.js

@@ -15,7 +15,7 @@ var _gridClasses = require("../../../constants/gridClasses");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 var _utils2 = require("./utils");
-var _useGridPagination = require("../pagination/useGridPagination");
+var _useGridPaginationModel = require("../pagination/useGridPaginationModel");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _GridToolbarExport = require("../../../components/toolbar/GridToolbarExport");
 var _gridColumnsUtils = require("../columns/gridColumnsUtils");
@@ -231,9 +231,13 @@ 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
-      (0, _useGridPagination.mergeStateWithPaginationModel)(visibleRowCount, 'DataGridPro', paginationModel));
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        pagination: (0, _extends2.default)({}, state.pagination, {
+          paginationModel: (0, _useGridPaginationModel.getDerivedPaginationModel)(state.pagination,
+          // Using signature `DataGridPro` to allow more than 100 rows in the print export
+          'DataGridPro', paginationModel)
+        })
+      }));
       apiRef.current.forceUpdate();
     }
     await updateGridColumnsForPrint(options?.fields, options?.allColumns, options?.includeCheckboxes);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationModelSelector = exports.gridPaginatedVisibleSortedGridRowIdsSelector = exports.gridPaginatedVisibleSortedGridRowEntriesSelector = exports.gridPageSizeSelector = exports.gridPageSelector = exports.gridPageCountSelector = void 0;
+exports.gridPaginationSelector = exports.gridPaginationRowRangeSelector = exports.gridPaginationRowCountSelector = exports.gridPaginationModelSelector = 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");
@@ -21,6 +21,12 @@ const gridPaginationSelector = state => state.pagination;
 exports.gridPaginationSelector = gridPaginationSelector;
 const gridPaginationModelSelector = exports.gridPaginationModelSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.paginationModel);
 
+/**
+ * Get the row count
+ * @category Pagination
+ */
+const gridPaginationRowCountSelector = exports.gridPaginationRowCountSelector = (0, _createSelector.createSelector)(gridPaginationSelector, pagination => pagination.rowCount);
+
 /**
  * Get the index of the page to render if the pagination is enabled
  * @category Pagination
@@ -37,7 +43,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)(gridPaginationModelSelector, _gridFilterSelector.gridFilteredTopLevelRowCountSelector, (paginationModel, visibleTopLevelRowCount) => (0, _gridPaginationUtils.getPageCount)(visibleTopLevelRowCount, paginationModel.pageSize));
+const gridPageCountSelector = exports.gridPageCountSelector = (0, _createSelector.createSelector)(gridPageSizeSelector, gridPaginationRowCountSelector, (pageSize, rowCount) => (0, _gridPaginationUtils.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/node/hooks/features/pagination/useGridPagination.js

@@ -4,176 +4,30 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridPagination = exports.paginationStateInitializer = exports.mergeStateWithPaginationModel = void 0;
+exports.useGridPagination = exports.paginationStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var React = _interopRequireWildcard(require("react"));
-var _filter = require("../filter");
-var _density = require("../density");
-var _utils = require("../../utils");
-var _pipeProcessing = require("../../core/pipeProcessing");
-var _gridPaginationSelector = require("./gridPaginationSelector");
-var _gridRowsUtils = require("../rows/gridRowsUtils");
 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; }
+var _useGridPaginationModel = require("./useGridPaginationModel");
+var _useGridRowCount = require("./useGridRowCount");
 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 ?? 0;
   return (0, _extends2.default)({}, state, {
     pagination: {
-      paginationModel
+      paginationModel,
+      rowCount
     }
   });
 };
-exports.paginationStateInitializer = paginationStateInitializer;
-const mergeStateWithPaginationModel = (rowCount, signature, paginationModelProp) => paginationState => {
-  let paginationModel = paginationState.paginationModel;
-  const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
-  const pageCount = (0, _gridPaginationUtils.getPageCount)(rowCount, pageSize);
-  if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
-    paginationModel = paginationModelProp;
-  }
-  const validPage = (0, _gridPaginationUtils.getValidPage)(paginationModel.page, pageCount);
-  if (validPage !== paginationModel.page) {
-    paginationModel = (0, _extends2.default)({}, paginationModel, {
-      page: validPage
-    });
-  }
-  (0, _gridPaginationUtils.throwIfPageSizeExceedsTheLimit)(paginationModel.pageSize, signature);
-  return {
-    paginationModel
-  };
-};
 
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-exports.mergeStateWithPaginationModel = mergeStateWithPaginationModel;
+exports.paginationStateInitializer = paginationStateInitializer;
 const useGridPagination = (apiRef, props) => {
-  const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPagination');
-  const visibleTopLevelRowCount = (0, _utils.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
-  const densityFactor = (0, _utils.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
-  const rowHeight = Math.floor(props.rowHeight * densityFactor);
-  apiRef.current.registerControlState({
-    stateId: 'pagination',
-    propModel: props.paginationModel,
-    propOnChange: props.onPaginationModelChange,
-    stateSelector: _gridPaginationSelector.gridPaginationModelSelector,
-    changeEvent: 'paginationModelChange'
-  });
-
-  /**
-   * API METHODS
-   */
-  const setPage = React.useCallback(page => {
-    const currentModel = (0, _gridPaginationSelector.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 = (0, _gridPaginationSelector.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 = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    if (paginationModel === currentModel) {
-      return;
-    }
-    logger.debug("Setting 'paginationModel' to", paginationModel);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, paginationModel), 'setPaginationModel');
-    apiRef.current.forceUpdate();
-  }, [apiRef, logger, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  const pageApi = {
-    setPage,
-    setPageSize,
-    setPaginationModel
-  };
-  (0, _utils.useGridApiMethod)(apiRef, pageApi, 'public');
-
-  /**
-   * PRE-PROCESSING
-   */
-  const stateExportPreProcessing = React.useCallback((prevState, context) => {
-    const paginationModel = (0, _gridPaginationSelector.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?.pagination?.paginationModel != null ||
-    // Export if `page` or `pageSize` is not equal to the default value
-    paginationModel.page !== 0 && paginationModel.pageSize !== (0, _gridPaginationUtils.defaultPageSize)(props.autoPageSize);
-    if (!shouldExportPaginationModel) {
-      return prevState;
-    }
-    return (0, _extends2.default)({}, prevState, {
-      pagination: (0, _extends2.default)({}, prevState.pagination, {
-        paginationModel
-      })
-    });
-  }, [apiRef, props.paginationModel, props.initialState?.pagination?.paginationModel, props.autoPageSize]);
-  const stateRestorePreProcessing = React.useCallback((params, context) => {
-    const paginationModel = context.stateToRestore.pagination?.paginationModel ? (0, _extends2.default)({}, (0, _gridPaginationUtils.getDefaultGridPaginationModel)(props.autoPageSize), context.stateToRestore.pagination?.paginationModel) : (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, paginationModel), 'stateRestorePreProcessing');
-    return params;
-  }, [apiRef, props.autoPageSize, props.rowCount, props.signature, visibleTopLevelRowCount]);
-  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-
-  /**
-   * EVENTS
-   */
-  const handlePaginationModelChange = () => {
-    const paginationModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
-    if (apiRef.current.virtualScrollerRef?.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 = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
-    const maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
-    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
-  }, [apiRef, props.autoPageSize, rowHeight]);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
-  (0, _utils.useGridApiEventHandler)(apiRef, 'paginationModelChange', handlePaginationModelChange);
-
-  /**
-   * EFFECTS
-   */
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (props.paginationMode === 'server' && props.rowCount == null) {
-        (0, _gridPaginationUtils.noRowCountInServerMode)();
-      }
-    }
-  }, [props.rowCount, props.paginationMode]);
-  React.useEffect(() => {
-    apiRef.current.updateControlState('pagination', mergeStateWithPaginationModel(props.rowCount ?? visibleTopLevelRowCount, props.signature, props.paginationModel));
-  }, [apiRef, props.paginationModel, props.rowCount, props.paginationMode, visibleTopLevelRowCount, props.signature]);
-  React.useEffect(() => {
-    handleUpdateAutoPageSize();
-  }, [handleUpdateAutoPageSize]);
+  (0, _useGridPaginationModel.useGridPaginationModel)(apiRef, props);
+  (0, _useGridRowCount.useGridRowCount)(apiRef, props);
 };
 exports.useGridPagination = useGridPagination;

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

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridPaginationModel = exports.getDerivedPaginationModel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _density = require("../density");
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+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; }
+const getDerivedPaginationModel = (paginationState, signature, paginationModelProp) => {
+  let paginationModel = paginationState.paginationModel;
+  const rowCount = paginationState.rowCount;
+  const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
+  const pageCount = (0, _gridPaginationUtils.getPageCount)(rowCount, pageSize);
+  if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
+    paginationModel = paginationModelProp;
+  }
+  const validPage = (0, _gridPaginationUtils.getValidPage)(paginationModel.page, pageCount);
+  if (validPage !== paginationModel.page) {
+    paginationModel = (0, _extends2.default)({}, paginationModel, {
+      page: validPage
+    });
+  }
+  (0, _gridPaginationUtils.throwIfPageSizeExceedsTheLimit)(paginationModel.pageSize, signature);
+  return paginationModel;
+};
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+exports.getDerivedPaginationModel = getDerivedPaginationModel;
+const useGridPaginationModel = (apiRef, props) => {
+  const logger = (0, _utils.useGridLogger)(apiRef, 'useGridPaginationModel');
+  const densityFactor = (0, _utils.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
+  const rowHeight = Math.floor(props.rowHeight * densityFactor);
+  apiRef.current.registerControlState({
+    stateId: 'paginationModel',
+    propModel: props.paginationModel,
+    propOnChange: props.onPaginationModelChange,
+    stateSelector: _gridPaginationSelector.gridPaginationModelSelector,
+    changeEvent: 'paginationModelChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPage = React.useCallback(page => {
+    const currentModel = (0, _gridPaginationSelector.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 = (0, _gridPaginationSelector.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 = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
+    if (paginationModel === currentModel) {
+      return;
+    }
+    logger.debug("Setting 'paginationModel' to", paginationModel);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      pagination: (0, _extends2.default)({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+  }, [apiRef, logger, props.signature]);
+  const paginationModelApi = {
+    setPage,
+    setPageSize,
+    setPaginationModel
+  };
+  (0, _utils.useGridApiMethod)(apiRef, paginationModelApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const paginationModel = (0, _gridPaginationSelector.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?.pagination?.paginationModel != null ||
+    // Export if `page` or `pageSize` is not equal to the default value
+    paginationModel.page !== 0 && paginationModel.pageSize !== (0, _gridPaginationUtils.defaultPageSize)(props.autoPageSize);
+    if (!shouldExportPaginationModel) {
+      return prevState;
+    }
+    return (0, _extends2.default)({}, prevState, {
+      pagination: (0, _extends2.default)({}, prevState.pagination, {
+        paginationModel
+      })
+    });
+  }, [apiRef, props.paginationModel, props.initialState?.pagination?.paginationModel, props.autoPageSize]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const paginationModel = context.stateToRestore.pagination?.paginationModel ? (0, _extends2.default)({}, (0, _gridPaginationUtils.getDefaultGridPaginationModel)(props.autoPageSize), context.stateToRestore.pagination?.paginationModel) : (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      pagination: (0, _extends2.default)({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
+      })
+    }));
+    return params;
+  }, [apiRef, props.autoPageSize, props.signature]);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EVENTS
+   */
+  const handlePaginationModelChange = () => {
+    const paginationModel = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
+    if (apiRef.current.virtualScrollerRef?.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 = (0, _gridRowsUtils.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 = (0, _gridPaginationSelector.gridPaginationModelSelector)(apiRef);
+    const pageCount = (0, _gridPaginationSelector.gridPageCountSelector)(apiRef);
+    if (paginationModel.page > pageCount - 1) {
+      apiRef.current.setPage(Math.max(0, pageCount - 1));
+    }
+  }, [apiRef]);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'paginationModelChange', handlePaginationModelChange);
+  (0, _utils.useGridApiEventHandler)(apiRef, 'rowCountChange', handleRowCountChange);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      pagination: (0, _extends2.default)({}, state.pagination, {
+        paginationModel: getDerivedPaginationModel(state.pagination, props.signature, props.paginationModel)
+      })
+    }));
+  }, [apiRef, props.paginationModel, props.paginationMode, props.signature]);
+  React.useEffect(handleUpdateAutoPageSize, [handleUpdateAutoPageSize]);
+};
+exports.useGridPaginationModel = useGridPaginationModel;