@alaarab/ogrid-react-material 2.1.3 → 2.1.4

package/dist/esm/DataGridTable/DataGridTable.js

@@ -1,416 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { useCallback, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import { Box, Popover, Checkbox, Table, TableHead, TableBody, TableRow, TableCell, } from '@mui/material';
-import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
-import { ColumnHeaderMenu } from '../ColumnHeaderMenu';
-import { InlineCellEditor } from './InlineCellEditor';
-import { StatusBar } from './StatusBar';
-import { GridContextMenu } from './GridContextMenu';
-import { EmptyState } from './EmptyState';
-import { LoadingOverlay } from './LoadingOverlay';
-import { DropIndicator } from './DropIndicator';
-import { useDataGridTableOrchestration, useColumnMeta, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from '@alaarab/ogrid-react';
-// ── Module-scope stable styles (avoid per-render Emotion resolutions) ──
-const gridRootSx = { position: 'relative', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' };
-// Editing cell wrapper (plain div, not MUI)
-const EDITING_CELL_STYLE = {
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    outline: '2px solid var(--ogrid-selection-color, #217346)',
-    outlineOffset: '-1px',
-    zIndex: 2,
-    position: 'relative',
-    background: 'var(--ogrid-bg, #fff)',
-    overflow: 'visible',
-    padding: 0,
-};
-// Row
-const ROW_HOVER_SX = { '&:hover': { bgcolor: 'action.hover' } };
-// Checkbox column
-const CHECKBOX_CELL_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, maxWidth: CHECKBOX_COLUMN_WIDTH, textAlign: 'center' };
-const CHECKBOX_WRAPPER_SX = { display: 'flex', alignItems: 'center', justifyContent: 'center' };
-const CHECKBOX_PLACEHOLDER_SX = { width: CHECKBOX_COLUMN_WIDTH, minWidth: CHECKBOX_COLUMN_WIDTH, p: 0 };
-// Header — use opaque var(--ogrid-header-bg) (not semi-transparent action.hover) so sticky
-// headers fully occlude pinned-column content scrolling beneath them.
-// The CSS variable is theme-aware: light=#f5f5f5, dark=#2c2c2c (set by each UI package).
-const HEADER_BG = 'var(--ogrid-header-bg, #f5f5f5)';
-const STICKY_HEADER_SX = {
-    /* Removed position: 'sticky', top: 0 - breaks horizontal sticky on pinned columns.
-       Instead, apply sticky to individual header cells (HEADER_BASE_SX). */
-    zIndex: 8,
-    bgcolor: HEADER_BG,
-    '& th': { bgcolor: HEADER_BG }
-};
-const HEADER_ROW_SX = { bgcolor: HEADER_BG };
-const GROUP_HEADER_CELL_SX = { textAlign: 'center', fontWeight: 600, borderBottom: 2, borderColor: 'divider', py: 0.75 };
-// Density padding helper
-function getDensityPadding(density) {
-    switch (density) {
-        case 'compact': return { px: '8px', py: '4px' };
-        case 'comfortable': return { px: '16px', py: '12px' };
-        default: return { px: '10px', py: '6px' };
-    }
-}
-// Cell content base variants (selected by column type + editability)
-const CELL_CONTENT_BASE_SX = {
-    width: '100%', height: '100%', display: 'flex', alignItems: 'center', minWidth: 0,
-    px: '10px', py: '6px', boxSizing: 'border-box', overflow: 'hidden',
-    textOverflow: 'ellipsis', whiteSpace: 'nowrap', userSelect: 'none', outline: 'none',
-    '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: '-2px', zIndex: 3 },
-};
-const CELL_CONTENT_NUMERIC_SX = { ...CELL_CONTENT_BASE_SX, justifyContent: 'flex-end', textAlign: 'right' };
-const CELL_CONTENT_BOOLEAN_SX = { ...CELL_CONTENT_BASE_SX, justifyContent: 'center', textAlign: 'center' };
-const CELL_CONTENT_EDITABLE_SX = { ...CELL_CONTENT_BASE_SX, cursor: 'cell' };
-const CELL_CONTENT_NUMERIC_EDITABLE_SX = { ...CELL_CONTENT_NUMERIC_SX, cursor: 'cell' };
-const CELL_CONTENT_BOOLEAN_EDITABLE_SX = { ...CELL_CONTENT_BOOLEAN_SX, cursor: 'cell' };
-// Cell overlay states (only applied to the few active/selected cells)
-// Active cell: theme-aware bg so dark mode doesn't show white (MUI action.hover adapts to theme)
-const CELL_ACTIVE_SX = { outline: '2px solid var(--ogrid-selection, #217346)', outlineOffset: '-1px', zIndex: 2, position: 'relative', overflow: 'visible', bgcolor: 'action.hover', '&:focus-visible': { outline: '2px solid var(--ogrid-selection, #217346)', outlineOffset: '-1px' } };
-const CELL_IN_RANGE_SX = { bgcolor: 'var(--ogrid-bg-range, rgba(33, 115, 70, 0.12))', '&:focus-visible': { outline: 'none' } };
-const CELL_CUT_RANGE_SX = { bgcolor: 'action.hover', opacity: 0.7 };
-// Pre-computed overlay variant arrays (avoid per-cell array allocation + filter)
-// Key: `${base}_${overlay}` where overlay is 'active' | 'range' | 'cut'
-const OVERLAY_VARIANTS = {
-    base_active: [CELL_CONTENT_BASE_SX, CELL_ACTIVE_SX],
-    base_range: [CELL_CONTENT_BASE_SX, CELL_IN_RANGE_SX],
-    base_cut: [CELL_CONTENT_BASE_SX, CELL_IN_RANGE_SX, CELL_CUT_RANGE_SX],
-    editable_active: [CELL_CONTENT_EDITABLE_SX, CELL_ACTIVE_SX],
-    editable_range: [CELL_CONTENT_EDITABLE_SX, CELL_IN_RANGE_SX],
-    editable_cut: [CELL_CONTENT_EDITABLE_SX, CELL_IN_RANGE_SX, CELL_CUT_RANGE_SX],
-    numeric_active: [CELL_CONTENT_NUMERIC_SX, CELL_ACTIVE_SX],
-    numeric_range: [CELL_CONTENT_NUMERIC_SX, CELL_IN_RANGE_SX],
-    numeric_cut: [CELL_CONTENT_NUMERIC_SX, CELL_IN_RANGE_SX, CELL_CUT_RANGE_SX],
-    numeric_editable_active: [CELL_CONTENT_NUMERIC_EDITABLE_SX, CELL_ACTIVE_SX],
-    numeric_editable_range: [CELL_CONTENT_NUMERIC_EDITABLE_SX, CELL_IN_RANGE_SX],
-    numeric_editable_cut: [CELL_CONTENT_NUMERIC_EDITABLE_SX, CELL_IN_RANGE_SX, CELL_CUT_RANGE_SX],
-    boolean_active: [CELL_CONTENT_BOOLEAN_SX, CELL_ACTIVE_SX],
-    boolean_range: [CELL_CONTENT_BOOLEAN_SX, CELL_IN_RANGE_SX],
-    boolean_cut: [CELL_CONTENT_BOOLEAN_SX, CELL_IN_RANGE_SX, CELL_CUT_RANGE_SX],
-    boolean_editable_active: [CELL_CONTENT_BOOLEAN_EDITABLE_SX, CELL_ACTIVE_SX],
-    boolean_editable_range: [CELL_CONTENT_BOOLEAN_EDITABLE_SX, CELL_IN_RANGE_SX],
-    boolean_editable_cut: [CELL_CONTENT_BOOLEAN_EDITABLE_SX, CELL_IN_RANGE_SX, CELL_CUT_RANGE_SX],
-};
-/** Select pre-computed sx for a cell based on column type, editability, and overlay state. */
-function getCellSx(colType, canEdit, isActive, isInRange, isInCutRange) {
-    // Determine base key
-    let baseKey;
-    if (colType === 'numeric')
-        baseKey = canEdit ? 'numeric_editable' : 'numeric';
-    else if (colType === 'boolean')
-        baseKey = canEdit ? 'boolean_editable' : 'boolean';
-    else
-        baseKey = canEdit ? 'editable' : 'base';
-    // Determine overlay
-    if (isInCutRange)
-        return OVERLAY_VARIANTS[`${baseKey}_cut`];
-    if (isInRange)
-        return OVERLAY_VARIANTS[`${baseKey}_range`];
-    if (isActive)
-        return OVERLAY_VARIANTS[`${baseKey}_active`];
-    // No overlay — return the base sx directly
-    if (colType === 'numeric')
-        return canEdit ? CELL_CONTENT_NUMERIC_EDITABLE_SX : CELL_CONTENT_NUMERIC_SX;
-    if (colType === 'boolean')
-        return canEdit ? CELL_CONTENT_BOOLEAN_EDITABLE_SX : CELL_CONTENT_BOOLEAN_SX;
-    return canEdit ? CELL_CONTENT_EDITABLE_SX : CELL_CONTENT_BASE_SX;
-}
-// Fill handle
-const FILL_HANDLE_SX = {
-    position: 'absolute', right: -3, bottom: -3, width: 7, height: 7,
-    bgcolor: 'var(--ogrid-selection, #217346)', border: '1px solid var(--ogrid-bg, #fff)', borderRadius: '1px',
-    cursor: 'crosshair', pointerEvents: 'auto', zIndex: 3,
-};
-// Cell <td> positioning variants
-const CELL_TD_BASE_SX = { position: 'relative', p: 0, height: '1px' };
-const CELL_TD_PINNED_LEFT_SX = {
-    ...CELL_TD_BASE_SX, position: 'sticky', left: 0, zIndex: 6,
-    bgcolor: 'background.paper', willChange: 'transform',
-    borderRight: '1px solid', borderRightColor: 'divider',
-    boxShadow: '2px 0 4px -1px rgba(0,0,0,0.1)',
-};
-const CELL_TD_PINNED_RIGHT_SX = {
-    ...CELL_TD_BASE_SX, position: 'sticky', right: 0, zIndex: 6,
-    bgcolor: 'background.paper', willChange: 'transform',
-    borderLeft: '1px solid', borderLeftColor: 'divider',
-    boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
-};
-// Header cell positioning variants (sticky)
-// Use opaque HEADER_BG so headers fully occlude content scrolling beneath them.
-const HEADER_BASE_SX = {
-    fontWeight: 600,
-    position: 'sticky', /* Enables vertical sticky for all headers */
-    top: 0, /* Sticky vertically */
-    zIndex: 8, /* Stack above body cells */
-    bgcolor: HEADER_BG /* Opaque — required for sticky overlap */
-};
-const HEADER_PINNED_LEFT_SX = {
-    ...HEADER_BASE_SX, position: 'sticky', left: 0, top: 0,
-    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
-    borderRight: '1px solid', borderRightColor: 'divider',
-    boxShadow: '2px 0 4px -1px rgba(0,0,0,0.1)',
-};
-const HEADER_PINNED_RIGHT_SX = {
-    ...HEADER_BASE_SX, position: 'sticky', right: 0, top: 0,
-    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
-    borderLeft: '1px solid', borderLeftColor: 'divider',
-    boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
-};
-// Header cell variants (non-sticky — stickyHeader=false)
-const HEADER_BASE_NO_STICKY_SX = {
-    fontWeight: 600,
-    zIndex: 8,
-    bgcolor: HEADER_BG,
-};
-const HEADER_PINNED_LEFT_NO_STICKY_SX = {
-    ...HEADER_BASE_NO_STICKY_SX, position: 'sticky', left: 0,
-    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
-    borderRight: '1px solid', borderRightColor: 'divider',
-    boxShadow: '2px 0 4px -1px rgba(0,0,0,0.1)',
-};
-const HEADER_PINNED_RIGHT_NO_STICKY_SX = {
-    ...HEADER_BASE_NO_STICKY_SX, position: 'sticky', right: 0,
-    zIndex: 10, bgcolor: HEADER_BG, willChange: 'transform',
-    borderLeft: '1px solid', borderLeftColor: 'divider',
-    boxShadow: '-2px 0 4px -1px rgba(0,0,0,0.1)',
-};
-// Resize handle
-const RESIZE_HANDLE_SX = {
-    position: 'absolute', top: 0, right: '-3px', bottom: 0, width: '8px',
-    cursor: 'col-resize', userSelect: 'none',
-    '&::after': { content: '""', position: 'absolute', top: 0, right: '3px', bottom: 0, width: '2px' },
-    '&:hover::after': { bgcolor: 'primary.main' },
-    '&:active::after': { bgcolor: 'primary.dark' },
-};
-// Popover
-const POPOVER_ANCHOR_SX = { minHeight: '100%', minWidth: 40 };
-const POPOVER_CONTENT_SX = { p: 1 };
-// Wrapper
-const WRAPPER_SCROLL_SX = { display: 'flex', flexDirection: 'column', minHeight: '100%' };
-// Header cell content wrapper
-const HEADER_CONTENT_FLEX_SX = { display: 'flex', alignItems: 'center', gap: 0.5 };
-// Column options button
-const COLUMN_OPTIONS_BUTTON_SX = {
-    background: 'transparent',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '2px 4px',
-    fontSize: '16px',
-    lineHeight: 1,
-    color: 'text.secondary',
-    opacity: 1,
-    transition: 'background-color 0.15s',
-    borderRadius: '3px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: '20px',
-    height: '20px',
-    '&:hover': {
-        bgcolor: 'action.hover',
-    },
-};
-// Table wrapper
-const TABLE_WRAPPER_SX = { position: 'relative', opacity: 1 };
-const TABLE_WRAPPER_LOADING_SX = { position: 'relative', opacity: 0.6 };
-// TableBody — remove bottom border from last row so DataGridTable has no outer border
-// (the OGridLayout container provides the border/radius)
-const TABLE_BODY_SX = { '& tr:last-child td': { borderBottom: 'none' } };
-function GridRowInner(props) {
-    const { item, rowIndex, rowId, isSelected, columnLayouts, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, hasRowNumbersCol, rowNumberOffset, } = props;
-    return (_jsxs(TableRow, { selected: isSelected, "data-row-id": rowId, onClick: handleSingleRowClick, sx: ROW_HOVER_SX, children: [hasCheckboxCol && (_jsx(TableCell, { padding: "checkbox", sx: CHECKBOX_CELL_SX, children: _jsx(Box, { "data-row-index": rowIndex, "data-col-index": 0, onClick: STOP_PROPAGATION, sx: CHECKBOX_WRAPPER_SX, children: _jsx(Checkbox, { checked: isSelected, onChange: (_, checked) => handleRowCheckboxChange(rowId, checked, rowIndex, lastMouseShiftRef.current), size: "small", "aria-label": `Select row ${rowIndex + 1}` }) }) })), hasRowNumbersCol && (_jsx(TableCell, { sx: {
-                    width: ROW_NUMBER_COLUMN_WIDTH,
-                    minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                    maxWidth: ROW_NUMBER_COLUMN_WIDTH,
-                    textAlign: 'center',
-                    fontWeight: 600,
-                    fontVariantNumeric: 'tabular-nums',
-                    color: 'text.secondary',
-                    backgroundColor: 'action.hover',
-                    position: 'sticky',
-                    left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                    zIndex: 3,
-                }, children: rowNumberOffset + rowIndex + 1 })), columnLayouts.map((cl, colIdx) => (_jsx(TableCell, { "data-column-id": cl.col.columnId, sx: [cl.tdSx, { minWidth: cl.minWidth, width: cl.width, maxWidth: cl.maxWidth }], children: renderCellContent(item, cl.col, rowIndex, colIdx) }, cl.col.columnId)))] }));
-}
-const GridRow = React.memo(GridRowInner, areGridRowPropsEqual);
-function DataGridTableInner(props) {
-    const o = useDataGridTableOrchestration({ props });
-    const { wrapperRef, tableContainerRef, lastMouseShiftRef, interaction, pinning, handleResizeStart, getColumnWidth, isReorderDragging, dropIndicatorX, handleHeaderMouseDown, virtualScrollEnabled, visibleRange, items, getRowId, emptyState, suppressHorizontalScroll, isLoading, loadingMessage, ariaLabel, ariaLabelledBy, columnReorder, density, rowHeight, rowNumberOffset, headerRows, allowOverflowX, fitToContent, editCallbacks, interactionHandlers, cellDescriptorInputRef, pendingEditorValueRef, popoverAnchorElRef, handleSingleRowClick, handlePasteVoid, visibleCols, hasCheckboxCol, hasRowNumbersCol, colOffset, minTableWidth, columnSizingOverrides, measuredColumnWidths, selectedRowIds, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected, editingCell, setPopoverAnchorEl, cancelPopoverEdit, setActiveCell, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging, menuPosition, closeContextMenu, headerFilterInput, statusBarConfig, showEmptyInGrid, onCellError, headerMenu, } = o;
-    // Density-aware cell padding
-    const densityPadding = useMemo(() => getDensityPadding(density), [density]);
-    const headerCellSx = useMemo(() => ({ px: densityPadding.px, py: densityPadding.py }), [densityPadding]);
-    // Shared width/minWidth computation (deduped with Radix/Fluent via useColumnMeta)
-    const columnMeta = useColumnMeta({
-        visibleCols,
-        getColumnWidth,
-        columnSizingOverrides,
-        measuredColumnWidths,
-        pinnedColumns: pinning.pinnedColumns,
-        leftOffsets: pinning.leftOffsets,
-        rightOffsets: pinning.rightOffsets,
-        pinnedColLeftClass: '',
-        pinnedColRightClass: '',
-    });
-    // Pre-compute per-column layout (tdSx + widths from columnMeta) so GridRow doesn't recalculate per-cell
-    const columnLayouts = useMemo(() => visibleCols.map((col) => {
-        const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
-        const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
-        const baseTdSx = isPinnedLeft ? CELL_TD_PINNED_LEFT_SX : isPinnedRight ? CELL_TD_PINNED_RIGHT_SX : CELL_TD_BASE_SX;
-        // Override sticky offset for pinned columns (supports multiple pinned columns)
-        const tdSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null
-            ? { ...baseTdSx, left: pinning.leftOffsets[col.columnId] }
-            : isPinnedRight && pinning.rightOffsets[col.columnId] != null
-                ? { ...baseTdSx, right: pinning.rightOffsets[col.columnId] }
-                : baseTdSx;
-        const cellStyle = columnMeta.cellStyles[col.columnId];
-        return {
-            col,
-            tdSx,
-            minWidth: cellStyle?.minWidth ?? 0,
-            width: cellStyle?.width ?? getColumnWidth(col),
-            maxWidth: cellStyle?.maxWidth ?? getColumnWidth(col),
-        };
-    }), [visibleCols, columnMeta, pinning.pinnedColumns, pinning.leftOffsets, pinning.rightOffsets, getColumnWidth]);
-    // Wrapper sx (depends on dynamic values — memoize to avoid recreation)
-    const wrapperSx = useMemo(() => ({
-        position: 'relative',
-        flex: 1,
-        minHeight: isLoading && items.length === 0 ? 200 : 0,
-        width: fitToContent ? 'fit-content' : '100%',
-        maxWidth: '100%',
-        overflowX: suppressHorizontalScroll ? 'hidden' : allowOverflowX ? 'auto' : 'hidden',
-        overflowY: 'auto',
-        bgcolor: 'background.paper',
-        willChange: 'scroll-position',
-        '& [data-drag-range]': { bgcolor: 'rgba(33, 115, 70, 0.12) !important' },
-        '& [data-drag-anchor]': { bgcolor: 'background.paper !important' },
-        ...(rowHeight ? { '& tbody tr': { height: rowHeight } } : {}),
-    }), [fitToContent, suppressHorizontalScroll, allowOverflowX, isLoading, items.length, rowHeight]);
-    const renderCellContent = useCallback((item, col, rowIndex, colIdx) => {
-        const descriptor = getCellRenderDescriptor(item, col, rowIndex, colIdx, cellDescriptorInputRef.current);
-        const rowId = getRowId(item);
-        let cellContent;
-        if (descriptor.mode === 'editing-inline') {
-            cellContent = (_jsx("div", { style: EDITING_CELL_STYLE, children: _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) }) }));
-        }
-        else if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
-            const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);
-            const CustomEditor = col.cellEditor;
-            cellContent = (_jsxs(_Fragment, { children: [_jsx(Box, { ref: (el) => { if (el)
-                            setPopoverAnchorEl(el); }, sx: POPOVER_ANCHOR_SX, "aria-hidden": true }), _jsx(Popover, { open: !!popoverAnchorElRef.current, anchorEl: popoverAnchorElRef.current, onClose: cancelPopoverEdit, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, children: _jsx(Box, { sx: POPOVER_CONTENT_SX, children: _jsx(CustomEditor, { ...editorProps }) }) })] }));
-        }
-        else {
-            const content = resolveCellDisplayContent(col, item, descriptor.displayValue);
-            const cellStyle = resolveCellStyle(col, item);
-            const styledContent = cellStyle ? _jsx(Box, { component: "span", sx: cellStyle, children: content }) : content;
-            // Select pre-computed sx variant (module-scope = no per-cell allocation)
-            const cellSx = getCellSx(col.type, descriptor.canEditAny, descriptor.isActive && !descriptor.isInRange, descriptor.isInRange, descriptor.isInCutRange);
-            const interactionProps = getCellInteractionProps(descriptor, col.columnId, interactionHandlers);
-            cellContent = (_jsxs(Box, { component: "div", ...interactionProps, sx: Array.isArray(cellSx) ? [...cellSx, densityPadding] : { ...cellSx, ...densityPadding }, children: [styledContent, descriptor.canEditAny && descriptor.isSelectionEndCell && (_jsx(Box, { component: "div", onMouseDown: handleFillHandleMouseDown, "aria-label": "Fill handle", sx: FILL_HANDLE_SX }))] }));
-        }
-        return (_jsx(CellErrorBoundary, { onError: onCellError, children: cellContent }, `${rowId}-${col.columnId}`));
-    }, [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError, cellDescriptorInputRef, densityPadding, pendingEditorValueRef, popoverAnchorElRef]);
-    return (_jsxs(Box, { sx: gridRootSx, children: [_jsxs(Box, { ref: wrapperRef, tabIndex: 0, role: "region", "aria-label": ariaLabel ?? (ariaLabelledBy ? undefined : 'Data grid'), "aria-labelledby": ariaLabelledBy, onMouseDown: (e) => { lastMouseShiftRef.current = e.shiftKey; }, onKeyDown: handleGridKeyDown, onContextMenu: PREVENT_DEFAULT, "data-overflow-x": allowOverflowX ? 'true' : 'false', "data-density": density, sx: wrapperSx, children: [_jsx(Box, { sx: WRAPPER_SCROLL_SX, children: _jsx("div", { style: { minWidth: allowOverflowX ? minTableWidth : undefined }, children: _jsxs(Box, { ref: tableContainerRef, sx: isLoading && items.length > 0 ? TABLE_WRAPPER_LOADING_SX : TABLE_WRAPPER_SX, children: [_jsxs(Table, { size: "small", sx: { minWidth: minTableWidth, borderCollapse: 'separate', borderSpacing: 0 }, children: [_jsx(TableHead, { sx: STICKY_HEADER_SX, children: headerRows.map((row, rowIdx) => (_jsxs(TableRow, { sx: HEADER_ROW_SX, children: [rowIdx === headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ padding: "checkbox", rowSpan: headerRows.length > 1 ? 1 : undefined, sx: CHECKBOX_CELL_SX }, children: _jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, onChange: (_, c) => handleSelectAll(!!c), size: "small", "aria-label": "Select all rows" }) })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasCheckboxCol && (_jsx(TableCell, { ...{ rowSpan: headerRows.length - 1, sx: CHECKBOX_PLACEHOLDER_SX } })), rowIdx === headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { ...{
-                                                                component: "th",
-                                                                scope: "col",
-                                                                rowSpan: headerRows.length > 1 ? 1 : undefined,
-                                                                sx: {
-                                                                    width: ROW_NUMBER_COLUMN_WIDTH,
-                                                                    minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                                                                    maxWidth: ROW_NUMBER_COLUMN_WIDTH,
-                                                                    textAlign: 'center',
-                                                                    fontWeight: 600,
-                                                                    backgroundColor: HEADER_BG,
-                                                                    position: 'sticky',
-                                                                    left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                                                                    zIndex: 4,
-                                                                    ...headerCellSx,
-                                                                }
-                                                            }, children: "#" })), rowIdx === 0 && rowIdx < headerRows.length - 1 && hasRowNumbersCol && (_jsx(TableCell, { ...{
-                                                                rowSpan: headerRows.length - 1,
-                                                                sx: {
-                                                                    width: ROW_NUMBER_COLUMN_WIDTH,
-                                                                    minWidth: ROW_NUMBER_COLUMN_WIDTH,
-                                                                    position: 'sticky',
-                                                                    left: hasCheckboxCol ? CHECKBOX_COLUMN_WIDTH : 0,
-                                                                    zIndex: 4,
-                                                                    backgroundColor: 'background.paper',
-                                                                }
-                                                            } })), row.map((cell, cellIdx) => {
-                                                            if (cell.isGroup) {
-                                                                return (_jsx(TableCell, { ...{
-                                                                        colSpan: cell.colSpan,
-                                                                        component: "th",
-                                                                        scope: "colgroup",
-                                                                        sx: GROUP_HEADER_CELL_SX
-                                                                    }, children: cell.label }, cellIdx));
-                                                            }
-                                                            // Leaf cell
-                                                            if (!cell.columnDef)
-                                                                return null;
-                                                            const col = cell.columnDef;
-                                                            const isPinnedLeft = pinning.pinnedColumns[col.columnId] === 'left';
-                                                            const isPinnedRight = pinning.pinnedColumns[col.columnId] === 'right';
-                                                            const baseHeaderSx = o.stickyHeader
-                                                                ? (isPinnedLeft ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX)
-                                                                : (isPinnedLeft ? HEADER_PINNED_LEFT_NO_STICKY_SX : isPinnedRight ? HEADER_PINNED_RIGHT_NO_STICKY_SX : HEADER_BASE_NO_STICKY_SX);
-                                                            // Override sticky offset for pinned columns (supports multiple pinned columns)
-                                                            const headerSx = isPinnedLeft && pinning.leftOffsets[col.columnId] != null
-                                                                ? { ...baseHeaderSx, left: pinning.leftOffsets[col.columnId] }
-                                                                : isPinnedRight && pinning.rightOffsets[col.columnId] != null
-                                                                    ? { ...baseHeaderSx, right: pinning.rightOffsets[col.columnId] }
-                                                                    : baseHeaderSx;
-                                                            // Width/minWidth from shared useColumnMeta (avoids duplicate calculation)
-                                                            const hdrStyle = columnMeta.hdrStyles[col.columnId];
-                                                            // Determine aria-sort value for sorted columns
-                                                            const isSorted = props.sortBy === col.columnId;
-                                                            const ariaSort = isSorted
-                                                                ? (props.sortDirection === 'asc' ? 'ascending' : 'descending')
-                                                                : undefined;
-                                                            return (_jsxs(TableCell, { ...{
-                                                                    component: "th",
-                                                                    scope: "col",
-                                                                    'data-column-id': col.columnId,
-                                                                    rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : undefined,
-                                                                    'aria-sort': ariaSort,
-                                                                    sx: {
-                                                                        ...headerSx,
-                                                                        ...headerCellSx,
-                                                                        minWidth: hdrStyle?.minWidth,
-                                                                        width: hdrStyle?.width,
-                                                                        maxWidth: hdrStyle?.maxWidth,
-                                                                        ...(columnReorder ? { cursor: isReorderDragging ? 'grabbing' : 'grab' } : {}),
-                                                                        '&:focus-visible': {
-                                                                            outline: '2px solid',
-                                                                            outlineColor: 'primary.main',
-                                                                            outlineOffset: '-2px',
-                                                                            zIndex: 11,
-                                                                        },
-                                                                    },
-                                                                    onMouseDown: columnReorder ? (e) => handleHeaderMouseDown(col.columnId, e) : undefined
-                                                                }, children: [_jsxs(Box, { sx: HEADER_CONTENT_FLEX_SX, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx(Box, { component: "button", onClick: (e) => {
-                                                                                    e.stopPropagation();
-                                                                                    headerMenu.open(col.columnId, e.currentTarget);
-                                                                                }, "aria-label": "Column options", title: "Column options", sx: COLUMN_OPTIONS_BUTTON_SX, children: "\u22EE" })] }), _jsx(Box, { onMouseDown: (e) => {
-                                                                            setActiveCell(null);
-                                                                            interaction.setSelectionRange(null);
-                                                                            wrapperRef.current?.focus({ preventScroll: true });
-                                                                            handleResizeStart(e, col);
-                                                                        }, sx: RESIZE_HANDLE_SX })] }, col.columnId));
-                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsxs(TableBody, { sx: TABLE_BODY_SX, children: [virtualScrollEnabled && visibleRange.offsetTop > 0 && (_jsx(TableRow, { style: { height: visibleRange.offsetTop }, "aria-hidden": true })), (virtualScrollEnabled
-                                                        ? items.slice(visibleRange.startIndex, visibleRange.endIndex + 1).map((item, i) => {
-                                                            const rowIndex = visibleRange.startIndex + i;
-                                                            const rowIdStr = getRowId(item);
-                                                            return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), columnLayouts: columnLayouts, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
-                                                        })
-                                                        : items.map((item, rowIndex) => {
-                                                            const rowIdStr = getRowId(item);
-                                                            return (_jsx(GridRow, { item: item, rowIndex: rowIndex, rowId: rowIdStr, isSelected: selectedRowIds.has(rowIdStr), columnLayouts: columnLayouts, renderCellContent: renderCellContent, handleSingleRowClick: handleSingleRowClick, handleRowCheckboxChange: handleRowCheckboxChange, lastMouseShiftRef: lastMouseShiftRef, hasCheckboxCol: hasCheckboxCol, hasRowNumbersCol: hasRowNumbersCol, rowNumberOffset: rowNumberOffset, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
-                                                        })), virtualScrollEnabled && visibleRange.offsetBottom > 0 && (_jsx(TableRow, { style: { height: visibleRange.offsetBottom }, "aria-hidden": true }))] }))] }), isReorderDragging && dropIndicatorX != null && (_jsx(DropIndicator, { dropIndicatorX: dropIndicatorX, wrapperLeft: wrapperRef.current?.getBoundingClientRect().left ?? 0 })), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset, items: items, visibleColumns: props.visibleColumns, columnSizingOverrides: columnSizingOverrides, columnOrder: props.columnOrder }), showEmptyInGrid && emptyState && (_jsx(EmptyState, { emptyState: emptyState }))] }) }) }), menuPosition &&
-                        createPortal(_jsx(GridContextMenu, { x: menuPosition.x, y: menuPosition.y, hasSelection: hasCellSelection, canUndo: canUndo, canRedo: canRedo, onUndo: onUndo ?? NOOP, onRedo: onRedo ?? NOOP, onCopy: handleCopy, onCut: handleCut, onPaste: handlePasteVoid, onSelectAll: o.interaction.handleSelectAllCells, onClose: closeContextMenu }), document.body), _jsx(ColumnHeaderMenu, { isOpen: headerMenu.isOpen, anchorElement: headerMenu.anchorElement, onClose: headerMenu.close, onPinLeft: headerMenu.handlePinLeft, onPinRight: headerMenu.handlePinRight, onUnpin: headerMenu.handleUnpin, onSortAsc: headerMenu.handleSortAsc, onSortDesc: headerMenu.handleSortDesc, onClearSort: headerMenu.handleClearSort, onAutosizeThis: headerMenu.handleAutosizeThis, onAutosizeAll: headerMenu.handleAutosizeAll, canPinLeft: headerMenu.canPinLeft, canPinRight: headerMenu.canPinRight, canUnpin: headerMenu.canUnpin, currentSort: headerMenu.currentSort, isSortable: headerMenu.isSortable, isResizable: headerMenu.isResizable })] }), statusBarConfig && (_jsx(StatusBar, { totalCount: statusBarConfig.totalCount, filteredCount: statusBarConfig.filteredCount, selectedCount: statusBarConfig.selectedCount ?? selectedRowIds.size, selectedCellCount: selectionRange ? (Math.abs(selectionRange.endRow - selectionRange.startRow) + 1) * (Math.abs(selectionRange.endCol - selectionRange.startCol) + 1) : undefined, aggregation: statusBarConfig.aggregation, suppressRowCount: statusBarConfig.suppressRowCount })), isLoading && (_jsx(LoadingOverlay, { message: loadingMessage }))] }));
-}
-export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/DataGridTable/DropIndicator.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-export function DropIndicator({ dropIndicatorX, wrapperLeft }) {
-    return (_jsx(Box, { sx: {
-            position: 'absolute',
-            top: 0,
-            bottom: 0,
-            width: 3,
-            bgcolor: 'var(--ogrid-primary, #217346)',
-            pointerEvents: 'none',
-            zIndex: 100,
-            transition: 'left 0.05s',
-            left: dropIndicatorX - wrapperLeft,
-        } }));
-}

