tp-react-elements 2.0.2 → 2.0.4

package/README.md

@@ -202,8 +202,14 @@ npm run storybook
 ```
 
 - **Docs → Paginated Grid** — API reference plus **four copy-paste examples** (embedded panel, wrapped headers, typography, invoice filters)
-- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap, compact layout, viewport fill
-- **Components → PaginatedGrid → Example Grid** — live invoice API demo
+- **Components → PaginatedGrid → Sample Grids** — mock grids (no API): header wrap, compact layout, viewport fill, multi-select with Apply button, month picker
+- **Components → PaginatedGrid → Example Grid** — invoice grid demo using mock data (no API)
+
+**Global Search:** every `GenericPaginatedGrid` includes a built-in search icon in the top-right toolbar — **collapsed by default** (set `showGlobalSearchByDefault={true}` to start expanded). Click the icon to expand a free-text search that filters across all visible columns of the current batch. See **Docs → Paginated Grid → Global search**.
+
+**Excel export:** the Export button downloads an `.xlsx` file with the header row styled in `headerBgColor` (bold white text) and columns auto-sized to fit content. Requires `xlsx-js-style` as a peer dependency.
+
+**Element IDs:** every interactive element (toolbar buttons, filter chips, pagination controls) receives a stable `id` attribute. Pass `gridId="invoice"` (or omit to default to `exportFilename`) and all elements follow the pattern `{gridId}_refresh_icon`, `{gridId}_dateRange_chip`, `{gridId}_next_page_icon`, etc. See **Docs → Paginated Grid — Element IDs** in Storybook for the full reference table.
 
 **Example — compact embedded grid with smaller fonts:**
 

package/dist/_virtual/index.esm5.js

@@ -1,3 +1,3 @@
-var Calendar = {};
+var DefinedRange = {};
 
-export { Calendar as __exports };
+export { DefinedRange as __exports };

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var Calendar = {};
 
-export { DateRangePicker as __exports };
+export { Calendar as __exports };

package/dist/_virtual/index.esm7.js

@@ -1,3 +1,3 @@
-var DefinedRange = {};
+var DateRangePicker = {};
 
-export { DefinedRange as __exports };
+export { DateRangePicker as __exports };

package/dist/components/FormComponents/Select/MultiSelect.d.ts

@@ -1,2 +1,12 @@
+/**
+ * `MultiSelect` is currently a stub placeholder pending activation.
+ *
+ * Use one of these fully-implemented alternatives instead:
+ * - `MultiSelectAutocomplete` (react-hook-form aware) — Docs → Multi Select Autocomplete
+ * - `MultiSelectField` (standalone) — Docs → Multi Select Field
+ * - `MultiSelectV1` (react-hook-form aware, used via FormRender `inputType: 'multiselect'`)
+ *
+ * See Docs → Multi Select (docs/multi-select.mdx) for status details.
+ */
 declare const MultiSelect: () => import("react/jsx-runtime").JSX.Element;
 export default MultiSelect;

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

@@ -96,6 +96,19 @@ export type ServerFilterDef = {
     }[];
     /** Show this chip in the filter bar on first render. Default: `false`. */
     defaultVisible?: boolean;
+} | {
+    /**
+     * Month-picker chip — lets users select **one or more months** across years.
+     * Selected months are stored as a comma-separated string of `"YYYY-MM"` values
+     * in `filterValues[filterKey]` (e.g. `"2025-01,2025-03"`).
+     * Split on `","` in your `fetchPage` handler to build the server query.
+     */
+    type: 'monthPicker';
+    id: string;
+    label: string;
+    filterKey: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 };
 interface AvailableColumn {
     id: string;
@@ -127,6 +140,18 @@ export interface DynamicFilterBarProps {
     filterChipFontSize?: number;
     filterChipMinHeight?: number;
     filterLabelFontSize?: number;
+    /**
+     * Current value of MRT's global filter (free-text search across every
+     * visible column). When provided together with `onGlobalFilterChange`, a
+     * search box is rendered next to "Manage Filters".
+     */
+    globalFilter?: string;
+    /** Called (debounced) as the user types in the global search box. */
+    onGlobalFilterChange?: (value: string) => void;
+    /** Placeholder text for the global search box. Default: "Search…". */
+    globalSearchPlaceholder?: string;
+    /** ID prefix for all interactive elements — passed down to chips and ManageFilters. */
+    gridId?: string;
 }
-declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
-export default DynamicFilterBar;
+declare const _default: import("react").MemoExoticComponent<({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, maxVisibleFilters, uiDensity, filterChipFontSize, filterChipMinHeight, filterLabelFontSize, globalFilter, onGlobalFilterChange, globalSearchPlaceholder, gridId, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

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

@@ -1,5 +1,5 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -9,7 +9,7 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
-import { Box, Typography, Tooltip, Button, Popover, TextField, Stack, InputAdornment, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
+import { TextField, InputAdornment, IconButton, Box, Typography, Tooltip, Button, Popover, Stack, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import TuneIcon from '@mui/icons-material/Tune';
 import CloseIcon from '@mui/icons-material/Close';
@@ -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,20 +280,137 @@ 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" }) })] })] }));
 };
-const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, }) => {
+// ─── 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);
+    // Keep local draft in sync when the external value changes elsewhere
+    // (e.g. "Clear filters & refresh" resets globalFilter to '').
+    useEffect(() => {
+        setDraft(value);
+    }, [value]);
+    // Debounce: push to parent (and trigger MRT's global filter) 250ms after typing stops.
+    useEffect(() => {
+        if (draft === value)
+            return;
+        const handle = setTimeout(() => onChange(draft), 250);
+        return () => clearTimeout(handle);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draft]);
+    const handleClear = () => {
+        setDraft('');
+        onChange('');
+    };
+    return (jsx(TextField, { value: draft, onChange: (e) => setDraft(e.target.value), placeholder: placeholder, size: "small", variant: "outlined", "aria-label": "Search all columns", InputProps: {
+            startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, { sx: { fontSize: 16, color: 'text.disabled' } }) })),
+            endAdornment: draft ? (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { size: "small", onClick: handleClear, "aria-label": "Clear search", sx: { p: 0.25 }, children: jsx(CloseIcon, { sx: { fontSize: '14px !important' } }) }) })) : undefined,
+        }, sx: {
+            minWidth: 160,
+            maxWidth: 220,
+            flexShrink: 0,
+            '& .MuiOutlinedInput-root': {
+                borderRadius: 5,
+                fontSize: chipStyle.fontSize,
+                height: chipStyle.minHeight,
+            },
+            '& .MuiOutlinedInput-input': { py: 0 },
+        } }));
+});
+GlobalSearchInput.displayName = 'GlobalSearchInput';
+const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, maxVisible = 4, chipStyle, gridId, }) => {
     const [anchor, setAnchor] = useState(null);
     const atLimit = visibleIds.length >= maxVisible;
     // Shared pill box renderer
@@ -296,7 +425,7 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
             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,
@@ -327,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, }) => {
+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),
@@ -356,7 +485,8 @@ 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') {
@@ -377,46 +507,49 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
     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 })] }));
+                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);
 
-export { DynamicFilterBar as default };
+export { DynamicFilterBar$1 as default };

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
@@ -91,6 +97,13 @@ export interface GenericPaginatedGridProps<TData extends object> {
     uiDensityOptions?: GridUiDensityOptions;
     /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
     pageSizeOptions?: number[];
+    /**
+     * 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: `false`.
+     */
+    showGlobalSearchByDefault?: boolean;
     /**
      * Background colour applied to every header cell.
      * Accepts any valid CSS colour string.
@@ -185,5 +198,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, 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, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
 export default GenericPaginatedGrid;

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

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useLayoutEffect } from 'react';
-import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
+import { useMemo, useState, useRef, useLayoutEffect, useCallback } from 'react';
+import * as XLSX from 'xlsx-js-style';
+import { useMaterialReactTable, MRT_ToggleGlobalFilterButton, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFullScreenButton, MaterialReactTable } from 'material-react-table';
 import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { Box, Tooltip, IconButton, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
@@ -52,6 +53,8 @@ const buildBodyGlobalStyles = (bodyFont) => ({
     '.tp-gpg-root .MuiTableBody-root .MuiTableCell-root': {
         fontSize: `${bodyFont} !important`,
         lineHeight: 1.35,
+        borderRight: '1px solid rgba(224,224,224,1)',
+        userSelect: 'text',
     },
 });
 const buildHeaderGlobalStyles = (headerMin, headerMax, headerFont, headerBgColor) => {
@@ -191,7 +194,7 @@ const OverlayLoader = ({ message }) => (jsxs(Box, { sx: {
         bgcolor: 'rgba(255,255,255,0.80)', backdropFilter: 'blur(2px)',
         zIndex: 10, gap: 1.5,
     }, children: [jsx(CircularProgress, { size: 50, thickness: 4 }), jsx(Typography, { variant: "body2", color: "text.secondary", fontWeight: 500, children: message })] }));
-const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, }) => {
+const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoading, canPrev, canNext, onFirst, onPrev, onNext, onLast, onPageSizeChange, pageSizeOptions, density, gridId, }) => {
     const fs = density.footerFontSize;
     const selectH = density.footerMinHeight - 8;
     const startRow = totalRecords === 0 ? 0 : pageIndex * pageSize + 1;
@@ -203,7 +206,7 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
             bgcolor: 'background.paper', flexWrap: 'wrap',
             minHeight: density.footerMinHeight,
             flexShrink: 0,
-        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.75 }, children: [jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), size: "small", variant: "outlined", sx: {
+        }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.75 }, children: [jsx(Typography, { sx: { fontSize: fs }, color: "text.secondary", noWrap: true, children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (e) => onPageSizeChange(Number(e.target.value)), inputProps: { id: `${gridId}_page_size_select` }, size: "small", variant: "outlined", sx: {
                             height: selectH, fontSize: fs - 1, minWidth: 72,
                             '.MuiSelect-select': { py: '2px !important' },
                             '.MuiOutlinedInput-notchedOutline': { borderColor: 'divider' },
@@ -211,18 +214,19 @@ const PaginationFooter = ({ pageIndex, pageSize, totalRecords, isFetching, isLoa
                     ? 'Loading…'
                     : totalRecords === 0
                         ? 'No records'
-                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
+                        : `${startRow.toLocaleString()}–${endRow.toLocaleString()} of ${totalRecords.toLocaleString()}` }), jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.25 }, children: [jsx(Tooltip, { title: "First page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_first_page_icon`, size: "small", onClick: onFirst, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(FirstPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Previous page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_prev_page_icon`, size: "small", onClick: onPrev, disabled: !canPrev, sx: { p: 0.5 }, children: jsx(ChevronLeftIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Typography, { fontWeight: 600, sx: {
                             mx: 0.5,
                             minWidth: density.footerMinHeight - 12,
                             height: density.footerMinHeight - 12,
                             display: 'flex', alignItems: 'center', justifyContent: 'center',
                             borderRadius: 1, border: '1px solid', borderColor: 'primary.main',
                             color: 'primary.main', bgcolor: 'rgba(25,118,210,0.07)', fontSize: fs - 1,
-                        }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
+                        }, children: pageIndex + 1 }), jsx(Tooltip, { title: "Next page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_next_page_icon`, size: "small", onClick: onNext, disabled: !canNext, sx: { p: 0.5 }, children: jsx(ChevronRightIcon, { sx: { fontSize: density.footerIconSize } }) }) }) }), jsx(Tooltip, { title: "Last page", children: jsx("span", { children: jsx(IconButton, { id: `${gridId}_last_page_icon`, size: "small", onClick: onLast, disabled: !canNext, sx: { p: 0.5 }, children: jsx(LastPageIcon, { sx: { fontSize: density.footerIconSize } }) }) }) })] })] }));
 };
 // ─── GenericPaginatedGrid ─────────────────────────────────────────────────────
