tp-react-elements 1.3.2 → 1.3.4

package/dist/_virtual/index.esm10.js

@@ -1,3 +1,3 @@
-var propTypes = {exports: {}};
+var accessibility = {};
 
-export { propTypes as __module };
+export { accessibility as __exports };

package/dist/_virtual/index.esm4.js

@@ -1,3 +1,3 @@
-var DateRange = {};
+var DefinedRange = {};
 
-export { DateRange as __exports };
+export { DefinedRange 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.esm7.js

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

package/dist/_virtual/index.esm9.js

@@ -1,3 +1,3 @@
-var accessibility = {};
+var propTypes = {exports: {}};
 
-export { accessibility as __exports };
+export { propTypes as __module };

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

@@ -1,22 +1,23 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import React__default, { lazy, Suspense } from 'react';
-import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
-import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
-import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
-import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
-import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
-import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
-import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
-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';
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import DatetimepickerWrapper from '../FormComponents/DatePicker/DatetimepickerWrapper.esm.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.esm.js';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.esm.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.esm.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.esm.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.esm.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.esm.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.esm.js';
 
 // Lazy-loaded heavy components
 // const RichTextEditorWrapper = lazy(() =>
@@ -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

@@ -1,38 +1,25 @@
-export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
-export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
-export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
-export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as SingleSelect } from './Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete.esm.js';
 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 DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.esm.js';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+export { default as FormCheckBox } from './FormCheckBox/FormCheckBox.esm.js';
 export { default as FormCheckBoxGroup } from './FormCheckBoxGroup/FormCheckBoxGroup.esm.js';
+export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
+export { default as FormNumberField } from './FormNumberField/FormNumberField.esm.js';
+export { default as FormNumberFieldDecimal } from './FormNumberField/FormNumberFieldDecimal.esm.js';
 export { default as FormRadioGroup } from './FormRadioGroup/FormRadioGroup.esm.js';
