@alaarab/ogrid-react-material 2.0.0-beta

package/README.md

@@ -0,0 +1,87 @@
+<p align="center">
+  <strong>OGrid for Material UI</strong> — The lightweight React data grid with enterprise features and zero enterprise cost.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@alaarab/ogrid-react-material"><img src="https://img.shields.io/npm/v/@alaarab/ogrid-react-material?color=%23217346&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/alaarab/ogrid/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="MIT License" /></a>
+  <img src="https://img.shields.io/badge/React-17%20%7C%2018%20%7C%2019-blue" alt="React 17, 18, 19" />
+  <img src="https://img.shields.io/badge/TypeScript-strict-blue" alt="TypeScript strict" />
+</p>
+
+<p align="center">
+  <a href="https://alaarab.github.io/ogrid/">Documentation</a> · <a href="https://alaarab.github.io/ogrid/docs/getting-started/overview">Getting Started</a> · <a href="https://alaarab.github.io/ogrid/docs/api/ogrid-props">API Reference</a>
+</p>
+
+---
+
+OGrid data grid for **[Material UI v7](https://mui.com/)**, built on MUI Table. Also available for [Radix UI](https://www.npmjs.com/package/@alaarab/ogrid-react-radix) (default, lightweight) and [Fluent UI](https://www.npmjs.com/package/@alaarab/ogrid-react-fluent). Same API, just swap the import.
+
+## Why OGrid?
+
+| | OGrid | AG Grid Community | AG Grid Enterprise |
+|---|---|---|---|
+| Spreadsheet selection | Built-in | - | $999/dev/year |
+| Clipboard (copy/paste) | Built-in | - | $999/dev/year |
+| Fill handle | Built-in | - | $999/dev/year |
+| Undo/redo | Built-in | - | $999/dev/year |
+| Context menu | Built-in | - | $999/dev/year |
+| Status bar | Built-in | - | $999/dev/year |
+| Side bar | Built-in | - | $999/dev/year |
+| Cell editing | Built-in | Built-in | Built-in |
+| Sorting & filtering | Built-in | Built-in | Built-in |
+| **License** | **MIT (free)** | MIT | Commercial |
+
+## Features
+
+Sorting · Filtering (text, multi-select, date range, people picker) · Pagination · Cell editing (inline, select, checkbox, rich select, date, custom popover) · Spreadsheet selection · Clipboard · Fill handle · Undo/redo · Row selection · Column groups · Column pinning · Column resize · Column chooser · Side bar · Context menu · Status bar with aggregations · CSV export · Grid API · Server-side data · Column state persistence · Keyboard navigation (Excel-style Ctrl+Arrow) · Built-in column types (text, numeric, date, boolean) · React 17/18/19 · TypeScript strict
+
+## Install
+
+```bash
+npm install @alaarab/ogrid-react-material
+```
+
+### Peer Dependencies
+
+```
+@mui/material ^7.0.0
+@mui/icons-material ^7.0.0
+@emotion/react ^11.0.0
+@emotion/styled ^11.0.0
+react ^17.0.0 || ^18.0.0 || ^19.0.0
+react-dom ^17.0.0 || ^18.0.0 || ^19.0.0
+```
+
+## Quick Start
+
+```tsx
+import { OGrid, type IColumnDef } from '@alaarab/ogrid-react-material';
+
+const columns: IColumnDef<Employee>[] = [
+  { columnId: 'name', name: 'Name', sortable: true, editable: true },
+  { columnId: 'department', name: 'Department',
+    filterable: { type: 'multiSelect' },
+    cellEditor: 'richSelect', cellEditorParams: { values: ['Engineering', 'Sales', 'Marketing'] } },
+  { columnId: 'salary', name: 'Salary', type: 'numeric', editable: true,
+    valueFormatter: (v) => `$${Number(v).toLocaleString()}` },
+];
+
+<OGrid
+  columns={columns}
+  data={employees}
+  getRowId={(e) => e.id}
+  editable
+  cellSelection
+  statusBar
+  sideBar
+/>
+```
+
+## Documentation
+
+Full docs, API reference, and interactive examples at **[alaarab.github.io/ogrid](https://alaarab.github.io/ogrid/)**.
+
+## License
+
+MIT — Free forever. No enterprise tiers. No feature paywalls.

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Button, Popover, Checkbox, Box, Typography, FormControlLabel, } from '@mui/material';
+import { ViewColumn as ViewColumnIcon, ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon, } from '@mui/icons-material';
+import { useColumnChooserState } from '@alaarab/ogrid-react';
+export const ColumnChooser = (props) => {
+    const { columns, visibleColumns, onVisibilityChange, className } = props;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const buttonRef = useRef(null);
+    const { open: isOpen, setOpen, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange });
+    const handleToggle = (e) => {
+        if (isOpen) {
+            handleClose();
+            setAnchorEl(null);
+        }
+        else {
+            setAnchorEl(e.currentTarget);
+            setOpen(true);
+        }
+    };
+    const handlePopoverClose = () => {
+        handleClose();
+        setAnchorEl(null);
+    };
+    const handleCheckboxChange = (columnKey) => (ev) => {
+        ev.stopPropagation();
+        setColumnVisible(columnKey)(ev.target.checked);
+    };
+    return (_jsxs(Box, { className: className, sx: { display: 'inline-flex' }, children: [_jsxs(Button, { ref: buttonRef, variant: "outlined", size: "small", startIcon: _jsx(ViewColumnIcon, {}), endIcon: isOpen ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}), onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", sx: {
+                    textTransform: 'none',
+                    fontWeight: 600,
+                    borderColor: isOpen ? 'primary.main' : 'divider',
+                }, children: ["Column Visibility (", visibleCount, " of ", totalCount, ")"] }), _jsxs(Popover, { open: isOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: {
+                    paper: {
+                        sx: { mt: 0.5, minWidth: 220 },
+                    },
+                }, children: [_jsx(Box, { sx: {
+                            px: 1.5,
+                            py: 1,
+                            borderBottom: 1,
+                            borderColor: 'divider',
+                            bgcolor: 'grey.50',
+                        }, children: _jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }) }), _jsx(Box, { sx: { maxHeight: 320, overflowY: 'auto', py: 0.5 }, children: columns.map((column) => (_jsx(Box, { sx: { px: 1.5, minHeight: 32, display: 'flex', alignItems: 'center' }, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId) }), label: _jsx(Typography, { variant: "body2", children: column.name }), sx: { m: 0 } }) }, column.columnId))) }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            gap: 1,
+                            px: 1.5,
+                            py: 1,
+                            borderTop: 1,
+                            borderColor: 'divider',
+                            bgcolor: 'grey.50',
+                        }, children: [_jsx(Button, { size: "small", onClick: handleClearAll, sx: { textTransform: 'none' }, children: "Clear All" }), _jsx(Button, { size: "small", variant: "contained", onClick: handleSelectAll, sx: { textTransform: 'none' }, children: "Select All" })] })] })] }));
+};

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Popover, Tooltip, IconButton, Box, Typography } from '@mui/material';
+import { ArrowUpward as ArrowUpwardIcon, ArrowDownward as ArrowDownwardIcon, SwapVert as SwapVertIcon, FilterList as FilterListIcon, } from '@mui/icons-material';
+import { useColumnHeaderFilterState } from '@alaarab/ogrid-react';
+import { TextFilterPopover } from './TextFilterPopover';
+import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
+import { PeopleFilterPopover } from './PeopleFilterPopover';
+export const ColumnHeaderFilter = React.memo((props) => {
+    const { columnName, filterType, isSorted = false, isSortedDescending = false, onSort, selectedValues, onFilterChange, options = [], isLoadingOptions = false, textValue = '', onTextChange, selectedUser, onUserChange, peopleSearch, dateValue, onDateChange, } = props;
+    const state = useColumnHeaderFilterState({
+        filterType,
+        isSorted,
+        isSortedDescending,
+        onSort,
+        selectedValues,
+        onFilterChange,
+        options,
+        isLoadingOptions,
+        textValue,
+        onTextChange,
+        selectedUser,
+        onUserChange,
+        peopleSearch,
+        dateValue,
+        onDateChange,
+    });
+    const { headerRef, peopleInputRef, isFilterOpen, setFilterOpen, tempSelected, tempTextValue, setTempTextValue, searchText, setSearchText, filteredOptions, peopleSuggestions, isPeopleLoading, peopleSearchText, setPeopleSearchText, hasActiveFilter, popoverPosition, handlers, } = state;
+    const safeOptions = options ?? [];
+    const renderPopoverContent = () => {
+        if (filterType === 'multiSelect') {
+            return (_jsx(MultiSelectFilterPopover, { searchText: searchText, onSearchChange: setSearchText, options: safeOptions, filteredOptions: filteredOptions, selected: tempSelected, onOptionToggle: handlers.handleCheckboxChange, onSelectAll: handlers.handleSelectAll, onClearSelection: handlers.handleClearSelection, onApply: handlers.handleApplyMultiSelect, isLoading: isLoadingOptions }));
+        }
+        if (filterType === 'text') {
+            return (_jsx(TextFilterPopover, { value: tempTextValue, onValueChange: setTempTextValue, onApply: handlers.handleTextApply, onClear: handlers.handleTextClear }));
+        }
+        if (filterType === 'people') {
+            return (_jsx(PeopleFilterPopover, { selectedUser: selectedUser, searchText: peopleSearchText, onSearchChange: setPeopleSearchText, suggestions: peopleSuggestions, isLoading: isPeopleLoading, onUserSelect: handlers.handleUserSelect, onClearUser: handlers.handleClearUser, inputRef: peopleInputRef }));
+        }
+        if (filterType === 'date') {
+            return (_jsxs(Box, { sx: { p: 1.5, display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "From:" }), _jsx("input", { type: "date", value: state.tempDateFrom, onChange: (e) => state.setTempDateFrom(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "To:" }), _jsx("input", { type: "date", value: state.tempDateTo, onChange: (e) => state.setTempDateTo(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 0.5 }, children: [_jsx("button", { onClick: handlers.handleDateClear, disabled: !state.tempDateFrom && !state.tempDateTo, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Clear" }), _jsx("button", { onClick: handlers.handleDateApply, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Apply" })] })] }));
+        }
+        return null;
+    };
+    return (_jsxs(Box, { ref: headerRef, sx: { display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: 'hidden' }, children: _jsx(Tooltip, { title: columnName, arrow: true, children: _jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, "data-header-label": true, sx: { lineHeight: 1.4 }, children: columnName }) }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', ml: 0.5, flexShrink: 0 }, children: [onSort && (_jsx(IconButton, { size: "small", onClick: handlers.handleSortClick, "aria-label": `Sort by ${columnName}`, title: isSorted ? (isSortedDescending ? 'Sorted descending' : 'Sorted ascending') : 'Sort', color: isSorted ? 'primary' : 'default', sx: { p: 0.25 }, children: isSorted ? (isSortedDescending ? (_jsx(ArrowDownwardIcon, { sx: { fontSize: 16 } })) : (_jsx(ArrowUpwardIcon, { sx: { fontSize: 16 } }))) : (_jsx(SwapVertIcon, { sx: { fontSize: 16 } })) })), filterType !== 'none' && (_jsxs(IconButton, { size: "small", onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, color: hasActiveFilter || isFilterOpen ? 'primary' : 'default', sx: { p: 0.25, position: 'relative' }, children: [_jsx(FilterListIcon, { sx: { fontSize: 16 } }), hasActiveFilter && (_jsx(Box, { sx: {
+                                    position: 'absolute',
+                                    top: 2,
+                                    right: 2,
+                                    width: 6,
+                                    height: 6,
+                                    borderRadius: '50%',
+                                    bgcolor: 'primary.main',
+                                } }))] }))] }), _jsxs(Popover, { open: isFilterOpen && filterType !== 'none', onClose: () => setFilterOpen(false), anchorReference: "anchorPosition", anchorPosition: popoverPosition ?? { top: 0, left: 0 }, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
+                    paper: {
+                        sx: { mt: 0.5, overflow: 'visible' },
+                        onClick: (e) => e.stopPropagation(),
+                    },
+                }, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider', px: 1.5, py: 1 }, children: _jsxs(Typography, { variant: "subtitle2", children: ["Filter: ", columnName] }) }), renderPopoverContent()] })] }));
+});
+ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField, Checkbox, CircularProgress, Button, Box, Typography, InputAdornment, FormControlLabel, } from '@mui/material';
+import { Search as SearchIcon } from '@mui/icons-material';
+export const MultiSelectFilterPopover = ({ searchText, onSearchChange, options, filteredOptions, selected, onOptionToggle, onSelectAll, onClearSelection, onApply, isLoading, }) => (_jsxs(Box, { sx: { width: 280 }, children: [_jsxs(Box, { sx: { p: 1.5, pb: 0.5 }, children: [_jsx(TextField, { placeholder: "Search...", value: searchText, onChange: (e) => onSearchChange(e.target.value), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", size: "small", fullWidth: true, slotProps: {
+                        input: {
+                            startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                        },
+                    } }), _jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: 'block' }, children: [filteredOptions.length, " of ", options.length, " options"] })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', px: 1.5, py: 0.5 }, children: [_jsxs(Button, { size: "small", onClick: onSelectAll, children: ["Select All (", filteredOptions.length, ")"] }), _jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" })] }), _jsx(Box, { sx: { maxHeight: 240, overflowY: 'auto', px: 0.5 }, children: isLoading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 2 }, children: _jsx(CircularProgress, { size: 24 }) })) : filteredOptions.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "No options found" })) : (filteredOptions.map((option) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: selected.has(option), onChange: (e) => onOptionToggle(option, e.target.checked) }), label: _jsx(Typography, { variant: "body2", children: option }), sx: { display: 'flex', mx: 0, '& .MuiFormControlLabel-label': { flex: 1, minWidth: 0 } } }, option)))) }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, p: 1.5, pt: 1, borderTop: 1, borderColor: 'divider' }, children: [_jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" }), _jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })] })] }));
+MultiSelectFilterPopover.displayName = 'MultiSelectFilterPopover';

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField, CircularProgress, Button, Box, Typography, InputAdornment, Avatar, IconButton, } from '@mui/material';
+import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
+export const PeopleFilterPopover = ({ selectedUser, searchText, onSearchChange, suggestions, isLoading, onUserSelect, onClearUser, inputRef, }) => (_jsxs(Box, { sx: { width: 300 }, children: [selectedUser && (_jsxs(Box, { sx: { p: 1.5, pb: 1, borderBottom: 1, borderColor: 'divider' }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: "Currently filtered by:" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }, children: [_jsx(Avatar, { src: selectedUser.photo, alt: selectedUser.displayName, sx: { width: 32, height: 32 }, children: selectedUser.displayName?.[0] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { variant: "body2", noWrap: true, children: selectedUser.displayName }), _jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: selectedUser.email })] }), _jsx(IconButton, { size: "small", onClick: onClearUser, "aria-label": "Remove filter", children: _jsx(ClearIcon, { fontSize: "small" }) })] })] })), _jsx(Box, { sx: { p: 1.5, pb: 0.5 }, children: _jsx(TextField, { inputRef: inputRef, placeholder: "Search for a person...", value: searchText, onChange: (e) => onSearchChange(e.target.value), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", size: "small", fullWidth: true, slotProps: {
+                    input: {
+                        startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                    },
+                } }) }), _jsx(Box, { sx: { maxHeight: 240, overflowY: 'auto' }, children: isLoading && searchText.trim() ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 2 }, children: _jsx(CircularProgress, { size: 24 }) })) : suggestions.length === 0 && searchText.trim() ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "No results found" })) : searchText.trim() ? (suggestions.map((user) => (_jsxs(Box, { onClick: () => onUserSelect(user), sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    px: 1.5,
+                    py: 1,
+                    cursor: 'pointer',
+                    '&:hover': { bgcolor: 'action.hover' },
+                }, children: [_jsx(Avatar, { src: user.photo, alt: user.displayName, sx: { width: 32, height: 32 }, children: user.displayName?.[0] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { variant: "body2", noWrap: true, children: user.displayName }), _jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: user.email })] })] }, user.id || user.email || user.displayName)))) : (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "Type to search..." })) }), selectedUser && (_jsx(Box, { sx: { p: 1.5, pt: 1, borderTop: 1, borderColor: 'divider' }, children: _jsx(Button, { size: "small", fullWidth: true, onClick: onClearUser, children: "Clear Filter" }) }))] }));
+PeopleFilterPopover.displayName = 'PeopleFilterPopover';

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField, Button, Box, InputAdornment } from '@mui/material';
+import { Search as SearchIcon } from '@mui/icons-material';
+export const TextFilterPopover = ({ value, onValueChange, onApply, onClear, }) => (_jsxs(Box, { sx: { width: 260 }, children: [_jsx(Box, { sx: { p: 1.5 }, children: _jsx(TextField, { placeholder: "Enter search term...", value: value, onChange: (e) => onValueChange(e.target.value), onKeyDown: (e) => {
+                    e.stopPropagation();
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        onApply();
+                    }
+                }, autoComplete: "off", size: "small", fullWidth: true, slotProps: {
+                    input: {
+                        startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                    },
+                } }) }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, p: 1.5, pt: 0 }, children: [_jsx(Button, { size: "small", disabled: !value, onClick: onClear, children: "Clear" }), _jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })] })] }));
+TextFilterPopover.displayName = 'TextFilterPopover';

