tp-react-elements 2.0.3 → 2.0.5

package/dist/components/PaginatedGrid/DynamicFilterBar.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { memo, useState, useEffect } from 'react';
+import { memo, useState, useEffect, useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -17,6 +17,8 @@ import FilterListIcon from '@mui/icons-material/FilterList';
 import CheckIcon from '@mui/icons-material/Check';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import SearchIcon from '@mui/icons-material/Search';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 // Enable strict-format parsing so dayjs can handle the DD/MM/YYYY strings
 // that DatepickerWrapperV2 passes to onChangeFn
@@ -30,6 +32,7 @@ const TYPE_PILL = {
     dropdown: { label: 'Select', color: '#6a1b9a', bg: '#f3e5f5' },
     searchableDropdown: { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
     multiSelect: { label: 'Multi', color: '#0277bd', bg: '#e1f5fe' },
+    monthPicker: { label: 'Month', color: '#6a1b9a', bg: '#f3e5f5' },
 };
 // Column filter type pills (used in COLUMN FILTERS section of Manage Filters)
 const COLUMN_TYPE_PILL = {
@@ -78,7 +81,7 @@ const fmtDate = (iso) => {
     const yearSuffix = y !== thisYear ? ` '${y.slice(2)}` : '';
     return `${Number(d)} ${months[Number(m) - 1]}${yearSuffix}`;
 };
-const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove, chipStyle }) => {
+const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove, chipStyle, baseId }) => {
     // Inject react-date-range CSS via JS (not CSS import) to prevent it from being
     // bundled into the library's extracted CSS file and leaking into consumer apps.
     useRdrStyles();
@@ -120,14 +123,14 @@ const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove, chipStyle }
             setAnchor(null);
         }
     };
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipLabel : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: openPicker, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipLabel }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, overflow: 'hidden' } }, children: [jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: selRange, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#1976d2'] }), active && (jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', px: 2, pb: 1.5 }, children: jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply('', ''); setAnchor(null); }, children: "Clear" }) }))] })] }));
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipLabel : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: openPicker, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipLabel }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, overflow: 'hidden' } }, children: [jsx(distExports.DateRange, { editableDateInputs: false, onChange: handleRangeChange, moveRangeOnFirstSelection: false, ranges: selRange, months: 2, direction: "horizontal", showDateDisplay: false, dateDisplayFormat: "dd/MM/yyyy", rangeColors: ['#1976d2'] }), active && (jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', px: 2, pb: 1.5 }, children: jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply('', ''); setAnchor(null); }, children: "Clear" }) }))] })] }));
 };
-const TextFilterChip = ({ label, value, onApply, onRemove, placeholder, chipStyle }) => {
+const TextFilterChip = ({ label, value, onApply, onRemove, placeholder, chipStyle, baseId }) => {
     const [anchor, setAnchor] = useState(null);
     const [draft, setDraft] = useState('');
     const active = Boolean(value);
     const chipText = active ? `${label}: ${value}` : label;
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => { setDraft(value); setAnchor(e.currentTarget); }, endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, minWidth: 240 } }, children: jsxs(Box, { sx: { p: 2 }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", fullWidth: true, autoFocus: true, onKeyDown: (e) => {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: (e) => { setDraft(value); setAnchor(e.currentTarget); }, endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, minWidth: 240 } }, children: jsxs(Box, { sx: { p: 2 }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", fullWidth: true, autoFocus: true, onKeyDown: (e) => {
                                 if (e.key === 'Enter') {
                                     onApply(draft);
                                     setAnchor(null);
@@ -136,7 +139,7 @@ const TextFilterChip = ({ label, value, onApply, onRemove, placeholder, chipStyl
                                     setAnchor(null);
                             } }), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", mt: 1.5, children: [active && (jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply(''); setAnchor(null); }, children: "Clear" })), jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: () => { onApply(draft); setAnchor(null); }, children: "Apply" })] })] }) })] }));
 };
-const DatePickerChip = ({ label, value, onApply, onRemove, chipStyle }) => {
+const DatePickerChip = ({ label, value, onApply, onRemove, chipStyle, baseId }) => {
     const [open, setOpen] = useState(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const active = Boolean(value);
@@ -160,7 +163,7 @@ const DatePickerChip = ({ label, value, onApply, onRemove, chipStyle }) => {
     // LocalizationProvider must wrap DatePicker — scoped here so it only
     // loads when the chip is actually used (DatePickerChip is tree-shaken
     // if the 'date' filter type is never included in serverFilterDefs).
-    jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: handleChipClick, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(DatePicker, { value: dayjsValue, open: open, onClose: () => setOpen(false), onChange: handleChange, slotProps: {
+    jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: handleChipClick, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(DatePicker, { value: dayjsValue, open: open, onClose: () => setOpen(false), onChange: handleChange, slotProps: {
                     textField: { sx: { display: 'none' }, size: 'small' },
                     popper: {
                         anchorEl,
@@ -168,7 +171,7 @@ const DatePickerChip = ({ label, value, onApply, onRemove, chipStyle }) => {
                     },
                 } })] }));
 };
-const DropdownFilterChip = ({ label, value, options, onApply, onRemove, chipStyle }) => {
+const DropdownFilterChip = ({ label, value, options, onApply, onRemove, chipStyle, baseId }) => {
     const [anchor, setAnchor] = useState(null);
     const active = Boolean(value);
     const selectedLabel = options.find((o) => o.value === value)?.label ?? '';
@@ -199,7 +202,7 @@ const DropdownFilterChip = ({ label, value, options, onApply, onRemove, chipStyl
         ],
     };
     const chipText = active ? `${label}: ${selectedLabel}` : label;
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(ArrowDropDownIcon, { sx: { fontSize: '15px !important', mr: -0.5 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 1.5, minWidth: 240 } }, children: jsx(SingleSelectNonAutoComplete, { props: {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(ArrowDropDownIcon, { sx: { fontSize: '15px !important', mr: -0.5 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsx(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 1.5, minWidth: 240 } }, children: jsx(SingleSelectNonAutoComplete, { props: {
                         item,
                         register,
                         control,
@@ -210,7 +213,7 @@ const DropdownFilterChip = ({ label, value, options, onApply, onRemove, chipStyl
                         watch,
                     }, variant: "outlined" }) })] }));
 };
-const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeholder = 'Search…', chipStyle, }) => {
+const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeholder = 'Search…', chipStyle, baseId, }) => {
     const [anchor, setAnchor] = useState(null);
     const [search, setSearch] = useState('');
     const active = Boolean(value);
@@ -228,7 +231,7 @@ const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeh
         ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
         : options;
     const chipText = active ? `${label}: ${selectedLabel}` : label;
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: open, startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: open, startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
                     sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280, display: 'flex', flexDirection: 'column' },
                 }, children: [jsx(Box, { sx: { px: 1.5, pt: 1.5, pb: 0.75 }, children: jsx(TextField, { size: "small", fullWidth: true, autoFocus: true, placeholder: placeholder, value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape')
                                 setAnchor(null); }, InputProps: {
@@ -246,15 +249,24 @@ const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeh
                                             } }), isSelected && (jsx(CheckIcon, { sx: { fontSize: 15, color: 'primary.main', flexShrink: 0 } }))] }, opt.value));
                             }))] })] })] }));
 };
