@opencorestack/opengridx 2.0.4 → 3.0.0

package/lib/components/DataGrid/GridAggregationFooter.tsx

@@ -1,18 +1,30 @@
 import React, { useMemo } from 'react';
-import { formatAggregationValue } from '../../hooks/features/useAggregation';
+import { formatAggregateForColumn, isAggregationAllowed } from '../../utils/aggregation';
 import type { GridColDef, GridAggregationModel, GridAggregationResult, GridColumnPinning } from '../../types';
-import { calculatePinnedPositions, isColumnPinned } from '../../utils/pinning';
+import { calculatePinnedPositions, getPinnedEdgeFields, isColumnPinned } from '../../utils/pinning';
+import { getRenderedColumnWidth } from '../../utils/columnWidth';
+
+const SYSTEM_COLUMN_WIDTH = 48;
 
 interface GridAggregationFooterProps {
+    /**
+     * The columns exactly as the rows lay them out: visible only, pinned-left first and pinned-right
+     * last, with the horizontal-virtualization spacers (`virtualization.virtualColumns`).
+     */
     columns: GridColDef[];
     aggregationModel: GridAggregationModel;
     aggregationResult: GridAggregationResult;
+    /** User resize overrides, as passed to the rows. */
     columnWidths: Record<string, number>;
     rowHeight: number;
     checkboxSelection: boolean;
     hasDetailPanel: boolean;
     rowReordering: boolean;
+    pinCheckboxColumn?: boolean;
+    pinExpandColumn?: boolean;
     pinnedColumns?: GridColumnPinning;
+    /** A server aggregation request is in flight. */
+    loading?: boolean;
 }
 
 export function GridAggregationFooter({
@@ -24,44 +36,68 @@ export function GridAggregationFooter({
     checkboxSelection,
     hasDetailPanel,
     rowReordering,
+    pinCheckboxColumn = true,
+    pinExpandColumn = true,
     pinnedColumns,
+    loading = false,
 }: GridAggregationFooterProps) {
-    // Compute sticky left/right pixel offsets for each pinned column.
-    // The footer always renders checkbox/detail/reorder spacers unconditionally,
-    // so treat pinCheckboxColumn and pinExpandColumn as always true.
+    // Same offsets as Row, so pinned totals sit exactly under their pinned body cells.
     const pinnedOffsets = useMemo(
         () => calculatePinnedPositions(
             columns,
             columnWidths,
             pinnedColumns,
             checkboxSelection,
-            true,
+            pinCheckboxColumn,
             hasDetailPanel,
-            true,
+            pinExpandColumn,
             rowReordering,
         ),
-        [columns, columnWidths, pinnedColumns, checkboxSelection, hasDetailPanel, rowReordering]
+        [columns, columnWidths, pinnedColumns, checkboxSelection, pinCheckboxColumn, hasDetailPanel, pinExpandColumn, rowReordering]
+    );
+
+    const { lastLeft: lastLeftField, firstRight: firstRightField } = useMemo(
+        () => getPinnedEdgeFields(columns, pinnedColumns),
+        [columns, pinnedColumns]
     );
 
-    const lastLeftField  = pinnedColumns?.left?.[pinnedColumns.left.length - 1];
-    const firstRightField = pinnedColumns?.right?.[0];
+    // System-column spacers stick exactly where Row sticks its drag handle, expand and checkbox cells.
+    const expandLeft = rowReordering ? SYSTEM_COLUMN_WIDTH : 0;
+    const checkboxLeft = expandLeft + (hasDetailPanel && pinExpandColumn ? SYSTEM_COLUMN_WIDTH : 0);
+    const spacer = (key: string, pinned: boolean, left: number) => (
+        <div
+            key={key}
+            className={`ogx__aggregation-spacer${pinned ? ' ogx__aggregation-spacer--pinned' : ''}`}
+            style={pinned ? { left } : undefined}
+            aria-hidden="true"
+        />
+    );
 
     return (
         <div
-            className="ogx__aggregation-footer"
+            className={`ogx__aggregation-footer${loading ? ' ogx__aggregation-footer--loading' : ''}`}
             role="row"
             aria-label="Aggregation totals"
             aria-live="polite"
+            aria-busy={loading || undefined}
             style={{ minHeight: `${rowHeight}px` }}
         >
-            {checkboxSelection && <div style={{ width: 48, flexShrink: 0 }} />}
-            {hasDetailPanel  && <div style={{ width: 48, flexShrink: 0 }} />}
-            {rowReordering   && <div style={{ width: 48, flexShrink: 0 }} />}
+            {rowReordering && spacer('__reorder_col__', true, 0)}
+            {hasDetailPanel && spacer('__expand_col__', pinExpandColumn, expandLeft)}
+            {checkboxSelection && spacer('__checkbox_col__', pinCheckboxColumn, checkboxLeft)}
 
             {columns.map((col) => {
-                const fnName = (aggregationModel as Record<string, string>)[col.field];
+                if (col.isSpacer) {
+                    const width = typeof col.width === 'number' ? col.width : 0;
+                    return <div key={col.field} style={{ width, minWidth: width, flexShrink: 0 }} aria-hidden="true" />;
+                }
+
+                // A model entry the column forbids (aggregable: false, or a function outside
+                // availableAggregationFunctions) shows nothing, as the engine computes nothing for it.
+                const modelFn = (aggregationModel as Record<string, string>)[col.field];
+                const fnName = modelFn && isAggregationAllowed(col, modelFn) ? modelFn : undefined;
                 const rawValue = aggregationResult[col.field];
-                const colWidth = columnWidths[col.field] ?? (typeof col.width === 'number' ? col.width : 120);
+                const colWidth = getRenderedColumnWidth(col, columnWidths, 120);
 
                 const pinnedPosition = isColumnPinned(col.field, pinnedColumns);
                 const pinnedOffset   = pinnedPosition ? pinnedOffsets[col.field] : undefined;
@@ -94,7 +130,7 @@ export function GridAggregationFooter({
                             <>
                                 <span className="ogx__aggregation-label">{fnName}</span>
                                 <span className="ogx__aggregation-value">
-                                    {formatAggregationValue(rawValue, fnName)}
+                                    {formatAggregateForColumn(rawValue, fnName, col, aggregationResult)}
                                 </span>
                             </>
                         ) : null}

package/lib/components/DataGrid/GridEmptyState.tsx

@@ -1,9 +1,15 @@
+import type React from 'react';
+
 interface GridEmptyStateProps {
     noRowsLabel: string;
     width: number;
+    overlay?: React.ReactNode;
 }
 
-export function GridEmptyState({ noRowsLabel, width }: GridEmptyStateProps) {
+export function GridEmptyState({ noRowsLabel, width, overlay }: GridEmptyStateProps) {
+    if (overlay) {
+        return <div className="ogx__empty" style={{ width }}>{overlay}</div>;
+    }
     return (
         <div className="ogx__empty" style={{ width }}>
             <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">

package/lib/components/DataGrid/GridErrorOverlay.tsx

@@ -1,14 +1,14 @@
+import { getDataSourceErrorMessage } from '../../utils/dataSource';
+
 interface GridErrorOverlayProps {
     error: unknown;
+    /** Runs the failed request again. Without it, no Retry button is shown. */
+    onRetry?: () => void;
 }
 
-export function GridErrorOverlay({ error }: GridErrorOverlayProps) {
+export function GridErrorOverlay({ error, onRetry }: GridErrorOverlayProps) {
     if (!error) return null;
-    const message = error instanceof Error
-        ? error.message
-        : typeof error === 'string'
-            ? error
-            : 'An unexpected error occurred while loading the data.';
+    const message = getDataSourceErrorMessage(error);
     return (
         <div className="ogx-error-overlay" aria-live="assertive" role="alert">
             <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--ogx-color-error)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
@@ -22,12 +22,15 @@ export function GridErrorOverlay({ error }: GridErrorOverlayProps) {
             <div className="ogx-error-overlay__message">
                 {message}
             </div>
-            <button
-                onClick={() => window.location.reload()}
-                className="ogx-button ogx-button--primary"
-            >
-                Retry
-            </button>
+            {onRetry && (
+                <button
+                    type="button"
+                    onClick={onRetry}
+                    className="ogx-button ogx-button--primary"
+                >
+                    Retry
+                </button>
+            )}
         </div>
     );
 }

package/lib/components/DataGrid/GridListView.tsx

@@ -1,85 +1,217 @@
 import React from 'react';
 import { Pagination } from '../Pagination/Pagination';
 import { ListViewRow } from '../ListView/ListViewRow';
+import { getPageCount, normalizePageSize } from '../../utils/pagination';
+import { useRowsScrollEndLatch } from '../../hooks/core/useRowsScrollEndLatch';
 import type {
+    GridColDef,
     GridRowModel,
     GridRowId,
+    GridRowMeta,
     GridRowParams,
     GridListViewColDef,
     GridPaginationModel,
-    GridDataSource,
     GridLocaleText,
+    GridRowScrollEndParams,
+    GridSlots,
 } from '../../types';
 
 export interface GridListViewProps<R extends GridRowModel> {
     ariaLabel?: string;
+    /** Pinned-top rows, the current page and pinned-bottom rows: what the grid view renders. */
     allRenderableRows: R[];
-    filteredRows: R[];
+    /** Filtered data rows (no group, subtotal or auto-created parent rows): the "N items" count. */
+    dataRowCount: number;
+    /** Number of rows at the start of allRenderableRows that are pinned to the top. */
+    pinnedTopRowCount: number;
+    /** Number of rows at the end of allRenderableRows that are pinned to the bottom. */
+    pinnedBottomRowCount: number;
+    /** Filtered, unpinned rows across all pages (the rows pagination splits into pages). */
+    unpinnedRowCount: number;
     pagination: boolean;
     effectivePaginationModel: GridPaginationModel;
+    /** The page actually shown (the requested page clamped to the last page). */
+    currentPage: number;
     pageSizeOptions: number[];
     selectedRowIds: Set<GridRowId>;
     listViewColumn: GridListViewColDef<R>;
+    /** Grid columns by field; a list field that names one gets its valueGetter / valueFormatter. */
+    columnsByField: ReadonlyMap<string, GridColDef>;
+    rowMetaMap: Map<GridRowId, GridRowMeta>;
     noRowsLabel: string;
     rowHeight: number;
     checkboxSelection: boolean;
     paginationMode: 'client' | 'server' | 'infinite';
-    dataSource?: GridDataSource<R>;
+    /** The grid's pagination total; used in server mode. */
     serverRowCount: number;
-    paginationSlot?: React.ComponentType<Record<string, unknown>>;
+    paginationSlot?: GridSlots['pagination'];
     paginationSlotProps?: Record<string, unknown>;
     localeText?: Pick<GridLocaleText, 'paginationRowsPerPage' | 'paginationOf' | 'paginationPage'>;
     onRowClick: (params: GridRowParams<R>) => void;
+    onRowDoubleClick?: (params: GridRowParams<R>) => void;
     onSelectionChange: (rowId: GridRowId, isSelected: boolean) => void;
     onPaginationModelChange: (model: GridPaginationModel) => void;
+    onRowsScrollEnd?: (params: GridRowScrollEndParams) => void;
+    /** Resolves a row's id; defaults to `row.id`. */
+    getRowId?: (row: R) => GridRowId;
+    /** Whether several rows can be selected (aria-multiselectable). */
+    multiselectable?: boolean;
+    /** The grid is loading (the `loading` prop or a data source fetch). */
+    loading?: boolean;
+    /** Rendered `slots.loadingOverlay`, shown instead of the rows while loading with no rows. */
+    loadingOverlay?: React.ReactNode;
+    /** Rendered `slots.noRowsOverlay`, shown instead of the default empty state. */
+    noRowsOverlay?: React.ReactNode;
+    /** False when `slots.footer` replaces the pagination area. Defaults to true. */
+    showPaginationControls?: boolean;
+    /** Whether rows can be selected (Shift+Space toggles the focused row). */
+    selectable?: boolean;
+    /** Expands / collapses a tree-data parent or group row (Enter, Space, Alt+ArrowRight / Alt+ArrowLeft). */
+    onToggleExpansion?: (id: GridRowId) => void;
 }
 
+const defaultGetRowId = <R extends GridRowModel>(row: R): GridRowId => row.id;
+
 export function GridListView<R extends GridRowModel>({
     ariaLabel,
     allRenderableRows,
-    filteredRows,
+    dataRowCount,
+    pinnedTopRowCount,
+    pinnedBottomRowCount,
+    unpinnedRowCount,
     pagination,
     effectivePaginationModel,
+    currentPage,
     pageSizeOptions,
     selectedRowIds,
     listViewColumn,
+    columnsByField,
+    rowMetaMap,
     noRowsLabel,
     rowHeight,
     checkboxSelection,
     paginationMode,
-    dataSource,
     serverRowCount,
     paginationSlot,
     paginationSlotProps,
     localeText,
     onRowClick,
+    onRowDoubleClick,
     onSelectionChange,
     onPaginationModelChange,
+    onRowsScrollEnd,
+    getRowId = defaultGetRowId,
+    multiselectable = false,
+    loading = false,
+    loadingOverlay,
+    noRowsOverlay,
+    showPaginationControls = true,
+    selectable = false,
+    onToggleExpansion,
 }: GridListViewProps<R>) {
     const PaginationComponent = paginationSlot || Pagination;
 
-    const totalRowCount = (paginationMode === 'server' && dataSource)
-        ? (serverRowCount || 0)
-        : filteredRows.length;
+    // Roving tab stop: the list is one Tab stop, on the last focused row (the first row until then,
+    // or when that row is no longer rendered).
+    const rowsRef = React.useRef<HTMLDivElement>(null);
+    const [focusedRowId, setFocusedRowId] = React.useState<GridRowId | null>(null);
+    const focusedIndex = focusedRowId === null ? -1 : allRenderableRows.findIndex(row => getRowId(row) === focusedRowId);
+    const tabStopIndex = focusedIndex === -1 ? 0 : focusedIndex;
+
+    const focusRow = (index: number) => {
+        const row = allRenderableRows[index];
+        if (!row) return;
+        setFocusedRowId(getRowId(row));
+        rowsRef.current?.querySelector<HTMLElement>(`:scope > [role="row"][data-rowindex="${index}"]`)?.focus();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+        const target = event.target as HTMLElement;
+        // Keys pressed in content rendered inside a row (inputs, buttons) belong to that content.
+        if (target.getAttribute('role') !== 'row' || target.parentElement !== rowsRef.current) return;
+        const index = Number(target.getAttribute('data-rowindex'));
+        const row = allRenderableRows[index];
+        if (!row) return;
+        const id = getRowId(row);
+        const last = allRenderableRows.length - 1;
+        const meta = rowMetaMap.get(id);
+        const canToggle = Boolean(meta?.hasChildren && onToggleExpansion);
+        if (event.altKey && (event.key === 'ArrowRight' || event.key === 'ArrowLeft')) {
+            event.preventDefault();
+            if (canToggle && (event.key === 'ArrowRight') !== (meta?.isExpanded === true)) onToggleExpansion?.(id);
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown': event.preventDefault(); focusRow(Math.min(index + 1, last)); return;
+            case 'ArrowUp': event.preventDefault(); focusRow(Math.max(index - 1, 0)); return;
+            case 'Home': event.preventDefault(); focusRow(0); return;
+            case 'End': event.preventDefault(); focusRow(last); return;
+            case 'PageDown': event.preventDefault(); focusRow(Math.min(index + 10, last)); return;
+            case 'PageUp': event.preventDefault(); focusRow(Math.max(index - 10, 0)); return;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (event.key === ' ' && event.shiftKey) {
+                    // Synthetic group rows are not data, so they are not selectable.
+                    if (selectable && !meta?.isGroupRow) onSelectionChange(id, !selectedRowIds.has(id));
+                    return;
+                }
+                // A row with children (tree-data parent or group row) expands / collapses, as Enter does in
+                // the grid view; any other row acts as clicked (onRowClick and click selection).
+                if (canToggle) onToggleExpansion?.(id);
+                else onRowClick({ row, id, rowIndex: index });
+                return;
+            default:
+        }
+    };
+
+    // Under server pagination only the current page is loaded; the server reports the total.
+    const isServerPaged = paginationMode === 'server';
+    // Rows split into pages (pinned rows stay on every page, as in the grid view).
+    const pagedRowCount = isServerPaged ? (serverRowCount || 0) : unpinnedRowCount;
+    const itemCount = isServerPaged ? (serverRowCount || 0) : dataRowCount;
+    const pageSize = normalizePageSize(effectivePaginationModel.pageSize);
+    const pageCount = getPageCount(pagedRowCount, pageSize);
+
+    // aria-rowindex is 1-based over the whole data set (the list view has no header row):
+    // pinned-top rows, then the unpinned rows across all pages, then pinned-bottom rows.
+    const pageOffset = pagination ? currentPage * pageSize : 0;
+    const centerRowsOnPage = allRenderableRows.length - pinnedTopRowCount - pinnedBottomRowCount;
+    const ariaRowIndex = (idx: number): number => {
+        if (idx < pinnedTopRowCount) return idx + 1;
+        const centerIdx = idx - pinnedTopRowCount;
+        if (centerIdx < centerRowsOnPage) return pinnedTopRowCount + pageOffset + centerIdx + 1;
+        return pinnedTopRowCount + pagedRowCount + (centerIdx - centerRowsOnPage) + 1;
+    };
+
+    const handleScroll = useRowsScrollEndLatch(onRowsScrollEnd, allRenderableRows.length);
 
     return (
         <div
             className="ogx-list-view"
             role="grid"
             aria-label={ariaLabel || 'Data grid list view'}
-            aria-rowcount={allRenderableRows.length + 1}
+            aria-rowcount={itemCount}
+            aria-multiselectable={multiselectable}
         >
             <div className="ogx-list-view__toolbar">
                 <span>
-                    {filteredRows.length} {filteredRows.length === 1 ? 'item' : 'items'}
-                    {pagination ? ` · page ${effectivePaginationModel.page + 1} of ${Math.ceil(filteredRows.length / effectivePaginationModel.pageSize) || 1}` : ''}
+                    {itemCount} {itemCount === 1 ? 'item' : 'items'}
+                    {pagination ? ` · page ${currentPage + 1} of ${pageCount}` : ''}
                     {selectedRowIds.size > 0 ? ` · ${selectedRowIds.size} selected` : ''}
                 </span>
             </div>
 
-            <div className="ogx-list-view__rows">
-                {allRenderableRows.length === 0 ? (
-                    <div className="ogx-list-view__empty" aria-live="polite" role="status">
+            <div className="ogx-list-view__rows" onScroll={handleScroll} onKeyDown={handleKeyDown} ref={rowsRef}>
+                {allRenderableRows.length === 0 && loading ? (
+                    // The grid's live region announces loading; the list shows no "No Data" meanwhile.
+                    <div className="ogx-list-view__loading">
+                        {loadingOverlay ?? <div className="ogx__loading-bar" role="progressbar" aria-label="Loading data" />}
+                    </div>
+                ) : allRenderableRows.length === 0 && noRowsOverlay ? (
+                    <div className="ogx-list-view__empty">{noRowsOverlay}</div>
+                ) : allRenderableRows.length === 0 ? (
+                    <div className="ogx-list-view__empty">
                         <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                             <rect x="3" y="3" width="18" height="18" rx="2" />
                             <path d="M3 9h18M9 21V9" />
@@ -87,27 +219,38 @@ export function GridListView<R extends GridRowModel>({
                         {noRowsLabel}
                     </div>
                 ) : (
-                    allRenderableRows.map((row, idx) => (
+                    allRenderableRows.map((row, idx) => {
+                        const id = getRowId(row);
+                        return (
                         <ListViewRow<R>
-                            key={row.id}
+                            key={id}
                             row={row}
+                            rowId={id}
                             rowIndex={idx}
+                            ariaRowIndex={ariaRowIndex(idx)}
                             listViewColumn={listViewColumn}
-                            isSelected={selectedRowIds.has(row.id)}
+                            gridColumn={columnsByField.get(listViewColumn.field) as GridColDef<R> | undefined}
+                            rowMeta={rowMetaMap.get(id)}
+                            isSelected={selectedRowIds.has(id)}
                             checkboxSelection={checkboxSelection}
                             rowHeight={rowHeight}
-                            onRowClick={(r) => onRowClick({ row: r, id: r.id, rowIndex: idx })}
+                            onRowClick={(r) => onRowClick({ row: r, id, rowIndex: idx })}
+                            onRowDoubleClick={onRowDoubleClick ? (r) => onRowDoubleClick({ row: r, id, rowIndex: idx }) : undefined}
                             onSelectionChange={onSelectionChange}
+                            tabIndex={idx === tabStopIndex ? 0 : -1}
+                            onToggleExpansion={onToggleExpansion}
+                            onFocus={(rowIndex) => setFocusedRowId(getRowId(allRenderableRows[rowIndex]))}
                         />
-                    ))
+                        );
+                    })
                 )}
             </div>
 
-            {pagination && (
+            {pagination && showPaginationControls && (
                 <PaginationComponent
-                    page={effectivePaginationModel.page}
+                    page={currentPage}
                     pageSize={effectivePaginationModel.pageSize}
-                    rowCount={totalRowCount}
+                    rowCount={pagedRowCount}
                     pageSizeOptions={pageSizeOptions}
                     onPageChange={(newPage: number) => onPaginationModelChange({ ...effectivePaginationModel, page: newPage })}
                     onPageSizeChange={(newPageSize: number) => onPaginationModelChange({ ...effectivePaginationModel, pageSize: newPageSize, page: 0 })}

package/lib/components/DataGrid/GridLiveRegion.tsx

@@ -0,0 +1,31 @@
+import { getDataSourceErrorMessage } from '../../utils/dataSource';
+import type { GridFilterModel } from '../../types';
+
+interface GridLiveRegionProps {
+    loading: boolean;
+    /** The dataSource error, if any. */
+    error: unknown;
+    noRowsLabel: string;
+    /** Rows that pass the filter (grid rows, group rows included). */
+    filteredRowCount: number;
+    /** Data rows that pass the filter: the "n rows found" count. */
+    dataRowCount: number;
+    filterModel: GridFilterModel | undefined;
+}
+
+/** Polite status announcements: loading, a load error, no rows, or the row count of an active filter. */
+export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount, dataRowCount, filterModel }: GridLiveRegionProps) {
+    return (
+        <div className="ogx-aria-live-status" role="status" aria-live="polite">
+            {loading ? 'Loading data...' : ''}
+            {error ? `Error: ${getDataSourceErrorMessage(error)}` : ''}
+            {!loading && !error && (
+                filteredRowCount === 0
+                    ? noRowsLabel
+                    : (filterModel && ((filterModel.quickFilterValues?.length || 0) > 0 || (filterModel.items?.length || 0) > 0))
+                        ? `${dataRowCount} ${dataRowCount === 1 ? 'row' : 'rows'} found`
+                        : ''
+            )}
+        </div>
+    );
+}

package/lib/components/DataGrid/GridLoadingOverlay.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface GridLoadingOverlayProps {
+    /** `slots.loadingOverlay`, rendered centred over the rows on a dimmed backdrop. */
+    overlay?: React.ReactNode;
+}
+
+/**
+ * Shown while the grid is loading but already has rows (a reload, a server sort or filter): the
+ * rows stay visible and interactive, and a progress bar runs along the top of the grid. A custom
+ * `slots.loadingOverlay` is shown centred instead. With no rows yet, the body shows skeleton rows
+ * or the loading overlay in place of the rows, so this is not rendered.
+ */
+export function GridLoadingOverlay({ overlay }: GridLoadingOverlayProps) {
+    if (overlay) {
+        return (
+            <div className="ogx__loading-overlay ogx__loading-overlay--over-rows ogx__loading-overlay--custom">
+                {overlay}
+            </div>
+        );
+    }
+    return (
+        <div className="ogx__loading-overlay ogx__loading-overlay--over-rows">
+            <div className="ogx__loading-bar" role="progressbar" aria-label="Loading data" />
+        </div>
+    );
+}

package/lib/components/DataGrid/GridPaginationArea.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Pagination } from '../Pagination/Pagination';
+import { pickPaginationLocaleText } from '../../utils/pagination';
+import type { GridLocaleText, GridPaginationModel, GridPaginationSlotProps } from '../../types';
+
+interface GridPaginationAreaProps {
+    /** `slots.pagination`; the built-in `Pagination` otherwise. */
+    paginationSlot?: React.ComponentType<GridPaginationSlotProps & Record<string, unknown>>;
+    /** `slotProps.pagination`, merged over the grid's props. */
+    paginationSlotProps?: Partial<GridPaginationSlotProps> & Record<string, unknown>;
+    /** The page shown (clamped by the row pipeline). */
+    page: number;
+    paginationModel: GridPaginationModel;
+    rowCount: number;
+    pageSizeOptions: number[];
+    onPaginationModelChange: (model: GridPaginationModel) => void;
+    localeText?: GridLocaleText;
+}
+
+/** The grid's pager below the viewport: a page change keeps the page size, a page-size change returns to page 0. */
+export function GridPaginationArea({
+    paginationSlot,
+    paginationSlotProps,
+    page,
+    paginationModel,
+    rowCount,
+    pageSizeOptions,
+    onPaginationModelChange,
+    localeText,
+}: GridPaginationAreaProps) {
+    const PaginationComponent = paginationSlot || Pagination;
+    return (
+        <PaginationComponent
+            page={page}
+            pageSize={paginationModel.pageSize}
+            rowCount={rowCount}
+            pageSizeOptions={pageSizeOptions}
+            onPageChange={(newPage: number) => onPaginationModelChange({ ...paginationModel, page: newPage })}
+            onPageSizeChange={(newPageSize: number) => onPaginationModelChange({ ...paginationModel, pageSize: newPageSize, page: 0 })}
+            localeText={pickPaginationLocaleText(localeText)}
+            {...paginationSlotProps}
+        />
+    );
+}