@mui/x-data-grid 8.0.0-alpha.11 → 8.0.0-alpha.13

package/esm/hooks/features/listView/useGridListView.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import { warnOnce } from '@mui/x-internals/warning';
+import { gridDimensionsSelector } from "../dimensions/index.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
+  listViewColumn: props.unstable_listColumn ? _extends({}, props.unstable_listColumn, {
+    computedWidth: getListColumnWidth(apiRef)
+  }) : undefined
+});
+export function useGridListView(apiRef, props) {
+  /*
+   * EVENTS
+   */
+  const updateListColumnWidth = () => {
+    apiRef.current.setState(state => {
+      if (!state.listViewColumn) {
+        return state;
+      }
+      return _extends({}, state, {
+        listViewColumn: _extends({}, state.listViewColumn, {
+          computedWidth: getListColumnWidth(apiRef)
+        })
+      });
+    });
+  };
+  const prevInnerWidth = React.useRef(null);
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      updateListColumnWidth();
+    }
+  };
+  useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridApiEventHandler(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+
+  /*
+   * EFFECTS
+   */
+  useEnhancedEffect(() => {
+    const listColumn = props.unstable_listColumn;
+    if (listColumn) {
+      apiRef.current.setState(state => {
+        return _extends({}, state, {
+          listViewColumn: _extends({}, listColumn, {
+            computedWidth: getListColumnWidth(apiRef)
+          })
+        });
+      });
+    }
+  }, [apiRef, props.unstable_listColumn]);
+  React.useEffect(() => {
+    if (props.unstable_listView && !props.unstable_listColumn) {
+      warnOnce(['MUI X: The `unstable_listColumn` prop must be set if `unstable_listView` is enabled.', 'To fix, pass a column definition to the `unstable_listColumn` prop, e.g. `{ field: "example", renderCell: (params) => <div>{params.row.id}</div> }`.', 'For more details, see https://mui.com/x/react-data-grid/list-view/']);
+    }
+  }, [props.unstable_listView, props.unstable_listColumn]);
+}
+function getListColumnWidth(apiRef) {
+  return gridDimensionsSelector(apiRef).viewportInnerSize.width;
+}

package/esm/hooks/features/overlays/useGridOverlays.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GridLoadingOverlayVariant } from "../../../components/GridLoadingOverlay.js";
+import type { GridOverlayType } from '../../../components/base/GridOverlays';
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export declare const useGridOverlays: () => {
+  getOverlay: () => React.JSX.Element | null;
+  overlaysProps: {
+    overlayType: GridOverlayType;
+    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+  };
+};

package/esm/hooks/features/overlays/useGridOverlays.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridSelector } from "../../utils/index.js";
+import { useGridApiContext } from "../../utils/useGridApiContext.js";
+import { useGridRootProps } from "../../utils/useGridRootProps.js";
+import { gridExpandedRowCountSelector } from "../filter/index.js";
+import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
+import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.js";
+import { GridOverlayWrapper } from "../../../components/base/GridOverlays.js";
+import { gridVisibleColumnDefinitionsSelector } from "../index.js";
+
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useGridOverlays = () => {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+  const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const noRows = totalRowCount === 0 && pinnedRowsCount === 0;
+  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && noRows;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  const showNoColumnsOverlay = !loading && visibleColumns.length === 0;
+  let overlayType = null;
+  let loadingOverlayVariant = null;
+  if (showNoColumnsOverlay) {
+    overlayType = 'noColumnsOverlay';
+  }
+  if (showNoRowsOverlay) {
+    overlayType = 'noRowsOverlay';
+  }
+  if (showNoResultsOverlay) {
+    overlayType = 'noResultsOverlay';
+  }
+  if (loading) {
+    overlayType = 'loadingOverlay';
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
+  }
+  const overlaysProps = {
+    overlayType,
+    loadingOverlayVariant
+  };
+  const getOverlay = () => {
+    if (!overlayType) {
+      return null;
+    }
+    const Overlay = rootProps.slots?.[overlayType];
+    const overlayProps = rootProps.slotProps?.[overlayType];
+    return /*#__PURE__*/_jsx(GridOverlayWrapper, _extends({}, overlaysProps, {
+      children: /*#__PURE__*/_jsx(Overlay, _extends({}, overlayProps))
+    }));
+  };
+  return {
+    getOverlay,
+    overlaysProps
+  };
+};

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

