tp-react-elements 1.3.1 → 1.3.3

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.js

@@ -1,3 +1,3 @@
-var DateRangePicker = {};
+var DefinedRange = {};
 
-export { DateRangePicker as __exports };
+export { DefinedRange 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/DateRangePicker/DateRangePicker.d.ts

@@ -1,7 +1,4 @@
-import 'react-date-range/dist/styles.css';
-import 'react-date-range/dist/theme/default.css';
 import { FormRenderProps, VariantProps } from '../../utils';
-import './DateRangePicker.scss';
 declare const DateRangePickerComponent: ({ item, control, watch, setValue, getValues, clearErrors, errors, register, variant, ...rest }: FormRenderProps & {
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DateRangePicker/DateRangePicker.esm.js

@@ -2,6 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { Controller } from 'react-hook-form';
 import { d as distExports } from '../../_virtual/index.esm.js';
+import { useRdrStyles } from '../../utils/rdrStyles.esm.js';
 import dayjs from 'dayjs';
 import { renderLabel } from '../../utils/Constants/FormConstants.esm.js';
 import FormBottomField from '../FormComponents/FormBottomField/FormBottomField.esm.js';
@@ -11,6 +12,9 @@ import { parse } from '../../node_modules/date-fns/parse.esm.js';
 import { isValid } from '../../node_modules/date-fns/isValid.esm.js';
 
 const DateRangePickerComponent = ({ item, control, watch, setValue, getValues, clearErrors, errors, register, variant, ...rest }) => {
+    // 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();
     // Using a generic type for anchorEl to avoid environment-specific linting issues.
     // eslint-disable-next-line react/prop-types
     const [anchorEl, setAnchorEl] = useState(null);

package/dist/components/Form/FormRender.esm.js

@@ -11,6 +11,7 @@ import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js'
 import SingleSelect from '../FormComponents/Select/SingleSelect.esm.js';
 import MultiSelectAutocomplete from '../FormComponents/Select/MultiSelectAutocomplete.esm.js';
 import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
+import SearchableSelect from '../FormComponents/Select/SearchableSelect.esm.js';
 import FormActiveSwitch from './FormActiveSwitch.esm.js';
 import FormTextFieldWithSelect from '../FormComponents/FormTextFieldWithSelect/FormTextFieldWithSelect.esm.js';
 import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js';
@@ -92,6 +93,9 @@ const RenderForm = (props) => {
         case 'select-v2':
         case 'basic-select': // new alias
             return jsx(SingleSelectNonAutoComplete, { props: props, variant: variant });
+        // Searchable select — read-only TextField trigger + search-filtered Popover
+        case 'searchable-select':
+            return jsx(SearchableSelect, { props: props, variant: variant });
         case 'input-select':
             return jsx(FormTextFieldWithSelect, { props: props, variant: variant });
         // Numeric inputs (integer, pincode, phone)

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

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const SearchableSelect: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SearchableSelect;

package/dist/components/FormComponents/Select/SearchableSelect.esm.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { FormControl, Box, TextField, InputAdornment, Popover, List, Typography, ListItemButton, ListItemText } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import CheckIcon from '@mui/icons-material/Check';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const SearchableSelect = ({ props, variant, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [search, setSearch] = useState('');
+    const value = useWatch({ control: props.control, name: props.item.name });
+    const isError = !!props.errors?.[props.item.name];
+    const options = props.item.options ?? [];
+    // Find the label that corresponds to the currently selected value
+    const selectedOption = options.find((o) => String(o.value) === String(value ?? ''));
+    const displayValue = selectedOption ? String(selectedOption.label) : '';
+    const handleOpen = (e) => {
+        if (props.item.disable)
+            return;
+        setSearch('');
+        setAnchorEl(e.currentTarget);
+    };
+    const handleClose = () => setAnchorEl(null);
+    const handleSelect = (val) => {
+        props.setValue(props.item.name, val);
+        props.item.onChangeFn && props.item.onChangeFn(val);
+        props.clearErrors && props.clearErrors(props.item.name);
+        handleClose();
+    };
+    // Case-insensitive substring filter across option labels
+    const filtered = search
+        ? options.filter((o) => String(o.label).toLowerCase().includes(search.toLowerCase()))
+        : options;
+    // Label shown inside the MUI TextField (suppressed in 'standard' variant)
+    const muiLabel = variant !== 'standard'
+        ? `${props.item.label}${props.item.required ? ' *' : ''}`
+        : '';
+    return (jsxs(FormControl, { fullWidth: true, sx: { position: 'relative' }, disabled: props.item.disable, children: [renderLabel(variant, props), jsx(Box, { onClick: handleOpen, sx: { cursor: props.item.disable ? 'default' : 'pointer' }, children: jsx(TextField, { fullWidth: true, value: displayValue, label: muiLabel, placeholder: props.item.placeholder || 'Select…', error: isError, size: "small", InputProps: {
+                        readOnly: true,
+                        endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(SearchIcon, { sx: { fontSize: 16, color: 'text.disabled' } }) })),
+                        sx: { cursor: 'inherit' },
+                    }, inputProps: {
+                        'aria-labelledby': `${props.item.name}-label`,
+                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                        'aria-required': props.item.required ? true : undefined,
+                        style: { cursor: 'inherit' },
+                    }, sx: {
+                        '& .MuiFormLabel-root': { top: -10 },
+                        '& .MuiInputLabel-shrink': { top: 0 },
+                    } }) }), jsxs(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: {
+                    sx: {
+                        mt: 0.5,
+                        borderRadius: 2,
+                        boxShadow: 6,
+                        // Match the width of the trigger field
+                        width: anchorEl?.offsetWidth ?? 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: "Search\u2026", value: search, onChange: (e) => setSearch(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Escape')
+                                    handleClose();
+                            }, InputProps: {
+                                startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, { sx: { fontSize: 16, color: 'text.disabled' } }) })),
+                            }, sx: { '& .MuiOutlinedInput-root': { borderRadius: 2, fontSize: 13 } } }) }), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 260, overflowY: 'auto', pb: 0.75 }, children: filtered.length === 0 ? (jsx(Box, { sx: { px: 2, py: 1.5 }, children: jsxs(Typography, { variant: "caption", color: "text.disabled", children: ["No options match \"", search, "\""] }) })) : (filtered.map((opt) => {
+                            const isSelected = String(value ?? '') === String(opt.value);
+                            return (jsxs(ListItemButton, { onClick: () => handleSelect(opt.value), selected: isSelected, disabled: opt.disable, sx: { px: 2, py: 0.5 }, children: [jsx(ListItemText, { primary: String(opt.label), primaryTypographyProps: {
+                                            fontSize: 13,
+                                            color: isSelected ? 'primary.main' : 'text.primary',
+                                            fontWeight: isSelected ? 600 : 400,
+                                        } }), isSelected && (jsx(CheckIcon, { sx: { fontSize: 15, color: 'primary.main', flexShrink: 0 } }))] }, String(opt.value)));
+                        })) })] }), jsx(FormBottomField, { ...props })] }, props.item.name));
+};
+
+export { SearchableSelect as default };

