4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T4318,"use client" import * as React from "react" import { Check, ChevronsUpDown, Plus, X } from "lucide-react" import { cn } from "@/lib/utils" export type ComboboxOption = { value: string label: string description?: string /** Puts the option under a named heading in the list. */ group?: string /** Extra words that should match, without being shown. */ keywords?: readonly string[] disabled?: boolean } type ComboboxBaseProps = Omit< React.HTMLAttributes, "onChange" | "defaultValue" > & { options: readonly ComboboxOption[] label?: string placeholder?: string emptyMessage?: (query: string) => React.ReactNode disabled?: boolean /** Called as the query changes, for fetching the options yourself. */ onQueryChange?: (query: string) => void /** Says options are on their way. Pair it with onQueryChange. */ loading?: boolean loadingMessage?: React.ReactNode /** * Rank and filter the options here. Turn it off when they arrive already * matched and ordered, so a server's ranking is not overruled. */ filter?: boolean /** * Score an option against the query yourself: fuzzy matching, a field we do * not know about, a weighting of your own. Lower is a better match, and * false or nothing drops the option. */ rank?: ComboboxRanker /** * Offers what was typed as a new option. You add it to options and to the * value; this only reports the text. */ onCreate?: (label: string) => void createLabel?: (query: string) => React.ReactNode } export type ComboboxRanker = ( option: ComboboxOption, query: string ) => number | false | null | undefined export type ComboboxSingleProps = ComboboxBaseProps & { multiple?: false value?: string defaultValue?: string onValueChange?: (value: string) => void max?: never } export type ComboboxMultipleProps = ComboboxBaseProps & { multiple: true value?: readonly string[] defaultValue?: readonly string[] onValueChange?: (value: string[]) => void /** How many may be chosen. The rest go unavailable once it is reached. */ max?: number } export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps /** * Lower is a better match; Infinity, false, or nothing means no match. It is * exported so a ranker of your own can fall back to it rather than reproduce * it. */ export function rankComboboxOption(option: ComboboxOption, rawQuery: string) { const query = rawQuery.trim().toLowerCase() const label = option.label.toLowerCase() if (label === query) return 0 if (label.startsWith(query)) return 1 if (label.includes(query)) return 2 if (option.group?.toLowerCase().includes(query)) return 3 if (option.keywords?.some((word) => word.toLowerCase().includes(query))) return 4 if (option.description?.toLowerCase().includes(query)) return 5 return Number.POSITIVE_INFINITY } const defaultEmptyMessage = (query: string) => query ? `Nothing matches “${query}”.` : "No options." const defaultCreateLabel = (query: string) => `Create “${query}”` /** The row that offers to make a new option, which is not one of them yet. */ const CREATE = "combobox-create" type Row = ComboboxOption | typeof CREATE function toValues(value: string | readonly string[] | undefined) { if (value === undefined) return undefined if (typeof value === "string") return value === "" ? [] : [value] return [...value] } type Section = { group?: string; options: ComboboxOption[] } /** Same-named groups meet under one heading, in the order they first appear. */ function toSections(results: readonly ComboboxOption[]) { const sections: Section[] = [] const named = new Map() for (const option of results) { if (option.group === undefined) { const last = sections[sections.length - 1] if (last && last.group === undefined) last.options.push(option) else sections.push({ options: [option] }) continue } const existing = named.get(option.group) if (existing) { existing.options.push(option) continue } const section: Section = { group: option.group, options: [option] } named.set(option.group, section) sections.push(section) } return sections } export function Combobox(props: ComboboxProps) { const { options, label = "Options", placeholder = "Search", emptyMessage = defaultEmptyMessage, disabled = false, onQueryChange, loading = false, loadingMessage = "Searching…", filter = true, rank = rankComboboxOption, onCreate, createLabel = defaultCreateLabel, className, multiple, value, defaultValue, onValueChange, max, ...rootProps } = props const id = React.useId() const listId = `${id}-list` const container = React.useRef(null) const input = React.useRef(null) const controlled = toValues(value) const [own, setOwn] = React.useState(() => toValues(defaultValue) ?? []) const selected = controlled ?? own const selectedLabel = multiple ? "" : (options.find((option) => option.value === selected[0])?.label ?? "") // What was typed, or nothing typed yet. Holding the draft rather than the // field's text is what lets a single-value field fall back to the chosen // label without an effect writing it there. const [draft, setDraft] = React.useState(null) const [open, setOpen] = React.useState(false) const [active, setActive] = React.useState(0) const [message, setMessage] = React.useState("") const text = draft ?? selectedLabel const search = draft === null ? "" : draft.trim() React.useEffect(() => { if (!open) return const onPointerDown = (event: PointerEvent) => { if (container.current?.contains(event.target as Node)) return setOpen(false) if (!multiple) setDraft(null) } document.addEventListener("pointerdown", onPointerDown) return () => document.removeEventListener("pointerdown", onPointerDown) }, [open, multiple]) const results = React.useMemo(() => { // Already matched and ordered by whoever fetched them. if (!filter || !search) return [...options] return options .map((option, index) => ({ option, index, score: rank(option, search) })) .filter( ( entry ): entry is { option: ComboboxOption; index: number; score: number } => typeof entry.score === "number" && Number.isFinite(entry.score) ) .sort((a, b) => a.score - b.score || a.index - b.index) .map((entry) => entry.option) }, [options, search, filter, rank]) const full = max !== undefined && selected.length >= max const unavailable = (option: ComboboxOption) => option.disabled === true || (full && !selected.includes(option.value)) const choosable = results.filter((option) => !unavailable(option)) const creating = onCreate !== undefined && search !== "" && !full && !options.some( (option) => option.label.toLowerCase() === search.toLowerCase() ) const rows: Row[] = creating ? [...choosable, CREATE] : choosable const activeRow = rows[Math.min(active, rows.length - 1)] const activeOption = activeRow === CREATE ? undefined : activeRow const activeId = activeRow === CREATE ? `${id}-create` : activeRow ? `${id}-option-${activeRow.value}` : undefined function commit(next: string[]) { if (controlled === undefined) setOwn(next) if (multiple) onValueChange?.(next) else onValueChange?.(next[0] ?? "") } function toggle(option: ComboboxOption) { if (unavailable(option)) return if (multiple) { const dropping = selected.includes(option.value) const next = dropping ? selected.filter((one) => one !== option.value) : [...selected, option.value] commit(next) setMessage( dropping ? `${option.label} removed.` : next.length === max ? `${option.label} added. That is the most you can choose.` : `${option.label} added.` ) setDraft(null) setActive(0) } else { commit([option.value]) setMessage(`${option.label} chosen.`) setDraft(null) setOpen(false) } input.current?.focus() } function create() { if (search === "") return onCreate?.(search) setMessage(`${search} created.`) setDraft(null) setActive(0) input.current?.focus() } function remove(one: string) { const option = options.find((entry) => entry.value === one) commit(selected.filter((entry) => entry !== one)) setMessage(option ? `${option.label} removed.` : "Removed.") input.current?.focus() } function dismiss() { setOpen(false) if (!multiple) setDraft(null) } function reveal() { if (disabled) return const index = choosable.findIndex((option) => option.value === selected[0]) setActive(multiple || index < 0 ? 0 : index) setOpen(true) } function onKeyDown(event: React.KeyboardEvent) { if (event.key === "Escape") { event.preventDefault() if (open) dismiss() else setDraft(null) return } if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault() if (!open) { reveal() return } const step = event.key === "ArrowDown" ? 1 : -1 setActive( (current) => (current + step + rows.length) % Math.max(1, rows.length) ) return } if (open && (event.key === "Home" || event.key === "End")) { event.preventDefault() setActive(event.key === "Home" ? 0 : rows.length - 1) return } if (event.key === "Enter" && open) { event.preventDefault() if (activeRow === CREATE) create() else if (activeRow) toggle(activeRow) return } if (event.key === "Backspace" && multiple && search === "") { const last = selected[selected.length - 1] if (last !== undefined) { event.preventDefault() remove(last) } } } const chips = multiple ? selected .map((one) => options.find((option) => option.value === one)) .filter((option): option is ComboboxOption => option !== undefined) : [] function renderOption(option: ComboboxOption) { const blocked = unavailable(option) const isSelected = selected.includes(option.value) return ( ) } return (

{ if (!container.current?.contains(event.relatedTarget)) dismiss() }} {...rootProps} >

{ input.current?.focus() if (!open) reveal() }} > {chips.map((option) => ( {option.label} ))} 0 ? undefined : placeholder} value={text} className="text-foreground placeholder:text-muted-foreground min-w-24 flex-1 bg-transparent px-1 text-sm outline-none" onChange={(event) => { setDraft(event.target.value) setActive(0) setOpen(true) onQueryChange?.(event.target.value) }} onKeyDown={onKeyDown} />

{open ? ( ) : null}

{message}

) } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react@^1.31.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react@^1.31.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/combobox/combobox.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]