package/dist/esm/ColumnHeaderFilter/index.js

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

package/dist/esm/DataGridTable/DataGridTable.js

@@ -0,0 +1,243 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useCallback, useRef, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Box, CircularProgress, Typography, Button, Popover, Checkbox, Table, TableHead, TableBody, TableRow, TableCell, TableContainer, } from '@mui/material';
+import { ColumnHeaderFilter } from '../ColumnHeaderFilter';
+import { InlineCellEditor } from './InlineCellEditor';
+import { StatusBar } from './StatusBar';
+import { GridContextMenu } from './GridContextMenu';
+import { useDataGridState, useColumnResize, useLatestRef, getHeaderFilterConfig, getCellRenderDescriptor, MarchingAntsOverlay, buildHeaderRows, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, areGridRowPropsEqual, CellErrorBoundary, CHECKBOX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, } 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' };
+// 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
+const STICKY_HEADER_SX = { position: 'sticky', top: 0, zIndex: 8, bgcolor: 'action.hover', '& th': { bgcolor: 'action.hover' } };
+const HEADER_ROW_SX = { bgcolor: 'action.hover' };
+const GROUP_HEADER_CELL_SX = { textAlign: 'center', fontWeight: 600, borderBottom: 2, borderColor: 'divider', py: 0.75 };
+// 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',
+};
+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)
+const CELL_ACTIVE_SX = { outline: '2px solid var(--ogrid-selection, #217346)', outlineOffset: '-1px', zIndex: 2, position: 'relative', overflow: 'visible' };
+const CELL_IN_RANGE_SX = { bgcolor: 'var(--ogrid-bg-range, rgba(33, 115, 70, 0.12))' };
+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' };
+const CELL_TD_PINNED_RIGHT_SX = { ...CELL_TD_BASE_SX, position: 'sticky', right: 0, zIndex: 6, bgcolor: 'background.paper', willChange: 'transform' };
+// Header cell positioning variants
+const HEADER_BASE_SX = { fontWeight: 600, position: 'relative' };
+const HEADER_PINNED_LEFT_SX = { ...HEADER_BASE_SX, position: 'sticky', left: 0, top: 0, zIndex: 9, bgcolor: 'action.hover', willChange: 'transform' };
+const HEADER_PINNED_RIGHT_SX = { ...HEADER_BASE_SX, position: 'sticky', right: 0, top: 0, zIndex: 9, bgcolor: 'action.hover', willChange: 'transform' };
+// 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%' };
+// Table wrapper
+const TABLE_WRAPPER_SX = { position: 'relative', opacity: 1 };
+const TABLE_WRAPPER_LOADING_SX = { position: 'relative', opacity: 0.6 };
+// Empty state
+const EMPTY_STATE_SX = { py: 4, px: 2, textAlign: 'center', borderTop: 1, borderColor: 'divider', bgcolor: 'action.hover' };
+// Loading overlay
+const LOADING_OVERLAY_SX = {
+    position: 'absolute', inset: 0, zIndex: 2,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    bgcolor: '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,
+};
+// Module-scope event handlers
+const STOP_PROPAGATION = (e) => e.stopPropagation();
+const PREVENT_DEFAULT = (e) => { e.preventDefault(); };
+const NOOP = () => { };
+function GridRowInner(props) {
+    const { item, rowIndex, rowId, isSelected, columnLayouts, renderCellContent, handleSingleRowClick, handleRowCheckboxChange, lastMouseShiftRef, hasCheckboxCol, } = 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}` }) }) })), columnLayouts.map((cl, colIdx) => (_jsx(TableCell, { sx: cl.tdSx, style: { 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 wrapperRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const state = useDataGridState({ props, wrapperRef });
+    const lastMouseShiftRef = useRef(false);
+    const { layout, rowSelection: rowSel, editing, interaction, contextMenu: ctxMenu, viewModels } = state;
+    const { visibleCols, hasCheckboxCol, colOffset, containerWidth, minTableWidth, desiredTableWidth, columnSizingOverrides, setColumnSizingOverrides } = layout;
+    const { selectedRowIds, updateSelection, handleRowCheckboxChange, handleSelectAll, allSelected, someSelected } = rowSel;
+    const { editingCell, setEditingCell, pendingEditorValue, setPendingEditorValue, commitCellEdit, cancelPopoverEdit, popoverAnchorEl, setPopoverAnchorEl } = editing;
+    const { setActiveCell, handleCellMouseDown, handleSelectAllCells, selectionRange, hasCellSelection, handleGridKeyDown, handleFillHandleMouseDown, handleCopy, handleCut, handlePaste, cutRange, copyRange, canUndo, canRedo, onUndo, onRedo, isDragging } = interaction;
+    const handlePasteVoid = useCallback(() => { void handlePaste(); }, [handlePaste]);
+    const { menuPosition, handleCellContextMenu, closeContextMenu } = ctxMenu;
+    const { headerFilterInput, cellDescriptorInput, statusBarConfig, showEmptyInGrid, onCellError } = viewModels;
+    const { items, getRowId, emptyState, layoutMode = 'fill', rowSelection = 'none', freezeRows, freezeCols, suppressHorizontalScroll, isLoading = false, loadingMessage = 'Loading\u2026', 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const fitToContent = layoutMode === 'content';
+    const allowOverflowX = !suppressHorizontalScroll && containerWidth > 0 && (minTableWidth > containerWidth || desiredTableWidth > containerWidth);
+    // Memoize header rows (recursive tree traversal)
+    const headerRows = useMemo(() => buildHeaderRows(props.columns, props.visibleColumns), [props.columns, props.visibleColumns]);
+    const { handleResizeStart, getColumnWidth } = useColumnResize({
+        columnSizingOverrides,
+        setColumnSizingOverrides,
+    });
+    // Pre-compute per-column layout (tdSx, widths) so GridRow doesn't recalculate per-cell
+    const columnLayouts = useMemo(() => visibleCols.map((col, colIdx) => {
+        const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
+        const isPinnedLeft = col.pinned === 'left';
+        const isPinnedRight = col.pinned === 'right';
+        const columnWidth = getColumnWidth(col);
+        const tdSx = isPinnedLeft || (isFreezeCol && colIdx === 0) ? CELL_TD_PINNED_LEFT_SX : isPinnedRight ? CELL_TD_PINNED_RIGHT_SX : CELL_TD_BASE_SX;
+        return { col, tdSx, minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, width: columnWidth, maxWidth: columnWidth };
+    }), [visibleCols, freezeCols, getColumnWidth]);
+    const editCallbacks = useMemo(() => ({ commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit }), [commitCellEdit, setEditingCell, setPendingEditorValue, cancelPopoverEdit]);
+    const interactionHandlers = useMemo(() => ({ handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu }), [handleCellMouseDown, setActiveCell, setEditingCell, handleCellContextMenu]);
+    // Refs for volatile state — lets renderCellContent be stable (same function ref across
+    // selection changes) so that GridRow's React.memo comparator can skip unaffected rows.
+    const cellDescriptorInputRef = useLatestRef(cellDescriptorInput);
+    const pendingEditorValueRef = useLatestRef(pendingEditorValue);
+    const popoverAnchorElRef = useLatestRef(popoverAnchorEl);
+    // Stable row-click handler
+    const selectedRowIdsRef = useLatestRef(selectedRowIds);
+    const handleSingleRowClick = useCallback((e) => {
+        if (rowSelection !== 'single')
+            return;
+        const rowId = e.currentTarget.dataset.rowId;
+        if (!rowId)
+            return;
+        const ids = selectedRowIdsRef.current;
+        updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- selectedRowIdsRef is a stable ref
+    }, [rowSelection, updateSelection]);
+    // Wrapper sx (depends on dynamic values — memoize to avoid recreation)
+    const wrapperSx = useMemo(() => ({
+        position: 'relative',
+        flex: 1,
+        minHeight: 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' },
+    }), [fitToContent, suppressHorizontalScroll, allowOverflowX]);
+    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(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: cellSx, 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}`));
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- *Ref vars are stable refs from useLatestRef
+    [editCallbacks, interactionHandlers, handleFillHandleMouseDown, setPopoverAnchorEl, cancelPopoverEdit, getRowId, onCellError]);
+    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', sx: wrapperSx, children: [_jsx(Box, { sx: WRAPPER_SCROLL_SX, children: _jsx(TableContainer, { sx: { 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: { overflow: 'hidden', minWidth: minTableWidth }, "data-freeze-rows": freezeRows != null && freezeRows >= 1 ? freezeRows : undefined, "data-freeze-cols": freezeCols != null && freezeCols >= 1 ? freezeCols : undefined, 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 })), 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
+                                                            const col = cell.columnDef;
+                                                            const colIdx = visibleCols.indexOf(col);
+                                                            const isFreezeCol = freezeCols != null && freezeCols >= 1 && colIdx < freezeCols;
+                                                            const isPinnedLeft = col.pinned === 'left';
+                                                            const isPinnedRight = col.pinned === 'right';
+                                                            const columnWidth = getColumnWidth(col);
+                                                            const headerSx = isPinnedLeft || (isFreezeCol && colIdx === 0) ? HEADER_PINNED_LEFT_SX : isPinnedRight ? HEADER_PINNED_RIGHT_SX : HEADER_BASE_SX;
+                                                            return (_jsxs(TableCell, { component: "th", scope: "col", rowSpan: headerRows.length > 1 ? headerRows.length - rowIdx : undefined, sx: headerSx, style: { minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, width: columnWidth, maxWidth: columnWidth }, children: [_jsx(ColumnHeaderFilter, { ...getHeaderFilterConfig(col, headerFilterInput) }), _jsx(Box, { onMouseDown: (e) => handleResizeStart(e, col), sx: RESIZE_HANDLE_SX })] }, col.columnId));
+                                                        })] }, rowIdx))) }), !showEmptyInGrid && (_jsx(TableBody, { children: 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, selectionRange: selectionRange, activeCell: interaction.activeCell, cutRange: cutRange, copyRange: copyRange, isDragging: isDragging, editingRowId: editingCell?.rowId ?? null }, rowIdStr));
+                                                }) }))] }), _jsx(MarchingAntsOverlay, { containerRef: tableContainerRef, selectionRange: selectionRange, copyRange: copyRange, cutRange: cutRange, colOffset: colOffset }), showEmptyInGrid && emptyState && (_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.') })] })) }))] }) }) }), 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: handleSelectAllCells, onClose: closeContextMenu }), document.body)] }), 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(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: loadingMessage })] }) }))] }));
+}
+export const DataGridTable = React.memo(DataGridTableInner);

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -0,0 +1,18 @@
+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.map((item) => (_jsxs(React.Fragment, { children: [item.dividerBefore && _jsx(Divider, {}), _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: 'rgba(0,0,0,0.4)', fontSize: '0.8em' }, children: formatShortcut(item.shortcut) }))] })] }, item.id))) }));
+}

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox, Select, MenuItem } from '@mui/material';
+import { BaseInlineCellEditor, editorWrapperStyle } 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" })), renderSelect: (value, values, onCommit, onCancel) => (_jsx("div", { style: editorWrapperStyle, children: _jsx(Select, { size: "small", value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => onCommit(e.target.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), autoFocus: true, sx: { minWidth: 0, flex: 1 }, children: values.map((v) => (_jsx(MenuItem, { value: String(v), children: String(v) }, String(v)))) }) })) }));
+}

