tp-react-elements 1.3.18 → 1.3.19

package/dist/_virtual/index.esm11.js

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

package/dist/_virtual/index.esm12.js

@@ -1,3 +1,3 @@
-var DateInput = {};
+var DayCell = {};
 
-export { DateInput as __exports };
+export { DayCell 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 DateRangePicker = {};
+var DefinedRange = {};
 
-export { DateRangePicker as __exports };
+export { DefinedRange as __exports };

package/dist/_virtual/index.esm5.js

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

package/dist/_virtual/index.esm7.js

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

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

@@ -1,6 +1,26 @@
 import { FormRenderProps, VariantProps } from '../../../utils';
-declare const MultiSelectAutocomplete: ({ props, variant, }: {
+/**
+ * Multi-select autocomplete backed by `react-hook-form`.
+ *
+ * Key behaviours:
+ * - Values stored as **`string[]`** in the form field.
+ * - Accepts CSV strings and normalises them automatically (backward-compat
+ *   with older API responses).
+ * - Shows individual chips for up to `maxChips` selections, then collapses
+ *   into a single **"N selected"** chip with a tooltip listing all labels.
+ * - The "N selected" chip has a **delete button** that clears all selections.
+ * - **`onChangeFn` is only called on genuine user interactions** (select /
+ *   remove / clear).  Pre-populating the form with `defaultValues` or calling
+ *   `reset()` does **not** trigger `onChangeFn`, preventing unwanted API calls.
+ * - `onChangeFn` receives a `string[]` (not a CSV string).
+ */
+declare const MultiSelectAutocomplete: ({ props, variant, maxChips, }: {
     props: FormRenderProps;
     variant: VariantProps;
+    /**
+     * Maximum number of chips shown individually before collapsing into
+     * "N selected". Default: `2`.
+     */
+    maxChips?: number;
 }) => import("react/jsx-runtime").JSX.Element;
 export default MultiSelectAutocomplete;

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

@@ -6,233 +6,153 @@ import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
 import 'dayjs';
 import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
 
-//region old code
-// const MultiSelectAutocomplete = ({
-//   props,
-//   variant,
-// }: {
-//   props: FormRenderProps;
-//   variant: VariantProps;
-// }) => {
-//   const isError = !!props.errors?.[props.item.name];
-//   const watchedValue = useWatch({ control: props.control, name: props.item.name });
-//   const normalizeToStringArray = (value: unknown): string[] => {
-//     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)];
-//   };
-//   const normalizedSelectedValues = normalizeToStringArray(watchedValue);
-//   const isShowBorderError = isError && normalizedSelectedValues.length === 0;
-//   const options: OptionItem[] = (props.item.options || []) as OptionItem[];
-//   const selectedOptions: OptionItem[] = useMemo(() => {
-//     const valueSet = new Set(normalizedSelectedValues.map((v) => String(v)));
-//     return options.filter((opt) => valueSet.has(String(opt.value)));
-//   }, [normalizedSelectedValues, options]);
-//   return (
-//     <Controller
-//       control={props.control}
-//       name={props.item.name}
-//       key={props.item.name}
-//       render={({ field }) => (
-//         <>
-//           {renderLabel(variant, props)}
-//           <Autocomplete
-//             {...field}
-//             multiple
-//             disableCloseOnSelect
-//             id={`${props.item.name}-autocomplete-multi`}
-//             options={options}
-//             value={selectedOptions}
-//             getOptionLabel={(option) => String(option.label)}
-//             isOptionEqualToValue={(option, value) => String(option.value) === String(value.value)}
-//             onChange={(_, newValue) => {
-//               const joined = (newValue || []).map((o: OptionItem) => String(o.value)).join(',');
-//               props.setValue(props.item.name, joined);
-//               props?.item?.onChangeFn && props?.item?.onChangeFn(joined);
-//               props?.clearErrors && props?.clearErrors(props?.item?.name);
-//             }}
-//             onBlur={(e: any) => {
-//               props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-//             }}
-//             size="small"
-//             renderOption={(renderProps, option, { selected }) => (
-//               <li {...renderProps} style={{ fontSize: '11px' }}>
-//                 <Checkbox
-//                   checked={selected}
-//                   size="small"
-//                   sx={{ mr: 1, p: '2px' }}
-//                 />
-//                 {option.label}
-//               </li>
-//             )}
-//             renderTags={(tagValue) => (
-//               tagValue.length ? <span>{tagValue.map((o: OptionItem) => String(o.label)).join(' , ')}</span> : null
-//             )}
-//             sx={{
-//               '& .MuiAutocomplete-input': {
-//                 padding: '0px 0px 0px 5px !important',
-//               },
-//               '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root': {
-//                 top: '-3px',
-//               },
-//               '& .MuiAutocomplete-option': {
-//                 fontSize: '11px',
-//                 zIndex: 2000,
-//               },
-//               ...props.item.sx,
-//             }}
-//             ListboxProps={{
-//               onScroll: (event: React.SyntheticEvent) => {
-//                 const listboxNode = event.currentTarget as HTMLElement;
-//                 if (listboxNode.scrollTop + listboxNode.clientHeight === listboxNode.scrollHeight) {
-//                   // Infinite scroll hook can be wired here
-//                 }
-//               },
-//             }}
-//             disabled={props.item.disable}
-//             slotProps={{
-//               popper: {
-//                 sx: {
-//                   zIndex: 1401,
-//                 },
-//               },
-//               listbox: {
-//                 sx: {
-//                   fontSize: '11px',
-//                 },
-//               },
-//             }}
-//             renderInput={(params) => (
-//               <TextField
-//                 {...params}
-//                 placeholder={props.item.placeholder}
-//                 error={isShowBorderError}
-//                 label={
-//                   variant !== 'standard'
-//                     ? `${props.item.label}${props.item.required ? ' *' : ''}`
-//                     : ''
-//                 }
-//                 inputProps={{
-//                   ...params.inputProps,
-//                   'aria-labelledby': `${props.item.name}-label`,
-//                   'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
-//                   'aria-required': props.item.required ? true : undefined,
-//                 }}
-//               />
-//             )}
-//           />
-//           <FormBottomField {...props} />
-//         </>
-//       )}
-//     />
-//   );
-// };
-//endregion
-const MultiSelectAutocomplete = ({ props, variant, }) => {
-    const isError = !!props.errors?.[props.item.name];
-    const watchedValue = useWatch({ control: props.control, name: props.item.name });
+// ─── Module-level helpers ─────────────────────────────────────────────────────
+/**
+ * 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']);
+// ─── Component ───────────────────────────────────────────────────────────────
+/**
+ * Multi-select autocomplete backed by `react-hook-form`.
+ *
+ * Key behaviours:
+ * - Values stored as **`string[]`** in the form field.
+ * - Accepts CSV strings and normalises them automatically (backward-compat
+ *   with older API responses).
+ * - Shows individual chips for up to `maxChips` selections, then collapses
+ *   into a single **"N selected"** chip with a tooltip listing all labels.
+ * - The "N selected" chip has a **delete button** that clears all selections.
+ * - **`onChangeFn` is only called on genuine user interactions** (select /
+ *   remove / clear).  Pre-populating the form with `defaultValues` or calling
+ *   `reset()` does **not** trigger `onChangeFn`, preventing unwanted API calls.
+ * - `onChangeFn` receives a `string[]` (not a CSV string).
+ */
+const MultiSelectAutocomplete = ({ props, variant, maxChips = 2, }) => {
+    // ── Destructure stable references from props ───────────────────────────────
+    const { control, errors, item, setValue, clearErrors } = props;
+    const { name, options: rawOptions, onChangeFn, onBlurFn, disable, placeholder, required, label, sx: itemSx, } = item;
+    const isError = !!errors?.[name];
+    const watchedValue = useWatch({ control, name });
     const [open, setOpen] = useState(false);
     const tagsContainerRef = useRef(null);
-    const normalizeToStringArray = (value) => {
-        if (Array.isArray(value)) {
-            // already array of primitives/strings
-            return value.map((v) => String(v));
-        }
-        if (typeof value === 'string') {
-            // if backend provided CSV string, convert to array
-            return value
-                .split(',')
-                .map((v) => v.trim())
-                .filter((v) => v.length > 0);
-        }
-        if (value == null)
-            return [];
-        // for any other types, coerce to single-element array
-        return [String(value)];
-    };
     const normalizedSelectedValues = normalizeToStringArray(watchedValue);
     const isShowBorderError = isError && normalizedSelectedValues.length === 0;
-    const options = useMemo(() => (props.item.options || []), [props.item.options]);
+    const options = useMemo(() => (rawOptions || []), [rawOptions]);
     const selectedOptions = useMemo(() => {
         const valueSet = new Set(normalizedSelectedValues.map((v) => String(v)));
         return options.filter((opt) => valueSet.has(String(opt.value)));
     }, [normalizedSelectedValues, options]);
-    // Derived overflow flag without extra renders
-    const isOverflowing = (selectedOptions || []).length > 2;
-    // Stable callbacks to avoid re-renders
+    const isOverflowing = selectedOptions.length > maxChips;
+    // ── Stable callbacks ───────────────────────────────────────────────────────
     const getOptionLabelCb = useCallback((option) => String(option.label), []);
     const isOptionEqualCb = useCallback((option, value) => String(option.value) === String(value.value), []);
     const renderOptionCb = useCallback((renderProps, option, state) => (jsxs("li", { ...renderProps, style: { fontSize: '11px' }, children: [jsx(Checkbox, { checked: state.selected, size: "small", sx: { mr: 1, p: '2px' } }), option.label] })), []);
-    const chipSx = useMemo(() => ({ mr: 0.5, height: 20, fontSize: '10px', borderRadius: '10px', '& .MuiChip-label': { px: 0.75, py: 0 } }), []);
-    const selectedTooltip = useMemo(() => selectedOptions.map(o => String(o.label)).join(', '), [selectedOptions]);
-    const handleChange = useCallback((_, newValue) => {
+    const chipSx = useMemo(() => ({
+        mr: 0.5,
+        height: 20,
+        fontSize: '10px',
+        borderRadius: '10px',
+        '& .MuiChip-label': { px: 0.75, py: 0 },
+    }), []);
+    const selectedTooltip = useMemo(() => selectedOptions.map((o) => String(o.label)).join(', '), [selectedOptions]);
+    /**
+     * Change handler — only fires `onChangeFn` for genuine user interactions.
+     *
+     * MUI passes a `reason` string as the third argument:
+     *   'selectOption' | 'removeOption' | 'clear'  → user action  → fire onChangeFn
+     *   'blur'                                      → programmatic → suppress onChangeFn
+     *
+     * This prevents `onChangeFn` → API calls when the field is pre-populated
+     * via `defaultValues`, `reset()`, or an external `setValue()`.
+     */
+    const handleChange = useCallback((_, newValue, reason) => {
         const values = Array.isArray(newValue)
             ? newValue.map((o) => String(o.value))
             : [];
-        // Minimize work during selection for snappier UX
-        props.setValue(props.item.name, values, { shouldValidate: false, shouldDirty: true });
-        props?.item?.onChangeFn && props?.item?.onChangeFn(values.join(','));
-        props?.clearErrors && props?.clearErrors(props?.item?.name);
-    }, [props]);
-    const handleBlur = useCallback((e) => {
-        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
-    }, [props]);
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${props.item.name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
+        setValue(name, values, { shouldValidate: false, shouldDirty: true });
+        if (USER_CHANGE_REASONS.has(reason) && onChangeFn) {
+            onChangeFn(values); // passes string[] — not CSV
+        }
+        clearErrors?.(name);
+    }, [setValue, clearErrors, name, onChangeFn]);
+    const handleBlur = useCallback((e) => { onBlurFn?.(e); }, [onBlurFn]);
+    /** Clears ALL selections — wired to the delete button on the overflow chip. */
+    const handleClearAll = useCallback(() => {
+        setValue(name, [], { shouldValidate: false, shouldDirty: true });
+        onChangeFn?.([]); // user explicitly cleared all → fire callback
+        clearErrors?.(name);
+    }, [setValue, clearErrors, name, onChangeFn]);
+    // ── Render ─────────────────────────────────────────────────────────────────
+    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur: fieldOnBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), multiple: true, disableCloseOnSelect: true, id: `${name}-autocomplete-multi`, options: options, value: selectedOptions, getOptionLabel: getOptionLabelCb, isOptionEqualToValue: isOptionEqualCb, getOptionDisabled: (option) => option.disable, onChange: handleChange, onBlur: (e) => {
                         fieldOnBlur();
                         handleBlur(e);
                     }, size: "small", disablePortal: false, autoHighlight: true, selectOnFocus: true, clearOnBlur: false, renderTags: (tagValue, getTagProps) => (jsx(Box, { ref: tagsContainerRef, sx: {
-                            '& :hover': {
-                                cursor: 'pointer',
-                            },
-                            display: 'flex', flexWrap: 'nowrap', overflow: 'hidden', alignItems: 'center'
-                        }, children: isOverflowing ? (jsx(Tooltip, { title: selectedTooltip, placement: "top", children: jsx(Chip, { size: "small", label: `${tagValue.length} selected`, onClick: () => setOpen(true), clickable: true, sx: chipSx }) })) : (tagValue.map((option, index) => (jsx(Tooltip, { title: String(option?.label ?? option), placement: "top", children: jsx(Chip, { ...getTagProps({ index }), size: "small", label: String(option?.label ?? option), sx: chipSx }) }, String(option?.value ?? option?.label ?? index))))) })), renderOption: renderOptionCb, sx: {
+                            display: 'flex',
+                            flexWrap: 'nowrap',
+                            overflow: 'hidden',
+                            alignItems: 'center',
+                            '& :hover': { cursor: 'pointer' },
+                        }, children: isOverflowing ? (
+                        // ── Collapsed chip: shows "N selected" with tooltip ──────
+                        // onDelete wires a delete (×) button that clears all selections
+                        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)));
+                        })) })), renderOption: renderOptionCb, sx: {
                         '& .MuiAutocomplete-input': {
                             padding: '0px 0px 0px 5px !important',
                         },
                         '& .MuiAutocomplete-inputRoot': {
-                            flexWrap: 'nowrap', // keep search beside chip
-                            alignItems: 'center'
+                            flexWrap: 'nowrap',
+                            alignItems: 'center',
                         },
-                        '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root,.css-8edmr2-MuiFormLabel-root-MuiInputLabel-root': {
+                        '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root, .css-8edmr2-MuiFormLabel-root-MuiInputLabel-root': {
                             top: '-3px',
                         },
                         '& .MuiAutocomplete-option': {
                             fontSize: '11px',
                             zIndex: 2000,
                         },
-                        ...props.item.sx,
-                    }, ListboxProps: {
-                        onScroll: (event) => {
-                            const listboxNode = event.currentTarget;
-                            if (listboxNode.scrollTop + listboxNode.clientHeight === listboxNode.scrollHeight) ;
-                        },
-                    }, disabled: props.item.disable, slotProps: {
-                        popper: {
-                            sx: {
-                                zIndex: 20000,
-                            },
-                        },
-                        listbox: {
-                            sx: {
-                                fontSize: '11px',
-                            },
-                        },
-                    }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: props.item.placeholder, error: isShowBorderError, label: variant !== 'standard'
-                            ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                        ...itemSx,
+                    }, disabled: disable, slotProps: {
+                        popper: { sx: { zIndex: 20000 } },
+                        listbox: { sx: { fontSize: '11px' } },
+                    }, renderInput: (params) => (jsx(TextField, { ...params, placeholder: placeholder, error: isShowBorderError, label: variant !== 'standard'
+                            ? `${label}${required ? ' *' : ''}`
                             : '', inputProps: {
                             ...params.inputProps,
-                            'aria-labelledby': `${props.item.name}-label`,
-                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
-                            'aria-required': props.item.required ? true : undefined,
-                        } })) }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+                            'aria-labelledby': `${name}-label`,
+                            'aria-describedby': `${name}-helper ${name}-error`,
+                            'aria-required': required ? true : undefined,
+                        } })) }), jsx(FormBottomField, { ...props })] })) }));
 };
 
 export { MultiSelectAutocomplete as default };

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

