@mui/x-data-grid 8.28.6 → 8.29.0

package/hooks/features/keyboardNavigation/utils.d.mts

@@ -0,0 +1,26 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridRowId } from "../../../models/index.mjs";
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+export declare const getLeftColumnIndex: ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}: {
+  currentColIndex: number;
+  firstColIndex: number;
+  lastColIndex: number;
+  isRtl: boolean;
+}) => number | null;
+export declare const getRightColumnIndex: ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}: {
+  currentColIndex: number;
+  firstColIndex: number;
+  lastColIndex: number;
+  isRtl: boolean;
+}) => number | null;
+export declare function findNonRowSpannedCell(apiRef: RefObject<GridPrivateApiCommunity>, rowId: GridRowId, colIndex: number, rowSpanScanDirection: 'up' | 'down'): GridRowId;

package/hooks/features/keyboardNavigation/utils.mjs

@@ -0,0 +1,53 @@
+import { Rowspan } from '@mui/x-virtualizer';
+import { gridFilteredSortedRowIdsSelector } from "../filter/gridFilterSelector.mjs";
+export const getLeftColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}) => {
+  if (isRtl) {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  } else if (!isRtl) {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  }
+  return null;
+};
+export const getRightColumnIndex = ({
+  currentColIndex,
+  firstColIndex,
+  lastColIndex,
+  isRtl
+}) => {
+  if (isRtl) {
+    if (currentColIndex > firstColIndex) {
+      return currentColIndex - 1;
+    }
+  } else if (!isRtl) {
+    if (currentColIndex < lastColIndex) {
+      return currentColIndex + 1;
+    }
+  }
+  return null;
+};
+export function findNonRowSpannedCell(apiRef, rowId, colIndex, rowSpanScanDirection) {
+  const rowSpanHiddenCells = Rowspan.selectors.hiddenCells(apiRef.current.virtualizer.store.state);
+  if (!rowSpanHiddenCells[rowId]?.[colIndex]) {
+    return rowId;
+  }
+  const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  // find closest non row spanned cell in the given `rowSpanScanDirection`
+  let nextRowIndex = filteredSortedRowIds.indexOf(rowId) + (rowSpanScanDirection === 'down' ? 1 : -1);
+  while (nextRowIndex >= 0 && nextRowIndex < filteredSortedRowIds.length) {
+    const nextRowId = filteredSortedRowIds[nextRowIndex];
+    if (!rowSpanHiddenCells[nextRowId]?.[colIndex]) {
+      return nextRowId;
+    }
+    nextRowIndex += rowSpanScanDirection === 'down' ? 1 : -1;
+  }
+  return rowId;
+}

package/hooks/features/listView/gridListViewSelectors.d.mts

@@ -0,0 +1,14 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+import type { GridStateColDef } from "../../../models/colDef/gridColDef.mjs";
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+export declare const gridListViewSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, boolean>;
+/**
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
+ */
+export declare const gridListColumnSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, GridStateColDef>;

package/hooks/features/listView/gridListViewSelectors.mjs

@@ -0,0 +1,14 @@
+import { createRootSelector } from "../../../utils/createSelector.mjs";
+/**
+ * Get the list view state
+ * @category List View
+ * @ignore - Do not document
+ */
+export const gridListViewSelector = createRootSelector(state => state.props.listView ?? false);
+
+/**
+ * Get the list column definition
+ * @category List View
+ * @ignore - Do not document
+ */
+export const gridListColumnSelector = createRootSelector(state => state.listViewColumn);

package/hooks/features/listView/index.d.mts

@@ -0,0 +1 @@
+export * from "./gridListViewSelectors.mjs";

package/hooks/features/listView/index.mjs

@@ -0,0 +1 @@
+export * from "./gridListViewSelectors.mjs";

package/hooks/features/listView/useGridListView.d.mts

@@ -0,0 +1,10 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridListViewColDef } from "../../../models/colDef/gridColDef.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+export type GridListViewState = (GridListViewColDef & {
+  computedWidth: number;
+}) | undefined;
+export declare const listViewStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'listViewColumn'>>;
+export declare function useGridListView(apiRef: RefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'listView' | 'listViewColumn'>): void;

package/hooks/features/listView/useGridListView.mjs