-function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
+function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize = 10000, exportFilename = 'export', gridId, tableHeight, tableMinHeight = '300px', tableMaxHeight, autoFillViewport = true, layoutMode = 'grid', uiDensity = 'default', uiDensityOptions, pageSizeOptions = [1000, 5000, 10000], showGlobalSearchByDefault = false, headerBgColor, headerMinHeight, headerMaxHeight, headerMaxLines, headerFontSize, bodyFontSize, maxVisibleFilters = 4, muiTableBodyCellProps: gridBodyCellProps, muiTableHeadCellProps: gridHeadCellProps, renderDetailPanel, enableExpanding = !!renderDetailPanel, }) {
     const densityTokens = useMemo(() => ({ ...UI_DENSITY_PRESETS[uiDensity], ...uiDensityOptions }), [uiDensity, uiDensityOptions]);
+    const resolvedGridId = gridId ?? exportFilename;
     const resolvedHeaderMinHeight = toCssSize(headerMinHeight, uiDensity === 'compact' ? '34px' : '40px');
     const resolvedHeaderMaxHeight = toCssSize(headerMaxHeight, uiDensity === 'compact' ? '56px' : '72px');
     const resolvedHeaderFontSize = toCssSize(headerFontSize ?? densityTokens.headerFontSize, uiDensity === 'compact' ? '11px' : '12px');
@@ -241,7 +245,11 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     //  1. explicit defaultVisibleFilterIds prop (override)
     //  2. server filters + column filters that have defaultVisible: true
     //  3. first server filter only (original fallback)
-    const defaultVisible = defaultVisibleFilterIds
+    //
+    // Memoized so identity stays stable across re-renders (e.g. while
+    // `isFetching` toggles) — used as a `useCallback` dependency below and as
+    // the reset target for "Clear All".
+    const defaultVisible = useMemo(() => defaultVisibleFilterIds
         ?? (() => {
             // Server-side chips with defaultVisible: true
             const markedServer = serverFilterDefs
@@ -266,7 +274,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
             return marked.length > 0
                 ? marked
                 : serverFilterDefs.length > 0 ? [serverFilterDefs[0].id] : [];
-        })();
+        })(), [defaultVisibleFilterIds, serverFilterDefs, columns]);
     // ── State ──────────────────────────────────────────────────────────────────
     const [filterValues, setFilterValues] = useState(defaultFilters);
     const [visibleFilterIds, setVisibleFilterIds] = useState(defaultVisible);