package/dist/esm/DataGridTable/EmptyState.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography, Button } from '@mui/material';
-const EMPTY_STATE_SX = { py: 4, px: 2, textAlign: 'center', borderTop: 1, borderColor: 'divider', bgcolor: 'action.hover' };
-export function EmptyState({ emptyState }) {
-    return (_jsx(Box, { sx: EMPTY_STATE_SX, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "No results found" }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx(Button, { variant: "text", size: "small", onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }));
-}

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Menu, MenuItem, Divider } from '@mui/material';
-import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from '@alaarab/ogrid-react';
-export function GridContextMenu(props) {
-    const { x, y, hasSelection, canUndo, canRedo, onClose } = props;
-    const handlers = React.useMemo(() => getContextMenuHandlers(props), [props]);
-    const isDisabled = React.useCallback((item) => {
-        if (item.disabledWhenNoSelection && !hasSelection)
-            return true;
-        if (item.id === 'undo' && !canUndo)
-            return true;
-        if (item.id === 'redo' && !canRedo)
-            return true;
-        return false;
-    }, [hasSelection, canUndo, canRedo]);
-    return (_jsx(Menu, { open: true, onClose: onClose, anchorReference: "anchorPosition", anchorPosition: { top: y, left: x }, MenuListProps: { dense: true, 'aria-label': 'Grid context menu' }, children: GRID_CONTEXT_MENU_ITEMS.flatMap((item) => {
-            const elements = [];
-            if (item.dividerBefore) {
-                elements.push(_jsx(Divider, {}, `${item.id}-divider`));
-            }
-            elements.push(_jsxs(MenuItem, { onClick: handlers[item.id], disabled: isDisabled(item), children: [_jsx("span", { style: { flex: 1 }, children: item.label }), item.shortcut && (_jsx("span", { style: { marginLeft: 24, color: 'var(--ogrid-fg-muted, rgba(0,0,0,0.4))', fontSize: '0.8em' }, children: formatShortcut(item.shortcut) }))] }, item.id));
-            return elements;
-        }) }));
-}

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox } from '@mui/material';
-import { BaseInlineCellEditor } from '@alaarab/ogrid-react';
-export function InlineCellEditor(props) {
-    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox, { checked: checked, onChange: (_, c) => onCommit(c), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), size: "small" })) }));
-}