package/dist/esm/DataGridTable/StatusBar.js

@@ -0,0 +1,13 @@
+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/MaterialDataTable/MaterialDataTable.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { Box } from '@mui/material';
+import { DataGridTable } from '../DataGridTable/DataGridTable';
+import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
+import { PaginationControls } from '../PaginationControls/PaginationControls';
+import { useOGrid, OGridLayout, } from '@alaarab/ogrid-react';
+const OGridInner = forwardRef(function OGridInner(props, ref) {
+    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
+    return (_jsx(OGridLayout, { containerComponent: Box, containerProps: { sx: { display: 'flex', flexDirection: 'column', gap: 1 } }, className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
+                pagination.setPageSize(size);
+                pagination.setPage(1);
+            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+});
+OGridInner.displayName = 'OGrid';
+export const OGrid = React.memo(OGridInner);
+/** @deprecated Use `OGrid` instead. Backward-compat alias. */
+export const MaterialDataTable = OGrid;

package/dist/esm/MaterialDataTable/index.js

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

package/dist/esm/PaginationControls/PaginationControls.js

@@ -0,0 +1,29 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useMemo, useCallback } 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 { getPaginationViewModel } from '@alaarab/ogrid-react';
+export const PaginationControls = React.memo((props) => {
+    const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className, } = props;
+    const labelPlural = entityLabelPlural ?? 'items';
+    const vm = useMemo(() => getPaginationViewModel(currentPage, pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined), [currentPage, pageSize, totalCount, pageSizeOptions]);
+    const handlePageSizeChange = useCallback((event) => {
+        onPageSizeChange(Number(event.target.value));
+    }, [onPageSizeChange]);
+    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: handlePageSizeChange, size: "small", "aria-label": "Rows per page", sx: { minWidth: 70 }, children: vm.pageSizeOptions.map((n) => (_jsx(MenuItem, { value: n, children: n }, n))) })] })] }));
+});

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+// Components
+export { OGrid, MaterialDataTable } from './MaterialDataTable';
+export { DataGridTable } from './DataGridTable/DataGridTable';
+export { ColumnChooser } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls } from './PaginationControls/PaginationControls';
+// Re-export everything from core
+export * from '@alaarab/ogrid-react';

