@caratlogic/design-system 0.1.22 → 0.1.24

package/dist/index.esm.js

@@ -14890,9 +14890,15 @@ function useSearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLa
     // ===== ASYNC MODE =====
     const fetchPageRef = useRef(fetchPage);
     fetchPageRef.current = fetchPage;
+    // Bumped by every fresh (non-append) fetch. A response from an older search,
+    // or a "load more" started before the search changed, is discarded so it
+    // can't overwrite or pad the current results.
+    const requestSeq = useRef(0);
     const runFetch = useCallback(async (p, searchTerm, append) => {
         if (!fetchPageRef.current)
             return;
+        const seq = append ? requestSeq.current : ++requestSeq.current;
+        const isStale = () => seq !== requestSeq.current;
         if (append)
             setLoadingMore(true);
         else
@@ -14903,6 +14909,8 @@ function useSearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLa
                 limit: pageSize,
                 search: searchTerm,
             });
+            if (isStale())
+                return;
             setHasMore(res.hasMore);
             setPage(p);
             setItems((prev) => {
@@ -14933,12 +14941,16 @@ function useSearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLa
             });
         }
         catch {
+            if (isStale())
+                return;
             setItems(selectedItem ? [selectedItem] : []);
             setHasMore(false);
         }
         finally {
-            setLoading(false);
-            setLoadingMore(false);
+            if (!isStale()) {
+                setLoading(false);
+                setLoadingMore(false);
+            }
         }
     }, [pageSize, selectedItem, getOptionKey]);
     // Debounced search effect (async mode).
@@ -15098,10 +15110,14 @@ function SearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLabel
                 ? String(getOptionLabel(selectedItem))
                 : undefined, children: getOptionLabel(selectedItem) }));
     }, [renderTrigger, selectedItem, searchPlaceholder, getOptionLabel]);
+    const [activeValue, setActiveValue] = useState('');
     return (jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: modal, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button$1, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, className: cn('w-full justify-start min-w-40 px-3 py-1.5', 
                     // This trigger is a form control, not an action, so it takes the
                     // input disabled treatment instead of the Button's opacity fade.
-                    'disabled:bg-muted/50 disabled:text-label disabled:opacity-100', className), children: [jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [!selectedItem && !hideTriggerSearchIcon && (jsx(Search, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground" })), triggerNode] }), jsx(ChevronDown, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground opacity-60" })] }) }), jsx(PopoverContent, { style: { width: 'var(--radix-popover-trigger-width)' }, className: cn('p-0', popoverClassName), align: align, children: jsxs(Command, { shouldFilter: false, children: [jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), headerSlot, jsx(CommandList, { ref: listRef, onScroll: handleScroll, className: LIST_MAX_HEIGHT_CLASS, children: loading ? (jsxs("div", { className: "flex items-center justify-center gap-2 p-3 text-sm text-muted-foreground", children: [jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }), "Loading\u2026"] })) : visibleItems.length === 0 ? (jsx(CommandEmpty, { children: emptyMessage })) : (jsxs(CommandGroup, { className: "p-1", children: [visibleItems.map((item) => {
+                    'disabled:bg-muted/50 disabled:text-label disabled:opacity-100', className), children: [jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [!selectedItem && !hideTriggerSearchIcon && (jsx(Search, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground" })), triggerNode] }), jsx(ChevronDown, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground opacity-60" })] }) }), jsx(PopoverContent, { style: { width: 'var(--radix-popover-trigger-width)' }, className: cn('p-0', popoverClassName), align: align, children: jsxs(Command, { shouldFilter: false, value: activeValue, onValueChange: setActiveValue, children: [jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), headerSlot, jsx(CommandList, { ref: listRef, onScroll: handleScroll, 
+                            // cmdk keeps the last hovered row active for keyboard navigation;
+                            // clear it so the highlight doesn't linger once the pointer leaves.
+                            onMouseLeave: () => setActiveValue(''), className: LIST_MAX_HEIGHT_CLASS, children: loading ? (jsxs("div", { className: "flex items-center justify-center gap-2 p-3 text-sm text-muted-foreground", children: [jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }), "Loading\u2026"] })) : visibleItems.length === 0 ? (jsx(CommandEmpty, { children: emptyMessage })) : (jsxs(CommandGroup, { className: "p-1", children: [visibleItems.map((item) => {
                                         const key = getOptionKey(item);
                                         const isSelected = selectedKey === key;
                                         if (renderOption) {
@@ -15202,10 +15218,12 @@ function ApiComboBox({ contactType, selectedItem, onSelect, fetchBusinessContact
     const selected = selectedItem?.value ? selectedItem : null;
     return (jsx(SearchableSelect, { selectedItem: selected, onChange: onSelect, getOptionKey: (i) => i.value, getOptionLabel: (i) => {
             const c = i.contactData;
+            // A pre-selected item carries only { value, label }; its label is already formatted.
+            if (!c)
+                return i.label;
             const cid = i.contactId || i.code || '';
-            const contactName = c?.contactName || i.label || '';
-            const company = c?.companyName || '';
-            return (`${company}${company ? ' ' : ''}${cid ? `(${cid})` : ''}${contactName ? ` · ${contactName}` : ''}`.trim() || i.label);
+            const companyPart = [c.companyName, cid && `(${cid})`].filter(Boolean).join(' ');
+            return [companyPart, c.contactName].filter(Boolean).join(' · ') || i.label;
         }, getOptionSubLabel: (i) => {
             const c = i.contactData;
             const email = c?.email?.primary || '';