package/dist/esm/DataGridTable/LoadingOverlay.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, CircularProgress, Typography } from '@mui/material';
-const LOADING_OVERLAY_SX = {
-    position: 'absolute', inset: 0, zIndex: 2,
-    display: 'flex', alignItems: 'center', justifyContent: 'center',
-    background: 'var(--ogrid-loading-bg, rgba(255,255,255,0.7))',
-};
-const LOADING_INNER_SX = {
-    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1,
-    p: 2, bgcolor: 'background.paper', border: 1, borderColor: 'divider', borderRadius: 1,
-};
-export function LoadingOverlay({ message }) {
-    return (_jsx(Box, { sx: LOADING_OVERLAY_SX, children: _jsxs(Box, { sx: LOADING_INNER_SX, children: [_jsx(CircularProgress, { size: 24 }), _jsx(Typography, { variant: "body2", color: "text.secondary", children: message })] }) }));
-}

package/dist/esm/DataGridTable/StatusBar.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Typography } from '@mui/material';
-import { getStatusBarParts } from '@alaarab/ogrid-react';
-const partSx = (isLast) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: 0.5,
-    ...(isLast ? {} : { mr: 2, '&::after': { content: '"|"', ml: 2, color: 'divider' } }),
-});
-export function StatusBar(props) {
-    const parts = getStatusBarParts(props);
-    return (_jsx(Box, { role: "status", "aria-live": "polite", sx: { mt: 'auto', px: 1.5, py: 0.75, borderTop: 1, borderColor: 'divider', bgcolor: 'action.hover' }, children: parts.map((p, i) => (_jsxs(Typography, { component: "span", variant: "body2", sx: partSx(i === parts.length - 1), children: [_jsx(Typography, { component: "span", color: "text.secondary", children: p.label }), _jsx(Typography, { component: "span", fontWeight: 600, children: p.value.toLocaleString() })] }, p.key))) }));
-}