package/dist/types/ColumnChooser/ColumnChooser.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { IColumnDefinition } from '@alaarab/ogrid-react';
+export type { IColumnDefinition };
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    className?: string;
+}
+export declare const ColumnChooser: React.FC<IColumnChooserProps>;

package/dist/types/ColumnHeaderFilter/ColumnHeaderFilter.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { UserLike, ColumnFilterType, IDateFilterValue } from '@alaarab/ogrid-react';
+export interface IColumnHeaderFilterProps {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    dateValue?: IDateFilterValue;
+    onDateChange?: (value: IDateFilterValue | undefined) => void;
+}
+export declare const ColumnHeaderFilter: React.FC<IColumnHeaderFilterProps>;

package/dist/types/ColumnHeaderFilter/MultiSelectFilterPopover.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface MultiSelectFilterPopoverProps {
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    options: string[];
+    filteredOptions: string[];
+    selected: Set<string>;
+    onOptionToggle: (option: string, checked: boolean) => void;
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    onApply: () => void;
+    isLoading: boolean;
+}
+export declare const MultiSelectFilterPopover: React.FC<MultiSelectFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/PeopleFilterPopover.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { UserLike } from '@alaarab/ogrid-react';
+export interface PeopleFilterPopoverProps {
+    selectedUser: UserLike | undefined;
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    suggestions: UserLike[];
+    isLoading: boolean;
+    onUserSelect: (user: UserLike) => void;
+    onClearUser: () => void;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+}
+export declare const PeopleFilterPopover: React.FC<PeopleFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/TextFilterPopover.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface TextFilterPopoverProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+}
+export declare const TextFilterPopover: React.FC<TextFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/index.d.ts

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