-const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemove, chipStyle, }) => {
+const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemove, chipStyle, baseId, }) => {
     const [anchor, setAnchor] = useState(null);
+    // Draft is only committed on Apply — prevents an API call per checkbox tick.
+    const [draft, setDraft] = useState([]);
     const active = selectedValues.length > 0;
-    const toggle = (value) => {
-        const next = selectedValues.includes(value)
-            ? selectedValues.filter((v) => v !== value)
-            : [...selectedValues, value];
-        onApply(next);
+    const openPopover = (e) => {
+        setDraft(selectedValues); // always start from the committed state
+        setAnchor(e.currentTarget);
+    };
+    const toggleDraft = (value) => setDraft((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
+    const allSelected = draft.length === options.length && options.length > 0;
+    const someSelected = draft.length > 0 && !allSelected;
+    const toggleAll = () => setDraft(allSelected ? [] : options.map((o) => o.value));
+    const handleApply = () => {
+        onApply(draft);
+        setAnchor(null);
     };
+    // Chip label reflects committed values, not the open draft
     const chipText = (() => {
         if (!active)
             return label;
@@ -268,18 +280,100 @@ const MultiSelectFilterChip = ({ label, selectedValues, options, onApply, onRemo
         }
         return `${label}: ${selectedValues.length} selected`;
     })();
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(FilterListIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 260 } }, children: [active && (jsxs(Box, { sx: {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: openPopover, startIcon: jsx(FilterListIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 260 } }, children: [jsxs(Box, { sx: {
                             px: 2, py: 0.75,
                             display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                             borderBottom: '1px solid', borderColor: 'divider',
-                        }, children: [jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600 }, children: [selectedValues.length, " selected"] }), jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => onApply([]), children: "Clear all" })] })), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 300, overflowY: 'auto', py: 0.5 }, children: options.map((opt) => {
-                            const checked = selectedValues.includes(opt.value);
-                            return (jsxs(ListItemButton, { onClick: () => toggle(opt.value), sx: { px: 1, py: 0.25 }, children: [jsx(Checkbox, { checked: checked, size: "small", disableRipple: true, sx: { p: 0.5, mr: 0.5, '& .MuiSvgIcon-root': { fontSize: 16 } } }), jsx(ListItemText, { primary: opt.label, primaryTypographyProps: {
+                        }, children: [jsx(Typography, { sx: { fontSize: 11, color: draft.length > 0 ? 'primary.main' : 'text.secondary', fontWeight: draft.length > 0 ? 600 : 400 }, children: draft.length > 0 ? `${draft.length} of ${options.length} selected` : 'Select options' }), draft.length > 0 && (jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => setDraft([]), children: "Clear all" }))] }), jsxs(ListItemButton, { onClick: toggleAll, sx: { px: 1, py: 0.25 }, children: [jsx(Checkbox, { checked: allSelected, indeterminate: someSelected, size: "small", disableRipple: true, sx: { p: 0.5, mr: 0.5, '& .MuiSvgIcon-root': { fontSize: 16 } } }), jsx(ListItemText, { primary: "All", primaryTypographyProps: {
+                                    fontSize: 13,
+                                    fontStyle: 'italic',
+                                    color: allSelected || someSelected ? 'primary.main' : 'text.secondary',
+                                    fontWeight: allSelected ? 600 : 400,
+                                } })] }), jsx(Divider, {}), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 240, overflowY: 'auto', py: 0.5 }, children: options.map((opt) => {
+                            const checked = draft.includes(opt.value);
+                            return (jsxs(ListItemButton, { onClick: () => toggleDraft(opt.value), sx: { px: 1, py: 0.25 }, children: [jsx(Checkbox, { checked: checked, size: "small", disableRipple: true, sx: { p: 0.5, mr: 0.5, '& .MuiSvgIcon-root': { fontSize: 16 } } }), jsx(ListItemText, { primary: opt.label, primaryTypographyProps: {
                                             fontSize: 13,
                                             color: checked ? 'primary.main' : 'text.primary',
                                             fontWeight: checked ? 600 : 400,
                                         } })] }, opt.value));
-                        }) })] })] }));
+                        }) }), jsx(Box, { sx: {
+                            px: 1.5, py: 1,
+                            display: 'flex', justifyContent: 'flex-end',
+                            borderTop: '1px solid', borderColor: 'divider',
+                        }, children: jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: handleApply, children: "Apply" }) })] })] }));
+};
+// ─── MonthPickerChip ─────────────────────────────────────────────────────────
+//
+// Multi-month selection chip. Users navigate by year and tick individual months.
+// Draft changes are buffered locally; `onApply` is called once when Apply is
+// clicked (single API call per filter action).
+//
+// Value format: comma-separated "YYYY-MM" strings, e.g. "2025-01,2025-03".
+// ─────────────────────────────────────────────────────────────────────────────
+const MONTH_LABELS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MonthPickerChip = ({ label, value, onApply, onRemove, chipStyle, baseId }) => {
+    const parseYMs = (v) => v ? v.split(',').filter(Boolean) : [];
+    const [anchor, setAnchor] = useState(null);
+    const [viewYear, setViewYear] = useState(() => new Date().getFullYear());
+    const [draft, setDraft] = useState(() => parseYMs(value));
+    const committed = parseYMs(value);
+    const active = committed.length > 0;
+    // Sync view year to earliest selected year when opening
+    const openPopover = (e) => {
+        const yms = parseYMs(value);
+        setDraft(yms);
+        if (yms.length > 0) {
+            const years = yms.map((ym) => Number(ym.split('-')[0]));
+            setViewYear(Math.min(...years));
+        }
+        setAnchor(e.currentTarget);
+    };
+    const toggleMonth = (ym) => setDraft((prev) => prev.includes(ym) ? prev.filter((v) => v !== ym) : [...prev, ym]);
+    const handleApply = () => {
+        // Sort selected months chronologically before storing
+        onApply([...draft].sort().join(','));
+        setAnchor(null);
+    };
+    const chipText = (() => {
+        if (!active)
+            return label;
+        if (committed.length === 1) {
+            const [y, m] = committed[0].split('-');
+            return `${MONTH_LABELS[Number(m) - 1]} ${y}`;
+        }
+        if (committed.length <= 3) {
+            const parts = committed.map((ym) => {
+                const [y, m] = ym.split('-');
+                return `${MONTH_LABELS[Number(m) - 1]} '${y.slice(2)}`;
+            });
+            return `${label}: ${parts.join(', ')}`;
+        }
+        return `${label}: ${committed.length} months`;
+    })();
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: openPopover, startIcon: jsx(CalendarTodayIcon, { sx: { fontSize: 13 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, width: 280 } }, children: [jsxs(Box, { sx: {
+                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                            px: 1.5, py: 0.75,
+                            borderBottom: '1px solid', borderColor: 'divider',
+                        }, children: [jsx(IconButton, { id: baseId ? `${baseId}_prev_year_icon` : undefined, size: "small", onClick: () => setViewYear((y) => y - 1), children: jsx(ChevronLeftIcon, { sx: { fontSize: 18 } }) }), jsx(Typography, { fontWeight: 600, sx: { fontSize: 14, userSelect: 'none' }, children: viewYear }), jsx(IconButton, { id: baseId ? `${baseId}_next_year_icon` : undefined, size: "small", onClick: () => setViewYear((y) => y + 1), children: jsx(ChevronRightIcon, { sx: { fontSize: 18 } }) })] }), jsx(Box, { sx: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0.75, p: 1.5 }, children: MONTH_LABELS.map((mon, idx) => {
+                            const ym = `${viewYear}-${String(idx + 1).padStart(2, '0')}`;
+                            const isSelected = draft.includes(ym);
+                            return (jsx(Button, { id: baseId ? `${baseId}_month_${ym}` : undefined, variant: isSelected ? 'contained' : 'outlined', size: "small", disableElevation: true, onClick: () => toggleMonth(ym), sx: {
+                                    fontSize: 12,
+                                    textTransform: 'none',
+                                    borderRadius: 2,
+                                    py: 0.75,
+                                    borderColor: isSelected ? 'primary.main' : 'divider',
+                                    fontWeight: isSelected ? 700 : 400,
+                                }, children: mon }, ym));
+                        }) }), draft.length > 0 && (jsxs(Box, { sx: {
+                            px: 2, py: 0.75,
+                            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                            borderTop: '1px solid', borderColor: 'divider',
+                        }, children: [jsxs(Typography, { sx: { fontSize: 11, color: 'primary.main', fontWeight: 600 }, children: [draft.length, " month", draft.length > 1 ? 's' : '', " selected"] }), jsx(Button, { size: "small", color: "inherit", sx: { fontSize: 11, py: 0, textTransform: 'none', minWidth: 'auto' }, onClick: () => setDraft([]), children: "Clear" })] })), jsx(Box, { sx: {
+                            px: 1.5, py: 1,
+                            display: 'flex', justifyContent: 'flex-end',
+                            borderTop: '1px solid', borderColor: 'divider',
+                        }, children: jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: handleApply, children: "Apply" }) })] })] }));
 };
 const GlobalSearchInput = memo(({ value, onChange, chipStyle, placeholder = 'Search…' }) => {
     const [draft, setDraft] = useState(value);
@@ -316,22 +410,22 @@ const GlobalSearchInput = memo(({ value, onChange, chipStyle, placeholder = 'Sea
         } }));
 });
 GlobalSearchInput.displayName = 'GlobalSearchInput';