package/dist/esm/OGrid/OGrid.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import { Box, useTheme } from '@mui/material';
-import { createOGrid } from '@alaarab/ogrid-react';
-import { DataGridTable } from '../DataGridTable/DataGridTable';
-import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
-import { PaginationControls } from '../PaginationControls/PaginationControls';
-/**
- * MUI theme bridge: reads the MUI palette and sets --ogrid-* CSS variables
- * so the shared OGridLayout and DataGridTable styles adapt to the MUI theme.
- */
-const MuiThemeContainer = React.forwardRef(function MuiThemeContainer(props, ref) {
-    const theme = useTheme();
-    const sx = React.useMemo(() => ({
-        display: 'flex', flexDirection: 'column', gap: 1,
-        '--ogrid-bg': theme.palette.background.default,
-        '--ogrid-border': theme.palette.divider,
-        '--ogrid-header-bg': theme.palette.mode === 'dark' ? theme.palette.grey[800] : theme.palette.grey[100],
-        '--ogrid-fg': theme.palette.text.primary,
-        '--ogrid-fg-secondary': theme.palette.text.secondary,
-        '--ogrid-fg-muted': theme.palette.text.disabled,
-        '--ogrid-hover-bg': theme.palette.action.hover,
-    }), [theme]);
-    return _jsx(Box, { ref: ref, sx: sx, ...props });
-});
-export const OGrid = createOGrid({
-    DataGridTable: DataGridTable,
-    ColumnChooser: ColumnChooser,
-    PaginationControls,
-    containerComponent: MuiThemeContainer,
-});

