{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "combobox", "title": "Combobox", "dependencies": [ "@base-ui/react", "@phosphor-icons/react", "react-remove-scroll" ], "registryDependencies": [ "https://ui.hotfix.jobs/r/checkbox.json", "https://ui.hotfix.jobs/r/input.json", "https://ui.hotfix.jobs/r/recipes.json", "https://ui.hotfix.jobs/r/tokens.json", "https://ui.hotfix.jobs/r/use-media-query.json", "https://ui.hotfix.jobs/r/utils.json" ], "files": [ { "path": "registry/components/ui/combobox.tsx", "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport {\n CaretDown,\n MagnifyingGlass,\n X,\n} from \"@phosphor-icons/react/dist/ssr\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { createContext, forwardRef, useContext, useMemo } from \"react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n itemGroupLabel,\n itemRow,\n mobilePopupBackdrop,\n mobilePopupSurface,\n popupDivider,\n popupSurface,\n popupTriggerOpen,\n} from \"@/lib/recipes\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport type { InputSize } from \"@/components/ui/input\";\nimport {\n MOBILE_MEDIA_QUERY,\n useMediaQuery,\n} from \"../hooks/use-media-query\";\n\n/* --------------------------------- Root -------------------------------- */\n\nexport interface ComboboxProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Search text. */\n value?: string;\n onValueChange?: (next: string) => void;\n placeholder?: string;\n /**\n * Enables Base UI's multi-select mode. When `true`, `selectedValues`\n * is the source of truth for the picked items and the built-in\n * ComboboxInput clearable X becomes visible whenever the array is\n * non-empty. Clicking Clear then wipes both the input value and the\n * selection array via Base UI's native handler.\n */\n multiple?: boolean;\n /** Selected values in multi-select mode (Base UI's `value` array). */\n selectedValues?: readonly unknown[];\n /** Fires when Base UI toggles the selection array in multi mode. */\n onSelectedValuesChange?: (next: unknown[]) => void;\n /**\n * Auto-highlight behavior on the popup list:\n * - `false` (default): open with no highlighted item. Arrow keys move to\n * an option before Enter can select it.\n * - `true`: only highlight on input change, not on plain open.\n * - `\"always\"`: highlight the first item on open and input change.\n */\n autoHighlight?: boolean | \"always\";\n children: React.ReactNode;\n}\n\nconst ComboboxSharedContext = createContext<{\n placeholder?: string;\n multiple?: boolean;\n isMobile: boolean;\n}>({ isMobile: false });\n\nexport function Combobox({\n open,\n defaultOpen,\n onOpenChange,\n value,\n onValueChange,\n placeholder,\n multiple,\n selectedValues,\n onSelectedValuesChange,\n autoHighlight = false,\n children,\n}: ComboboxProps): React.ReactElement {\n const isMobile = useMediaQuery(MOBILE_MEDIA_QUERY);\n const shared = useMemo(\n () => ({ placeholder, multiple, isMobile }),\n [placeholder, multiple, isMobile],\n );\n // Base UI's ComboboxRoot is generic over Value + Multiple, and the\n // shape of `value` depends on both. Cast through `unknown as never` at\n // the boundary so consumers can pass a `string[]` selection array\n // without threading generics through our wrapper.\n const rootProps = multiple\n ? {\n multiple: true as const,\n value: selectedValues as never,\n onValueChange: onSelectedValuesChange\n ? (next: unknown) =>\n onSelectedValuesChange((next as unknown[]) ?? [])\n : undefined,\n }\n : {};\n\n return (\n \n onValueChange(next) : undefined\n }\n // Base UI's ComboboxRoot narrows autoHighlight to boolean in its\n // public types, but the underlying AriaCombobox accepts 'always'\n // and forwards it unchanged. Cast so consumers can opt into the\n // stronger mode without dropping to the primitive.\n autoHighlight={autoHighlight as boolean}\n modal={isMobile}\n >\n {children}\n \n \n );\n}\n\n/* -------------------------------- Input -------------------------------- */\n\nfunction ChevronIndicator({\n className,\n}: {\n className?: string;\n}): React.ReactElement {\n return (\n \n }\n />\n );\n}\n\nexport interface ComboboxInputProps\n extends Omit, \"size\" | \"prefix\"> {\n size?: InputSize;\n /** Removes control chrome when embedded in a composite surface. */\n variant?: \"default\" | \"unstyled\";\n prefix?: React.ReactNode;\n suffix?: React.ReactNode;\n /** Hide the trailing chevron. */\n hideChevron?: boolean;\n /** Show a trailing X to clear the input. */\n clearable?: boolean;\n onClear?: () => void;\n}\n\nconst heightBySize: Record = {\n sm: \"h-6 text-small\",\n md: \"h-8 text-small\",\n lg: \"h-10 text-regular\",\n};\n\nconst startPadBySize: Record = {\n sm: \"ps-3\",\n md: \"ps-3\",\n lg: \"ps-3.5\",\n};\n\nconst endPadBySize: Record = {\n sm: \"pe-3\",\n md: \"pe-3\",\n lg: \"pe-3.5\",\n};\n\nfunction ComboboxAffix({\n side,\n children,\n}: {\n side: \"start\" | \"end\";\n children: React.ReactNode;\n}) {\n return (\n \n {children}\n \n );\n}\n\nexport const ComboboxInput = forwardRef(\n function ComboboxInput(\n {\n size = \"md\",\n variant = \"default\",\n prefix,\n suffix,\n hideChevron,\n clearable,\n onClear,\n disabled,\n className,\n ...props\n },\n forwardedRef,\n ) {\n const unstyled = variant === \"unstyled\";\n const trailing = (clearable || !hideChevron || suffix) ? (\n \n \n {suffix}\n {clearable && (\n \n \n \n )}\n {!hideChevron && (\n \n )}\n \n \n ) : null;\n\n return (\n \n {prefix && {prefix}}\n \n {trailing}\n \n );\n },\n);\n\n/* -------------------------------- Popup -------------------------------- */\n\nexport interface ComboboxPopupProps {\n /** Applies to whichever popup renders (desktop or mobile).\n * Use for styling that makes sense in both contexts. */\n className?: string;\n /** Desktop-only overrides. Trigger-anchored width lives here\n * (e.g. `w-[var(--anchor-width)]`) — it's meaningless for the\n * centered mobile modal, so we drop it on mobile. */\n desktopClassName?: string;\n /** Mobile-only overrides for the centered modal layout. */\n mobileClassName?: string;\n /** Desktop placement. Mobile uses a centered modal surface. */\n side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n /** Desktop alignment. Mobile uses a centered modal surface. */\n align?: \"start\" | \"center\" | \"end\";\n /** Desktop trigger offset. Mobile uses viewport gutters. */\n sideOffset?: number;\n children: React.ReactNode;\n}\n\nexport function ComboboxPopup({\n className,\n desktopClassName,\n mobileClassName,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 6,\n children,\n}: ComboboxPopupProps): React.ReactElement {\n const { placeholder, isMobile } = useContext(ComboboxSharedContext);\n\n if (isMobile) {\n return (\n \n \n \n \n \n \n \n \n \n \n {children}\n \n \n \n \n \n );\n }\n\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\n/* --------------------------------- Item -------------------------------- */\n\nexport interface ComboboxItemProps\n extends Omit, \"onSelect\"> {\n onSelect?: () => void;\n disabled?: boolean;\n value?: unknown;\n /** When provided, renders a trailing X affordance that calls this\n * callback instead of Base UI's select handler on click. Useful in\n * multi-select Selected sections where every row already represents\n * an active pick and clicking the row still toggles it off, but a\n * visible X communicates that intent more clearly. */\n onRemove?: () => void;\n /** aria-label for the remove X. Defaults to \"Remove\". */\n removeLabel?: string;\n}\n\nexport function ComboboxItem({\n className,\n children,\n onSelect,\n disabled,\n value,\n onClick,\n onRemove,\n removeLabel = \"Remove\",\n ...props\n}: ComboboxItemProps): React.ReactElement {\n const { multiple } = useContext(ComboboxSharedContext);\n const resolvedValue =\n value !== undefined ? value : typeof children === \"string\" ? children : null;\n return (\n ) => {\n onClick?.(e);\n if (e.defaultPrevented) return;\n onSelect?.();\n }}\n {...props}\n >\n {multiple && (\n \n \n \n \n \n \n )}\n {children}\n {onRemove && (\n e.stopPropagation()}\n onClick={(e) => {\n e.stopPropagation();\n e.preventDefault();\n onRemove();\n }}\n className=\"ms-auto inline-flex size-5 shrink-0 items-center justify-center rounded-[var(--radius-8)] text-ink-muted transition-colors duration-[var(--duration-state)] ease-[var(--ease-standard)] hover:bg-layer-hover hover:text-ink active:bg-layer-hover\"\n data-slot=\"combobox-item-remove\"\n >\n \n \n )}\n \n );\n}\n\n/* -------------------------------- Divider ----------------------------- */\n\nexport function ComboboxDivider({\n className,\n ...props\n}: React.HTMLAttributes): React.ReactElement {\n return (\n \n );\n}\n\n/* ---------------------------- Group / Section ------------------------- */\n\nexport function ComboboxGroupLabel({\n className,\n ...props\n}: React.HTMLAttributes): React.ReactElement {\n return (\n \n );\n}\n\nexport interface ComboboxSectionProps\n extends Omit, \"children\" | \"title\"> {\n title?: React.ReactNode;\n children: React.ReactNode;\n}\n\nexport function ComboboxSection({\n title,\n className,\n children,\n ...props\n}: ComboboxSectionProps): React.ReactElement {\n return (\n \n {title != null && {title}}\n {children}\n \n );\n}\n\nexport const ComboboxSearchIcon = MagnifyingGlass;\nconst ComboboxPrimitiveExport = ComboboxPrimitive;\nexport { ComboboxPrimitiveExport as ComboboxPrimitive };\n", "type": "registry:ui", "target": "components/ui/combobox.tsx" } ], "type": "registry:ui" }