@@ -0,0 +1,58 @@
+import { GridFeatureMode } from "../../../models/gridFeatureMode.js";
+import { GridPaginationMeta, GridPaginationModel } from "../../../models/gridPaginationProps.js";
+export interface GridPaginationState {
+  paginationModel: GridPaginationModel;
+  rowCount: number;
+  meta: GridPaginationMeta;
+  enabled: boolean;
+  paginationMode: GridFeatureMode;
+}
+export interface GridPaginationInitialState {
+  paginationModel?: Partial<GridPaginationModel>;
+  rowCount?: number;
+  meta?: GridPaginationMeta;
+}
+/**
+ * The pagination model API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationModelApi {
+  /**
+   * Sets the displayed page to the value given by `page`.
+   * @param {number} page The new page number.
+   */
+  setPage: (page: number) => void;
+  /**
+   * Sets the number of displayed rows to the value given by `pageSize`.
+   * @param {number} pageSize The new number of displayed rows.
+   */
+  setPageSize: (pageSize: number) => void;
+  /**
+   * Sets the `paginationModel` to a new value.
+   * @param {GridPaginationModel} model The new model value.
+   */
+  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 meta API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationMetaApi {
+  /**
+   * Sets the `paginationMeta` to a new value.
+   * @param {GridPaginationMeta} paginationMeta The new pagination meta value.
+   */
+  setPaginationMeta: (paginationMeta: GridPaginationMeta) => void;
+}
+/**
+ * The pagination API interface that is available in the grid `apiRef`.
+ */
+export interface GridPaginationApi extends GridPaginationModelApi, GridPaginationRowCountApi, GridPaginationMetaApi {}

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

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

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

