tp-react-elements 3.0.20 → 3.0.22

package/dist/_virtual/index.esm12.js

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

package/dist/_virtual/index.esm13.js

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

package/dist/_virtual/index.esm14.js

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

package/dist/_virtual/index.esm4.js

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

package/dist/_virtual/index.esm6.js

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

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

@@ -59,15 +59,20 @@ const FormActiveSwitch = ({ props }) => {
     const { control, item } = props;
     const valueActive = item.value1 ?? 'A';
     const valueInactive = item.value2 ?? 'I';
+    const disable = Boolean(item.disable);
     const toggleConfig = useOptionalProjectTheme()?.Styles?.Component?.TPToggleSwitch;
     if (!toggleConfig) {
-        return (jsxs("fieldset", { className: "m-form__input", style: FIELDSET_STYLE, children: [item.label && (jsx("legend", { id: `${item.name}-label`, style: LEGEND_STYLE, children: item.label })), jsx(Controller, { name: item.name, control: control, render: ({ field }) => (jsxs("span", { className: "switch prestashop-switch fixed-width-lg", role: "radiogroup", "aria-labelledby": `${item.name}-label`, children: [jsx("input", { id: `${item.name}_on`, name: item.name, type: "radio", value: valueActive, checked: field.value === valueActive, onChange: () => field.onChange(valueActive), "aria-checked": field.value === valueActive }), jsx("label", { htmlFor: `${item.name}_on`, style: LABEL_STYLE, children: item.label1 ?? 'Active' }), jsx("input", { id: `${item.name}_off`, name: item.name, type: "radio", value: valueInactive, checked: field.value === valueInactive, onChange: () => field.onChange(valueInactive), "aria-checked": field.value === valueInactive }), jsx("label", { htmlFor: `${item.name}_off`, style: LABEL_STYLE, children: item.label2 ?? 'In Active' }), jsx("span", { className: "slide-button btn", "aria-hidden": "true" })] })) })] }));
+        return (jsxs("fieldset", { className: "m-form__input", style: FIELDSET_STYLE, children: [item.label && (jsx("legend", { id: `${item.name}-label`, style: LEGEND_STYLE, children: item.label })), jsx(Controller, { name: item.name, control: control, render: ({ field }) => (jsxs("span", { className: "switch prestashop-switch fixed-width-lg", role: "radiogroup", "aria-labelledby": `${item.name}-label`, "aria-disabled": disable, style: { opacity: disable ? 0.5 : 1, cursor: disable ? 'not-allowed' : undefined }, children: [jsx("input", { id: `${item.name}_on`, name: item.name, type: "radio", value: valueActive, checked: field.value === valueActive, onChange: () => !disable && field.onChange(valueActive), disabled: disable, "aria-checked": field.value === valueActive }), jsx("label", { htmlFor: `${item.name}_on`, style: LABEL_STYLE, children: item.label1 ?? 'Active' }), jsx("input", { id: `${item.name}_off`, name: item.name, type: "radio", value: valueInactive, checked: field.value === valueInactive, onChange: () => !disable && field.onChange(valueInactive), disabled: disable, "aria-checked": field.value === valueInactive }), jsx("label", { htmlFor: `${item.name}_off`, style: LABEL_STYLE, children: item.label2 ?? 'In Active' }), jsx("span", { className: "slide-button btn", "aria-hidden": "true" })] })) })] }));
     }
     const onColor = toggleConfig.onColor ?? '#00A86B';
     const offColor = toggleConfig.offColor ?? '#D5DCE6';
     return (jsx(Controller, { name: item.name, control: control, render: ({ field }) => {
             const on = field.value === valueActive;
-            return (jsxs("div", { style: CARD_STYLE, children: [jsx("button", { type: "button", role: "switch", "aria-checked": on, "aria-labelledby": `${item.name}-label`, onClick: () => field.onChange(on ? valueInactive : valueActive), style: { ...TRACK_BASE, background: on ? onColor : offColor }, children: jsx("span", { style: { ...KNOB_BASE, left: on ? 17 : 2 } }) }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }, children: [jsx("span", { id: `${item.name}-label`, style: { fontSize: 12.5, fontWeight: 700, whiteSpace: 'nowrap' }, children: item.label }), jsx("span", { style: {
+            return (jsxs("div", { style: { ...CARD_STYLE, opacity: disable ? 0.5 : 1 }, children: [jsx("button", { type: "button", role: "switch", "aria-checked": on, "aria-labelledby": `${item.name}-label`, "aria-disabled": disable, disabled: disable, onClick: () => !disable && field.onChange(on ? valueInactive : valueActive), style: {
+                            ...TRACK_BASE,
+                            background: on ? onColor : offColor,
+                            cursor: disable ? 'not-allowed' : 'pointer',
+                        }, children: jsx("span", { style: { ...KNOB_BASE, left: on ? 17 : 2 } }) }), jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }, children: [jsx("span", { id: `${item.name}-label`, style: { fontSize: 12.5, fontWeight: 700, whiteSpace: 'nowrap' }, children: item.label }), jsx("span", { style: {
                                             ...BADGE_BASE,
                                             background: on ? '#EEF7F2' : '#F2F5F9',
                                             color: on ? '#00764A' : '#8A97A8',

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

@@ -1,5 +1,13 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import require$$0__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';
@@ -11,14 +19,6 @@ import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEdit
 import SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
 import MultiSelectSearchApi from '../FormComponents/Select/MultiSelectSearchApi.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(() =>

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

@@ -1,3 +1,9 @@
+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';
@@ -5,22 +11,33 @@ export { default as MultiSelectSearchApi } from './Select/MultiSelectSearchApi.e
 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';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/material';
+import '@mui/icons-material/CalendarToday';
+import '@mui/icons-material/ChevronLeft';
+import '@mui/icons-material/ChevronRight';
+import 'react-hook-form';
+export { default as FormBottomField } from './FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+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';
-export { default as FormTextAreaField } from './FormTextAreaField/FormTextAreaField.esm.js';
-export { default as FormTextField } from './FormTextField/FormTextField.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 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,3 +1,4 @@
+import { type SearchOption } from '../../components/FormComponents/Select/SingleSelectSearchApi';
 import type { MRT_ColumnFiltersState } from 'material-react-table';
 /**
  * Describes one server-side filter chip.
@@ -117,6 +118,71 @@ export type ServerFilterDef = {
      * chips like the date picker. Default: `false` (multi-select).
      */
     single?: boolean;
+} | {
+    /**
+     * Single-select chip backed by `SingleSelectSearchApi` — options load
+     * from a remote API as the user types (debounced), instead of a fixed
+     * list. Use this over `searchableDropdown` when the option set is too
+     * large/dynamic to enumerate upfront (customers, products by ID, etc.).
+     * Selected value is stored in `filterValues[filterKey]`, same as
+     * `dropdown`/`searchableDropdown`.
+     */
+    type: 'singleSelectSearch';
+    id: string;
+    label: string;
+    filterKey: string;
+    /** Preferred — consumer-supplied fetch (handles auth). Receives search text + AbortSignal. */
+    fetchOptions?: (searchText: string, signal: AbortSignal) => Promise<SearchOption[]>;
+    /** Fallback base API URL, used only when `fetchOptions` is omitted. */
+    api?: string;
+    jwtHeader?: any;
+    /** Query param name for the fallback `api` path. Default: `'searchvalue'`. */
+    searchValue?: string;
+    /** Minimum characters before the search fires. Default: `3`. */
+    minSearchLength?: number;
+    /** Debounce delay in ms. Default: `300`. */
+    debounceMs?: number;
+    /**
+     * Pre-known option(s) so a restored `filterValues[filterKey]` (e.g. a
+     * filter set before this chip was last opened) shows its label
+     * immediately without a search round-trip.
+     */
+    options?: SearchOption[];
+    placeholder?: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
+} | {
+    /**
+     * Multi-select chip backed by `MultiSelectSearchApi` — same remote-API
+     * search as `singleSelectSearch`, but multiple values can be picked.
+     * Selected values are joined as a comma-separated string in
+     * `filterValues[filterKey]` (e.g. `"P001,P004"`), same convention as
+     * `multiSelect`. Split on `","` in your `fetchPage` handler.
+     */
+    type: 'multiSelectSearch';
+    id: string;
+    label: string;
+    filterKey: string;
+    /** Preferred — consumer-supplied fetch (handles auth). Receives search text + AbortSignal. */
+    fetchOptions?: (searchText: string, signal: AbortSignal) => Promise<SearchOption[]>;
+    /** Fallback base API URL, used only when `fetchOptions` is omitted. */
+    api?: string;
+    jwtHeader?: any;
+    /** Query param name for the fallback `api` path. Default: `'searchvalue'`. */
+    searchValue?: string;
+    /** Minimum characters before the search fires. Default: `3`. */
+    minSearchLength?: number;
+    /** Debounce delay in ms. Default: `300`. */
+    debounceMs?: number;
+    /** Pre-known option(s) so restored selections show their labels immediately. */
+    options?: SearchOption[];
+    /** Chips shown individually before collapsing into "N selected". Default: `2`. */
+    maxChips?: number;
+    /** Caps how many options can be selected at once. Default: no limit. */
+    maxSelections?: number;
+    placeholder?: string;
+    /** Show this chip in the filter bar on first render. Default: `false`. */
+    defaultVisible?: boolean;
 };
 interface AvailableColumn {
     id: string;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { memo, useState, useEffect, useCallback } from 'react';
+import { memo, useState, useEffect, useCallback, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -9,6 +9,8 @@ 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 SingleSelectSearchApi from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
+import MultiSelectSearchApi from '../FormComponents/Select/MultiSelectSearchApi.esm.js';
 import { TextField, InputAdornment, IconButton, Box, Typography, Tooltip, Button, Popover, Stack, List, ListItemButton, ListItemText, Checkbox, Divider } from '@mui/material';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import TuneIcon from '@mui/icons-material/Tune';
@@ -33,6 +35,8 @@ const TYPE_PILL = {
     searchableDropdown: { label: 'Search', color: '#bf360c', bg: '#fbe9e7' },
     multiSelect: { label: 'Multi', color: '#0277bd', bg: '#e1f5fe' },
     monthPicker: { label: 'Month', color: '#6a1b9a', bg: '#f3e5f5' },
+    singleSelectSearch: { label: 'API', color: '#ad1457', bg: '#fce4ec' },
+    multiSelectSearch: { label: 'API Multi', color: '#ad1457', bg: '#fce4ec' },
 };
 // Column filter type pills (used in COLUMN FILTERS section of Manage Filters)
 const COLUMN_TYPE_PILL = {
@@ -407,6 +411,80 @@ const MonthPickerChip = ({ label, value, onApply, onRemove, chipStyle, baseId, s
                             borderTop: '1px solid', borderColor: 'divider',
                         }, children: jsx(Button, { size: "small", variant: "contained", disableElevation: true, onClick: handleApply, children: "Apply" }) }))] })] }));
 };
+const SingleSelectSearchChip = ({ label, value, onApply, onRemove, fetchOptions, api, jwtHeader, searchValue, minSearchLength, debounceMs, options, placeholder, chipStyle, baseId, }) => {
+    const [anchor, setAnchor] = useState(null);
+    // Captured from onChangeFn's fullOption when the user selects — the chip's
+    // own display text, since the committed filter value is just a raw id.
+    const [selectedLabel, setSelectedLabel] = useState('');
+    const active = Boolean(value);
+    const rhf = useForm({ defaultValues: { select: value || '' } });
+    const { register, control, getValues, clearErrors, watch, setValue: rhfSetValue } = rhf;
+    // Sync form value when external value changes (e.g. Clear All) — clear the
+    // cached label too so a stale one never outlives its filter value.
+    useEffect(() => {
+        rhfSetValue('select', value || '');
+        if (!value)
+            setSelectedLabel('');
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    const item = useMemo(() => ({
+        name: 'select',
+        label,
+        inputType: 'single-select-search',
+        placeholder: placeholder ?? 'Type to search…',
+        api,
+        jwtHeader,
+        searchValue,
+        options,
+        onChangeFn: (v, fullOption) => {
+            setSelectedLabel(fullOption?.label ?? (v != null ? String(v) : ''));
+            onApply(v != null ? String(v) : '');
+            setAnchor(null);
+        },
+    }), [label, placeholder, api, jwtHeader, searchValue, options, onApply]);
+    const chipText = active ? `${label}: ${selectedLabel || value}` : label;
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), 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, width: 280 } }, children: jsx(SingleSelectSearchApi, { props: { item, register, control, errors: {}, getValues, clearErrors, setValue: rhfSetValue, watch }, variant: "outlined", fetchOptions: fetchOptions, minSearchLength: minSearchLength, debounceMs: debounceMs }) })] }));
+};
+const MultiSelectSearchChip = ({ label, value, onApply, onRemove, fetchOptions, api, jwtHeader, searchValue, minSearchLength, debounceMs, options, maxChips, maxSelections, placeholder, chipStyle, baseId, }) => {
+    const [anchor, setAnchor] = useState(null);
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const committedValues = value ? value.split(',').filter(Boolean) : [];
+    const active = committedValues.length > 0;
+    const rhf = useForm({ defaultValues: { select: committedValues } });
+    const { register, control, getValues, clearErrors, watch, setValue: rhfSetValue } = rhf;
+    useEffect(() => {
+        rhfSetValue('select', value ? value.split(',').filter(Boolean) : []);
+        if (!value)
+            setSelectedOptions([]);
+    }, [value]); // eslint-disable-line react-hooks/exhaustive-deps
+    const item = useMemo(() => ({
+        name: 'select',
+        label,
+        inputType: 'multi-select-search',
+        placeholder: placeholder ?? 'Type to search…',
+        api,
+        jwtHeader,
+        searchValue,
+        options,
+        onChangeFn: (values, fullOptions) => {
+            setSelectedOptions(fullOptions ?? []);
+            onApply((values ?? []).join(','));
+        },
+    }), [label, placeholder, api, jwtHeader, searchValue, options, onApply]);
+    const chipText = (() => {
+        if (!active)
+            return label;
+        if (selectedOptions.length > 0) {
+            if (selectedOptions.length === 1)
+                return `${label}: ${selectedOptions[0].label}`;
+            if (selectedOptions.length === 2)
+                return `${label}: ${selectedOptions.map((o) => o.label).join(', ')}`;
+            return `${label}: ${selectedOptions.length} selected`;
+        }
+        // Labels not yet cached (e.g. restored value before any onChangeFn call) — fall back to the count.
+        return `${label}: ${committedValues.length} selected`;
+    })();
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: active ? chipText : '', placement: "top", arrow: true, children: jsx(Button, { id: baseId ? `${baseId}_chip` : undefined, variant: "outlined", size: "small", onClick: (e) => setAnchor(e.currentTarget), startIcon: jsx(SearchIcon, { sx: { fontSize: '14px !important', mr: -0.25 } }), endIcon: jsx(CloseIcon, { id: baseId ? `${baseId}_remove_icon` : undefined, sx: { fontSize: '12px !important' }, onClick: (e) => { e.stopPropagation(); onRemove(); } }), sx: chipSx(active, chipStyle), children: jsx(ChipLabel, { text: chipText }) }) }), 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, width: 300 } }, children: jsx(MultiSelectSearchApi, { props: { item, register, control, errors: {}, getValues, clearErrors, setValue: rhfSetValue, watch }, variant: "outlined", fetchOptions: fetchOptions, minSearchLength: minSearchLength, debounceMs: debounceMs, maxChips: maxChips, maxSelections: maxSelections }) })] }));
+};
 const GlobalSearchInput = memo(({ value, onChange, chipStyle, placeholder = 'Search…' }) => {
     const [draft, setDraft] = useState(value);
     // Keep local draft in sync when the external value changes elsewhere
@@ -522,7 +600,9 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
             def?.type === 'dropdown' ||
             def?.type === 'searchableDropdown' ||
             def?.type === 'multiSelect' ||
-            def?.type === 'monthPicker') {
+            def?.type === 'monthPicker' ||
+            def?.type === 'singleSelectSearch' ||
+            def?.type === 'multiSelectSearch') {
             onFilterValuesChange({ ...filterValues, [def.filterKey]: '' });
         }
         else if (def?.type === 'date') {
@@ -565,6 +645,12 @@ const DynamicFilterBar = ({ serverFilterDefs, visibleFilterIds, onToggleFilter,
                 if (def?.type === 'monthPicker') {
                     return (jsx(MonthPickerChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined, single: def.single }, id));
                 }
+                if (def?.type === 'singleSelectSearch') {
+                    return (jsx(SingleSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), fetchOptions: def.fetchOptions, api: def.api, jwtHeader: def.jwtHeader, searchValue: def.searchValue, minSearchLength: def.minSearchLength, debounceMs: def.debounceMs, options: def.options, placeholder: def.placeholder, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                }
+                if (def?.type === 'multiSelectSearch') {
+                    return (jsx(MultiSelectSearchChip, { label: def.label, value: filterValues[def.filterKey] ?? '', onApply: (v) => onFilterValuesChange({ ...filterValues, [def.filterKey]: v }), onRemove: () => removeFilter(id), fetchOptions: def.fetchOptions, api: def.api, jwtHeader: def.jwtHeader, searchValue: def.searchValue, minSearchLength: def.minSearchLength, debounceMs: def.debounceMs, options: def.options, maxChips: def.maxChips, maxSelections: def.maxSelections, placeholder: def.placeholder, chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
+                }
                 if (def?.type === 'date') {
                     return (jsx(DatePickerChip, { label: def.label, value: getColValue(def.columnKey), onApply: (v) => applyColFilter(def.columnKey, v), onRemove: () => removeFilter(id), chipStyle: chipStyle, baseId: gridId ? `${gridId}_${id}` : undefined }, id));
                 }

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

@@ -4,6 +4,7 @@
 import type { TPColumnDef, InvoiceDetail } from './types';
 import type { PagedResult } from './GenericPaginatedGrid';
 import type { ServerFilterDef } from './DynamicFilterBar';
+import type { SearchOption } from '../../components/FormComponents/Select/SingleSelectSearchApi';
 export interface EmployeeRow {
     id: number;
     name: string;
@@ -20,6 +21,10 @@ export declare const employeeColumns: TPColumnDef<EmployeeRow>[];
 export declare const employeeFilterDefs: ServerFilterDef[];
 export declare const employeeDefaultFilters: Record<string, string>;
 export declare function fetchEmployeePage(filters: Record<string, string>, pageIndex: number, pageSize?: number): Promise<PagedResult<EmployeeRow>>;
+/** Mock remote search — simulates network latency + case-insensitive filtering. */
+export declare function searchManagers(text: string, signal: AbortSignal): Promise<SearchOption[]>;
+export declare function searchLocations(text: string, signal: AbortSignal): Promise<SearchOption[]>;
+export declare const employeeSearchFilterDefs: ServerFilterDef[];
 export interface ProductRow {
     sku: string;
     title: string;

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

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

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

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm6.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireStyles } from '../../styles.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm13.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm12.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

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

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm14.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/package.json

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