tp-react-elements 1.3.0 → 1.3.2

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var InputRangeField = {};
+var Month = {};
 
-export { InputRangeField as __exports };
+export { Month as __exports };

package/dist/_virtual/index.esm13.js

@@ -1,3 +1,3 @@
-var Month = {};
+var DateInput = {};
 
-export { Month as __exports };
+export { DateInput as __exports };

package/dist/_virtual/index.esm14.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var InputRangeField = {};
 
-export { DateInput as __exports };
+export { InputRangeField as __exports };

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -1,4 +1,3 @@
 export { default as DatepickerWrapperV2 } from '../FormComponents/DatePicker/DatepickerWrapperV2';
-export { default as MonthPicker } from '../FormComponents/DatePicker/MonthPicker';
 export { default as Monthpickerrender } from '../FormComponents/DatePicker/Monthpickerrender';
 export { default as YearPickerField } from '../FormComponents/YearPickerField/YearPickerField';

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

@@ -1,5 +1,4 @@
 import DatepickerWrapperV2 from '../FormComponents/DatePicker/DatepickerWrapperV2.esm.js';
-export { default as MonthPicker } from '../FormComponents/DatePicker/MonthPicker.esm.js';
 import Monthpickerrender from '../FormComponents/DatePicker/Monthpickerrender.esm.js';
 export { default as YearPickerField } from '../FormComponents/YearPickerField/YearPickerField.esm.js';
 

package/dist/components/FormComponents/DatePicker/Monthpickerrender.esm.js