@@ -1,6 +1,51 @@
 import { FormRenderProps, VariantProps } from '../../../utils';
-declare const SingleSelectSearchApi: ({ props, variant, }: {
+export interface SearchOption {
+    label: string;
+    value: string | number;
+    [key: string]: any;
+}
+/**
+ * Single-select autocomplete that fetches options from a remote API.
+ *
+ * ### 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.
+ *
+ * ### Pre-selected values (edit mode)
+ * Pass the pre-selected option in `item.options` so the label displays
+ * immediately without a round-trip search.  If `item.options` is empty and
+ * `autoFill` is true, the component seeds the search input with the form value
+ * so options load on mount.
+ *
+ * ### API call guard
+ * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
+ * debounce delay — preventing a request per keystroke.
+ */
+declare const SingleSelectSearchApi: ({ props, variant, minSearchLength, debounceMs, fetchOptions, }: {
     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[]>;
 }) => import("react/jsx-runtime").JSX.Element;
 export default SingleSelectSearchApi;

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

@@ -1,85 +1,201 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Autocomplete, Stack, Skeleton, Tooltip, TextField } from '@mui/material';
-import { useState, useEffect } from 'react';
-import { Controller } from 'react-hook-form';
+import { Autocomplete, Tooltip, TextField, Paper, Typography } from '@mui/material';
 import '../../../node_modules/axios/index.esm.js';
+import { useState, useEffect, useCallback, useMemo } 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';
 
-// Create axios instance or import your configured jwtAxios
-const jwtAxios = axios.create();
-const SingleSelectSearchApi = ({ props, variant, }) => {
-    const [searchValue, setSearchValue] = useState('');
-    const [optionsFetched, setOptionsFetched] = useState([]);
+// ─── Module-level helpers ─────────────────────────────────────────────────────
+/**
+ * Appends a query parameter correctly regardless of whether the base URL
+ * already contains a query string (`?` or `&`).
+ *
+ * Old code used `&` unconditionally which broke clean base URLs.
+ */
+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'));
+// ─── 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 ───────────────────────────────────────────────────────────────
+/**
+ * Single-select autocomplete that fetches options from a remote API.
+ *
+ * ### 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.
+ *
+ * ### Pre-selected values (edit mode)
+ * Pass the pre-selected option in `item.options` so the label displays
+ * immediately without a round-trip search.  If `item.options` is empty and
+ * `autoFill` is true, the component seeds the search input with the form value
+ * so options load on mount.
+ *
+ * ### API call guard
+ * Searches fire only after `minSearchLength` chars AND after the `debounceMs`
+ * debounce delay — preventing a request per keystroke.
+ */
+const SingleSelectSearchApi = ({ props, variant, minSearchLength = 3, debounceMs = 300, fetchOptions, }) => {
+    // ── 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;
+    // ── Form value (reactive, no function call in deps) ───────────────────────
+    const formValue = useWatch({ control, name });
+    const isError = !!errors?.[name];
+    // ── State ─────────────────────────────────────────────────────────────────
+    /** Text shown in the input (display). */
+    const [displayText, setDisplayText] = useState('');
+    /** Text that drives API calls — only updated when user types. */
+    const [searchQuery, setSearchQuery] = useState('');
+    const [options, setOptions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [fetchError, setFetchError] = useState(null);
+    /** Stores the full selected option object so the label stays visible. */
+    const [selectedOption, setSelectedOption] = useState(null);
+    const debouncedSearch = useDebounce(searchQuery, debounceMs);
+    // ── Seed selectedOption from item.options (edit-mode preload) ─────────────
+    // If the parent supplies the pre-selected option in item.options, display it
+    // immediately on mount without a search round-trip.
     useEffect(() => {
-        // eslint-disable-next-line no-undef
-        const controller = new AbortController();
-        const signal = controller.signal;
-        if (props?.item?.autoFIll && props.getValues(props.item.name)) {
-            setSearchValue(props.getValues(props.item.name));
-            setOptionsFetched([]);
+        if (!formValue || selectedOption?.value === formValue)
+            return;
+        const staticMatch = (item.options || []).find((o) => String(o.value) === String(formValue));
+        if (staticMatch) {
+            const opt = { label: String(staticMatch.label), value: staticMatch.value };
+            setSelectedOption(opt);
+            setDisplayText(String(staticMatch.label));
+        }
+    }, [formValue]); // eslint-disable-line react-hooks/exhaustive-deps
+    // ── autoFill: auto-search for pre-selected value on mount ─────────────────
+    // When autoFill is true and no static option covers the pre-selected value,
+    // seed the search input so options load automatically on mount.
+    useEffect(() => {
+        if (autoFill && formValue && !selectedOption) {
+            const text = String(formValue);
+            setDisplayText(text);
+            setSearchQuery(text);
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    // ── API fetch ─────────────────────────────────────────────────────────────
+    useEffect(() => {
+        if (!debouncedSearch || debouncedSearch.length < minSearchLength) {
+            setOptions([]);
+            return;
         }
-        else if (props.getValues(props.item.name)) ;
-        if (searchValue && searchValue.length > 3) {
-            setIsLoading(true);
-            jwtAxios
-                .get(props.item.api + `&${props.item.searchValue || 'searchvalue'}=${searchValue}`, {
-                signal,
-                headers: props.item.jwtHeader,
-            })
-                .then((res) => {
-                setOptionsFetched(res.data);
+        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);
-                props.item.setLoadList && props.item.setLoadList(res.data);
-            })
-                .catch((err) => {
-                console.log(err, 'error');
+            }
+            catch (err) {
+                if (isCancellation(err))
+                    return; // silently ignore aborted requests
+                setFetchError('Failed to load options. Please try again.');
                 setIsLoading(false);
-            });
-        }
-        // }
-        // }
+            }
+        };
+        load();
         return () => controller.abort();
-    }, [searchValue, props.item.api, props.getValues(props.item.name), props?.item?.autoFIll]);
-    // useEffect(() => {
-    //   setSearchValue('');
-    // }, [props.item?.changeValue]);
-    const isOptionEqualToValue = (option, value) => option?.value === value?.value; // Assuming there's a 'value' property in your options
-    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ...field, value: props.getValues(props.item.name)
-                        ? optionsFetched?.find((item) => item.value === props.getValues(props.item.name))
-                        : null, onChange: (_, newValue) => {
-                        // field.onChange(newValue);
-                        props.setValue(props.item.name, newValue?.value || '');
-                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                        props?.item?.onChangeFn && props?.item?.onChangeFn(newValue?.value || '', newValue);
-                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                        props?.clearErrors && props?.clearErrors(props.item.name);
-                    }, size: "small", sx: {
+    }, [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) => {
+        setSelectedOption(newValue);
+        setValue(name, newValue?.value ?? '');
+        clearErrors?.(name);
+        if (newValue) {
+            item.onChangeFn?.(newValue.value, newValue);
+        }
+    }, [setValue, clearErrors, name, item.onChangeFn]);
+    const handleInputChange = useCallback((_, newInputValue, reason) => {
+        setDisplayText(newInputValue);
+        if (reason === 'input') {
+            // User is typing → trigger debounced API search
+            setSearchQuery(newInputValue);
+        }
+        if (reason === 'clear') {
+            // User clicked the clear × → reset everything
+            setSearchQuery('');
+            setOptions([]);
+            setSelectedOption(null);
+        }
+        // 'reset' fires when MUI sets the input text after an option is selected
+        // — no search should trigger here
+    }, []);
+    // ── Resolved Autocomplete value ───────────────────────────────────────────
+    // Priority: selectedOption (if matches form value) → loaded options → null
+    const resolvedValue = useMemo(() => {
+        if (!formValue)
+            return null;
+        const fv = String(formValue);
+        if (selectedOption && String(selectedOption.value) === fv)
+            return selectedOption;
+        return options.find((o) => String(o.value) === fv) ?? null;
+    }, [formValue, selectedOption, options]);
+    // ── noOptionsText ─────────────────────────────────────────────────────────
+    const noOptionsText = useMemo(() => {
+        if (searchQuery.length < minSearchLength) {
+            return `Type at least ${minSearchLength} character${minSearchLength === 1 ? '' : 's'} to search`;
+        }
+        return fetchError ?? 'No results found';
+    }, [searchQuery, minSearchLength, fetchError]);
+    // ── Render ────────────────────────────────────────────────────────────────
+    return (jsx(Controller, { control: control, name: name, render: ({ field: { ref, onBlur } }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(Autocomplete, { ref: ref, value: resolvedValue, inputValue: displayText, onInputChange: handleInputChange, onChange: handleChange, onBlur: onBlur, options: options, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, 
+                    // Options come pre-filtered from the server — disable client-side filtering
+                    filterOptions: (x) => x, loading: isLoading, disabled: disable, size: "small", noOptionsText: noOptionsText, sx: {
                         '& .MuiAutocomplete-input': {
                             padding: '0px 0px 0px 5px !important',
                         },
-                        '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root ': {
+                        '& .css-erkti9-MuiFormLabel-root-MuiInputLabel-root': {
                             top: '-5px',
                         },
-                        '& .MuiAutocomplete-option': {
-                            fontSize: '16px',
-                        },
-                    }, disabled: props.item.disable, options: optionsFetched, getOptionLabel: (option) => option.label, renderInput: (params) => {
-                        return (jsx(Tooltip, { title: params.inputProps.value && params.inputProps.value, children: jsx(TextField, { ...params, onChange: (e) => {
-                                    setSearchValue(e.target.value);
-                                }, label: variant !== 'standard'
-                                    ? `${props.item.label}${props.item.required ? ' *' : ''}`
-                                    : '', placeholder: props.item.placeholder }) }));
-                    }, PaperComponent: ({ children }) => (jsx("div", { style: {
-                            background: '#fff',
-                        }, children: isLoading ? (jsxs(Stack, { padding: 2, spacing: 1, children: [jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 }), jsx(Skeleton, { variant: "rectangular", width: '100%', height: 20 })] })) : (children) })), isOptionEqualToValue: isOptionEqualToValue }), props?.item?.helperText && (jsxs("span", { style: {
-                        fontFamily: 'Roboto-Reg',
-                        fontSize: '11px',
-                        color: '#3651d3',
-                    }, children: ["(", props?.item?.helperText, ")"] })), jsx(FormBottomField, { ...props })] })) }));
+                        ...itemSx,
+                    }, slotProps: {
+                        popper: { sx: { zIndex: 20000 } },
+                        listbox: { sx: { fontSize: '11px' } },
+                    }, PaperComponent: ({ children, ...paperProps }) => (jsx(Paper, { elevation: 4, ...paperProps, children: children })), renderInput: (params) => (jsx(Tooltip, { title: resolvedValue?.label ?? '', children: jsx(TextField, { ...params, error: isError && !formValue, label: variant !== 'standard'
+                                ? `${label}${required ? ' *' : ''}`
+                                : '', placeholder: placeholder, inputProps: {
+                                ...params.inputProps,
+                                'aria-labelledby': `${name}-label`,
+                                'aria-describedby': `${name}-helper ${name}-error`,
+                                'aria-required': required ? true : undefined,
+                            } }) })) }), 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 { SingleSelectSearchApi as default };

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 React__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.esm7.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm5.js';
 import React__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.esm4.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

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

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import { __exports as DayCell } 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';

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

@@ -1,4 +1,4 @@
-import { __exports as DefinedRange } from '../../../../../_virtual/index.esm5.js';
+import { __exports as DefinedRange } from '../../../../../_virtual/index.esm4.js';
 import React__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.esm11.js';
 import React__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 React__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": "1.3.18",
+  "version": "1.3.19",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",