@caratlogic/design-system 0.1.22 → 0.1.24

package/dist/components/molecules/ApiComboBox/ApiComboBox.d.ts

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import type { ApiComboBoxProps } from './ApiComboBox.types';
-export declare function ApiComboBox({ contactType, selectedItem, onSelect, fetchBusinessContacts, searchPlaceholder, className, disabled, align, displayAttribute, separator, customerCode, hideTriggerSearchIcon, }: ApiComboBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function ApiComboBox({ contactType, selectedItem, onSelect, fetchBusinessContacts, searchPlaceholder, className, disabled, align, displayAttribute, separator, customerCode, hideTriggerSearchIcon, }: ApiComboBoxProps): ReactElement;
 //# sourceMappingURL=ApiComboBox.d.ts.map

package/dist/components/molecules/ApiComboBox/ApiComboBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ApiComboBox/ApiComboBox.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,qBAAqB,CAAC;AAE1E,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,iBAA+B,EAC/B,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,gBAAgC,EAChC,SAAiB,EACjB,YAAY,EACZ,qBAA6B,GAC9B,EAAE,gBAAgB,2CAoDlB"}
+{"version":3,"file":"ApiComboBox.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ApiComboBox/ApiComboBox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,gBAAgB,EAAgB,MAAM,qBAAqB,CAAC;AAE1E,wBAAgB,WAAW,CAAC,EAC1B,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,iBAA+B,EAC/B,SAAS,EACT,QAAgB,EAChB,KAAK,EACL,gBAAgC,EAChC,SAAiB,EACjB,YAAY,EACZ,qBAA6B,GAC9B,EAAE,gBAAgB,GAAG,YAAY,CAiDjC"}

package/dist/components/molecules/SearchableSelect/SearchableSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SearchableSelect/SearchableSelect.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,YAAY,EACV,qBAAqB,EACrB,aAAa,EACb,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAM7C;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,qBAA6B,EAC7B,SAAS,EACT,OAAO,EAAE,aAAa,EACtB,QAAQ,EACR,aAAoB,EACpB,WAAW,EACX,iBAA6B,EAC7B,YAAkC,EAClC,QAA4B,EAC5B,UAA6B,EAC7B,QAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,KAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CA2M1B"}
+{"version":3,"file":"SearchableSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SearchableSelect/SearchableSelect.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEtE,YAAY,EACV,qBAAqB,EACrB,aAAa,EACb,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAElC;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,IAAI,CAAC;AAM7C;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,EAClC,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,aAAa,EACb,qBAA6B,EAC7B,SAAS,EACT,OAAO,EAAE,aAAa,EACtB,QAAQ,EACR,aAAoB,EACpB,WAAW,EACX,iBAA6B,EAC7B,YAAkC,EAClC,QAA4B,EAC5B,UAA6B,EAC7B,QAAgB,EAChB,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,KAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAoN1B"}

package/dist/components/molecules/SearchableSelect/SearchableSelect.hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchableSelect.hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SearchableSelect/SearchableSelect.hooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAIlC,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,GACX,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAuM3D"}
+{"version":3,"file":"SearchableSelect.hooks.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SearchableSelect/SearchableSelect.hooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,uBAAuB,EACvB,yBAAyB,EAC1B,MAAM,0BAA0B,CAAC;AAIlC,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACrC,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,QAAQ,EACR,aAAa,EACb,WAAW,EACX,QAAQ,EACR,UAAU,GACX,EAAE,uBAAuB,CAAC,CAAC,CAAC,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAkN3D"}

package/dist/index.cjs.js

@@ -14920,9 +14920,15 @@ function useSearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLa
     // ===== ASYNC MODE =====
     const fetchPageRef = React.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 = React.useRef(0);
     const runFetch = React.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
@@ -14933,6 +14939,8 @@ function useSearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLa
                 limit: pageSize,
                 search: searchTerm,
             });
+            if (isStale())
+                return;
             setHasMore(res.hasMore);
             setPage(p);
             setItems((prev) => {
@@ -14963,12 +14971,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).
@@ -15128,10 +15140,14 @@ function SearchableSelect({ selectedItem, onChange, getOptionKey, getOptionLabel
                 ? String(getOptionLabel(selectedItem))
                 : undefined, children: getOptionLabel(selectedItem) }));
     }, [renderTrigger, selectedItem, searchPlaceholder, getOptionLabel]);
+    const [activeValue, setActiveValue] = React.useState('');
     return (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: modal, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [!selectedItem && !hideTriggerSearchIcon && (jsxRuntime.jsx(Search, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground" })), triggerNode] }), jsxRuntime.jsx(ChevronDown, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground opacity-60" })] }) }), jsxRuntime.jsx(PopoverContent, { style: { width: 'var(--radix-popover-trigger-width)' }, className: cn('p-0', popoverClassName), align: align, children: jsxRuntime.jsxs(Command, { shouldFilter: false, children: [jsxRuntime.jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), headerSlot, jsxRuntime.jsx(CommandList, { ref: listRef, onScroll: handleScroll, className: LIST_MAX_HEIGHT_CLASS, children: loading ? (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 p-3 text-sm text-muted-foreground", children: [jsxRuntime.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }), "Loading\u2026"] })) : visibleItems.length === 0 ? (jsxRuntime.jsx(CommandEmpty, { children: emptyMessage })) : (jsxRuntime.jsxs(CommandGroup, { className: "p-1", children: [visibleItems.map((item) => {
+                    'disabled:bg-muted/50 disabled:text-label disabled:opacity-100', className), children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [!selectedItem && !hideTriggerSearchIcon && (jsxRuntime.jsx(Search, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground" })), triggerNode] }), jsxRuntime.jsx(ChevronDown, { "aria-hidden": "true", className: "h-4 w-4 shrink-0 text-muted-foreground opacity-60" })] }) }), jsxRuntime.jsx(PopoverContent, { style: { width: 'var(--radix-popover-trigger-width)' }, className: cn('p-0', popoverClassName), align: align, children: jsxRuntime.jsxs(Command, { shouldFilter: false, value: activeValue, onValueChange: setActiveValue, children: [jsxRuntime.jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: setSearch }), headerSlot, jsxRuntime.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 ? (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 p-3 text-sm text-muted-foreground", children: [jsxRuntime.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }), "Loading\u2026"] })) : visibleItems.length === 0 ? (jsxRuntime.jsx(CommandEmpty, { children: emptyMessage })) : (jsxRuntime.jsxs(CommandGroup, { className: "p-1", children: [visibleItems.map((item) => {
                                         const key = getOptionKey(item);
                                         const isSelected = selectedKey === key;
                                         if (renderOption) {
@@ -15232,10 +15248,12 @@ function ApiComboBox({ contactType, selectedItem, onSelect, fetchBusinessContact
     const selected = selectedItem?.value ? selectedItem : null;
     return (jsxRuntime.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 || '';