package/dist/components/FormComponents/index.d.ts

@@ -8,6 +8,7 @@ export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNon
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1';
 export { default as MultiSelectTable } from './Select/MultiSelectTable';
+export { default as SearchableSelect } from './Select/SearchableSelect';
 export { FormCheckBoxGroup } from '../CheckBoxGroup';
 export { FormRadioGroup } from '../RadioGroup';
 export { DatepickerWrapperV2, Monthpickerrender, YearPickerField, } from '../DatePicker';

package/dist/components/FormComponents/index.esm.js

@@ -9,6 +9,7 @@ export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNon
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi.esm.js';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1.esm.js';
 export { default as MultiSelectTable } from './Select/MultiSelectTable.esm.js';
+export { default as SearchableSelect } from './Select/SearchableSelect.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
 export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';

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

@@ -0,0 +1,85 @@
+import type { MRT_ColumnFiltersState } from 'material-react-table';
+/**
+ * Describes one server-side filter chip.
+ *
+ * - `dateRange`          — two-date popover. `fromKey` / `toKey` map to `filterValues`.
+ * - `text`               — single text-input popover. `filterKey` maps to `filterValues`.
+ * - `dropdown`           — single-select popover with a fixed list of `options`.
+ *                          `filterKey` maps to `filterValues`.
+ * - `searchableDropdown` — like `dropdown` but the popover has a search box so users can
+ *                          quickly filter long option lists. Same `filterKey` / `options`
+ *                          shape as `dropdown`.
+ * - `date`               — single date-picker chip. Applied client-side via MRT `columnFilters`.
+ */
+export type ServerFilterDef = {
+    type: 'dateRange';
+    id: string;
+    label: string;
+    fromKey: string;
+    toKey: string;
+} | {
+    type: 'text';
+    id: string;
+    label: string;
+    filterKey: string;
+    placeholder?: string;
+} | {
+    type: 'dropdown';
+    id: string;
+    label: string;
+    filterKey: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+} | {
+    /**
+     * Like `dropdown` but adds a search input at the top of the popover so users
+     * can filter through long option lists by typing.
+     */
+    type: 'searchableDropdown';
+    id: string;
+    label: string;
+    filterKey: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    placeholder?: string;
+} | {
+    /**
+     * Single-date picker chip — applied client-side against the MRT column
+     * whose `accessorKey` matches `columnKey`.
+     */
+    type: 'date';
+    id: string;
+    label: string;
+    columnKey: string;
+};
+interface AvailableColumn {
+    id: string;
+    label: string;
+    /**
+     * Filter chip variant used in the "Column Filters" section of Manage Filters.
+     * Mirrors the `meta.filterType` declared on the column definition.
+     * Defaults to `'text'` when omitted.
+     */
+    filterType?: 'text' | 'date' | 'searchableDropdown';
+    /** Options for the `'searchableDropdown'` chip variant. */
+    filterOptions?: {
+        label: string;
+        value: string;
+    }[];
+}
+export interface DynamicFilterBarProps {
+    serverFilterDefs: ServerFilterDef[];
+    visibleFilterIds: string[];
+    onToggleFilter: (id: string) => void;
+    filterValues: Record<string, string>;
+    onFilterValuesChange: (values: Record<string, string>) => void;
+    columnFilters: MRT_ColumnFiltersState;
+    onColumnFilterChange: (f: MRT_ColumnFiltersState) => void;
+    availableColumns: AvailableColumn[];
+}
+declare const DynamicFilterBar: ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, }: DynamicFilterBarProps) => import("react/jsx-runtime").JSX.Element;
+export default DynamicFilterBar;

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