@@ -0,0 +1,79 @@
+import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
+import { GridRowId } from "../../../models/gridRows.js";
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export declare const gridPaginationSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./gridPaginationInterfaces").GridPaginationState>;
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export declare const gridPaginationEnabledClientSideSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, boolean>;
+/**
+ * Get the pagination model
+ * @category Pagination
+ */
+export declare const gridPaginationModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationModel>;
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export declare const gridPaginationRowCountSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, number>;
+/**
+ * Get the pagination meta
+ * @category Pagination
+ */
+export declare const gridPaginationMetaSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridPaginationInterfaces").GridPaginationState, import("../../..").GridPaginationMeta>;
+/**
+ * Get the index of the page to render if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
+/**
+ * Get the maximum amount of rows to display on a single page if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageSizeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridPaginationModel, number>;
+/**
+ * Get the amount of pages needed to display all the rows if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageCountSelector: import("../../..").OutputSelector<GridStateCommunity, number, number>;
+/**
+ * Get the index of the first and the last row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export declare const gridPaginationRowRangeSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], {
+  firstRowIndex: number;
+  lastRowIndex: number;
+} | null>;
+/**
+ * Get the id and the model of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, {
+  firstRowIndex: number;
+  lastRowIndex: number;
+} | null, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[]>;
+/**
+ * Get the id of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export declare const gridPaginatedVisibleSortedGridRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, {
+  firstRowIndex: number;
+  lastRowIndex: number;
+} | null, GridRowId[]>;
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+export declare const gridVisibleRowsSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[], {
+  rows: import("../../..").GridRowEntry<import("../../..").GridValidRowModel>[];
+  range: {
+    firstRowIndex: number;
+    lastRowIndex: number;
+  } | null;
+  rowIdToIndexMap: Map<GridRowId, number>;
+}>;

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

@@ -0,0 +1,153 @@
+import { createSelector, createRootSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from "../filter/gridFilterSelector.js";
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { getPageCount } from "./gridPaginationUtils.js";
+const ALL_RESULTS_PAGE_VALUE = -1;
+
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export const gridPaginationSelector = createRootSelector(state => state.pagination);
+
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export const gridPaginationEnabledClientSideSelector = createSelector(gridPaginationSelector, pagination => pagination.enabled && pagination.paginationMode === 'client');
+
+/**
+ * Get the pagination model
+ * @category 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 pagination meta
+ * @category Pagination
+ */
+export const gridPaginationMetaSelector = createSelector(gridPaginationSelector, pagination => pagination.meta);
+
+/**
+ * Get the index of the page to render if the pagination is enabled
+ * @category Pagination
+ */
+export const gridPageSelector = createSelector(gridPaginationModelSelector, paginationModel => paginationModel.page);
+
+/**
+ * Get the maximum amount of rows to display on a single page if the pagination is enabled
+ * @category Pagination
+ */
+export const gridPageSizeSelector = createSelector(gridPaginationModelSelector, paginationModel => paginationModel.pageSize);
+
+/**
+ * Get the amount of pages needed to display all the rows if the pagination is enabled
+ * @category Pagination
+ */
+export const gridPageCountSelector = createSelector(gridPaginationModelSelector, gridPaginationRowCountSelector, (paginationModel, rowCount) => 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.
+ * @category Pagination
+ */
+export const gridPaginationRowRangeSelector = createSelectorMemoized(gridPaginationEnabledClientSideSelector, gridPaginationModelSelector, gridRowTreeSelector, gridRowMaximumTreeDepthSelector, gridExpandedSortedRowEntriesSelector, gridFilteredSortedTopLevelRowEntriesSelector, (clientSidePaginationEnabled, paginationModel, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+  if (!clientSidePaginationEnabled) {
+    return null;
+  }
+  const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
+  const topLevelFirstRowIndex = Math.min(paginationModel.pageSize * paginationModel.page, visibleTopLevelRowCount - 1);
+  const topLevelLastRowIndex = paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE ? visibleTopLevelRowCount - 1 : Math.min(topLevelFirstRowIndex + paginationModel.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
+    };
+  }
+  const topLevelFirstRow = visibleSortedTopLevelRowEntries[topLevelFirstRowIndex];
+  const topLevelRowsInCurrentPageCount = topLevelLastRowIndex - topLevelFirstRowIndex + 1;
+  const firstRowIndex = visibleSortedRowEntries.findIndex(row => row.id === topLevelFirstRow.id);
+  let lastRowIndex = firstRowIndex;
+  let topLevelRowAdded = 0;
+  while (lastRowIndex < visibleSortedRowEntries.length && topLevelRowAdded <= topLevelRowsInCurrentPageCount) {
+    const row = visibleSortedRowEntries[lastRowIndex];
+    const depth = rowTree[row.id]?.depth;
+    if (depth === undefined) {
+      lastRowIndex += 1;
+    } else {
+      if (topLevelRowAdded < topLevelRowsInCurrentPageCount || depth > 0) {
+        lastRowIndex += 1;
+      }
+      if (depth === 0) {
+        topLevelRowAdded += 1;
+      }
+    }
+  }
+  return {
+    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 const gridPaginatedVisibleSortedGridRowEntriesSelector = createSelectorMemoized(gridExpandedSortedRowEntriesSelector, gridPaginationRowRangeSelector, (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 const gridPaginatedVisibleSortedGridRowIdsSelector = createSelectorMemoized(gridExpandedSortedRowIdsSelector, gridPaginationRowRangeSelector, (visibleSortedRowIds, paginationRange) => {
+  if (!paginationRange) {
+    return [];
+  }
+  return visibleSortedRowIds.slice(paginationRange.firstRowIndex, paginationRange.lastRowIndex + 1);
+});
+
+/**
+ * Get the rows, range and rowIndex lookup map after filtering and sorting.
+ * Does not contain the collapsed children.
+ * @category Pagination
+ */
+export const gridVisibleRowsSelector = createSelectorMemoized(gridPaginationEnabledClientSideSelector, gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector, gridExpandedSortedRowEntriesSelector, (clientPaginationEnabled, paginationRowRange, paginationRows, expandedSortedRowEntries) => {
+  if (clientPaginationEnabled) {
+    return {
+      rows: paginationRows,
+      range: paginationRowRange,
+      rowIdToIndexMap: paginationRows.reduce((lookup, row, index) => {
+        lookup.set(row.id, index);
+        return lookup;
+      }, new Map())
+    };
+  }
+  return {
+    rows: expandedSortedRowEntries,
+    range: expandedSortedRowEntries.length === 0 ? null : {
+      firstRowIndex: 0,
+      lastRowIndex: expandedSortedRowEntries.length - 1
+    },
+    rowIdToIndexMap: expandedSortedRowEntries.reduce((lookup, row, index) => {
+      lookup.set(row.id, index);
+      return lookup;
+    }, new Map())
+  };
+});

package/esm/hooks/features/pagination/gridPaginationUtils.d.ts

@@ -0,0 +1,9 @@
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+export declare const defaultPageSize: (autoPageSize: boolean) => 0 | 100;
+export declare const getPageCount: (rowCount: number, pageSize: number, page: number) => number;
+export declare const getDefaultGridPaginationModel: (autoPageSize: boolean) => {
+  page: number;
+  pageSize: number;
+};
+export declare const getValidPage: (page: number, pageCount?: number) => number;
+export declare const throwIfPageSizeExceedsTheLimit: (pageSize: number, signatureProp: DataGridProcessedProps["signature"]) => void;

package/esm/hooks/features/pagination/gridPaginationUtils.js

@@ -0,0 +1,28 @@
+import { GridSignature } from "../../../constants/signature.js";
+const MAX_PAGE_SIZE = 100;
+export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
+export 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;
+};
+export const getDefaultGridPaginationModel = autoPageSize => ({
+  page: 0,
+  pageSize: autoPageSize ? 0 : 100
+});
+export const getValidPage = (page, pageCount = 0) => {
+  if (pageCount === 0) {
+    return page;
+  }
+  return Math.max(Math.min(page, pageCount - 1), 0);
+};
+export const throwIfPageSizeExceedsTheLimit = (pageSize, signatureProp) => {
+  if (signatureProp === GridSignature.DataGrid && pageSize > MAX_PAGE_SIZE) {
+    throw new Error(['MUI X: `pageSize` cannot exceed 100 in the MIT version of the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
+  }
+};

package/esm/hooks/features/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./gridPaginationSelector.js";
+export type { GridPaginationModelApi, GridPaginationRowCountApi, GridPaginationApi, GridPaginationState, GridPaginationInitialState } from './gridPaginationInterfaces';

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

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

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

@@ -0,0 +1,10 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridStateInitializer } from "../../utils/useGridInitializeState.js";
+export declare const paginationStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'paginationModel' | 'rowCount' | 'initialState' | 'autoPageSize' | 'signature' | 'paginationMeta' | 'pagination' | 'paginationMode'>>;
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export declare const useGridPagination: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;

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

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from "./gridPaginationUtils.js";
+import { useGridPaginationModel } from "./useGridPaginationModel.js";
+import { useGridRowCount } from "./useGridRowCount.js";
+import { useGridPaginationMeta } from "./useGridPaginationMeta.js";
+export const paginationStateInitializer = (state, props) => {
+  const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
+  throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
+  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount ?? (props.paginationMode === 'client' ? state.rows?.totalRowCount : undefined);
+  const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
+  return _extends({}, state, {
+    pagination: _extends({}, state.pagination, {
+      paginationModel,
+      rowCount,
+      meta,
+      enabled: props.pagination === true,
+      paginationMode: props.paginationMode
+    })
+  });
+};
+
+/**
+ * @requires useGridFilter (state)
+ * @requires useGridDimensions (event) - can be after
+ */
+export const useGridPagination = (apiRef, props) => {
+  useGridPaginationMeta(apiRef, props);
+  useGridPaginationModel(apiRef, props);
+  useGridRowCount(apiRef, props);
+};

package/esm/hooks/features/pagination/useGridPaginationMeta.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+export declare const useGridPaginationMeta: (apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationMeta" | "initialState" | "paginationMode" | "onPaginationMetaChange">) => void;

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

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridLogger, useGridSelector, useGridApiMethod } from "../../utils/index.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { gridPaginationMetaSelector } from "./gridPaginationSelector.js";
+export const useGridPaginationMeta = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridPaginationMeta');
+  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
+  apiRef.current.registerControlState({
+    stateId: 'paginationMeta',
+    propModel: props.paginationMeta,
+    propOnChange: props.onPaginationMetaChange,
+    stateSelector: gridPaginationMetaSelector,
+    changeEvent: 'paginationMetaChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPaginationMeta = React.useCallback(newPaginationMeta => {
+    if (paginationMeta === newPaginationMeta) {
+      return;
+    }
+    logger.debug("Setting 'paginationMeta' to", newPaginationMeta);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        meta: newPaginationMeta
+      })
+    }));
+  }, [apiRef, logger, paginationMeta]);
+  const paginationMetaApi = {
+    setPaginationMeta
+  };
+  useGridApiMethod(apiRef, paginationMetaApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedPaginationMeta = 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 _extends({}, prevState, {
+      pagination: _extends({}, 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 : gridPaginationMetaSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        meta: restoredPaginationMeta
+      })
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (props.paginationMeta) {
+      apiRef.current.setPaginationMeta(props.paginationMeta);
+    }
+  }, [apiRef, props.paginationMeta]);
+};

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

@@ -0,0 +1,11 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
+import { GridPaginationState } from "./gridPaginationInterfaces.js";
+import { GridPaginationModel } from "../../../models/gridPaginationProps.js";
+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: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "pagination" | "signature" | "rowHeight">) => void;