package/dist/types/DataGridTable/DataGridTable.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { IOGridDataGridProps } from '@alaarab/ogrid-react';
+declare function DataGridTableInner<T>(props: IOGridDataGridProps<T>): React.ReactElement;
+export declare const DataGridTable: typeof DataGridTableInner;
+export {};

package/dist/types/DataGridTable/GridContextMenu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { GridContextMenuHandlerProps } from '@alaarab/ogrid-react';
+export interface GridContextMenuProps extends GridContextMenuHandlerProps {
+    x: number;
+    y: number;
+    hasSelection: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+export declare function GridContextMenu(props: GridContextMenuProps): React.ReactElement;

package/dist/types/DataGridTable/InlineCellEditor.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { IColumnDef } from '@alaarab/ogrid-react';
+export interface InlineCellEditorProps<T> {
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+}
+export declare function InlineCellEditor<T>(props: InlineCellEditorProps<T>): React.ReactElement;

package/dist/types/DataGridTable/StatusBar.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface StatusBarProps {
+    totalCount: number;
+    filteredCount?: number;
+    selectedCount?: number;
+    selectedCellCount?: number;
+    aggregation?: {
+        sum: number;
+        avg: number;
+        min: number;
+        max: number;
+        count: number;
+    } | null;
+    suppressRowCount?: boolean;
+}
+export declare function StatusBar(props: StatusBarProps): React.ReactElement;

package/dist/types/MaterialDataTable/MaterialDataTable.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { type IOGridProps, type IOGridApi } from '@alaarab/ogrid-react';
+export type { IOGridProps } from '@alaarab/ogrid-react';
+declare const OGridInner: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;
+export declare const OGrid: typeof OGridInner;
+/** @deprecated Use `OGrid` instead. Backward-compat alias. */
+export declare const MaterialDataTable: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;

package/dist/types/MaterialDataTable/index.d.ts

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

package/dist/types/PaginationControls/PaginationControls.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface IPaginationControlsProps {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    entityLabelPlural?: string;
+    className?: string;
+}
+export declare const PaginationControls: React.FC<IPaginationControlsProps>;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { OGrid, MaterialDataTable, type IOGridProps } from './MaterialDataTable';
+export { DataGridTable } from './DataGridTable/DataGridTable';
+export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls, type IPaginationControlsProps } from './PaginationControls/PaginationControls';
+export * from '@alaarab/ogrid-react';

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@alaarab/ogrid-react-material",
+  "version": "2.0.0-beta",
+  "description": "OGrid Material UI implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "test": "jest",
+    "storybook": "storybook dev -p 6007 --no-open",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "ogrid",
+    "material-ui",
+    "mui",
+    "datatable",
+    "react",
+    "typescript",
+    "grid"
+  ],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@alaarab/ogrid-react": "2.0.0-beta"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
+    "@storybook/react-vite": "10.2.8",
+    "storybook": "10.2.8",
+    "eslint-plugin-storybook": "10.2.8",
+    "vite": "^7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}