-export { default as DatepickerWrapperV2 } from './DatePicker/DatepickerWrapperV2.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';
 export { default as FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.esm.js';
-import 'react/jsx-runtime';
-import '@mui/material';
-import 'react';
-import 'react-hook-form';
-import 'dayjs';
-export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
-import '@mui/icons-material/Visibility';
-import '@mui/icons-material/Close';
-import '@mui/icons-material/NavigateBefore';
-import '@mui/icons-material/NavigateNext';
-import '@mui/icons-material/Delete';
-import '@mui/icons-material/UploadFile';
-import '@mui/icons-material/PictureAsPdf';
-import '@mui/icons-material/TableChart';
-import '@mui/icons-material/Description';
-export { default as FormErrorField } from './FormErrorField/FormErrorField.esm.js';
+export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
+export { default as FormTextField } from './FormTextField/FormTextField.esm.js';
 export { default as HelperText } from './HelperText/HelperText.esm.js';
+export { default as Monthpickerrender } from './DatePicker/Monthpickerrender.esm.js';
+export { default as PasswordField } from './PasswordField/PasswordField.esm.js';
 export { default as RichTextEditor } from './RichTextEditor/RichTextEditor.esm.js';
 export { default as RichTextEditorWrapper } from './RichTextEditor/RichTextEditorWrapper.esm.js';
+export { default as TimePicker } from './TimePicker/TimePicker.esm.js';
+export { default as YearPickerField } from './YearPickerField/YearPickerField.esm.js';

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

@@ -1,14 +1,15 @@
-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`.
+ * - `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';
@@ -31,6 +32,20 @@ export type ServerFilterDef = {
         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
@@ -44,6 +59,17 @@ export type ServerFilterDef = {
 interface AvailableColumn {
     id: string;
     label: string;
+    /**
+     * Filter chip variant used in the "Column Filters" section of Manage Filters.
+     * Sourced from the `filterType` prop on the column's `TPColumnDef`.
+     * Defaults to `'text'` when omitted.
+     */
+    filterType?: 'text' | 'date' | 'select' | 'searchable-select' | 'number';
+    /** Options for `'select'` / `'searchable-select'` chip variants. */
+    filterOptions?: {
+        label: string;
+        value: string;
+    }[];
 }
 export interface DynamicFilterBarProps {
     serverFilterDefs: ServerFilterDef[];

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

@@ -4,25 +4,39 @@ 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 { 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, Tooltip, List, ListItemButton, ListItemText, Divider } from '@mui/material';
+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 ───────────────────────────────────────────────────────
+// Server-side filter pills (used in SERVER FILTERS section of Manage Filters)
 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' },
+};
+// Column filter type pills (used in COLUMN FILTERS section of Manage Filters)
+const COLUMN_TYPE_PILL = {
+    text: { label: 'Text', color: '#2e7d32', bg: '#e8f5e9' },
+    date: { label: 'Date', color: '#00695c', bg: '#e0f2f1' },
+    select: { label: 'Select', color: '#bf360c', bg: '#fbe9e7' },
+    'searchable-select': { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
+    number: { label: 'Number', color: '#e65100', bg: '#fff3e0' },
 };
 // ─── Chip shared style ────────────────────────────────────────────────────────
 const chipSx = (active) => ({
@@ -49,6 +63,9 @@ const fmtDate = (iso) => {
     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;
@@ -103,41 +120,35 @@ const TextFilterChip = ({ label, value, onApply, onRemove, placeholder }) => {
                             } }), 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 [open, setOpen] = useState(false);
+    const [anchorEl, setAnchorEl] = 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);
-        },
+    // 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 (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" })] })] })] }));
+    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);
@@ -180,6 +191,41 @@ const DropdownFilterChip = ({ label, value, options, onApply, onRemove }) => {
                         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: {
@@ -206,17 +252,20 @@ const ManageFiltersButton = ({ serverFilterDefs, visibleIds, availableColumns, o
                                                     } }), 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 = COLUMN_TYPE_PILL[col.filterType ?? 'text'] ??
+                                            COLUMN_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: TYPE_PILL.text.bg,
-                                                        color: TYPE_PILL.text.color,
+                                                        bgcolor: pill.bg,
+                                                        color: pill.color,
                                                         textTransform: 'uppercase',
                                                         letterSpacing: 0.4,
                                                         lineHeight: 1.6,
-                                                    }, children: "Text" }), jsx(ListItemText, { primary: col.label, primaryTypographyProps: {
+                                                    }, 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));
@@ -233,7 +282,9 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
         if (def?.type === 'dateRange') {
             onFilterValuesChange({ ...filterValues, [def.fromKey]: '', [def.toKey]: '' });
         }
-        else if (def?.type === 'text' || def?.type === 'dropdown') {
+        else if (def?.type === 'text' ||
+            def?.type === 'dropdown' ||
+            def?.type === 'searchableDropdown') {
             onFilterValuesChange({ ...filterValues, [def.filterKey]: '' });
         }
         else if (def?.type === 'date') {
@@ -255,13 +306,23 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 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
+                // 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 === '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) }, 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 })] }));
 };

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

@@ -1,14 +1,21 @@
-import { type MRT_ColumnDef } from 'material-react-table';
+import type { TPColumnDef } from './types';
 import { type ServerFilterDef } from './DynamicFilterBar';
 export type { ServerFilterDef };
+export type { TPColumnDef } from './types';
 /** 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>[];
+    /**
+     * Column definitions. Use `TPColumnDef<TData>` (a superset of `MRT_ColumnDef`)
+     * to get top-level `filterType` and `options` support with no `meta` boilerplate.
+     *
+     * The grid automatically injects the right `filterFn` for each `filterType`,
+     * and wires up the correct chip in Manage Filters → Column Filters.
+     */
+    columns: TPColumnDef<TData>[];
     /**
      * Async function called on every page/filter change.
      * Receives the current flat filter map and the 0-based page index.