package/dist/esm/OGrid/index.js

@@ -1 +0,0 @@
-export { OGrid } from './OGrid';

package/dist/esm/PaginationControls/PaginationControls.js

@@ -1,35 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from 'react';
-import { IconButton, Button, Select, MenuItem, Box, Typography, } from '@mui/material';
-import { FirstPage as FirstPageIcon, LastPage as LastPageIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, } from '@mui/icons-material';
-import { usePaginationControls } from '@alaarab/ogrid-react';
-export const PaginationControls = React.memo((props) => {
-    const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className, } = props;
-    const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
-        currentPage,
-        pageSize,
-        totalCount,
-        onPageChange,
-        onPageSizeChange,
-        pageSizeOptions,
-        entityLabelPlural,
-    });
-    const handlePageSizeChangeEvent = (event) => {
-        handlePageSizeChange(Number(event.target.value));
-    };
-    if (!vm) {
-        return null;
-    }
-    const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
-    return (_jsxs(Box, { className: className, role: "navigation", "aria-label": "Pagination", sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            flexWrap: 'wrap',
-            gap: 2,
-            px: 1.5,
-            width: '100%',
-            minWidth: 0,
-            boxSizing: 'border-box',
-        }, children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [_jsx(IconButton, { size: "small", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", children: _jsx(FirstPageIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", children: _jsx(ChevronLeftIcon, { fontSize: "small" }) }), showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(1), "aria-label": "Page 1", sx: { minWidth: 32, px: 0.5 }, children: "1" }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { variant: currentPage === pageNum ? 'contained' : 'outlined', size: "small", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, sx: { minWidth: 32, px: 0.5 }, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mx: 0.5 }, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, sx: { minWidth: 32, px: 0.5 }, children: totalPages })] })), _jsx(IconButton, { size: "small", onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", children: _jsx(ChevronRightIcon, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", children: _jsx(LastPageIcon, { fontSize: "small" }) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", children: "Rows" }), _jsx(Select, { value: pageSize, onChange: handlePageSizeChangeEvent, size: "small", "aria-label": "Rows per page", sx: { minWidth: 70 }, children: vm.pageSizeOptions.map((n) => (_jsx(MenuItem, { value: n, children: n }, n))) })] })] }));
-});