@@ -13,6 +13,7 @@ const Monthpickerrender = ({ props, variant, }) => {
     const [open, setOpen] = useState(false);
     const [DatePicker, setDatePicker] = useState(null);
     const [isLoading, setIsLoading] = useState(true);
+    const [view, setView] = useState('month');
     useEffect(() => {
         const loadComponents = async () => {
             setIsLoading(true);
@@ -35,7 +36,7 @@ const Monthpickerrender = ({ props, variant, }) => {
         return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
     }
     return (jsx(Fragment, { children: DatePicker && (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { ref: ref, label: variant !== 'standard' &&
-                                    `${props.item.label}${props.item.required ? ' *' : ''}`, views: ['month', 'year'], disabled: props.item.disable, value: field.value ? dayjs(formatDateMonthAndYear(field.value || null)) : null, slotProps: {
+                                    `${props.item.label}${props.item.required ? ' *' : ''}`, views: ['year', 'month'], openTo: "month", view: view, onViewChange: (newView) => setView(newView), disabled: props.item.disable, value: field.value ? dayjs(formatDateMonthAndYear(field.value || null)) : null, slotProps: {
                                     textField: {
                                         onClick: () => handleToggle(),
                                         inputRef: ref,
@@ -45,10 +46,19 @@ const Monthpickerrender = ({ props, variant, }) => {
                                             style: { cursor: 'pointer' },
                                         },
                                     },
-                                }, disableOpenPicker: props.item.disable, open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
+                                }, disableOpenPicker: props.item.disable, open: open, onOpen: () => {
+                                    setOpen(true);
+                                    setView('month');
+                                }, onClose: () => setOpen(false), defaultValue: field.value, onChange: (date) => {
                                     const formatted = dayjs(date).format('MM/YYYY');
                                     field.onChange(formatted);
                                     props.setValue(props.item.name, formatted);
+                                    if (view === 'month') {
+                                        setOpen(false);
+                                    }
+                                    else if (view === 'year') {
+                                        setView('month');
+                                    }
                                 }, sx: {
                                     '& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root': {
                                         top: '-10px',

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

@@ -25,12 +25,12 @@ const FormTextAreaField = ({ props, variant, }) => {
     /**
      * Renders the textarea component with validation support
      */
-    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? field.value || '' : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(TextAreaField, { multiline: true, size: "small", InputProps: {
+    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Tooltip, { title: props.item.isTooltipEnable ? field.value || '' : '', placement: "bottom-start", children: jsxs(Box, { sx: { width: '100%', position: 'relative' }, children: [jsx(TextAreaField, { multiline: true, fullWidth: true, size: "small", InputProps: {
                                         style: {
                                             border: 'none',
                                         },
                                     }, sx: {
-                                        ...props.item.sx,
+                                        ...props?.item?.sx,
                                     }, minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || 'Type Something...', ...field, onChange: (e) => {
                                         field.onChange(e);
                                         props?.clearErrors && props?.clearErrors(props.item.name);

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

@@ -46,46 +46,46 @@ const PasswordField = ({ props, variant }) => {
     /**
      * Renders the password field component with visibility toggle
      */
-    return (jsx(Box, { position: 'relative', children: jsx(FormControl, { fullWidth: true, children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { size: "small", error: isShowBorderError, type: showPassword ? 'text' : 'password', autoComplete: props.item?.InputProps?.autoComplete || 'off', placeholder: props.item.placeholder || '', ...field, label: label, sx: {
-                                width: '100%',
-                                '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
-                                    top: '-8px',
-                                },
-                            }, inputProps: {
-                                maxLength: props.item.maxLength || 100,
-                                /**
-                                 * Handles input events
-                                 * Calls custom onInputProps handler if provided
-                                 *
-                                 * @param {any} e - The input event object
-                                 */
-                                onInput: (e) => {
-                                    props.item.onInputProps && props.item.onInputProps(e);
-                                },
-                                /**
-                                 * Handles paste events
-                                 * Prevents paste action if configured
-                                 *
-                                 * @param {React.ClipboardEvent} e - The paste event object
-                                 */
-                                onPaste: (e) => {
-                                    if (props.item?.doNotAllowPaste) {
-                                        e.preventDefault();
-                                    }
-                                },
-                            }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
-                                position: 'absolute',
-                                right: '14px',
-                                top: variant === 'standard' ? '65%' : '45%',
-                                transform: 'translateY(-50%)',
-                                width: '25px',
-                            }, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, onClick: handleTogglePasswordVisibility, edge: "end", children: showPassword ? (jsx(Visibility, { sx: {
-                                    fontSize: '12px',
-                                    position: 'absolute',
-                                } })) : (jsx(VisibilityOff, { sx: {
-                                    fontSize: '12px',
-                                    position: 'absolute',
-                                } })) }), jsx(FormBottomField, { ...props })] })) }) }) }, props.item.name));
+    return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(Box, { sx: { position: 'relative' }, children: [renderLabel(variant, props), jsx(TextField, { size: "small", error: isShowBorderError, type: showPassword ? 'text' : 'password', autoComplete: props.item?.InputProps?.autoComplete || 'off', placeholder: props.item.placeholder || '', ...field, label: label, sx: {
+                                        width: '100%',
+                                        '& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy': {
+                                            top: '-8px',
+                                        },
+                                    }, inputProps: {
+                                        maxLength: props.item.maxLength || 100,
+                                        /**
+                                         * Handles input events
+                                         * Calls custom onInputProps handler if provided
+                                         *
+                                         * @param {any} e - The input event object
+                                         */
+                                        onInput: (e) => {
+                                            props.item.onInputProps && props.item.onInputProps(e);
+                                        },
+                                        /**
+                                         * Handles paste events
+                                         * Prevents paste action if configured
+                                         *
+                                         * @param {React.ClipboardEvent} e - The paste event object
+                                         */
+                                        onPaste: (e) => {
+                                            if (props.item?.doNotAllowPaste) {
+                                                e.preventDefault();
+                                            }
+                                        },
+                                    }, value: field.value || null, disabled: props.item.disable }), jsx(IconButton, { sx: {
+                                        position: 'absolute',
+                                        right: '14px',
+                                        top: variant === 'standard' ? '70%' : '45%',
+                                        transform: 'translateY(-50%)',
+                                        width: '25px',
+                                    }, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, onClick: handleTogglePasswordVisibility, edge: "end", children: showPassword ? (jsx(Visibility, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                        } })) : (jsx(VisibilityOff, { sx: {
+                                            fontSize: '12px',
+                                            position: 'absolute',
+                                        } })) })] }), jsx(FormBottomField, { ...props })] })) }) }) }, props.item.name));
 };
 
 export { PasswordField as default };

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