@@ -0,0 +1,324 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { d as distExports } from '../../_virtual/index.esm.js';
+import { useRdrStyles } from '../../utils/rdrStyles.esm.js';
+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, Button, Popover, TextField, Stack, InputAdornment, List, ListItemButton, ListItemText, Tooltip, 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';
+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';
+
+// Enable strict-format parsing so dayjs can handle the DD/MM/YYYY strings
+// that DatepickerWrapperV2 passes to onChangeFn
+dayjs.extend(customParseFormat);
+// ─── Type pill metadata ───────────────────────────────────────────────────────
+const TYPE_PILL = {
+    dateRange: { label: 'Range', color: '#1565c0', bg: '#e3f2fd' },
+    date: { label: 'Date', color: '#00695c', bg: '#e0f2f1' },
+    text: { label: 'Text', color: '#2e7d32', bg: '#e8f5e9' },
+    dropdown: { label: 'Select', color: '#6a1b9a', bg: '#f3e5f5' },
+    searchableDropdown: { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
+};
+// ─── Chip shared style ────────────────────────────────────────────────────────
+const chipSx = (active) => ({
+    borderRadius: 5,
+    textTransform: 'none',
+    fontSize: 12,
+    fontWeight: active ? 600 : 400,
+    borderColor: active ? 'primary.main' : 'divider',
+    color: active ? 'primary.main' : 'text.secondary',
+    bgcolor: active ? 'rgba(25,118,210,0.08)' : 'transparent',
+    whiteSpace: 'nowrap',
+    px: 1.5,
+    minHeight: 30,
+    '&:hover': { borderColor: 'primary.main', bgcolor: 'rgba(25,118,210,0.08)' },
+});
+// ─── Date helper ──────────────────────────────────────────────────────────────
+const fmtDate = (iso) => {
+    if (!iso)
+        return '';
+    const [y, m, d] = iso.split('-');
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const thisYear = new Date().getFullYear().toString();
+    const yearSuffix = y !== thisYear ? ` '${y.slice(2)}` : '';
+    return `${Number(d)} ${months[Number(m) - 1]}${yearSuffix}`;
+};
+const DateRangeChip = ({ label, fromDate, toDate, onApply, onRemove }) => {
+    // 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();
+    const [anchor, setAnchor] = useState(null);
+    const active = Boolean(fromDate || toDate);
+    const chipLabel = active ? `${fmtDate(fromDate)} – ${fmtDate(toDate)}` : label;
+    // Convert ISO "YYYY-MM-DD" → Date, using noon to avoid timezone day-shift
+    const isoToDate = (iso) => iso ? new Date(iso + 'T12:00:00') : new Date();
+    // Build the Range array expected by react-date-range
+    const buildRange = () => [{
+            startDate: fromDate ? isoToDate(fromDate) : undefined,
+            endDate: toDate ? isoToDate(toDate) : undefined,
+            key: 'selection',
+        }];
+    const [selRange, setSelRange] = useState(buildRange);
+    // Sync when the parent resets values (e.g. Clear All)
+    useEffect(() => {
+        setSelRange(buildRange());
+    }, [fromDate, toDate]); // eslint-disable-line react-hooks/exhaustive-deps
+    const openPicker = (e) => {
+        setSelRange(buildRange());
+        setAnchor(e.currentTarget);
+    };
+    // Convert a Date to ISO "YYYY-MM-DD" without relying on toISOString (avoids UTC shift)
+    const toISO = (d) => {
+        const y = d.getFullYear();
+        const m = String(d.getMonth() + 1).padStart(2, '0');
+        const dd = String(d.getDate()).padStart(2, '0');
+        return `${y}-${m}-${dd}`;
+    };
+    const handleRangeChange = (ranges) => {
+        const sel = ranges.selection;
+        setSelRange([sel]);
+        // Auto-apply & close as soon as a complete range is chosen (start ≠ end day)
+        if (sel.startDate &&
+            sel.endDate &&
+            sel.startDate.getTime() !== sel.endDate.getTime()) {
+            onApply(toISO(sel.startDate), toISO(sel.endDate));
+            setAnchor(null);
+        }
+    };
+    return (jsxs(Fragment, { 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), children: 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 }) => {
+    const [anchor, setAnchor] = useState(null);
+    const [draft, setDraft] = useState('');
+    const active = Boolean(value);
+    return (jsxs(Fragment, { 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), children: active ? `${label}: ${value}` : label }), 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);
+                                }
+                                if (e.key === 'Escape')
+                                    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 }) => {
+    const [open, setOpen] = useState(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const active = Boolean(value);
+    // dayjs value expected by MUI X DatePicker (null = no selection)
+    const dayjsValue = value ? dayjs(value, 'YYYY-MM-DD') : null;
+    const handleChipClick = (e) => {
+        setAnchorEl(e.currentTarget);
+        setOpen(true);
+    };
+    const handleChange = (newVal) => {
+        if (newVal && dayjs.isDayjs(newVal) && newVal.isValid()) {
+            onApply(newVal.format('YYYY-MM-DD'));
+        }
+        else {
+            onApply('');
+        }
+        setOpen(false);
+    };
+    return (
+    // 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(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), children: active ? `${label}: ${fmtDate(value)}` : label }), jsx(DatePicker, { value: dayjsValue, open: open, onClose: () => setOpen(false), onChange: handleChange, slotProps: {
+                    textField: { sx: { display: 'none' }, size: 'small' },
+                    popper: {
+                        anchorEl,
+                        placement: 'bottom-start',
+                    },
+                } })] }));
+};
+const DropdownFilterChip = ({ label, value, options, onApply, onRemove }) => {
+    const [anchor, setAnchor] = useState(null);
+    const active = Boolean(value);
+    const selectedLabel = options.find((o) => o.value === value)?.label ?? '';
+    const rhf = useForm({ defaultValues: { select: value || '' } });
+    const { register, control, getValues, clearErrors, watch } = rhf;
+    // Sync form value when external value changes (e.g. Clear All)
+    useEffect(() => {
+        rhf.setValue('select', value || '');
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    // Intercept setValue: SingleSelectNonAutoComplete calls props.setValue(name, val)
+    // on every selection. We forward to react-hook-form AND close the popover with
+    // the chosen value — but only if the popover is currently open (anchor !== null),
+    // to avoid reacting to external syncs from the parent.
+    const interceptedSetValue = (name, val, opts) => {
+        rhf.setValue(name, val, opts);
+        if (anchor !== null) {
+            onApply(val ?? '');
+            setAnchor(null);
+        }
+    };
+    const item = {
+        name: 'select',
+        label,
+        inputType: 'basic-select',
+        options: [
+            { label: 'All', value: '' },
+            ...options.map((o) => ({ label: o.label, value: o.value })),
+        ],
+    };
+    return (jsxs(Fragment, { 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), children: active ? `${label}: ${selectedLabel}` : label }), 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,
+                        errors: {},
+                        getValues,
+                        clearErrors,
+                        setValue: interceptedSetValue,
+                        watch,
+                    }, variant: "outlined" }) })] }));
+};
+const SearchableSelectChip = ({ label, value, options, onApply, onRemove, placeholder = 'Search…', }) => {
+    const [anchor, setAnchor] = useState(null);
+    const [search, setSearch] = useState('');
+    const active = Boolean(value);
+    const selectedLabel = options.find((o) => o.value === value)?.label ?? '';
+    const open = (e) => {
+        setSearch(''); // always start with all options visible
+        setAnchor(e.currentTarget);
+    };
+    const select = (val) => {
+        onApply(val);
+        setAnchor(null);
+    };
+    // Case-insensitive filter; always show "All" row on top
+    const filtered = search
+        ? options.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))
+        : options;
+    return (jsxs(Fragment, { 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), children: active ? `${label}: ${selectedLabel}` : label }), 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: {
+                                startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SearchIcon, { sx: { fontSize: 16, color: 'text.disabled' } }) })),
+                            }, sx: { '& .MuiOutlinedInput-root': { borderRadius: 2, fontSize: 13 } } }) }), jsxs(List, { dense: true, disablePadding: true, sx: { maxHeight: 260, overflowY: 'auto', pb: 0.75 }, children: [!search && (jsxs(ListItemButton, { onClick: () => select(''), selected: !active, sx: { px: 2, py: 0.5 }, children: [jsx(ListItemText, { primary: "All", primaryTypographyProps: {
+                                            fontSize: 13,
+                                            color: !active ? 'primary.main' : 'text.secondary',
+                                            fontStyle: 'italic',
+                                        } }), !active && jsx(CheckIcon, { sx: { fontSize: 15, color: 'primary.main', flexShrink: 0 } })] })), filtered.length === 0 ? (jsx(Box, { sx: { px: 2, py: 1.5 }, children: jsxs(Typography, { variant: "caption", color: "text.disabled", children: ["No options match \"", search, "\""] }) })) : (filtered.map((opt) => {
+                                const isSelected = value === opt.value;
+                                return (jsxs(ListItemButton, { onClick: () => select(opt.value), selected: isSelected, sx: { px: 2, py: 0.5 }, children: [jsx(ListItemText, { primary: opt.label, primaryTypographyProps: {
+                                                fontSize: 13,
+                                                color: isSelected ? 'primary.main' : 'text.primary',
+                                                fontWeight: isSelected ? 600 : 400,
+                                            } }), isSelected && (jsx(CheckIcon, { sx: { fontSize: 15, color: 'primary.main', flexShrink: 0 } }))] }, opt.value));
+                            }))] })] })] }));
+};
+const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, onToggle, }) => {
+    const [anchor, setAnchor] = useState(null);
+    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: {
+                        borderRadius: 5, textTransform: 'none', fontSize: 12,
+                        borderColor: 'divider', color: 'text.secondary',
+                        px: 1.5, minHeight: 30,
+                        '&:hover': { borderColor: 'primary.main', color: 'primary.main' },
+                    }, children: "Manage Filters" }) }), jsx(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: { py: 1 }, children: [serverFilterDefs.length > 0 && (jsxs(Fragment, { children: [jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Server Filters" }), jsx(List, { dense: true, disablePadding: true, children: serverFilterDefs.map((def) => {
+                                        const selected = visibleIds.includes(def.id);
+                                        const pill = TYPE_PILL[def.type];
+                                        return (jsxs(ListItemButton, { onClick: () => onToggle(def.id), sx: { px: 2, py: 0.5 }, children: [jsx(Box, { component: "span", sx: {
+                                                        mr: 1.25, flexShrink: 0,
+                                                        fontSize: 10, fontWeight: 700,
+                                                        px: 0.75, py: '2px',
+                                                        borderRadius: '4px',
+                                                        bgcolor: pill.bg,
+                                                        color: pill.color,
+                                                        textTransform: 'uppercase',
+                                                        letterSpacing: 0.4,
+                                                        lineHeight: 1.6,
+                                                    }, children: pill.label }), jsx(ListItemText, { primary: def.label, primaryTypographyProps: {
+                                                        fontSize: 13,
+                                                        color: selected ? 'primary.main' : 'text.primary',
+                                                    } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }, def.id));
+                                    }) })] })), availableColumns.length > 0 && (jsxs(Fragment, { children: [jsx(Divider, { sx: { my: 1 } }), jsx(Typography, { variant: "caption", fontWeight: 700, color: "text.disabled", sx: { px: 2, pb: 0.5, display: 'block', textTransform: 'uppercase', letterSpacing: 0.5 }, children: "Column Filters" }), jsx(List, { dense: true, disablePadding: true, sx: { maxHeight: 260, overflowY: 'auto' }, children: availableColumns.map((col) => {
+                                        const selected = visibleIds.includes(col.id);
+                                        // Pick the type pill based on the column's declared filter type
+                                        const pill = col.filterType === 'date'
+                                            ? TYPE_PILL.date
+                                            : col.filterType === 'searchableDropdown'
+                                                ? TYPE_PILL.searchableDropdown
+                                                : TYPE_PILL.text;
+                                        return (jsxs(ListItemButton, { onClick: () => onToggle(col.id), sx: { px: 2, py: 0.4 }, children: [jsx(Box, { component: "span", sx: {
+                                                        mr: 1.25, flexShrink: 0,
+                                                        fontSize: 10, fontWeight: 700,
+                                                        px: 0.75, py: '2px',
+                                                        borderRadius: '4px',
+                                                        bgcolor: pill.bg,
+                                                        color: pill.color,
+                                                        textTransform: 'uppercase',
+                                                        letterSpacing: 0.4,
+                                                        lineHeight: 1.6,
+                                                    }, children: pill.label }), jsx(ListItemText, { primary: col.label, primaryTypographyProps: {
+                                                        fontSize: 13,
+                                                        color: selected ? 'primary.main' : 'text.primary',
+                                                    } }), selected && jsx(CheckIcon, { sx: { fontSize: 16, color: 'primary.main', flexShrink: 0 } })] }, col.id));
+                                    }) })] }))] }) })] }));
+};
+const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter, filterValues, onFilterValuesChange, columnFilters, onColumnFilterChange, availableColumns, }) => {
+    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 removeFilter = (id) => {
+        const def = serverFilterDefs.find((d) => d.id === id);
+        if (def?.type === 'dateRange') {
+            onFilterValuesChange({ ...filterValues, [def.fromKey]: '', [def.toKey]: '' });
+        }
+        else if (def?.type === 'text' ||
+            def?.type === 'dropdown' ||
+            def?.type === 'searchableDropdown') {
+            onFilterValuesChange({ ...filterValues, [def.filterKey]: '' });
+        }
+        else if (def?.type === 'date') {
+            applyColFilter(def.columnKey, '');
+        }
+        else {
+            applyColFilter(id, '');
+        }
+        onToggleFilter(id);
+    };
+    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: 15, color: 'text.disabled' } }), jsx(Typography, { variant: "body2", fontSize: 12, 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) }, 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 }, 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) }, 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…' }, id));
+                }
+                if (def?.type === 'date') {
+                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id) }, 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) }, id));
+                }
+                if (col.filterType === 'searchableDropdown') {
+                    return (jsx(SearchableSelectChip, { label: col.label, value: getColValue(id), options: col.filterOptions ?? [], onApply: (v) => applyColFilter(id, v), onRemove: () => removeFilter(id) }, 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}` }, id));
+            }), jsx(ManageFiltersButton, { serverFilterDefs: serverFilterDefs, visibleIds: visibleFilterIds, availableColumns: availableColumns, onToggle: onToggleFilter })] }));
+};
+
+export { DynamicFilterBar as default };

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

@@ -0,0 +1,40 @@
+import { type MRT_ColumnDef } from 'material-react-table';
+import { type ServerFilterDef } from './DynamicFilterBar';
+export type { ServerFilterDef };
+/** Shape that fetchPage must return. */
+export interface PagedResult<TData> {
+    data: TData[];
+    totalRecords: number;
+}
+export interface GenericPaginatedGridProps<TData extends object> {
+    /** MRT column definitions typed to your data shape. */
+    columns: MRT_ColumnDef<TData>[];
+    /**
+     * Async function called on every page/filter change.
+     * Receives the current flat filter map and the 0-based page index.
+     */
+    fetchPage: (filters: Record<string, string>, pageIndex: number) => Promise<PagedResult<TData>>;
+    /** Base react-query cache key. */
+    queryKey: unknown[];
+    /** Server-side filter chip definitions. */
+    serverFilterDefs: ServerFilterDef[];
+    /** Initial key → value map for every server filter. */
+    defaultFilters: Record<string, string>;
+    /** Which chip IDs are visible on first render. Defaults to first entry. */
+    defaultVisibleFilterIds?: string[];
+    /** Number of rows fetched per API call. Default: 10 000. */
+    batchSize?: number;
+    /** CSV file name prefix. Default: "export". */
+    exportFilename?: string;
+    /** max-height of the scrollable table body. Default: "60vh". */
+    tableHeight?: string;
+    /** Choices shown in the "Rows per page" footer dropdown. Default: [1 000, 5 000, 10 000]. */
+    pageSizeOptions?: number[];
+    /**
+     * Background colour applied to every header cell.
+     * Accepts any valid CSS colour string.
+     */
+    headerBgColor?: string;
+}
+declare function GenericPaginatedGrid<TData extends object>({ columns, fetchPage, queryKey, serverFilterDefs, defaultFilters, defaultVisibleFilterIds, batchSize, exportFilename, tableHeight, pageSizeOptions, headerBgColor, }: GenericPaginatedGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default GenericPaginatedGrid;