@@ -0,0 +1,63 @@
+'use client';
+
+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.mjs";
+import { useGridEvent } from "../../utils/useGridEvent.mjs";
+export const listViewStateInitializer = (state, props, apiRef) => _extends({}, state, {
+  listViewColumn: props.listViewColumn ? _extends({}, props.listViewColumn, {
+    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();
+    }
+  };
+  useGridEvent(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+  useGridEvent(apiRef, 'columnVisibilityModelChange', updateListColumnWidth);
+
+  /*
+   * EFFECTS
+   */
+  useEnhancedEffect(() => {
+    const listColumn = props.listViewColumn;
+    if (listColumn) {
+      apiRef.current.setState(state => {
+        return _extends({}, state, {
+          listViewColumn: _extends({}, listColumn, {
+            computedWidth: getListColumnWidth(apiRef)
+          })
+        });
+      });
+    }
+  }, [apiRef, props.listViewColumn]);
+  React.useEffect(() => {
+    if (props.listView && !props.listViewColumn) {
+      warnOnce(['MUI X: The `listViewColumn` prop must be set if `listView` is enabled.', 'To fix, pass a column definition to the `listViewColumn` 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.listView, props.listViewColumn]);
+}
+function getListColumnWidth(apiRef) {
+  return gridDimensionsSelector(apiRef).viewportInnerSize.width;
+}

package/hooks/features/overlays/gridOverlaysInterfaces.d.mts

@@ -0,0 +1,3 @@
+import type { GridSlotsComponent } from "../../../models/index.mjs";
+export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noColumnsOverlay' | 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+export type GridLoadingOverlayVariant = 'circular-progress' | 'linear-progress' | 'skeleton';

package/hooks/features/overlays/index.d.mts

@@ -0,0 +1 @@
+export type { GridLoadingOverlayVariant } from "./gridOverlaysInterfaces.mjs";

package/hooks/features/overlays/useGridOverlays.d.mts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { GridApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridOverlayType, GridLoadingOverlayVariant } from "./gridOverlaysInterfaces.mjs";
+/**
+ * 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: (apiRef: React.RefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, "slotProps">) => {
+  overlayType: NonNullable<GridOverlayType>;
+  loadingOverlayVariant: GridLoadingOverlayVariant | null;
+};

package/hooks/features/overlays/useGridOverlays.mjs

@@ -0,0 +1,45 @@
+import { useGridSelector } from "../../utils/index.mjs";
+import { gridExpandedRowCountSelector } from "../filter/index.mjs";
+import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.mjs";
+import { gridPinnedRowsCountSelector } from "../rows/gridRowsSelector.mjs";
+import { gridVisibleColumnDefinitionsSelector } from "../columns/index.mjs";
+import { gridPivotActiveSelector } from "../pivoting/index.mjs";
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export const useGridOverlays = (apiRef, props) => {
+  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 pivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const showNoRowsOverlay = !loading && noRows;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  const showNoColumnsOverlay = !loading && visibleColumns.length === 0;
+  const showEmptyPivotOverlay = showNoRowsOverlay && pivotActive;
+  let overlayType = null;
+  let loadingOverlayVariant = null;
+  if (showNoRowsOverlay) {
+    overlayType = 'noRowsOverlay';
+  }
+  if (showNoColumnsOverlay) {
+    overlayType = 'noColumnsOverlay';
+  }
+  if (showEmptyPivotOverlay) {
+    overlayType = 'emptyPivotOverlay';
+  }
+  if (showNoResultsOverlay) {
+    overlayType = 'noResultsOverlay';
+  }
+  if (loading) {
+    overlayType = 'loadingOverlay';
+    loadingOverlayVariant = props.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] ?? (noRows ? 'skeleton' : 'linear-progress');
+  }
+  return {
+    overlayType: overlayType,
+    loadingOverlayVariant
+  };
+};

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

@@ -0,0 +1,58 @@
+import type { GridFeatureMode } from "../../../models/gridFeatureMode.mjs";
+import type { GridPaginationMeta, GridPaginationModel } from "../../../models/gridPaginationProps.mjs";
+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/hooks/features/pagination/gridPaginationSelector.d.mts

@@ -0,0 +1,95 @@
+import type { GridStateCommunity } from "../../../models/gridStateCommunity.mjs";
+import type { GridRowId } from "../../../models/gridRows.mjs";
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export declare const gridPaginationSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridPaginationState>;
+/**
+ * @category Pagination
+ * @ignore - do not document.
+ */
+export declare const gridPaginationEnabledClientSideSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => boolean;
+/**
+ * Get the pagination model
+ * @category Pagination
+ */
+export declare const gridPaginationModelSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridPaginationModel;
+/**
+ * Get the row count
+ * @category Pagination
+ */
+export declare const gridPaginationRowCountSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+/**
+ * Get the pagination meta
+ * @category Pagination
+ */
+export declare const gridPaginationMetaSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridPaginationMeta;
+/**
+ * Get the index of the page to render if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+/**
+ * Get the maximum amount of rows to display on a single page if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageSizeSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => number;
+/**
+ * Get the amount of pages needed to display all the rows if the pagination is enabled
+ * @category Pagination
+ */
+export declare const gridPageCountSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => 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: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
+  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: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[];
+/**
+ * Get the id of each row to include in the current page if the pagination is enabled.
+ * @category Pagination
+ */
+export declare const gridPaginatedVisibleSortedGridRowIdsSelector: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | 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: (args_0: import("react").RefObject<{
+  state: GridStateCommunity;
+} | null>) => {
+  rows: import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[];
+  range: {
+    firstRowIndex: number;
+    lastRowIndex: number;
+  } | null;
+  rowIdToIndexMap: Map<GridRowId, number>;
+};

package/hooks/features/pagination/gridPaginationSelector.mjs

@@ -0,0 +1,156 @@
+import { createSelector, createRootSelector, createSelectorMemoized } from "../../../utils/createSelector.mjs";
+import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from "../filter/gridFilterSelector.mjs";
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.mjs";
+import { getPageCount } from "./gridPaginationUtils.mjs";
+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;
+  }
+  if (!visibleSortedRowEntries || visibleSortedRowEntries.length === 0) {
+    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/hooks/features/pagination/gridPaginationUtils.d.mts

@@ -0,0 +1,9 @@
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+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/hooks/features/pagination/gridPaginationUtils.mjs

@@ -0,0 +1,28 @@
+import { GridSignature } from "../../../constants/signature.mjs";
+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/hooks/features/pagination/index.d.mts

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

package/hooks/features/pagination/index.mjs

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

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

@@ -0,0 +1,10 @@
+import type { RefObject } from '@mui/x-internals/types';
+import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.mjs";
+import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.mjs";
+import type { GridStateInitializer } from "../../utils/useGridInitializeState.mjs";
+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/hooks/features/pagination/useGridPagination.mjs

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from "./gridPaginationUtils.mjs";
+import { useGridPaginationModel } from "./useGridPaginationModel.mjs";
+import { useGridRowCount } from "./useGridRowCount.mjs";
+import { useGridPaginationMeta } from "./useGridPaginationMeta.mjs";
+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);
+};