@@ -382,40 +390,64 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         }));
     }, [columns, serverFilterDefs]);
     // ── Handlers ───────────────────────────────────────────────────────────────
-    const handleFilterValuesChange = (newValues) => {
+    // Wrapped in useCallback so stable references can be passed down to the
+    // memoized DynamicFilterBar/chip components without forcing re-renders on
+    // every parent render (e.g. while `isFetching` toggles).
+    const handleFilterValuesChange = useCallback((newValues) => {
         setFilterValues(newValues);
         setPagination((p) => ({ ...p, pageIndex: 0 }));
-    };
-    const handleToggleFilter = (id) => setVisibleFilterIds((prev) => {
+    }, []);
+    const handleToggleFilter = useCallback((id) => setVisibleFilterIds((prev) => {
         if (prev.includes(id))
             return prev.filter((v) => v !== id); // always allow remove
         if (prev.length >= maxVisibleFilters)
             return prev; // cap reached — ignore add
         return [...prev, id];
-    });
-    const handleClearAll = () => {
+    }), [maxVisibleFilters]);
+    const handleClearAll = useCallback(() => {
         setFilterValues(defaultFilters);
         setColumnFilters([]);
         setVisibleFilterIds(defaultVisible);
+        setGlobalFilter('');
         setPagination((p) => ({ ...p, pageIndex: 0 }));
-    };
-    const handleExport = () => {
-        const headers = columns.map((c) => c.header).join(',');
-        const csvRows = rows.map((row) => columns
-            .map((c) => {
-            const key = c.accessorKey ?? '';
-            const val = row[key] ?? '';
-            return `"${String(val).replace(/"/g, '""')}"`;
-        })
-            .join(','));
-        const blob = new Blob([[headers, ...csvRows].join('\n')], { type: 'text/csv' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `${exportFilename}-page${pagination.pageIndex + 1}.csv`;
-        a.click();
-        URL.revokeObjectURL(url);
-    };
+    }, [defaultFilters, defaultVisible]);
+    const handleExport = useCallback(() => {
+        const dataCols = columns.filter((c) => 'accessorKey' in c && c.accessorKey);
+        // xlsx-js-style requires 8-char ARGB (AA + RRGGBB). Prepend full-opacity "FF".
+        const headerArgb = headerBgColor?.startsWith('#')
+            ? 'FF' + headerBgColor.slice(1).toUpperCase().padEnd(6, '0')
+            : 'FF1565C0';
+        const headerRow = dataCols.map((c) => c.header ?? '');
+        const dataRows = rows.map((row) => dataCols.map((c) => String(row[c.accessorKey] ?? '')));
+        const ws = XLSX.utils.aoa_to_sheet([headerRow, ...dataRows]);
+        // Style header row
+        dataCols.forEach((_, colIdx) => {
+            const cellRef = XLSX.utils.encode_cell({ r: 0, c: colIdx });
+            if (ws[cellRef]) {
+                ws[cellRef].s = {
+                    fill: { patternType: 'solid', fgColor: { rgb: headerArgb } },
+                    font: { bold: true, color: { rgb: 'FFFFFFFF' }, sz: 10 },
+                    alignment: { horizontal: 'center', vertical: 'center', wrapText: true },
+                    border: {
+                        bottom: { style: 'thin', color: { rgb: 'FFCCCCCC' } },
+                        right: { style: 'thin', color: { rgb: 'FFCCCCCC' } },
+                    },
+                };
+            }
+        });
+        // Auto-fit column widths based on header + data content length
+        ws['!cols'] = dataCols.map((c) => {
+            const headerLen = (c.header ?? '').length;
+            const maxDataLen = rows.reduce((max, row) => {
+                const val = String(row[c.accessorKey] ?? '');
+                return Math.max(max, val.length);
+            }, 0);
+            return { wch: Math.max(headerLen, maxDataLen, 8) + 2 };
+        });
+        const wb = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(wb, ws, 'Data');
+        XLSX.writeFile(wb, `${exportFilename}-page${pagination.pageIndex + 1}.xlsx`);
+    }, [columns, rows, exportFilename, pagination.pageIndex, headerBgColor]);
     // ── Table instance ─────────────────────────────────────────────────────────
     const table = useMaterialReactTable({
         columns: processedColumns,
@@ -484,7 +516,15 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         columnResizeMode: 'onChange',
         enableExpanding,
         renderDetailPanel,
-        enableFilters: false,
+        // Note: `enableFilters` is the master switch for column AND global
+        // filtering. Keep it enabled so the Global Search box (which relies on
+        // `getCanGlobalFilter()`) actually filters rows. MRT's native per-column
+        // filter inputs are hidden separately via `enableColumnFilters: false` —
+        // column-level filtering still works because DynamicFilterBar's chips
+        // operate on `columnFilters` state directly (column.getFilterFn() is
+        // used regardless of this flag).
+        enableFilters: true,
+        enableColumnFilters: false,
         enableGlobalFilter: true,
         enableDensityToggle: true,
         enableFullScreenToggle: true,
@@ -493,6 +533,7 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         enableRowVirtualization: true,
         initialState: {
             density: densityTokens.mrtDensity,
+            showGlobalFilter: showGlobalSearchByDefault,
         },
         muiTableProps: {
             sx: { width: '100%' },
@@ -525,6 +566,27 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 '& .MuiIconButton-root svg': { fontSize: densityTokens.toolbarIconFontSize === 'small' ? 18 : 20 },
             },
         },
+        // Align the Global Search field's icon/size with the other toolbar
+        // icons (Show/Hide Columns, Density, Fullscreen) so it blends in
+        // instead of appearing oversized.
+        muiSearchTextFieldProps: {
+            size: 'small',
+            variant: 'outlined',
+            sx: {
+                minWidth: uiDensity === 'compact' ? 160 : 200,
+                '& .MuiOutlinedInput-root': {
+                    height: densityTokens.filterChipMinHeight,
+                    fontSize: densityTokens.filterChipFontSize,
+                },
+                // The leading search icon is rendered as a plain <SearchIcon />
+                // direct child of the input (not inside an IconButton), so size it
+                // to match the other top-toolbar action icons. The trailing clear
+                // (×) icon is inside an IconButton/InputAdornment.
+                '& .MuiOutlinedInput-root > .MuiSvgIcon-root, & .MuiInputAdornment-root .MuiSvgIcon-root': {
+                    fontSize: densityTokens.toolbarIconFontSize === 'small' ? 18 : 20,
+                },
+            },
+        },
         muiTableHeadProps: {
             sx: {
                 position: 'sticky',
@@ -598,10 +660,15 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
         muiToolbarAlertBannerProps: isError
             ? { color: 'error', children: 'Failed to load data. Please try again.' }
             : undefined,
-        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: "Export batch as CSV", children: jsx("span", { children: jsx(IconButton, { size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters, uiDensity: uiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize }) })] })),
-        renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens })),
+        renderTopToolbarCustomActions: () => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flex: 1, minWidth: 0, pr: 1, gap: 0.5 }, children: [jsxs(Box, { sx: { display: 'flex', alignItems: 'center', flexShrink: 0, gap: 0.25 }, children: [jsx(Tooltip, { title: "Clear filters & refresh", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_refresh_icon`, size: "small", onClick: () => { handleClearAll(); refetch(); }, disabled: isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(RefreshIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) }), jsx(Tooltip, { title: "Export batch as Excel (.xlsx)", children: jsx("span", { children: jsx(IconButton, { id: `${resolvedGridId}_export_icon`, size: "small", onClick: handleExport, disabled: rows.length === 0 || isFetching, sx: { p: uiDensity === 'compact' ? 0.35 : 0.5 }, children: jsx(FileDownloadIcon, { sx: { fontSize: uiDensity === 'compact' ? 18 : 20 } }) }) }) })] }), jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: jsx(DynamicFilterBar, { serverFilterDefs: serverFilterDefs, visibleFilterIds: visibleFilterIds, onToggleFilter: handleToggleFilter, filterValues: filterValues, onFilterValuesChange: handleFilterValuesChange, columnFilters: columnFilters, onColumnFilterChange: setColumnFilters, availableColumns: availableColumns, maxVisibleFilters: maxVisibleFilters, uiDensity: uiDensity, filterChipFontSize: densityTokens.filterChipFontSize, filterChipMinHeight: densityTokens.filterChipMinHeight, filterLabelFontSize: densityTokens.filterLabelFontSize, gridId: resolvedGridId }) })] })),
+        // Single global search control: MRT's built-in search icon/input in the
+        // top-right toolbar actions. The inline search box next to "Manage
+        // Filters" is intentionally not rendered (see renderTopToolbarCustomActions)
+        // to avoid showing two search controls.
+        renderToolbarInternalActions: ({ table: t }) => (jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 0.5 }, children: [jsx(MRT_ToggleGlobalFilterButton, { table: t, id: `${resolvedGridId}_global_search_icon` }), jsx(MRT_ShowHideColumnsButton, { table: t, id: `${resolvedGridId}_columns_icon` }), jsx(MRT_ToggleDensePaddingButton, { table: t, id: `${resolvedGridId}_density_icon` }), jsx(MRT_ToggleFullScreenButton, { table: t, id: `${resolvedGridId}_fullscreen_icon` })] })),
+        renderBottomToolbar: ({ table: t }) => (jsx(PaginationFooter, { pageIndex: t.getState().pagination.pageIndex, pageSize: t.getState().pagination.pageSize, totalRecords: totalRecords, isFetching: isFetching, isLoading: isLoading, canPrev: t.getCanPreviousPage() && !isFetching, canNext: t.getCanNextPage() && !isFetching, onFirst: () => t.firstPage(), onPrev: () => t.previousPage(), onNext: () => t.nextPage(), onLast: () => t.lastPage(), onPageSizeChange: (s) => t.setPageSize(s), pageSizeOptions: pageSizeOptions, density: densityTokens, gridId: resolvedGridId })),
     });
-    return (jsxs(Box, { ref: containerRef, className: "tp-gpg-root", sx: {
+    return (jsxs(Box, { ref: containerRef, id: resolvedGridId, className: "tp-gpg-root", sx: {
             position: 'relative',
             height: resolvedHeight,
             minHeight: tableMinHeight,

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

@@ -1,7 +1,7 @@
 /**
  * Mock data + fetch adapters for Storybook sample grids (no API required).
  */
-import type { TPColumnDef } from './types';
+import type { TPColumnDef, InvoiceDetail } from './types';
 import type { PagedResult } from './GenericPaginatedGrid';
 import type { ServerFilterDef } from './DynamicFilterBar';
 export interface EmployeeRow {
@@ -54,6 +54,14 @@ export declare const orderColumns: TPColumnDef<OrderRow>[];
 export declare const orderFilterDefs: ServerFilterDef[];
 export declare const orderDefaultFilters: Record<string, string>;
 export declare function fetchOrderPage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<OrderRow>>;
+/**
+ * Mock `fetchPage` adapter for `InvoiceGrid` — pure in-memory data, no API
+ * calls. Filters the `ALL_INVOICES` array using the same filter keys
+ * (`FromDate`, `ToDate`, `Division`, `Customer`, `DC`, `ProductCode`) that the
+ * server filter chips already produce, so `InvoiceGrid.tsx` and its Storybook
+ * stories work unchanged.
+ */
+export declare function fetchInvoicePage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<InvoiceDetail>>;
 export interface OrderLineItem {
     itemId: number;
     productCode: string;

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

@@ -107,20 +107,3 @@ export interface InvoiceDetail {
     changeddate: string;
     SHIP_TO_PARTY: string;
 }
-export interface InvoiceRequest {
-    FromDate: string;
-    ToDate: string;
-    Division: string;
-    Customer: string;
-    DC: string;
-    ProductCode: string;
-    PageNumber: number;
-}
-export interface InvoiceApiResponse {
-    PageNumber: number;
-    PageSize: number;
-    TotalRecords: number;
-    TotalPages: number;
-    HasNextPage: boolean;
-    Data: InvoiceDetail[];
-}

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm5.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DefinedRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",

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

@@ -1,2 +0,0 @@
-import type { InvoiceRequest, InvoiceApiResponse } from './types';
-export declare const fetchInvoiceDetails: (request: InvoiceRequest) => Promise<InvoiceApiResponse>;