@alpic-ai/ui 0.0.0-dev.gc02d65a → 0.0.0-dev.gc2285a8

package/src/components/combobox.tsx

@@ -21,6 +21,8 @@ interface ComboboxContextValue {
   isSelected: (itemValue: string) => boolean;
   open: boolean;
   onOpenChange: (open: boolean) => void;
+  /** Resolves a selected value to a display label (e.g. for multi-select tags). Defaults to the value. */
+  getOptionLabel?: (value: string) => string;
 }
 
 const ComboboxContext = createContext<ComboboxContextValue | null>(null);
@@ -40,6 +42,8 @@ interface ComboboxBaseProps {
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?: (open: boolean) => void;
+  /** Resolves a selected value to a display label (e.g. for multi-select tags). Defaults to the value. */
+  getOptionLabel?: (value: string) => string;
 }
 
 interface ComboboxSingleProps extends ComboboxBaseProps {
@@ -65,6 +69,7 @@ function Combobox(props: ComboboxProps) {
     open: controlledOpen,
     defaultOpen = false,
     onOpenChange: controlledOnOpenChange,
+    getOptionLabel,
   } = props;
 
   // Single mode state
@@ -175,8 +180,9 @@ function Combobox(props: ComboboxProps) {
       isSelected,
       open,
       onOpenChange,
+      getOptionLabel,
     }),
-    [multiple, singleValue, multiValues, onSelect, onDeselect, isSelected, open, onOpenChange],
+    [multiple, singleValue, multiValues, onSelect, onDeselect, isSelected, open, onOpenChange, getOptionLabel],
   );
 
   return (
@@ -229,6 +235,7 @@ function ComboboxTrigger({ className, size, placeholder, children, ...props }: C
 /* ── Tags (internal, for multi-select trigger) ────────────────────────────── */
 
 function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (value: string) => void }) {
+  const { getOptionLabel } = useComboboxContext();
   return (
     <>
       {values.map((tagValue) => (
@@ -237,7 +244,7 @@ function ComboboxTags({ values, onDeselect }: { values: string[]; onDeselect: (v
           onClick={(event) => event.stopPropagation()}
           onDismiss={() => onDeselect(tagValue)}
         >
-          {tagValue}
+          {getOptionLabel ? getOptionLabel(tagValue) : tagValue}
         </TagDismissible>
       ))}
     </>