@mui/x-data-grid 5.4.0 → 5.6.0

package/legacy/hooks/features/keyboard/useGridKeyboardNavigation.js

@@ -0,0 +1,274 @@
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
+import { useGridLogger } from '../../utils/useGridLogger';
+import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector';
+import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
+import { gridClasses } from '../../../constants/gridClasses';
+/**
+ * @requires useGridPage (state)
+ * @requires useGridPageSize (state)
+ * @requires useGridFilter (state)
+ * @requires useGridColumns (state, method)
+ * @requires useGridRows (state, method)
+ * @requires useGridSorting (method) - can be after
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridFocus (method) - can be after
+ * @requires useGridScroll (method) - can be after
+ */
+
+export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
+  var currentPage = useCurrentPageRows(apiRef, props);
+  var goToCell = React.useCallback(function (colIndex, rowIndex) {
+    logger.debug("Navigating to cell row ".concat(rowIndex, ", col ").concat(colIndex));
+    apiRef.current.scrollToIndexes({
+      colIndex: colIndex,
+      rowIndex: rowIndex
+    });
+    var field = apiRef.current.getVisibleColumns()[colIndex].field;
+    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    var node = visibleSortedRows[rowIndex];
+    apiRef.current.setCellFocus(node.id, field);
+  }, [apiRef, logger]);
+  var goToHeader = React.useCallback(function (colIndex, event) {
+    logger.debug("Navigating to header col ".concat(colIndex));
+    apiRef.current.scrollToIndexes({
+      colIndex: colIndex
+    });
+    var field = apiRef.current.getVisibleColumns()[colIndex].field;
+    apiRef.current.setColumnHeaderFocus(field, event);
+  }, [apiRef, logger]);
+  var handleCellNavigationKeyDown = React.useCallback(function (params, event) {
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (!currentPage.range || !dimensions) {
+      return;
+    }
+
+    var viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
+    var colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
+    var rowIndexBefore = visibleSortedRows.findIndex(function (row) {
+      return row.id === params.id;
+    });
+    var firstRowIndexInPage = currentPage.range.firstRowIndex;
+    var lastRowIndexInPage = currentPage.range.lastRowIndex;
+    var firstColIndex = 0;
+    var lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    var shouldPreventDefault = true;
+
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'Enter':
+        {
+          // "Enter" is only triggered by the row / cell editing feature
+          if (rowIndexBefore < lastRowIndexInPage) {
+            goToCell(colIndexBefore, rowIndexBefore + 1);
+          }
+
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          if (rowIndexBefore > firstRowIndexInPage) {
+            goToCell(colIndexBefore, rowIndexBefore - 1);
+          } else {
+            goToHeader(colIndexBefore, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowRight':
+        {
+          if (colIndexBefore < lastColIndex) {
+            goToCell(colIndexBefore + 1, rowIndexBefore);
+          }
+
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          if (colIndexBefore > firstColIndex) {
+            goToCell(colIndexBefore - 1, rowIndexBefore);
+          }
+
+          break;
+        }
+
+      case 'Tab':
+        {
+          // "Tab" is only triggered by the row / cell editing feature
+          if (event.shiftKey && colIndexBefore > firstColIndex) {
+            goToCell(colIndexBefore - 1, rowIndexBefore);
+          } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
+            goToCell(colIndexBefore + 1, rowIndexBefore);
+          }
+
+          break;
+        }
+
+      case 'PageDown':
+      case ' ':
+        {
+          if (rowIndexBefore < lastRowIndexInPage) {
+            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+          }
+
+          break;
+        }
+
+      case 'PageUp':
+        {
+          // Go to the first row before going to header
+          var nextRowIndex = Math.max(rowIndexBefore - viewportPageSize, firstRowIndexInPage);
+
+          if (nextRowIndex !== rowIndexBefore && nextRowIndex >= firstRowIndexInPage) {
+            goToCell(colIndexBefore, nextRowIndex);
+          } else {
+            goToHeader(colIndexBefore, event);
+          }
+
+          break;
+        }
+
+      case 'Home':
+        {
+          if (event.ctrlKey || event.metaKey || event.shiftKey) {
+            goToCell(firstColIndex, firstRowIndexInPage);
+          } else {
+            goToCell(firstColIndex, rowIndexBefore);
+          }
+
+          break;
+        }
+
+      case 'End':
+        {
+          if (event.ctrlKey || event.metaKey || event.shiftKey) {
+            goToCell(lastColIndex, lastRowIndexInPage);
+          } else {
+            goToCell(lastColIndex, rowIndexBefore);
+          }
+
+          break;
+        }
+
+      default:
+        {
+          shouldPreventDefault = false;
+        }
+    }
+
+    if (shouldPreventDefault) {
+      event.preventDefault();
+    }
+  }, [apiRef, currentPage, goToCell, goToHeader]);
+  var handleColumnHeaderKeyDown = React.useCallback(function (params, event) {
+    var _currentPage$range$fi, _currentPage$range, _currentPage$range$la, _currentPage$range2;
+
+    var headerTitleNode = event.currentTarget.querySelector(".".concat(gridClasses.columnHeaderTitleContainerContent));
+    var isFromInsideContent = !!headerTitleNode && headerTitleNode.contains(event.target);
+
+    if (isFromInsideContent && params.field !== GRID_CHECKBOX_SELECTION_COL_DEF.field) {
+      // When focus is on a nested input, keyboard events have no effect to avoid conflicts with native events.
+      // There is one exception for the checkBoxHeader
+      return;
+    }
+
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (!dimensions) {
+      return;
+    }
+
+    var viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+    var colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
+    var firstRowIndexInPage = (_currentPage$range$fi = (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) != null ? _currentPage$range$fi : null;
+    var lastRowIndexInPage = (_currentPage$range$la = (_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.lastRowIndex) != null ? _currentPage$range$la : null;
+    var firstColIndex = 0;
+    var lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
+    var shouldPreventDefault = true;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        {
+          if (firstRowIndexInPage !== null) {
+            goToCell(colIndexBefore, firstRowIndexInPage);
+          }
+
+          break;
+        }
+
+      case 'ArrowRight':
+        {
+          if (colIndexBefore < lastColIndex) {
+            goToHeader(colIndexBefore + 1, event);
+          }
+
+          break;
+        }
+
+      case 'ArrowLeft':
+        {
+          if (colIndexBefore > firstColIndex) {
+            goToHeader(colIndexBefore - 1, event);
+          }
+
+          break;
+        }
+
+      case 'PageDown':
+        {
+          if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
+            goToCell(colIndexBefore, Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage));
+          }
+
+          break;
+        }
+
+      case 'Home':
+        {
+          goToHeader(firstColIndex, event);
+          break;
+        }
+
+      case 'End':
+        {
+          goToHeader(lastColIndex, event);
+          break;
+        }
+
+      case 'Enter':
+        {
+          if (event.ctrlKey || event.metaKey) {
+            apiRef.current.toggleColumnMenu(params.field);
+          }
+
+          break;
+        }
+
+      case ' ':
+        {
+          // prevent Space event from scrolling
+          break;
+        }
+
+      default:
+        {
+          shouldPreventDefault = false;
+        }
+    }
+
+    if (shouldPreventDefault) {
+      event.preventDefault();
+    }
+  }, [apiRef, currentPage, goToCell, goToHeader]);
+  useGridApiEventHandler(apiRef, GridEvents.cellNavigationKeyDown, handleCellNavigationKeyDown);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
+};