@@ -10,7 +10,7 @@ export { default as MultiSelectV1 } from './Select/MultiSelectv1';
 export { default as MultiSelectTable } from './Select/MultiSelectTable';
 export { FormCheckBoxGroup } from '../CheckBoxGroup';
 export { FormRadioGroup } from '../RadioGroup';
-export { DatepickerWrapperV2, MonthPicker, Monthpickerrender, YearPickerField, } from '../DatePicker';
+export { DatepickerWrapperV2, Monthpickerrender, YearPickerField, } from '../DatePicker';
 export { TimePicker } from '../TimePicker';
 export { FormRenderFileUpload, FormRenderMultiFileUpload } from '../FileUpload';
 export { RichTextEditor, RichTextEditorWrapper } from '../RichTextEditor';

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

@@ -12,7 +12,6 @@ export { default as MultiSelectTable } from './Select/MultiSelectTable.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';
-export { default as MonthPicker } from './DatePicker/MonthPicker.esm.js';
 export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
 export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';
 export { default as TimePicker } from './TimePicker/TimePicker.esm.js';

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

@@ -0,0 +1,59 @@
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+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`.
+ * - `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;
+    }[];
+} | {
+    /**
+     * 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;
+}
+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,269 @@
+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 DatepickerWrapperV2 from '../FormComponents/DatePicker/DatepickerWrapperV2.esm.js';
+import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
+import { Box, Typography, Button, Popover, TextField, Stack, Tooltip, List, ListItemButton, ListItemText, 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';
+
+// 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' },
+};
+// ─── 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 }) => {
+    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 [anchor, setAnchor] = useState(null);
+    const active = Boolean(value);
+    const { register, control, getValues, clearErrors, setValue, watch } = useForm({
+        defaultValues: { date: value || null },
+    });
+    // Sync form value whenever the external value prop changes (e.g. on Clear All)
+    useEffect(() => {
+        setValue('date', value || null);
+    }, [value, setValue]);
+    const item = {
+        name: 'date',
+        label,
+        inputType: 'datepicker',
+        onChangeFn: (val) => {
+            // DatepickerWrapperV2 calls onChangeFn with one of:
+            //   • a dayjs-like object (has .format()) — use it directly
+            //   • a "DD/MM/YYYY" formatted string     — parse with strict mode
+            //   • null / undefined                    — clear the filter
+            let iso = '';
+            if (!val) {
+                iso = '';
+            }
+            else if (typeof val.format === 'function') {
+                iso = val.format('YYYY-MM-DD');
+            }
+            else if (typeof val === 'string' && val.trim()) {
+                const parsed = dayjs(val.trim(), 'DD/MM/YYYY', true);
+                iso = parsed.isValid() ? parsed.format('YYYY-MM-DD') : '';
+            }
+            onApply(iso);
+            // Auto-close the popover as soon as a date is picked — no need to click "Done"
+            setAnchor(null);
+        },
+    };
+    return (jsxs(Fragment, { children: [jsx(Button, { variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), 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 }), jsxs(Popover, { open: Boolean(anchor), anchorEl: anchor, onClose: () => setAnchor(null), anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, PaperProps: { sx: { mt: 0.75, borderRadius: 2, boxShadow: 6, p: 2, minWidth: 260 } }, children: [jsx(Typography, { variant: "caption", fontWeight: 600, color: "text.secondary", display: "block", mb: 1.5, children: label }), jsx(DatepickerWrapperV2, { props: { item, register, control, errors: {}, getValues, clearErrors, setValue, watch }, variant: "outlined" }), jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", mt: 1.5, children: [active && (jsx(Button, { size: "small", color: "inherit", onClick: () => { onApply(''); setValue('date', null); setAnchor(null); }, children: "Clear" })), jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: () => setAnchor(null), children: "Done" })] })] })] }));
+};
+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 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);
+                                        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: TYPE_PILL.text.bg,
+                                                        color: TYPE_PILL.text.color,
+                                                        textTransform: 'uppercase',
+                                                        letterSpacing: 0.4,
+                                                        lineHeight: 1.6,
+                                                    }, children: "Text" }), 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') {
+            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 === 'date') {
+                    return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id) }, id));
+                }
+                // Column filter chip
+                const col = availableColumns.find((c) => c.id === id);
+                if (!col)
+                    return null;
+                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;