-const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, }) => {
+// ─── PillBox — module-level so ManageFiltersButton never creates a new type ───
+const PillBox = ({ bg, color, label }) => (jsx(Box, { component: "span", sx: {
+        mr: 1.25, flexShrink: 0,
+        fontSize: 10, fontWeight: 700,
+        px: 0.75, py: '2px',
+        borderRadius: '4px',
+        bgcolor: bg,
+        color,
+        textTransform: 'uppercase',
+        letterSpacing: 0.4,
+        lineHeight: 1.6,
+    }, children: label }));
+const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, gridId, }) => {
     const [anchor, setAnchor] = useState(null);
     const atLimit = visibleIds.length >= maxVisible;
-    // Shared pill box renderer
-    const PillBox = ({ bg, color, label }) => (jsx(Box, { component: "span", sx: {
-            mr: 1.25, flexShrink: 0,
-            fontSize: 10, fontWeight: 700,
-            px: 0.75, py: '2px',
-            borderRadius: '4px',
-            bgcolor: bg,
-            color,
-            textTransform: 'uppercase',
-            letterSpacing: 0.4,
-            lineHeight: 1.6,
-        }, children: label }));
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Add or remove filter chips", children: jsx(Button, { size: "small", variant: "outlined", startIcon: jsx(TuneIcon, { sx: { fontSize: 14 } }), onClick: (e) => setAnchor(e.currentTarget), sx: {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Add or remove filter chips", children: jsx(Button, { id: gridId ? `${gridId}_manage_filters_icon` : undefined, size: "small", variant: "outlined", startIcon: jsx(TuneIcon, { sx: { fontSize: 14 } }), onClick: (e) => setAnchor(e.currentTarget), sx: {
                         borderRadius: 5, textTransform: 'none', fontSize: chipStyle.fontSize,
                         borderColor: 'divider', color: 'text.secondary',
                         px: chipStyle.px ?? 1.5, minHeight: chipStyle.minHeight,
@@ -362,7 +456,7 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
                                                                 } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }) }) }, col.id));
                                         }) })] }))] })] })] }));
 };