package/legacy/hooks/features/pagination/gridPaginationInterfaces.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,107 @@
+import { createSelector } from '../../../utils/createSelector';
+import { gridVisibleSortedRowEntriesSelector, gridVisibleSortedRowIdsSelector, gridVisibleSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
+import { gridRowTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+
+export var gridPaginationSelector = function gridPaginationSelector(state) {
+  return state.pagination;
+};
+/**
+ * Get the index of the page to render if the pagination is enabled
+ * @category Pagination
+ */
+
+export var gridPageSelector = createSelector(gridPaginationSelector, function (pagination) {
+  return pagination.page;
+});
+/**
+ * Get the maximum amount of rows to display on a single page if the pagination is enabled
+ * @category Pagination
+ */
+
+export var gridPageSizeSelector = createSelector(gridPaginationSelector, function (pagination) {
+  return pagination.pageSize;
+});
+/**
+ * Get the amount of pages needed to display all the rows if the pagination is enabled
+ * @category Pagination
+ */
+
+export var gridPageCountSelector = createSelector(gridPaginationSelector, function (pagination) {
+  return pagination.pageCount;
+});
+/**
+ * Get the index of the first and the last row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+
+export var gridPaginationRowRangeSelector = createSelector(gridPaginationSelector, gridRowTreeSelector, gridRowTreeDepthSelector, gridVisibleSortedRowEntriesSelector, gridVisibleSortedTopLevelRowEntriesSelector, function (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) {
+  var visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
+  var topLevelFirstRowIndex = Math.min(pagination.pageSize * pagination.page, visibleTopLevelRowCount - 1);
+  var topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + pagination.pageSize - 1, visibleTopLevelRowCount - 1); // The range contains no element
+
+  if (topLevelFirstRowIndex === -1 || topLevelLastRowIndex === -1) {
+    return null;
+  } // The tree is flat, there is no need to look for children
+
+
+  if (rowTreeDepth < 2) {
+    return {
+      firstRowIndex: topLevelFirstRowIndex,
+      lastRowIndex: topLevelLastRowIndex
+    };
+  }
+
+  var topLevelFirstRow = visibleSortedTopLevelRowEntries[topLevelFirstRowIndex];
+  var topLevelRowsInCurrentPageCount = topLevelLastRowIndex - topLevelFirstRowIndex + 1;
+  var firstRowIndex = visibleSortedRowEntries.findIndex(function (row) {
+    return row.id === topLevelFirstRow.id;
+  });
+  var lastRowIndex = firstRowIndex;
+  var topLevelRowAdded = 0;
+
+  while (lastRowIndex < visibleSortedRowEntries.length && topLevelRowAdded <= topLevelRowsInCurrentPageCount) {
+    var row = visibleSortedRowEntries[lastRowIndex];
+    var depth = rowTree[row.id].depth;
+
+    if (topLevelRowAdded < topLevelRowsInCurrentPageCount || depth > 0) {
+      lastRowIndex += 1;
+    }
+
+    if (depth === 0) {
+      topLevelRowAdded += 1;
+    }
+  }
+
+  return {
+    firstRowIndex: firstRowIndex,
+    lastRowIndex: lastRowIndex - 1
+  };
+});
+/**
+ * Get the id and the model of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+
+export var gridPaginatedVisibleSortedGridRowEntriesSelector = createSelector(gridVisibleSortedRowEntriesSelector, gridPaginationRowRangeSelector, function (visibleSortedRowEntries, paginationRange) {
+  if (!paginationRange) {
+    return [];
+  }
+
+  return visibleSortedRowEntries.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});
+/**
+ * Get the id of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+
+export var gridPaginatedVisibleSortedGridRowIdsSelector = createSelector(gridVisibleSortedRowIdsSelector, gridPaginationRowRangeSelector, function (visibleSortedRowIds, paginationRange) {
+  if (!paginationRange) {
+    return [];
+  }
+
+  return visibleSortedRowIds.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});

package/legacy/hooks/features/pagination/index.js

@@ -0,0 +1,2 @@
+export * from './gridPaginationSelector';
+export {};

package/legacy/hooks/features/pagination/useGridPage.js

@@ -0,0 +1,156 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
+import { GridEvents } from '../../../models/events';
+import { gridVisibleTopLevelRowCountSelector } from '../filter';
+import { gridPageSelector } from './gridPaginationSelector';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { buildWarning } from '../../../utils/warning';
+
+var getPageCount = function getPageCount(rowCount, pageSize) {
+  if (pageSize > 0 && rowCount > 0) {
+    return Math.ceil(rowCount / pageSize);
+  }
+
+  return 0;
+};
+
+var applyValidPage = function applyValidPage(paginationState) {
+  if (!paginationState.pageCount) {
+    return paginationState;
+  }
+
+  return _extends({}, paginationState, {
+    page: Math.max(Math.min(paginationState.page, paginationState.pageCount - 1), 0)
+  });
+};
+
+var mergeStateWithPage = function mergeStateWithPage(page) {
+  return function (state) {
+    return _extends({}, state, {
+      pagination: applyValidPage(_extends({}, state.pagination, {
+        page: page
+      }))
+    });
+  };
+};
+
+var noRowCountInServerMode = buildWarning(["MUI: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
+export var pageStateInitializer = function pageStateInitializer(state, props) {
+  var _ref, _props$page, _props$initialState, _props$initialState$p, _props$rowCount, _props$rowCount2;
+
+  return _extends({}, state, {
+    pagination: _extends({}, state.pagination, {
+      page: (_ref = (_props$page = props.page) != null ? _props$page : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null ? _ref : 0,
+      pageCount: getPageCount((_props$rowCount = props.rowCount) != null ? _props$rowCount : 0, state.pagination.pageSize),
+      rowCount: (_props$rowCount2 = props.rowCount) != null ? _props$rowCount2 : 0
+    })
+  });
+};
+/**
+ * @requires useGridPageSize (event)
+ */
+
+export var useGridPage = function useGridPage(apiRef, props) {
+  var _props$initialState3, _props$initialState3$;
+
+  var logger = useGridLogger(apiRef, 'useGridPage');
+  var visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'page',
+    propModel: props.page,
+    propOnChange: props.onPageChange,
+    stateSelector: gridPageSelector,
+    changeEvent: GridEvents.pageChange
+  });
+  /**
+   * API METHODS
+   */
+
+  var setPage = React.useCallback(function (page) {
+    logger.debug("Setting page to ".concat(page));
+    apiRef.current.setState(mergeStateWithPage(page));
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]);
+  var pageApi = {
+    setPage: setPage
+  };
+  useGridApiMethod(apiRef, pageApi, 'GridPageApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var stateExportPreProcessing = React.useCallback(function (prevState) {
+    var _props$initialState2, _props$initialState2$;
+
+    var pageToExport = gridPageSelector(apiRef);
+    var shouldExportPage = // Always export if the page is controlled
+    props.page != null || // Always export if the page has been initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.pagination) == null ? void 0 : _props$initialState2$.page) != null || // Export if the page value is not equal to the default value
+    pageToExport !== 0;
+
+    if (!shouldExportPage) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        page: pageToExport
+      })
+    });
+  }, [apiRef, props.page, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.pagination) == null ? void 0 : _props$initialState3$.page]);
+  var stateRestorePreProcessing = React.useCallback(function (params, context) {
+    var _context$stateToResto, _context$stateToResto2;
+
+    // We apply the constraint even if the page did not change in case the pageSize changed.
+    var page = (_context$stateToResto = (_context$stateToResto2 = context.stateToRestore.pagination) == null ? void 0 : _context$stateToResto2.page) != null ? _context$stateToResto : gridPageSelector(apiRef);
+    apiRef.current.setState(mergeStateWithPage(page));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EVENTS
+   */
+
+  var handlePageSizeChange = function handlePageSizeChange(pageSize) {
+    apiRef.current.setState(function (state) {
+      var pageCount = getPageCount(state.pagination.rowCount, pageSize);
+      return _extends({}, state, {
+        pagination: applyValidPage(_extends({}, state.pagination, {
+          pageCount: pageCount,
+          page: state.pagination.page
+        }))
+      });
+    });
+    apiRef.current.forceUpdate();
+  };
+
+  useGridApiEventHandler(apiRef, GridEvents.pageSizeChange, handlePageSizeChange);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(function () {
+    if (process.env.NODE_ENV !== 'production') {
+      if (props.paginationMode === 'server' && props.rowCount == null) {
+        noRowCountInServerMode();
+      }
+    }
+  }, [props.rowCount, props.paginationMode]);
+  React.useEffect(function () {
+    apiRef.current.setState(function (state) {
+      var rowCount = props.rowCount !== undefined ? props.rowCount : visibleTopLevelRowCount;
+      var pageCount = getPageCount(rowCount, state.pagination.pageSize);
+      var page = props.page == null ? state.pagination.page : props.page;
+      return _extends({}, state, {
+        pagination: applyValidPage(_extends({}, state.pagination, {
+          page: page,
+          rowCount: rowCount,
+          pageCount: pageCount
+        }))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [visibleTopLevelRowCount, props.rowCount, props.page, props.paginationMode, apiRef]);
+};

package/legacy/hooks/features/pagination/useGridPageSize.js

@@ -0,0 +1,143 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents } from '../../../models/events';
+import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelector } from '../../utils';
+import { gridPageSizeSelector } from './gridPaginationSelector';
+import { gridDensityRowHeightSelector } from '../density';
+import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+
+var defaultPageSize = function defaultPageSize(autoPageSize) {
+  return autoPageSize ? 0 : 100;
+};
+
+export var pageSizeStateInitializer = function pageSizeStateInitializer(state, props) {
+  var _props$initialState, _props$initialState$p;
+
+  var pageSize;
+
+  if (props.pageSize != null) {
+    pageSize = props.pageSize;
+  } else if (((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null) {
+    pageSize = props.initialState.pagination.pageSize;
+  } else {
+    pageSize = defaultPageSize(props.autoPageSize);
+  }
+
+  return _extends({}, state, {
+    pagination: {
+      pageSize: pageSize
+    }
+  });
+};
+
+var mergeStateWithPageSize = function mergeStateWithPageSize(pageSize) {
+  return function (state) {
+    return _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        pageSize: pageSize
+      })
+    });
+  };
+};
+/**
+ * @requires useGridDimensions (event) - can be after
+ */
+
+
+export var useGridPageSize = function useGridPageSize(apiRef, props) {
+  var _props$initialState3, _props$initialState3$;
+
+  var logger = useGridLogger(apiRef, 'useGridPageSize');
+  var rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'pageSize',
+    propModel: props.pageSize,
+    propOnChange: props.onPageSizeChange,
+    stateSelector: gridPageSizeSelector,
+    changeEvent: GridEvents.pageSizeChange
+  });
+  /**
+   * API METHODS
+   */
+
+  var setPageSize = React.useCallback(function (pageSize) {
+    if (pageSize === gridPageSizeSelector(apiRef)) {
+      return;
+    }
+
+    logger.debug("Setting page size to ".concat(pageSize));
+    apiRef.current.setState(mergeStateWithPageSize(pageSize));
+    apiRef.current.forceUpdate();
+  }, [apiRef, logger]);
+  var pageSizeApi = {
+    setPageSize: setPageSize
+  };
+  useGridApiMethod(apiRef, pageSizeApi, 'GridPageSizeApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  var stateExportPreProcessing = React.useCallback(function (prevState) {
+    var _props$initialState2, _props$initialState2$;
+
+    var pageSizeToExport = gridPageSizeSelector(apiRef);
+    var shouldExportPageSize = // Always export if the page size is controlled
+    props.pageSize != null || // Always export if the page size has been initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.pagination) == null ? void 0 : _props$initialState2$.pageSize) != null || // Export if the page size value is not equal to the default value
+    pageSizeToExport !== defaultPageSize(props.autoPageSize);
+
+    if (!shouldExportPageSize) {
+      return prevState;
+    }
+
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        pageSize: pageSizeToExport
+      })
+    });
+  }, [apiRef, props.pageSize, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.pagination) == null ? void 0 : _props$initialState3$.pageSize, props.autoPageSize]);
+  /**
+   * TODO: Add error if `prop.autoHeight = true`
+   */
+
+  var stateRestorePreProcessing = React.useCallback(function (params, context) {
+    var _context$stateToResto;
+
+    var pageSize = (_context$stateToResto = context.stateToRestore.pagination) == null ? void 0 : _context$stateToResto.pageSize;
+
+    if (pageSize != null) {
+      apiRef.current.setState(mergeStateWithPageSize(pageSize));
+    }
+
+    return params;
+  }, [apiRef]);
+  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  /**
+   * EVENTS
+   */
+
+  var handleUpdateAutoPageSize = React.useCallback(function () {
+    var dimensions = apiRef.current.getRootDimensions();
+
+    if (!props.autoPageSize || !dimensions) {
+      return;
+    }
+
+    var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
+  }, [apiRef, props.autoPageSize, rowHeight]);
+  useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleUpdateAutoPageSize);
+  /**
+   * EFFECTS
+   */
+
+  React.useEffect(function () {
+    if (props.pageSize != null && !props.autoPageSize) {
+      apiRef.current.setPageSize(props.pageSize);
+    }
+  }, [apiRef, props.autoPageSize, props.pageSize]);
+  React.useEffect(function () {
+    handleUpdateAutoPageSize();
+  }, [handleUpdateAutoPageSize]);
+};

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

@@ -0,0 +1,11 @@
+import { useGridPageSize } from './useGridPageSize';
+import { useGridPage } from './useGridPage';
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+
+export var useGridPagination = function useGridPagination(apiRef, props) {
+  useGridPageSize(apiRef, props);
+  useGridPage(apiRef, props);
+};