tp-react-elements 3.0.17 → 3.0.20

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm6.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 DateRangePicker = {};
+var Calendar = {};
 
-export { DateRangePicker as __exports };
+export { Calendar as __exports };

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

@@ -1,13 +1,5 @@
 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';
@@ -17,7 +9,16 @@ import FormTextFieldWithSelect from '../FormComponents/FormTextFieldWithSelect/F
 import DateRangePickerComponent from '../DateRangePicker/DateRangePicker.esm.js';
 import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.esm.js';
 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(() =>
@@ -90,6 +91,8 @@ const RenderForm = (props) => {
             return jsx(MultiSelectAutocomplete, { props: props, variant: variant });
         case 'single-select-search':
             return jsx(SingleSelectSearchApi, { props: props, variant: variant });
+        case 'multi-select-search':
+            return jsx(MultiSelectSearchApi, { props: props, variant: variant });
         // Dropdown select (non auto-complete)
         case 'select-v2':
         case 'basic-select': // new alias

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

@@ -0,0 +1,88 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+import type { SearchOption } from './SingleSelectSearchApi';
+export type { SearchOption };
+/**
+ * Multi-select autocomplete that fetches options from a remote API — the
+ * multi-value counterpart of {@link SingleSelectSearchApi}, combining its
+ * debounced-search/API mechanics with `MultiSelectAutocomplete`'s chip +
+ * checkbox multi-select UI.
+ *
+ * ### Authentication
+ * Prefer `fetchOptions` — a consumer-supplied async function that handles auth
+ * internally and returns `SearchOption[]`. Falls back to `item.api` +
+ * `item.jwtHeader` via axios when `fetchOptions` is not provided.
+ *
+ * ### Values
+ * Stored as **`string[]`** in the form field (same convention as
+ * `MultiSelectAutocomplete`). CSV strings are accepted and normalised
+ * automatically.
+ *
+ * ### Pre-selected values (edit mode)
+ * Pass every pre-selected option in `item.options` so their labels display
+ * immediately without a search round-trip — same pattern as
+ * `SingleSelectSearchApi`. Unlike the single-select version there is no
+ * `autoFIll` equivalent here: with N pre-selected ids there is no single
+ * search term to seed, so `item.options` is the only way to pre-populate
+ * labels. Any pre-selected id never seen via `item.options` or a live search
+ * still renders as a chip (falling back to the raw id as its label) rather
+ * than silently disappearing from the field.
+ *
+ * ### API call guard
+ * Searches fire only after `minSearchLength` chars AND after the
+ * `debounceMs` debounce delay — preventing a request per keystroke.
+ *
+ * ### onChangeFn
+ * Only fires on genuine user interactions (select / remove / clear-all) —
+ * not when the form is populated programmatically (`defaultValues`,
+ * `reset()`, external `setValue()`). Receives `(values: string[], options:
+ * SearchOption[])`.
+ *
+ * ### Reviewing/managing selections — the info icon
+ * Once at least one option is selected, an info icon appears at the end of
+ * the input (next to MUI's own clear/dropdown icons). Clicking it opens a
+ * popover listing every selected label with its own remove button — a
+ * click-based, keyboard/touch-friendly alternative to the "N selected" chip's
+ * hover-only tooltip, and the only way to review selections once they've
+ * collapsed past `maxChips` (the dropdown itself only shows the *current
+ * search's* results, not the full selection).
+ *
+ * ### maxSelections — capping how many can be picked
+ * When set, further options are disabled (greyed out, not just hidden) once
+ * the cap is reached — already-selected ones stay clickable so the user can
+ * still deselect. A "`N/max` selected" caption appears below the field, and
+ * the dropdown's empty-state message explains the cap once it's hit. Omitted
+ * by default — unlimited selections, unchanged from before this prop existed.
+ */
+declare const MultiSelectSearchApi: ({ props, variant, minSearchLength, debounceMs, fetchOptions, maxChips, maxSelections, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+    /** Minimum characters before the search fires. Default: `3`. */
+    minSearchLength?: number;
+    /** Debounce delay in milliseconds. Default: `300`. */
+    debounceMs?: number;
+    /**
+     * Preferred way to load options. Takes precedence over `item.api`.
+     * Receives the current search text and an AbortSignal for cancellation.
+     *
+     * ```tsx
+     * fetchOptions={async (text, signal) => {
+     *   const res = await myAuthenticatedApi.search(text, { signal });
+     *   return res.items.map(r => ({ label: r.name, value: r.id }));
+     * }}
+     * ```
+     */
+    fetchOptions?: (searchText: string, signal: AbortSignal) => Promise<SearchOption[]>;
+    /**
+     * Maximum number of chips shown individually before collapsing into
+     * "N selected". Default: `2`.
+     */
+    maxChips?: number;
+    /**
+     * Maximum number of options that can be selected at once. When the cap is
+     * reached, unselected options are disabled (still visible, not removed
+     * from the list) until the user frees up a slot by deselecting one.
+     * Omitted by default — no limit.
+     */
+    maxSelections?: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelectSearchApi;

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

@@ -0,0 +1,375 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Autocomplete, TextField, InputAdornment, IconButton, Box, Tooltip, Chip, Checkbox, Paper, Popover, List, ListItem, ListItemText, Typography } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import '../../../node_modules/axios/index.esm.js';
+import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { useWatch, Controller } from 'react-hook-form';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import axios from '../../../node_modules/axios/lib/axios.esm.js';
+
+// ─── Module-level helpers ─────────────────────────────────────────────────────
+/**
+ * Appends a query parameter correctly regardless of whether the base URL
+ * already contains a query string (`?` or `&`).
+ */
+const appendQueryParam = (url, key, value) => {
+    const sep = url.includes('?') ? '&' : '?';
+    return `${url}${sep}${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
+};
+/** True when the error is a request cancellation (AbortController / axios). */
+const isCancellation = (err) => axios.isCancel?.(err) ||
+    (err instanceof Error && (err.name === 'AbortError' || err.name === 'CanceledError'));
+/**
+ * Normalises any value shape coming from react-hook-form to a plain string[].
+ *
+ * | Input shape          | Output            |
+ * |-----------------------|-------------------|
+ * | `string[]`            | as-is (coerced)   |
+ * | `'1,2,3'` (CSV)       | `['1','2','3']`   |
+ * | `null` / `undefined`  | `[]`              |
+ * | any other scalar      | `[String(value)]` |
+ */
+const normalizeToStringArray = (value) => {
+    if (Array.isArray(value))
+        return value.map((v) => String(v));
+    if (typeof value === 'string') {
+        return value
+            .split(',')
+            .map((v) => v.trim())
+            .filter((v) => v.length > 0);
+    }
+    if (value == null)
+        return [];
+    return [String(value)];
+};
+/**
+ * MUI Autocomplete change reasons that represent a genuine user interaction.
+ * `'blur'` is deliberately excluded because it fires programmatically when
+ * focus moves away (e.g. on form reset / programmatic setValue), which would
+ * trigger `onChangeFn` → API calls for pre-selected values.
+ */
+const USER_CHANGE_REASONS = new Set(['selectOption', 'removeOption', 'clear']);
+// ─── Debounce hook ────────────────────────────────────────────────────────────
+function useDebounce(value, delayMs) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(() => {
+        const id = setTimeout(() => setDebounced(value), delayMs);
+        return () => clearTimeout(id);
+    }, [value, delayMs]);
+    return debounced;
+}
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * Multi-select autocomplete that fetches options from a remote API — the
+ * multi-value counterpart of {@link SingleSelectSearchApi}, combining its
+ * debounced-search/API mechanics with `MultiSelectAutocomplete`'s chip +
+ * checkbox multi-select UI.
+ *
+ * ### Authentication
+ * Prefer `fetchOptions` — a consumer-supplied async function that handles auth
+ * internally and returns `SearchOption[]`. Falls back to `item.api` +
+ * `item.jwtHeader` via axios when `fetchOptions` is not provided.
+ *
+ * ### Values
+ * Stored as **`string[]`** in the form field (same convention as
+ * `MultiSelectAutocomplete`). CSV strings are accepted and normalised
+ * automatically.
+ *
+ * ### Pre-selected values (edit mode)
+ * Pass every pre-selected option in `item.options` so their labels display
+ * immediately without a search round-trip — same pattern as
+ * `SingleSelectSearchApi`. Unlike the single-select version there is no
+ * `autoFIll` equivalent here: with N pre-selected ids there is no single
+ * search term to seed, so `item.options` is the only way to pre-populate
+ * labels. Any pre-selected id never seen via `item.options` or a live search
+ * still renders as a chip (falling back to the raw id as its label) rather
+ * than silently disappearing from the field.
+ *
+ * ### API call guard
+ * Searches fire only after `minSearchLength` chars AND after the
+ * `debounceMs` debounce delay — preventing a request per keystroke.
+ *
+ * ### onChangeFn
+ * Only fires on genuine user interactions (select / remove / clear-all) —
+ * not when the form is populated programmatically (`defaultValues`,
+ * `reset()`, external `setValue()`). Receives `(values: string[], options:
+ * SearchOption[])`.
+ *
+ * ### Reviewing/managing selections — the info icon
+ * Once at least one option is selected, an info icon appears at the end of
+ * the input (next to MUI's own clear/dropdown icons). Clicking it opens a
+ * popover listing every selected label with its own remove button — a
+ * click-based, keyboard/touch-friendly alternative to the "N selected" chip's
+ * hover-only tooltip, and the only way to review selections once they've
+ * collapsed past `maxChips` (the dropdown itself only shows the *current
+ * search's* results, not the full selection).
+ *
+ * ### maxSelections — capping how many can be picked
+ * When set, further options are disabled (greyed out, not just hidden) once
+ * the cap is reached — already-selected ones stay clickable so the user can
+ * still deselect. A "`N/max` selected" caption appears below the field, and
+ * the dropdown's empty-state message explains the cap once it's hit. Omitted
+ * by default — unlimited selections, unchanged from before this prop existed.
+ */
+const MultiSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs = 300, fetchOptions, maxChips = 2, maxSelections, }) => {
+    // ── Stable references from props ──────────────────────────────────────────
+    const { control, errors, item, setValue, clearErrors } = props;
+    const { name, label, required, disable, placeholder, helperText, setLoadList, api, jwtHeader, searchValue: searchParamKey, options: rawOptions, sx: itemSx, labelVariant, } = item;
+    // ── Form value (reactive, no function call in deps) ───────────────────────
+    const formValue = useWatch({ control, name });
+    const selectedIds = useMemo(() => normalizeToStringArray(formValue), [formValue]);
+    const isError = !!errors?.[name];
+    const isShowBorderError = isError && selectedIds.length === 0;
+    // ── State ─────────────────────────────────────────────────────────────────
+    const [open, setOpen] = useState(false);
+    /** Anchor for the "view/manage selected items" popover — null when closed. */
+    const [infoAnchorEl, setInfoAnchorEl] = useState(null);
+    /** Text shown in the input (display). */
+    const [displayText, setDisplayText] = useState('');
+    /** Text that drives API calls — only updated when user types. */
+    const [searchQuery, setSearchQuery] = useState('');
+    /** Live search results for the current query. */
+    const [options, setOptions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [fetchError, setFetchError] = useState(null);
+    const tagsContainerRef = useRef(null);
+    /**
+     * Persisted label cache, keyed by `String(value)`, for every option ever
+     * seen — seeded from `item.options`, then grown as live search results and
+     * user selections come in. This is what lets a chip keep its label after a
+     * later search replaces `options` with unrelated results (`options` only
+     * ever reflects the *current* query's matches).
+     */
+    const [knownOptions, setKnownOptions] = useState(() => {
+        const map = new Map();
+        (rawOptions || []).forEach((o) => map.set(String(o.value), { label: String(o.label), value: o.value }));
+        return map;
+    });
+    const debouncedSearch = useDebounce(searchQuery, debounceMs);
+    // ── Grow the label cache as live search results come in ───────────────────
+    useEffect(() => {
+        if (options.length === 0)
+            return;
+        setKnownOptions((prev) => {
+            let changed = false;
+            const next = new Map(prev);
+            for (const o of options) {
+                const key = String(o.value);
+                if (!next.has(key)) {
+                    next.set(key, o);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [options]);
+    // ── API fetch ─────────────────────────────────────────────────────────────
+    useEffect(() => {
+        if (!debouncedSearch || debouncedSearch.length < minSearchLength) {
+            setOptions([]);
+            return;
+        }
+        const controller = new AbortController();
+        setIsLoading(true);
+        setFetchError(null);
+        const load = async () => {
+            try {
+                let data;
+                if (fetchOptions) {
+                    // ── Preferred path: consumer-supplied function (auth-aware) ──
+                    data = await fetchOptions(debouncedSearch, controller.signal);
+                }
+                else if (api) {
+                    // ── Fallback: item.api + item.jwtHeader via axios ─────────────
+                    const url = appendQueryParam(api, searchParamKey || 'searchvalue', debouncedSearch);
+                    const res = await axios.get(url, { signal: controller.signal, headers: jwtHeader });
+                    data = res.data;
+                }
+                else {
+                    data = [];
+                }
+                setOptions(data);
+                setLoadList?.(data);
+                setIsLoading(false);
+            }
+            catch (err) {
+                if (isCancellation(err))
+                    return; // silently ignore aborted requests
+                setFetchError('Failed to load options. Please try again.');
+                setIsLoading(false);
+            }
+        };
+        load();
+        return () => controller.abort();
+    }, [debouncedSearch, minSearchLength, api, fetchOptions]); // eslint-disable-line react-hooks/exhaustive-deps
+    // ── Stable callbacks ──────────────────────────────────────────────────────
+    const getOptionLabel = useCallback((option) => option?.label ?? '', []);
+    const isOptionEqualToValue = useCallback((option, value) => String(option?.value) === String(value?.value), []);
+    const handleChange = useCallback((_, newValue, reason) => {
+        // Defensive guard — getOptionDisabled already blocks picking past the
+        // cap at the UI level, this just protects against any other path in.
+        if (typeof maxSelections === 'number' && (newValue?.length ?? 0) > maxSelections)
+            return;
+        const values = (newValue || []).map((o) => String(o.value));
+        setValue(name, values, { shouldValidate: false, shouldDirty: true });
+        // Cache labels immediately so chips never flash blank before the
+        // options-grow effect above runs on the next render.
+        setKnownOptions((prev) => {
+            const next = new Map(prev);
+            (newValue || []).forEach((o) => next.set(String(o.value), o));
+            return next;
+        });
+        if (USER_CHANGE_REASONS.has(reason)) {
+            item.onChangeFn?.(values, newValue);
+        }
+        clearErrors?.(name);
+    }, [setValue, clearErrors, name, item.onChangeFn, maxSelections]);
+    const handleInputChange = useCallback((_, newInputValue, reason) => {
+        setDisplayText(newInputValue);
+        if (reason === 'input') {
+            // User is typing → trigger debounced API search
+            setSearchQuery(newInputValue);
+        }
+        if (reason === 'clear') {
+            // Clear (×) icon — resets the search text/results; selected chips are
+            // cleared separately via handleChange's 'clear' reason.
+            setSearchQuery('');
+            setOptions([]);
+            setDisplayText('');
+        }
+        // 'reset' fires when MUI resets the input text after a selection — no
+        // search should trigger here.
+    }, []);
+    /** Clears ALL selections — wired to the delete button on the overflow chip. */
+    const handleClearAll = useCallback(() => {
+        setValue(name, [], { shouldValidate: false, shouldDirty: true });
+        item.onChangeFn?.([], []); // user explicitly cleared all → fire callback
+        clearErrors?.(name);
+    }, [setValue, clearErrors, name, item.onChangeFn]);
+    // ── Resolved Autocomplete value ───────────────────────────────────────────
+    // Every selected id is resolved to its full option via: label cache →
+    // current search results → raw id as a last-resort label (never silently
+    // dropped, unlike a lookup miss on the single-select counterpart).
+    const resolvedValues = useMemo(() => {
+        return selectedIds.map((id) => {
+            const known = knownOptions.get(id);
+            if (known)
+                return known;
+            const live = options.find((o) => String(o.value) === id);
+            if (live)
+                return live;
+            return { label: id, value: id };
+        });
+    }, [selectedIds, knownOptions, options]);
+    /** Removes a single selection — wired to each row in the info popover. */
+    const handleRemoveOne = useCallback((valueToRemove) => {
+        const remaining = resolvedValues.filter((o) => String(o.value) !== String(valueToRemove));
+        const values = remaining.map((o) => String(o.value));
+        setValue(name, values, { shouldValidate: false, shouldDirty: true });
+        item.onChangeFn?.(values, remaining);
+        clearErrors?.(name);
+    }, [resolvedValues, setValue, clearErrors, name, item.onChangeFn]);
+    /**
+     * Backspace with an empty search box removes the last-selected chip —
+     * standard multi-select affordance (Gmail "To:" field, MUI Chip patterns).
+     * Not native here because `inputValue` is externally controlled for the
+     * debounced-search wiring, which suppresses MUI Autocomplete's own default
+     * handling of this key combination.
+     */
+    const handleInputKeyDown = useCallback((e) => {
+        if (e.key === 'Backspace' && displayText === '' && resolvedValues.length > 0) {
+            handleRemoveOne(resolvedValues[resolvedValues.length - 1].value);
+        }
+    }, [displayText, resolvedValues, handleRemoveOne]);
+    const isOverflowing = resolvedValues.length > maxChips;
+    const selectedTooltip = useMemo(() => resolvedValues.map((o) => String(o.label)).join(', '), [resolvedValues]);
+    const atCap = typeof maxSelections === 'number' && selectedIds.length >= maxSelections;
+    // ── noOptionsText ─────────────────────────────────────────────────────────
+    const noOptionsText = useMemo(() => {
+        if (atCap) {
+            return `Maximum ${maxSelections} selected — remove one to add another`;
+        }
+        if (searchQuery.length < minSearchLength) {
+            return `Type at least ${minSearchLength} character${minSearchLength === 1 ? '' : 's'} to search`;
+        }
+        return fetchError ?? 'No results found';
+    }, [atCap, maxSelections, searchQuery, minSearchLength, fetchError]);
+    const chipSx = useMemo(() => ({
+        mr: 0.5,
+        height: 20,
+        fontSize: '10px',
+        borderRadius: '10px',
+        '& .MuiChip-label': { px: 0.75, py: 0 },
+    }), []);
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, fullWidth: true, multiple: true, disableCloseOnSelect: true, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), value: resolvedValues, inputValue: displayText, onInputChange: handleInputChange, onChange: handleChange, onBlur: onBlur, options: options, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, getOptionDisabled: (option) => {
+                        if (option?.disable)
+                            return true;
+                        // At the cap, only already-selected options stay pickable (so
+                        // the user can still deselect); everything else disables.
+                        if (atCap)
+                            return !selectedIds.includes(String(option.value));
+                        return false;
+                    }, 
+                    // Options come pre-filtered from the server — disable client-side filtering
+                    filterOptions: (x) => x, loading: isLoading, disabled: disable, size: "small", autoHighlight: true, selectOnFocus: true, clearOnBlur: false, noOptionsText: noOptionsText, sx: {
+                        '& .MuiAutocomplete-input': {
+                            padding: '0px 0px 0px 5px !important',
+                        },
+                        '& .MuiAutocomplete-inputRoot': {
+                            flexWrap: 'nowrap',
+                            alignItems: 'center',
+                        },
+                        // MUI docks its clear/dropdown-arrow group flush against the right
+                        // edge via `position: absolute; right: 9px`. Shifting it left makes
+                        // room there for the info icon, which is rendered as its own
+                        // absolutely-positioned adornment docked at the true right edge —
+                        // safer than fighting MUI's internal layout of the clear/arrow pair.
+                        '& .MuiAutocomplete-endAdornment': {
+                            right: '32px !important',
+                        },
+                        '& .MuiOutlinedInput-root': {
+                            paddingRight: '52px !important',
+                        },
+                        '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root': {
+                            top: '-5px',
+                        },
+                        ...itemSx,
+                    }, slotProps: {
+                        popper: { sx: { zIndex: 20000 } },
+                        listbox: { sx: { fontSize: '11px' } },
+                    }, PaperComponent: ({ children, ...paperProps }) => (jsx(Paper, { elevation: 4, ...paperProps, children: children })), renderOption: (renderProps, option, state) => {
+                        const { key, ...otherProps } = renderProps;
+                        return (jsxs("li", { ...otherProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: state.selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] }, key));
+                    }, renderTags: (tagValue, getTagProps) => (jsx(Box, { ref: tagsContainerRef, sx: {
+                            display: 'flex',
+                            flexWrap: 'nowrap',
+                            overflow: 'hidden',
+                            alignItems: 'center',
+                            '& :hover': { cursor: 'pointer' },
+                        }, children: isOverflowing ? (
+                        // ── Collapsed chip: shows "N selected" with tooltip ──────
+                        jsx(Tooltip, { title: selectedTooltip, placement: "top", children: jsx(Chip, { size: "small", label: `${tagValue.length} selected`, onClick: () => setOpen(true), onDelete: handleClearAll, clickable: true, sx: chipSx }) })) : (
+                        // ── Individual chips: up to maxChips items ───────────────
+                        tagValue.map((option, index) => {
+                            const { key: tagKey, ...tagProps } = getTagProps({ index });
+                            return (jsx(Tooltip, { title: String(option?.label ?? option), placement: "top", children: jsx(Chip, { ...tagProps, size: "small", label: String(option?.label ?? option), sx: chipSx }) }, tagKey ?? String(option?.value ?? option?.label ?? index)));
+                        })) })), renderInput: (params) => (jsx(TextField, { ...params, error: isShowBorderError, label: variant !== 'standard' && labelVariant !== 'static' ? `${label}${required ? ' *' : ''}` : '', placeholder: placeholder, inputProps: {
+                            ...params.inputProps,
+                            onKeyDown: (e) => {
+                                params.inputProps.onKeyDown?.(e);
+                                handleInputKeyDown(e);
+                            },
+                            'aria-labelledby': `${name}-label`,
+                            'aria-describedby': `${name}-helper ${name}-error`,
+                            'aria-required': required ? true : undefined,
+                        }, InputProps: {
+                            ...params.InputProps,
+                            endAdornment: (jsxs(Fragment, { children: [params.InputProps.endAdornment, resolvedValues.length > 0 && (jsx(InputAdornment, { position: "end", sx: { position: 'absolute', right: '2px', top: '50%', transform: 'translateY(-50%)' }, children: jsx(IconButton, { size: "small", edge: "end", onClick: (e) => setInfoAnchorEl(e.currentTarget), "aria-label": `View ${resolvedValues.length} selected item${resolvedValues.length === 1 ? '' : 's'}`, children: jsx(InfoOutlinedIcon, { fontSize: "small" }) }) }))] })),
+                        } })) }), jsx(Popover, { open: Boolean(infoAnchorEl), anchorEl: infoAnchorEl, onClose: () => setInfoAnchorEl(null), anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: { paper: { sx: { zIndex: 20001 } } }, children: jsx(List, { dense: true, sx: { minWidth: 220, maxWidth: 320, maxHeight: 300, overflow: 'auto', py: 0.5 }, children: resolvedValues.length === 0 ? (jsx(ListItem, { children: jsx(ListItemText, { primaryTypographyProps: { fontSize: '12px' }, primary: "No items selected" }) })) : (resolvedValues.map((opt) => (jsx(ListItem, { secondaryAction: jsx(IconButton, { size: "small", edge: "end", onClick: () => handleRemoveOne(opt.value), "aria-label": `Remove ${opt.label}`, children: jsx(CloseIcon, { sx: { fontSize: 14 } }) }), sx: { py: 0.25 }, children: jsx(ListItemText, { primaryTypographyProps: { fontSize: '12px' }, primary: opt.label }) }, String(opt.value))))) }) }), typeof maxSelections === 'number' && (jsxs(Typography, { variant: "caption", color: atCap ? 'error' : 'text.secondary', sx: { mt: 0.25, display: 'block' }, children: [selectedIds.length, "/", maxSelections, " selected", atCap ? ' — maximum reached' : ''] })), helperText && (jsx(Typography, { variant: "caption", color: "primary", sx: { mt: 0.25, display: 'block' }, children: helperText })), fetchError && (jsx(Typography, { variant: "caption", color: "error", sx: { mt: 0.25, display: 'block' }, children: fetchError })), jsx(FormBottomField, { ...props })] })) }));
+};
+
+export { MultiSelectSearchApi as default };

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

@@ -76,7 +76,7 @@ const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs
     // ── Stable references from props ──────────────────────────────────────────
     const { control, errors, item, setValue, clearErrors } = props;
     const { name, label, required, disable, placeholder, helperText, autoFIll: autoFill, // match the (typo'd) field name in FormSectionPropsItem
-    setLoadList, api, jwtHeader, searchValue: searchParamKey, sx: itemSx, } = item;
+    setLoadList, api, jwtHeader, searchValue: searchParamKey, sx: itemSx, labelVariant, } = item;
     // ── Form value (reactive, no function call in deps) ───────────────────────
     const formValue = useWatch({ control, name });
     const isError = !!errors?.[name];
@@ -259,7 +259,7 @@ const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs
                                     },
                                 ],
                             },
-                        }, children: jsx(TextField, { ...params, error: isError && !formValue, label: variant !== 'standard'
+                        }, children: jsx(TextField, { ...params, error: isError && !formValue, label: variant !== 'standard' && labelVariant !== 'static'
                                 ? `${label}${required ? ' *' : ''}`
                                 : '', placeholder: placeholder, inputProps: {
                                 ...params.inputProps,

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

@@ -6,6 +6,7 @@ export { FormCheckBox } from '../CheckBox';
 export { default as SingleSelect } from './Select/SingleSelect';
 export { default as SingleSelectNonAutoComplete } from './Select/SingleSelectNonAutoComplete';
 export { default as SingleSelectSearchApi } from './Select/SingleSelectSearchApi';
+export { default as MultiSelectSearchApi } from './Select/MultiSelectSearchApi';
 export { default as MultiSelectV1 } from './Select/MultiSelectv1';
 export { default as MultiSelectTable } from './Select/MultiSelectTable';
 export { default as SearchableSelect } from './Select/SearchableSelect';

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

@@ -1,42 +1,26 @@
-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 MultiSelectSearchApi } from './Select/MultiSelectSearchApi.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';
-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 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 FormRenderFileUpload } from './FileUpload/FormRenderFileUpload.esm.js';
 export { default as FormRenderMultiFileUpload } from './FileUpload/FormRenderMultiFileUpload.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/GenericPaginatedGrid.esm.js

@@ -390,19 +390,19 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
                 .map((d) => d.id);
             // Column filter chips with defaultVisible: true.
             // Mirror the same exclusion rules used by availableColumns:
-            //   • must have an accessorKey
+            //   • must have a filter identifier (accessorKey, falling back to id)
             //   • must not have enableColumnFilter: false
             //   • must not be managed by a server-side 'date' filter def
             const serverManagedColKeys = new Set(serverFilterDefs
                 .filter((d) => d.type === 'date')
                 .map((d) => d.columnKey));
             const markedCols = columns
-                .filter((c) => 'accessorKey' in c &&
-                c.accessorKey &&
+                .map((c) => ({ c, key: c.accessorKey ?? c.id }))
+                .filter(({ c, key }) => !!key &&
                 c.defaultVisible &&
                 c.enableColumnFilter !== false &&
-                !serverManagedColKeys.has(c.accessorKey))
-                .map((c) => c.accessorKey);
+                !serverManagedColKeys.has(key))
+                .map(({ key }) => key);
             const marked = [...markedServer, ...markedCols];
             return marked.length > 0
                 ? marked
@@ -563,23 +563,33 @@ function GenericPaginatedGrid({ columns, fetchPage, queryKey, serverFilterDefs,
     const getColumnCanGlobalFilter = useCallback(() => true, []);
     // ── Derive column list for filter chip picker ──────────────────────────────
     //
+    // A column's filter identifier is its `accessorKey` when set, falling back to
+    // its `id` — TanStack Table's `row.getValue(columnId)` resolves correctly
+    // either way, whether the column was defined via `accessorKey` or via
+    // `accessorFn` + an explicit `id` (the standard pattern for a computed/mapped
+    // display column, e.g. a status label derived from two boolean fields). Using
+    // `accessorKey`-only here would silently exclude every such computed column
+    // from Manage Filters even when it has a real `filterType`/`options` already
+    // configured — a real, previously-observed gap across several grids.
+    //
     // 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.
+    //   1. It has neither `accessorKey` nor `id` (no stable filter identifier).
+    //   2. That identifier is already handled by a server-side 'date' filter def.
     //   3. Its MRT `enableColumnFilter` prop is explicitly set to `false` —
-    //      use this for numeric/computed columns that don't need a filter chip.
+    //      use this for numeric/computed columns that don't need a filter chip
+    //      (e.g. an actions column).
     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) => ({ c, key: c.accessorKey ?? c.id }))
+            .filter(({ c, key }) => !!key &&
+            !serverManagedColKeys.has(key) &&
             c.enableColumnFilter !== false)
-            .map((c) => ({
-            id: c.accessorKey,
+            .map(({ c, key }) => ({
+            id: key,
             label: c.header,
             // Pass filterType directly from TPColumnDef (no meta unwrapping needed)
             filterType: c.filterType,

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

@@ -1,6 +1,7 @@
 export { default as SingleSelect } from '../FormComponents/Select/SingleSelect';
 export { default as SingleSelectNonAutoComplete } from '../FormComponents/Select/SingleSelectNonAutoComplete';
 export { default as SingleSelectSearchApi } from '../FormComponents/Select/SingleSelectSearchApi';
+export { default as MultiSelectSearchApi } from '../FormComponents/Select/MultiSelectSearchApi';
 export { default as MultiSelectV1 } from '../FormComponents/Select/MultiSelectv1';
 declare const _default: {};
 export default _default;

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

@@ -1,6 +1,7 @@
 export { default as SingleSelect } from '../FormComponents/Select/SingleSelect.esm.js';
 export { default as SingleSelectNonAutoComplete } from '../FormComponents/Select/SingleSelectNonAutoComplete.esm.js';
 export { default as SingleSelectSearchApi } from '../FormComponents/Select/SingleSelectSearchApi.esm.js';
+export { default as MultiSelectSearchApi } from '../FormComponents/Select/MultiSelectSearchApi.esm.js';
 export { default as MultiSelectV1 } from '../FormComponents/Select/MultiSelectv1.esm.js';
 
 var index = {};

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

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.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/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.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/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm5.js';
 import require$$0__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/utils/Interface/FormInterface.d.ts

@@ -11,7 +11,7 @@ export interface TextFieldInputProps {
 export interface FormSectionPropsItem {
     name: string;
     label: string;
-    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'searchable-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'monthpicker-multi' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
+    inputType: 'text' | 'password' | 'number' | 'select' | 'autocomplete-select' | 'autocomplete-multi-select' | 'single-select-search' | 'multi-select-search' | 'datepicker' | 'datetimepicker' | 'multiselect' | 'select-v2' | 'basic-select' | 'searchable-select' | 'decimal' | 'alpha-numerical' | 'yearpicker' | 'dateRangePicker' | 'monthpicker' | 'monthpicker-multi' | 'multiselect' | 'file' | 'multifile' | 'multifile-with-preview' | 'textarea' | 'phoneNumber' | 'pincode' | 'email' | 'toggleSwitch' | 'rich-text-editor' | 'multiEmail' | 'timepicker' | 'checkbox-group' | 'radio-group' | 'checkbox' | 'custom' | 'input-select' | 'date-range-picker' | 'multiselect-table' | '';
     options?: OptionsProps[];
     required?: boolean;
     errorMessage?: string;

package/package.json

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