tp-react-elements 1.3.2 → 1.3.3

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

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

@@ -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.
+     * 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[];

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

@@ -4,15 +4,19 @@ 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
@@ -23,6 +27,7 @@ const TYPE_PILL = {
     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) => ({
@@ -49,6 +54,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 +111,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);
     };
-    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 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);
@@ -180,6 +182,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 +243,23 @@ 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 = 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: 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 +276,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 +300,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 === '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 })] }));
 };

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

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
-import { keepPreviousData } from '../../node_modules/@tanstack/query-core/build/modern/utils.esm.js';
-import { useQuery } from '../../node_modules/@tanstack/react-query/build/modern/useQuery.esm.js';
+import { useQuery, keepPreviousData } from '@tanstack/react-query';
 import { Box, Tooltip, IconButton, Button, GlobalStyles, Typography, Select, MenuItem, CircularProgress } from '@mui/material';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
@@ -68,13 +67,32 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const rows = data?.data ?? [];
     const totalRecords = data?.totalRecords ?? 0;
     // ── Derive column list for filter chip picker ──────────────────────────────
+    //
+    // A column is excluded from the "Column Filters" section of Manage Filters
+    // when ANY of the following are true:
+    //   1. It has no accessorKey (computed / display columns).
+    //   2. Its accessorKey is already handled by a server-side 'date' filter def.
+    //   3. Its MRT `enableColumnFilter` prop is explicitly set to `false` —
+    //      this is the standard MRT opt-out flag for column-level filters.
     const availableColumns = useMemo(() => {
         const serverManagedColKeys = new Set(serverFilterDefs
             .filter((d) => d.type === 'date')
             .map((d) => d.columnKey));
         return columns
-            .filter((c) => 'accessorKey' in c && c.accessorKey && !serverManagedColKeys.has(c.accessorKey))
-            .map((c) => ({ id: c.accessorKey, label: c.header }));
+            .filter((c) => 'accessorKey' in c &&
+            c.accessorKey &&
+            !serverManagedColKeys.has(c.accessorKey) &&
+            // Honour the standard MRT opt-out flag: columns with
+            // enableColumnFilter: false should not appear in Manage Filters.
+            c.enableColumnFilter !== false)
+            .map((c) => ({
+            id: c.accessorKey,
+            label: c.header,
+            // Forward column-level filter type hints so DynamicFilterBar can render
+            // the right chip (text / date / searchableDropdown) for each column.
+            filterType: c.meta?.filterType,
+            filterOptions: c.meta?.filterOptions,
+        }));
     }, [columns, serverFilterDefs]);
     // ── Handlers ───────────────────────────────────────────────────────────────
     const handleFilterValuesChange = (newValues) => {

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

@@ -1,3 +1,22 @@
 import type { MRT_ColumnDef } from 'material-react-table';
 import type { InvoiceDetail } from './types';
+import type { RowData } from '@tanstack/table-core';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /**
+         * Which chip variant to render in the "Column Filters" section of
+         * Manage Filters.  Defaults to `'text'` when omitted.
+         *
+         *   'text'               → TextFilterChip   (free-text input)
+         *   'date'               → DatePickerChip   (MUI X calendar)
+         *   'searchableDropdown' → SearchableSelectChip (search + options list)
+         */
+        filterType?: 'text' | 'date' | 'searchableDropdown';
+        /** Option pairs for the `'searchableDropdown'` filter chip. */
+        filterOptions?: {
+            label: string;
+            value: string;
+        }[];
+    }
+}
 export declare const invoiceColumns: MRT_ColumnDef<InvoiceDetail>[];

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as SessionTimeoutField } from './components/SessionTimeOut/Sess
 export { default as useFormValidatingContext } from './components/Form/FormConstants';
 export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent';
 export { default as GenericPaginatedGrid } from './components/PaginatedGrid/GenericPaginatedGrid';
+export { default as SearchableSelect } from './components/FormComponents/Select/SearchableSelect';
 export { TPElementsProvider } from './auth/authContext';
 export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor, } from './utils';
 export * as Utils from './utils';

package/dist/index.esm.css