-const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, uiDensity = 'default', filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, }) => {
+const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters = 4, uiDensity = 'default', filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, gridId, }) => {
     const chipStyle = {
         fontSize: filterChipFontSize ?? (uiDensity === 'compact' ? 11 : 12),
         minHeight: filterChipMinHeight ?? (uiDensity === 'compact' ? 26 : 30),
@@ -370,20 +464,24 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
     const labelFontSize = filterLabelFontSize ?? (uiDensity === 'compact' ? 11 : 12);
     // ── Single-value column filter helpers ──────────────────────────────────────
     const getColValue = (id) => columnFilters.find((f) => f.id === id)?.value ?? '';
-    const applyColFilter = (id, value) => {
-        const rest = columnFilters.filter((f) => f.id !== id);
-        onColumnFilterChange(value ? [...rest, { id, value }] : rest);
-    };
+    const applyColFilter = useCallback((id, value) => {
+        onColumnFilterChange((prev) => {
+            const rest = prev.filter((f) => f.id !== id);
+            return value ? [...rest, { id, value }] : rest;
+        });
+    }, [onColumnFilterChange]);
     // ── Multi-value column filter helpers ────────────────────────────────────────
     const getColValues = (id) => {
         const val = columnFilters.find((f) => f.id === id)?.value;
         return Array.isArray(val) ? val : [];
     };
-    const applyColMultiFilter = (id, values) => {
-        const rest = columnFilters.filter((f) => f.id !== id);
-        onColumnFilterChange(values.length > 0 ? [...rest, { id, value: values }] : rest);
-    };
-    const removeFilter = (id) => {
+    const applyColMultiFilter = useCallback((id, values) => {
+        onColumnFilterChange((prev) => {
+            const rest = prev.filter((f) => f.id !== id);
+            return values.length > 0 ? [...rest, { id, value: values }] : rest;
+        });
+    }, [onColumnFilterChange]);
+    const removeFilter = useCallback((id) => {
         const def = serverFilterDefs.find((d) => d.id === id);
         if (def?.type === 'dateRange') {
             onFilterValuesChange({ ...filterValues, [def.fromKey]: '', [def.toKey]: '' });
@@ -391,14 +489,14 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
         else if (def?.type === 'text' ||
             def?.type === 'dropdown' ||
             def?.type === 'searchableDropdown' ||
-            def?.type === 'multiSelect') {
+            def?.type === 'multiSelect' ||
+            def?.type === 'monthPicker') {
             onFilterValuesChange({ ...filterValues, [def.filterKey]: '' });
         }
         else if (def?.type === 'date') {
             applyColFilter(def.columnKey, '');
         }
         else {
-            // Column filter — multi-select stores string[], others store string
             const colDef = availableColumns.find((c) => c.id === id);
             if (colDef?.filterType === 'multi-select') {
                 applyColMultiFilter(id, []);
@@ -408,50 +506,52 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
             }
         }
         onToggleFilter(id);
-    };
+    }, [filterValues, serverFilterDefs, availableColumns, onFilterValuesChange, onToggleFilter, applyColFilter, applyColMultiFilter]);
     return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 0.75 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.4, mr: 0.25 }, children: [jsx(FilterListIcon, { sx: { fontSize: labelFontSize + 3, color: 'text.disabled' } }), jsx(Typography, { sx: { fontSize: labelFontSize }, color: "text.secondary", fontWeight: 500, noWrap: true, children: "Filter by:" })] }), visibleFilterIds.map((id) => {
                 const def = serverFilterDefs.find((d) => d.id === id);
                 if (def?.type === 'dateRange') {
-                    return (jsx(DateRangeChip, { label: def.label, fromDate: filterValues[def.fromKey] ?? '', toDate: filterValues[def.toKey] ?? '', onApply: (from, to) => onFilterValuesChange({ ...filterValues, [def.fromKey]: from, [def.toKey]: to }), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                    return (jsx(DateRangeChip, { label: def.label, fromDate: filterValues[def.fromKey] ?? '', toDate: filterValues[def.toKey] ?? '', onApply: (from, to) => onFilterValuesChange({ ...filterValues, [def.fromKey]: from, [def.toKey]: to }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (def?.type === 'text') {
-                    return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder, chipStyle: chipStyle }, id));
+                    return (jsx(TextFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (def?.type === 'dropdown') {
-                    return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                    return (jsx(DropdownFilterChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (def?.type === 'searchableDropdown') {
-                    return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder ?? 'Search…', chipStyle: chipStyle }, id));
+                    return (jsx(SearchableSelectChip, { label: def.label, value: filterValues[def.filterKey] ?? '', options: def.options, onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), placeholder: def.placeholder ?? 'Search…', chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (def?.type === 'multiSelect') {
-                    // filterValues[key] stores comma-separated values: "Pending,Shipped"
                     const selected = (filterValues[def.filterKey] ?? '')
                         .split(',')
                         .filter(Boolean);
                     return (jsx(MultiSelectFilterChip, { label: def.label, selectedValues: selected, options: def.options, onApply: (vals) => onFilterValuesChange({
                             ...filterValues,
                             [def.filterKey]: vals.join(','),
-                        }), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                        }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                }
+                if (def?.type === 'monthPicker') {
+                    return (jsx(MonthPickerChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (def?.type === 'date') {
-                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 // Column filter chip — render the variant that matches the column's filterType
                 const col = availableColumns.find((c) => c.id === id);
                 if (!col)
                     return null;
                 if (col.filterType === 'date') {
-                    return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                    return (jsx(DatePickerChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (col.filterType === 'select' || col.filterType === 'searchable-select') {
-                    return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                    return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 if (col.filterType === 'multi-select') {
-                    return (jsx(MultiSelectFilterChip, { label: col.label, selectedValues: getColValues(id), options: col.filterOptions ?? [], onApply: (vals) => applyColMultiFilter(id, vals), onRemove: () => removeFilter(id), chipStyle: chipStyle }, id));
+                    return (jsx(MultiSelectFilterChip, { label: col.label, selectedValues: getColValues(id), options: col.filterOptions ?? [], onApply: (vals) => applyColMultiFilter(id, vals), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }
                 // Default: free-text input
-                return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}`, chipStyle: chipStyle }, id));
-            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters, chipStyle: chipStyle }), onGlobalFilterChange && (jsx(GlobalSearchInput, { value: globalFilter ?? '', onChange: onGlobalFilterChange, chipStyle: chipStyle, placeholder: globalSearchPlaceholder }))] }));
+                return (jsx(TextFilterChip, { label: col.label, value: getColValue(id), onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id), placeholder: `Filter by ${col.label}`, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter, maxVisible: maxVisibleFilters, chipStyle: chipStyle, gridId: gridId }), onGlobalFilterChange && (jsx(GlobalSearchInput, { value: globalFilter ?? '', onChange: onGlobalFilterChange, chipStyle: chipStyle, placeholder: globalSearchPlaceholder }))] }));
 };
 var DynamicFilterBar$1 = memo(DynamicFilterBar);
 

package/dist/components/PaginatedGrid/GenericPaginatedGrid.d.ts

@@ -55,8 +55,14 @@ export interface GenericPaginatedGridProps<TData extends object> {
     defaultVisibleFilterIds?: string[];
     /** Number of rows fetched per API call. Default: 10 000. */
     batchSize?: number;
-    /** CSV file name prefix. Default: "export". */
+    /** Excel (.xlsx) file name prefix (e.g. "invoice" → "invoice-page1.xlsx"). Default: "export". */
     exportFilename?: string;
+    /**
+     * ID prefix applied to every interactive element in this grid instance.
+     * Useful for automated testing and deep-linking. Defaults to `exportFilename`.
+     * Pattern: `{gridId}_refresh_icon`, `{gridId}_export_icon`, `{gridId}_status_chip`, etc.
+     */
+    gridId?: string;
     /**
      * Height of the entire grid component.
      * When omitted (default) the grid auto-sizes to fill the remaining viewport
@@ -95,7 +101,7 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Show the Global Search input expanded by default (instead of requiring a
      * click on the search icon to reveal it). The icon remains in the top-right
      * toolbar actions and can still be used to collapse/expand the input.
-     * Default: `true`.
+     * Default: `false`.
      */
     showGlobalSearchByDefault?: boolean;
     /**
@@ -103,6 +109,18 @@ export interface GenericPaginatedGridProps<TData extends object> {
      * Accepts any valid CSS colour string.
      */
     headerBgColor?: string;
+    /**
+     * Background colour for the Excel export header row.
+     * Accepts a hex colour string (`#RRGGBB`).
+     * Falls back to `headerBgColor` when omitted, then to the default blue `#1565C0`.
+     */
+    exportHeaderBgColor?: string;
+    /**
+     * Text colour for the Excel export header row.
+     * Accepts a hex colour string (`#RRGGBB`).
+     * Defaults to white (`#FFFFFF`) when omitted.
+     */
+    exportHeaderTextColor?: string;
     /**
      * Minimum height of every header cell (CSS length or px number).
      * Default: `40px` (`34px` when `uiDensity="compact"`).
@@ -192,5 +210,5 @@ export interface GenericPaginatedGridProps<TData extends object> {
      */
     enableExpanding?: boolean;
 }
-declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, showGlobalSearchByDefault, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, gridId, tableHeight, tableMinHeight, tableMaxHeight, autoFillViewport, layoutMode, uiDensity, uiDensityOptions, pageSizeOptions, showGlobalSearchByDefault, headerBgColor, exportHeaderBgColor, exportHeaderTextColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;