@@ -1 +1 @@
-.m-form__input .prestashop-switch.switch{display:block;height:30px;position:relative;width:160px}.m-form__input .prestashop-switch.switch.stactv{display:block;height:30px;position:relative;width:162px}.prestashop-switch.switch{background-color:#eee;border:1px solid #ccc;border-radius:50px;-webkit-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);color:#333;text-align:center}.prestashop-switch.switch *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.m-form__input .prestashop-switch.switch *{outline:0!important}.m-form__input .prestashop-switch.switch input[type=radio]{line-height:normal;margin:4px 0 0;opacity:0;position:absolute}.m-form__input .prestashop-switch.switch label,.m-form__input .prestashop-switch.switch>span{display:inline-block;line-height:30px;max-width:100%;vertical-align:middle}.m-form__input .prestashop-switch.switch label{color:#bbb;cursor:pointer;float:left;font-size:11px;font-weight:400;height:100%;margin:0;position:relative;text-align:center;text-transform:uppercase;-webkit-transition:color .2s ease-out;-o-transition:color .2s ease-out;transition:color .2s ease-out;width:50%;z-index:2}.m-form__input .prestashop-switch.switch input:checked+label{color:#fff}.m-form__input .prestashop-switch.switch .slide-button{background-color:green;border:1px solid green;border-radius:50px;-webkit-box-shadow:inset -1px 0 green;-moz-box-shadow:inset 0 -1px 0 green;box-shadow:inset 0 -1px 0 green;color:#fff;display:block;height:100%;left:0;padding:0;position:absolute;top:0;-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;width:50%;z-index:1}.m-form__input{align-items:center;display:flex}.m-form__input .prestashop-switch.switch input:last-of-type:checked~.slide-button{background-color:#ec5c29;border:1px solid #fb561c;-webkit-box-shadow:inset 0 -1px 0 #fb561c;-moz-box-shadow:inset 0 -1px 0 #fb561c;box-shadow:inset 0 -1px 0 #fb561c;left:50%}#list-component{background-color:#fff;max-height:200px;overflow:auto!important}#list-component #MuiScrol-listbox{max-height:none!important;overflow:visible}.css-k2lwa0,.css-svpvcz-MuiFormLabel-root-MuiInputLabel-root{background:#fff;font-size:14px!important}.rdrCalendarWrapper{background:#fff;box-sizing:border-box;display:inline-flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rdrDateDisplay{display:flex;justify-content:space-between}.rdrDateDisplayItem{color:inherit;flex:1 1;text-align:center;width:0}.rdrDateDisplayItem+.rdrDateDisplayItem{margin-left:.833em}.rdrDateDisplayItem input{text-align:inherit}.rdrDateDisplayItem input:disabled{cursor:default}.rdrMonthAndYearWrapper{box-sizing:inherit;display:flex;justify-content:space-between}.rdrMonthAndYearPickers{align-items:center;display:flex;flex:1 1 auto;justify-content:center}.rdrNextPrevButton{box-sizing:inherit;cursor:pointer;outline:none}.rdrMonths{display:flex}.rdrMonthsVertical{flex-direction:column}.rdrMonthsHorizontal>div>div>div{display:flex;flex-direction:row}.rdrMonth{width:27.667em}.rdrWeekDays{display:flex}.rdrWeekDay{box-sizing:inherit;flex-basis:14.28571%;text-align:center}.rdrDays{display:flex;flex-wrap:wrap}.rdrInfiniteMonths{overflow:auto}.rdrDateRangeWrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}.rdrDateInput{position:relative}.rdrDateInput input{outline:none}.rdrDateInput .rdrWarning{color:red;font-size:1.6em;line-height:1.6em;position:absolute;right:.25em;top:0}.rdrDay{box-sizing:inherit;cursor:pointer;font:inherit;position:relative;width:14.28571%}.rdrDayNumber{display:block;position:relative}.rdrDayNumber span{color:#1d2429}.rdrDayDisabled{cursor:not-allowed}@supports (-ms-ime-align:auto){.rdrDay{flex-basis:14.285%!important}}.rdrEndEdge,.rdrInRange,.rdrSelected,.rdrStartEdge{pointer-events:none}.rdrDateRangePickerWrapper{display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rdrStaticRanges{display:flex;flex-direction:column}.rdrStaticRange{font-size:inherit}.rdrInputRange{display:flex}.rdrCalendarWrapper{color:#000;font-size:12px}.rdrDateDisplayWrapper{background-color:#eff2f7}.rdrDateDisplay{margin:.833em}.rdrDateDisplayItem{background-color:#fff;border:1px solid transparent;border-radius:4px;box-shadow:0 1px 2px 0 rgba(35,57,66,.21)}.rdrDateDisplayItem input{background:transparent;border:0;color:#849095;cursor:pointer;height:2.5em;line-height:2.5em;width:100%}.rdrDateDisplayItemActive{border-color:currentColor}.rdrDateDisplayItemActive input{color:#7d888d}.rdrMonthAndYearWrapper{align-items:center;height:60px;padding-top:10px}.rdrMonthAndYearPickers{font-weight:600}.rdrMonthAndYearPickers select{-moz-appearance:none;appearance:none;-webkit-appearance:none;background:transparent;background:url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;background-position:right 8px center;border:0;border-radius:4px;color:#3e484f;cursor:pointer;outline:0;padding:10px 30px 10px 10px;text-align:center}.rdrMonthAndYearPickers select:hover{background-color:rgba(0,0,0,.07)}.rdrMonthPicker,.rdrYearPicker{margin:0 5px}.rdrNextPrevButton{background:#eff2f7;border:0;border-radius:5px;display:block;height:24px;margin:0 .833em;padding:0;width:24px}.rdrNextPrevButton:hover{background:#e1e7f0}.rdrNextPrevButton i{border-style:solid;display:block;height:0;margin:auto;padding:0;text-align:center;transform:translate(-3px);width:0}.rdrPprevButton i{border-color:transparent #34495e transparent transparent;border-width:4px 6px 4px 4px;transform:translate(-3px)}.rdrNextButton i{border-color:transparent transparent transparent #34495e;border-width:4px 4px 4px 6px;margin:0 0 0 7px;transform:translate(3px)}.rdrWeekDays{padding:0 .833em}.rdrMonth{padding:0 .833em 1.666em}.rdrMonth .rdrWeekDays{padding:0}.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{display:none}.rdrWeekDay{color:#849095;font-weight:400;line-height:2.667em}.rdrDay{background:transparent;border:0;color:#1d2429;height:3em;line-height:3em;padding:0;text-align:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.rdrDay:focus{outline:0}.rdrDayNumber{align-items:center;bottom:0;bottom:5px;display:flex;font-weight:300;justify-content:center;left:0;outline:0;position:absolute;right:0;top:0;top:5px}.rdrDayToday .rdrDayNumber span{font-weight:500}.rdrDayToday .rdrDayNumber span:after{background:#3d91ff;border-radius:2px;bottom:4px;content:"";height:2px;left:50%;position:absolute;transform:translate(-50%);width:18px}.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span:after{background:#fff}.rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span{color:hsla(0,0%,100%,.85)}.rdrEndEdge,.rdrInRange,.rdrSelected,.rdrStartEdge{background:currentColor;bottom:5px;left:0;position:absolute;right:0;top:5px}.rdrSelected{left:2px;right:2px}.rdrStartEdge{border-bottom-left-radius:1.042em;border-top-left-radius:1.042em;left:2px}.rdrEndEdge{border-bottom-right-radius:1.042em;border-top-right-radius:1.042em;right:2px}.rdrSelected{border-radius:1.042em}.rdrDayStartOfMonth .rdrEndEdge,.rdrDayStartOfMonth .rdrInRange,.rdrDayStartOfWeek .rdrEndEdge,.rdrDayStartOfWeek .rdrInRange{border-bottom-left-radius:1.042em;border-top-left-radius:1.042em;left:2px}.rdrDayEndOfMonth .rdrInRange,.rdrDayEndOfMonth .rdrStartEdge,.rdrDayEndOfWeek .rdrInRange,.rdrDayEndOfWeek .rdrStartEdge{border-bottom-right-radius:1.042em;border-top-right-radius:1.042em;right:2px}.rdrDayStartOfMonth .rdrDayEndPreview,.rdrDayStartOfMonth .rdrDayInPreview,.rdrDayStartOfWeek .rdrDayEndPreview,.rdrDayStartOfWeek .rdrDayInPreview{border-bottom-left-radius:1.333em;border-left-width:1px;border-top-left-radius:1.333em;left:0}.rdrDayEndOfMonth .rdrDayInPreview,.rdrDayEndOfMonth .rdrDayStartPreview,.rdrDayEndOfWeek .rdrDayInPreview,.rdrDayEndOfWeek .rdrDayStartPreview{border-bottom-right-radius:1.333em;border-right-width:1px;border-top-right-radius:1.333em;right:0}.rdrDayEndPreview,.rdrDayInPreview,.rdrDayStartPreview{background:hsla(0,0%,100%,.09);border:0 solid;bottom:3px;left:0;pointer-events:none;position:absolute;right:0;top:3px;z-index:1}.rdrDayStartPreview{border-bottom-left-radius:1.333em;border-bottom-width:1px;border-left-width:1px;border-top-left-radius:1.333em;border-top-width:1px;left:0}.rdrDayInPreview{border-bottom-width:1px;border-top-width:1px}.rdrDayEndPreview{border-bottom-right-radius:1.333em;border-bottom-width:1px;border-right-width:1px;border-top-right-radius:1.333em;border-top-width:1px;right:2px;right:0}.rdrDefinedRangesWrapper{background:#fff;border-right:1px solid #eff2f7;font-size:12px;width:226px}.rdrDefinedRangesWrapper .rdrStaticRangeSelected{color:currentColor;font-weight:600}.rdrStaticRange{background:#fff;border:0;border-bottom:1px solid #eff2f7;cursor:pointer;display:block;outline:0;padding:0}.rdrStaticRange:focus .rdrStaticRangeLabel,.rdrStaticRange:hover .rdrStaticRangeLabel{background:#eff2f7}.rdrStaticRangeLabel{display:block;line-height:18px;outline:0;padding:10px 20px;text-align:left}.rdrInputRanges{padding:10px 0}.rdrInputRange{align-items:center;padding:5px 20px}.rdrInputRangeInput{border:1px solid #dee7eb;border-radius:4px;color:#6c767a;height:30px;line-height:30px;margin-right:10px;text-align:center;width:30px}.rdrInputRangeInput:focus,.rdrInputRangeInput:hover{border-color:#b4bfc4;color:#333;outline:0}.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{background:transparent;border:1px solid;border-radius:1.333em;bottom:-2px;content:"";left:0;position:absolute;right:0;top:-2px}.rdrDayPassive{pointer-events:none}.rdrDayPassive .rdrDayNumber span{color:#d5dce0}.rdrDayPassive .rdrDayEndPreview,.rdrDayPassive .rdrDayInPreview,.rdrDayPassive .rdrDayStartPreview,.rdrDayPassive .rdrEndEdge,.rdrDayPassive .rdrInRange,.rdrDayPassive .rdrSelected,.rdrDayPassive .rdrStartEdge{display:none}.rdrDayDisabled{background-color:#f8f8f8}.rdrDayDisabled .rdrDayNumber span{color:#aeb9bf}.rdrDayDisabled .rdrDayEndPreview,.rdrDayDisabled .rdrDayInPreview,.rdrDayDisabled .rdrDayStartPreview,.rdrDayDisabled .rdrEndEdge,.rdrDayDisabled .rdrInRange,.rdrDayDisabled .rdrSelected,.rdrDayDisabled .rdrStartEdge{filter:grayscale(100%) opacity(60%)}.rdrMonthName{color:#849095;font-weight:600;padding:.833em;text-align:left}.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrEndEdge~.rdrDayNumber span,.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrInRange~.rdrDayNumber span,.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrSelected~.rdrDayNumber span,.rdrCalendarWrapper .rdrDay:not(.rdrDayPassive) .rdrStartEdge~.rdrDayNumber span{color:#fff!important}
+.m-form__input .prestashop-switch.switch{display:block;height:30px;position:relative;width:160px}.m-form__input .prestashop-switch.switch.stactv{display:block;height:30px;position:relative;width:162px}.prestashop-switch.switch{background-color:#eee;border:1px solid #ccc;border-radius:50px;-webkit-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);-moz-box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);box-shadow:inset 0 1px 4px 1px rgba(0,0,0,.15);color:#333;text-align:center}.prestashop-switch.switch *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.m-form__input .prestashop-switch.switch *{outline:0!important}.m-form__input .prestashop-switch.switch input[type=radio]{line-height:normal;margin:4px 0 0;opacity:0;position:absolute}.m-form__input .prestashop-switch.switch label,.m-form__input .prestashop-switch.switch>span{display:inline-block;line-height:30px;max-width:100%;vertical-align:middle}.m-form__input .prestashop-switch.switch label{color:#bbb;cursor:pointer;float:left;font-size:11px;font-weight:400;height:100%;margin:0;position:relative;text-align:center;text-transform:uppercase;-webkit-transition:color .2s ease-out;-o-transition:color .2s ease-out;transition:color .2s ease-out;width:50%;z-index:2}.m-form__input .prestashop-switch.switch input:checked+label{color:#fff}.m-form__input .prestashop-switch.switch .slide-button{background-color:green;border:1px solid green;border-radius:50px;-webkit-box-shadow:inset -1px 0 green;-moz-box-shadow:inset 0 -1px 0 green;box-shadow:inset 0 -1px 0 green;color:#fff;display:block;height:100%;left:0;padding:0;position:absolute;top:0;-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;width:50%;z-index:1}.m-form__input{align-items:center;display:flex}.m-form__input .prestashop-switch.switch input:last-of-type:checked~.slide-button{background-color:#ec5c29;border:1px solid #fb561c;-webkit-box-shadow:inset 0 -1px 0 #fb561c;-moz-box-shadow:inset 0 -1px 0 #fb561c;box-shadow:inset 0 -1px 0 #fb561c;left:50%}#list-component{background-color:#fff;max-height:200px;overflow:auto!important}#list-component #MuiScrol-listbox{max-height:none!important;overflow:visible}

package/dist/index.esm.js

@@ -6,6 +6,7 @@ export { default as SessionTimeoutField } from './components/SessionTimeOut/Sess
 export { default as useFormValidatingContext } from './components/Form/FormConstants.esm.js';
 export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent.esm.js';
 export { default as GenericPaginatedGrid } from './components/PaginatedGrid/GenericPaginatedGrid.esm.js';
+export { default as SearchableSelect } from './components/FormComponents/Select/SearchableSelect.esm.js';
 export { TPElementsProvider } from './auth/authContext.esm.js';
 import * as index$1 from './utils/index.esm.js';
 export { index$1 as Utils };

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

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

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

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';