4e: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[544296,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 50:I[34002,["/_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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tcf3c,// Hairline UI · combobox · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { createPortal } from "react-dom"; import { EASE, fly, play, snapshot, textRect, type Snapshot } from "./combobox-motion"; import { NumberRoll } from "./number-roll"; import { StatusButton } from "./status-button"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * COMBOBOX: pick from a list too long to scroll, or one your * server has to search * * open the panel unfolds from the field's edge, clear of * it, with the search field already focused; things * you picked before come first * search your search() is called as you type: debounced, * older requests aborted, answers cached so going * back a letter is instant. While it asks, the old * results stay (dimmed after a beat) and a hairline * runs under the field; when the answer lands, rows * that stay glide to their new places, new ones rise * in and gone ones fade where they stood * match the letters you typed are picked out in each row * pick one: the panel folds and the label morphs. Several: * the row's name is carried up into the chip it * becomes, and a check draws in the row * remove a chip's × (or Backspace in an empty search) and * the other chips glide into its place * create nothing fits: "Create “design-review”" runs your * onCreate and picks what it returns * * The panel lives on the page's body, so no card or scroller * clips it; it follows the field when the page scrolls and * opens upward when there's no room below. * ───────────────────────────────────────────────────────── */ export interface ComboboxOption { value: string; label: string; /** A second line: an email, a repository's owner, a count. */ description?: string; /** An avatar picture. */ image?: string; /** Letters for an avatar without a picture. */ initials?: string; /** Any icon instead of an avatar. */ icon?: React.ReactNode; /** More words a search should match (a team, an old name). */ keywords?: string[]; /** Rows with the same group sit together under its name. */ group?: string; disabled?: boolean; } interface ComboboxBase { /** Accessible name, e.g. "Assignee". */ label: string; /** What the field says while nothing is picked. */ placeholder?: string; searchPlaceholder?: string; /** A list to filter here. */ options?: ComboboxOption[]; /** Or ask your server. Called with "" when the panel opens; pass the signal on to fetch. */ search?: (query: string, context: { signal: AbortSignal }) => Promise; /** Milliseconds to wait after a keystroke before calling search. */ debounce?: number; /** Shows "Create …" when nothing matches exactly; return the new option (or nothing to use the text). */ onCreate?: (query: string) => Promise | ComboboxOption | void; createLabel?: (query: string) => string; emptyMessage?: (query: string) => string; /** Rows to show at once; the rest wait for a narrower search. */ limit?: number; /** "field" is a 38px form field; "pill" a 28px pill for sidebars and toolbars. */ variant?: "field" | "pill"; /** The panel's least width; it's never narrower than the field. */ width?: number; /** Which edge of the field the panel lines up with. */ align?: "start" | "end"; /** A × that clears a single choice. */ clearable?: boolean; /** Submits the chosen values with a form. */ name?: string; disabled?: boolean; className?: string; } export interface ComboboxSingleProps extends ComboboxBase { multiple?: false; value?: ComboboxOption | null; defaultValue?: ComboboxOption | null; onValueChange?: (value: ComboboxOption | null) => void; } export interface ComboboxMultipleProps extends ComboboxBase { multiple: true; value?: ComboboxOption[]; defaultValue?: ComboboxOption[]; onValueChange?: (value: ComboboxOption[]) => void; /** How many can be picked. */ max?: number; } export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps; type Phase = "closed" | "opening" | "open" | "closing"; type Nav = { key: string; option?: ComboboxOption; create?: true }; type Flight = { value: string; rect: DOMRect; text: string; style: Partial }; const GAP = 6; const MAX_LIST = 300; const SEARCH_H = 41; const FOOTER_H = 37; const CREATE_KEY = "+create"; const NONE: ComboboxOption[] = []; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; // The theme travels with the panel, so it matches the field wherever the field's colours were set. const TOKENS = ["--background", "--foreground", "--popover", "--popover-foreground", "--border", "--accent", "--accent-foreground", "--primary", "--primary-foreground", "--muted", "--muted-foreground", "--ring"]; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /* ── Matching ─────────────────────────────────────────── */ const fold = (s: string) => s.toLowerCase().normalize("NFKD").replace(/[̀-ͯ]/g, ""); const terms = (q: string) => fold(q).split(/\s+/).filter(Boolean); const BOUNDARY = /[\s\-_/.@:#(]/; /** Lower is better: the label starts with it, a word in it does, it's inside it, or only the description has it. */ function rank(option: ComboboxOption, words: string[]): number | null { const label = fold(option.label); const rest = fold([option.description ?? "", ...(option.keywords ?? []), option.value].join(" ")); let score = 0; for (const w of words) { const at = label.indexOf(w); if (at === 0) continue; if (at > 0) score += BOUNDARY.test(label[at - 1]) ? 1 : 2; else if (rest.includes(w)) score += 3; else return null; } return score; } /** Filters and orders a list the way the panel would; useful on a server too. */ export function filterOptions(options: ComboboxOption[], query: string): ComboboxOption[] { const words = terms(query); if (!words.length) return options; return options .map((option, i) => ({ option, i, score: rank(option, words) })) .filter((x): x is { option: ComboboxOption; i: number; score: number } => x.score !== null) .sort((a, b) => a.score - b.score || a.i - b.i) .map((x) => x.option); } /** The label with the typed words picked out (a word start wins over a match mid-word). */ function Highlight({ text, query }: { text: string; query: string }) { const words = terms(query); const folded = fold(text); if (!words.length || folded.length !== text.length) return <>{text}; const hit = new Array(text.length).fill(false); for (const w of words) { let at = -1; for (let i = folded.indexOf(w); i !== -1; i = folded.indexOf(w, i + 1)) { if (at === -1) at = i; if (i === 0 || BOUNDARY.test(folded[i - 1])) { at = i; break; } } if (at !== -1) for (let i = at; i < at + w.length; i++) hit[i] = true; } const parts: React.ReactNode[] = []; let start = 0; for (let i = 1; i <= text.length; i++) { if (i === text.length || hit[i] !== hit[start]) { const piece = text.slice(start, i); parts.push( hit[start] ? ( {piece} ) : ( piece ), ); start = i; } } return <>{parts}; } /** Keeps each group's rows together, groups in the order they first appear. */ function grouped(list: ComboboxOption[]) { if (!list.some((o) => o.group)) return list; const order: string[] = []; for (const o of list) if (!order.includes(o.group ?? "")) order.push(o.group ?? ""); return order.flatMap((g) => list.filter((o) => (o.group ?? "") === g)); } const unique = (list: ComboboxOption[]) => { const seen = new Set(); return list.filter((o) => (seen.has(o.value) ? false : (seen.add(o.value), true))); }; /* ── Small parts ──────────────────────────────────────── */ const hasLead = (o?: ComboboxOption | null) => Boolean(o && (o.icon || o.image || o.initials)); function Lead({ option, size }: { option: ComboboxOption; size: number }) { if (option.icon) return {option.icon}; if (option.image) // eslint-disable-next-line @next/next/no-img-element return

; return ( {option.initials} ); } /** The single choice's avatar or icon: the slot opens and closes, and a new one scales in through a blur as the old one leaves. */ function LeadSlot({ option, size, reduced }: { option: ComboboxOption | undefined; size: number; reduced: boolean }) { const [out, setOut] = React.useState(null); const last = React.useRef(option); const key = option?.value ?? ""; React.useLayoutEffect(() => { const prev = last.current; last.current = option; if (!prev || prev.value === key || !hasLead(prev) || reduced) return; setOut(prev); const timer = window.setTimeout(() => setOut(null), 260); return () => window.clearTimeout(timer); // eslint-disable-next-line react-hooks/exhaustive-deps }, [key, reduced]); const on = hasLead(option); return ( {out && ( { if (!el || el.dataset.out) return; el.dataset.out = "1"; el.animate( [ { opacity: 1, transform: "none", filter: "blur(0px)" }, { opacity: 0, transform: "scale(0.6)", filter: "blur(3px)" }, ], { duration: 220, easing: EASE, fill: "forwards" }, ); }} > )} {on && option && ( { if (!el || reduced || el.dataset.in) return; el.dataset.in = "1"; el.animate( [ { opacity: 0, transform: "scale(0.6)", filter: "blur(3px)" }, { opacity: 1, transform: "none", filter: "blur(0px)" }, ], { duration: 380, delay: 60, easing: EASE, fill: "backwards" }, ); }} > )} ); } function Chevron({ up, reduced, className = "" }: { up: boolean; reduced: boolean; className?: string }) { return ( ); } function Cross({ className = "size-3" }: { className?: string }) { return ( ); } function Check({ drawn, reduced, className = "size-3.5" }: { drawn: boolean; reduced: boolean; className?: string }) { return ( ); } /** A square for rows you can pick several of: it fills and its check draws itself. */ function Box({ on, reduced }: { on: boolean; reduced: boolean }) { return ( ); } function SearchIcon() { return ( ); } function AlertIcon() { return ( ); } const shake = (el: Element | null | undefined, reduced: boolean) => { if (!el || reduced) return; el.animate([{ transform: "none" }, { transform: "translateX(-4px)" }, { transform: "translateX(4px)" }, { transform: "translateX(-2px)" }, { transform: "none" }], { duration: 380, easing: "ease-out", composite: "add", }); }; /* ── The combobox ─────────────────────────────────────── */ export function Combobox(props: ComboboxProps) { const { label, placeholder = "Choose", searchPlaceholder = "Search", options, search, debounce = 180, onCreate, createLabel = (q: string) => `Create “${q}”`, emptyMessage = (q: string) => (q ? `No matches for “${q}”` : "Nothing to choose yet"), limit = 100, variant = "field", width = 280, align = "start", clearable = false, name, disabled = false, className = "", } = props; const multiple = props.multiple === true; const max = props.multiple ? props.max : undefined; const uid = React.useId(); const reduced = useReducedMotion(); // What's picked, always a list inside. const listOf = (v: ComboboxOption | ComboboxOption[] | null | undefined) => (v == null ? NONE : Array.isArray(v) ? v : [v]); const [own, setOwn] = React.useState(() => listOf(props.defaultValue)); const selected = props.value !== undefined ? listOf(props.value) : own; const selectedKey = selected.map((o) => o.value).join("\u0000"); const picked = React.useMemo(() => new Set(selected.map((o) => o.value)), [selectedKey]); // eslint-disable-line react-hooks/exhaustive-deps const [phase, setPhase] = React.useState("closed"); const [fit, setFit] = React.useState({ x: 0, y: 0, w: width, up: false, room: 480, theme: {} as Record }); const [query, setQuery] = React.useState(""); const [results, setResults] = React.useState(null); const [resultsFor, setResultsFor] = React.useState(null); const [loading, setLoading] = React.useState(false); const [failed, setFailed] = React.useState(null); const [retry, setRetry] = React.useState(0); const [created, setCreated] = React.useState([]); const [creating, setCreating] = React.useState<"idle" | "pending" | "error">("idle"); const [pinned, setPinned] = React.useState([]); const [activeKey, setActiveKey] = React.useState(null); const [mark, setMark] = React.useState({ y: 0, h: 0, on: false, slide: false }); const [listH, setListH] = React.useState(0); const [sized, setSized] = React.useState(false); const [fieldH, setFieldH] = React.useState(0); const [ring, setRing] = React.useState(false); const [notice, setNotice] = React.useState(null); const [announce, setAnnounce] = React.useState(""); const anchorRef = React.useRef(null); const triggerRef = React.useRef(null); const surfaceRef = React.useRef(null); const inputRef = React.useRef(null); const listRef = React.useRef(null); const rowGhosts = React.useRef(null); const chipsRef = React.useRef(null); const chipGhosts = React.useRef(null); const cache = React.useRef(new Map()); const searchRef = React.useRef(search); const resultsForRef = React.useRef(null); const rowSnap = React.useRef(null); const chipSnap = React.useRef(null); const flight = React.useRef(null); const timer = React.useRef(0); const mounted = phase !== "closed"; const expanded = phase === "open"; const async = Boolean(search); const q = query.trim(); const panelId = `${uid}-panel`; const listId = `${uid}-list`; React.useLayoutEffect(() => { searchRef.current = search; resultsForRef.current = resultsFor; }); const commit = (next: ComboboxOption[]) => { if (props.value === undefined) setOwn(next); if (props.multiple === true) props.onValueChange?.(next); else (props as ComboboxSingleProps).onValueChange?.(next[0] ?? null); }; /* ── What the list shows ── */ const pool = React.useMemo(() => { const extra = filterOptions(created, query); // Rows for an older query stay while a newer one is asked, but not under its error. const answer = failed && resultsFor !== q ? NONE : (results ?? NONE); const base = async ? unique([...extra, ...answer]) : filterOptions(unique([...created, ...(options ?? [])]), query); if (q || !pinned.length) return grouped(base); // Before you type, what you'd already picked comes first, in the order it was when the panel opened. const first = pinned.map((p) => base.find((o) => o.value === p.value) ?? p); const ids = new Set(first.map((o) => o.value)); return [...first, ...grouped(base.filter((o) => !ids.has(o.value)))]; }, [async, results, resultsFor, failed, options, created, query, q, pinned]); const shown = pool.length > limit ? pool.slice(0, limit) : pool; const more = pool.length - shown.length; const canCreate = Boolean(onCreate && q && !pool.some((o) => fold(o.label) === fold(q))); const firstLoad = async && results === null && !failed; const nav: Nav[] = React.useMemo(() => { const out: Nav[] = shown.filter((o) => !o.disabled).map((o) => ({ key: o.value, option: o })); if (canCreate) out.push({ key: CREATE_KEY, create: true }); return out; }, [shown, canCreate]); const activeIndex = Math.max(0, nav.findIndex((n) => n.key === activeKey)); const active = nav.length ? nav[activeIndex] : undefined; const rowsKey = [ ...shown.map((o) => o.value), canCreate ? CREATE_KEY : "", firstLoad ? "!loading" : "", failed ? "!error" : "", !shown.length && !canCreate && !firstLoad && !failed ? "!empty" : "", more ? "!more" : "", ].join("\u0000"); const stale = async && loading && resultsFor !== null && resultsFor !== q; /* ── Panel placement ── */ const place = React.useCallback(() => { const anchor = anchorRef.current; if (!anchor) return; const r = anchor.getBoundingClientRect(); const vw = document.documentElement.clientWidth; const vh = window.innerHeight; const w = Math.min(Math.max(width, r.width), vw - 16); const x = Math.min(Math.max(8, align === "start" ? r.left : r.right - w), vw - 8 - w); const below = vh - r.bottom - GAP - 8; const above = r.top - GAP - 8; const up = below < 240 && above > below; const cs = getComputedStyle(anchor); const theme: Record = { colorScheme: cs.colorScheme, fontFamily: cs.fontFamily }; for (const t of TOKENS) { const v = cs.getPropertyValue(t); if (v) theme[t] = v; } setFit({ x, y: up ? vh - r.top + GAP : r.bottom + GAP, w, up, room: up ? above : below, theme }); }, [width, align]); const open = (seed = "") => { if (disabled || phase === "open" || phase === "opening") return; window.clearTimeout(timer.current); place(); setQuery(seed); const hit = async ? cache.current.get(seed.trim()) : undefined; setResults(hit ?? null); setResultsFor(hit ? seed.trim() : null); setFailed(null); setPinned(multiple ? selected : NONE); setActiveKey(!multiple && selected[0] ? selected[0].value : null); setNotice(null); setCreating("idle"); setSized(false); setMark({ y: 0, h: 0, on: false, slide: false }); setPhase(reduced ? "open" : "opening"); }; const close = React.useCallback( (refocus = true) => { window.clearTimeout(timer.current); if (refocus) triggerRef.current?.focus({ preventScroll: true }); if (reduced) return setPhase("closed"); setPhase("closing"); timer.current = window.setTimeout(() => setPhase("closed"), 240); }, [reduced], ); const toggle = () => (phase === "open" || phase === "opening" ? close() : open()); React.useEffect(() => { if (phase !== "opening") return; let inner = 0; const outer = requestAnimationFrame(() => (inner = requestAnimationFrame(() => setPhase("open")))); return () => { cancelAnimationFrame(outer); cancelAnimationFrame(inner); }; }, [phase]); React.useEffect(() => () => window.clearTimeout(timer.current), []); React.useLayoutEffect(() => { if (phase === "opening" || (reduced && phase === "open")) inputRef.current?.focus({ preventScroll: true }); }, [phase, reduced]); // Outside presses close it; the page scrolling or resizing carries it along with the field. React.useEffect(() => { if (!mounted) return; const inside = (n: Node) => Boolean(anchorRef.current?.contains(n) || surfaceRef.current?.contains(n)); const onDown = (e: PointerEvent) => { if (!inside(e.target as Node)) close(false); }; let frame = 0; const follow = (e: Event) => { if (e.target instanceof Node && surfaceRef.current?.contains(e.target)) return; cancelAnimationFrame(frame); frame = requestAnimationFrame(() => { const r = anchorRef.current?.getBoundingClientRect(); if (!r || r.bottom < 0 || r.top > window.innerHeight) close(false); else place(); }); }; document.addEventListener("pointerdown", onDown); window.addEventListener("scroll", follow, true); window.addEventListener("resize", follow); // A field that grows (chips wrapping onto a new line) pushes the panel down with it. const resized = new ResizeObserver(() => place()); if (anchorRef.current) resized.observe(anchorRef.current); return () => { resized.disconnect(); cancelAnimationFrame(frame); document.removeEventListener("pointerdown", onDown); window.removeEventListener("scroll", follow, true); window.removeEventListener("resize", follow); }; }, [mounted, close, place]); /* ── Asking the server ── */ const show = (list: ComboboxOption[], forQuery: string) => { if (!reduced) rowSnap.current = snapshot(listRef.current, "data-row"); setResults(list); setResultsFor(forQuery); }; React.useEffect(() => { const ask = searchRef.current; if (!mounted || !ask) return; const hit = cache.current.get(q); if (hit) { if (resultsForRef.current !== q) show(hit, q); setLoading(false); setFailed(null); return; } const controller = new AbortController(); setLoading(true); const wait = window.setTimeout( () => { ask(q, { signal: controller.signal }).then( (list) => { if (controller.signal.aborted) return; cache.current.set(q, list); // A small memory: the oldest answers go first. if (cache.current.size > 40) cache.current.delete(cache.current.keys().next().value!); show(list, q); setLoading(false); setFailed(null); }, (err: unknown) => { if (controller.signal.aborted || (err instanceof Error && err.name === "AbortError")) return; if (!reduced) rowSnap.current = snapshot(listRef.current, "data-row"); setLoading(false); setFailed(err instanceof Error && err.message ? err.message : "Couldn’t load results."); }, ); }, resultsForRef.current === null ? 0 : debounce, ); return () => { window.clearTimeout(wait); controller.abort(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [q, mounted, retry, debounce]); // Rows that changed: glide, rise in, fade out (from positions taken right before the change). React.useLayoutEffect(() => { const snap = rowSnap.current; rowSnap.current = null; if (snap) play(listRef.current, "data-row", snap, rowGhosts.current); }, [rowsKey]); // The count, said once typing settles. React.useEffect(() => { if (!expanded || !q || firstLoad) return; const t = window.setTimeout(() => setAnnounce(shown.length ? `${pool.length} ${pool.length === 1 ? "result" : "results"}` : emptyMessage(q)), 500); return () => window.clearTimeout(t); // eslint-disable-next-line react-hooks/exhaustive-deps }, [rowsKey, expanded]); /* ── List height and the highlight ── */ React.useLayoutEffect(() => { const list = listRef.current; if (!list || !mounted) return; const measure = () => setListH((h) => (h === list.offsetHeight ? h : list.offsetHeight)); measure(); const observer = new ResizeObserver(measure); observer.observe(list); return () => observer.disconnect(); }, [mounted]); React.useEffect(() => { if (expanded && listH && !sized) { const frame = requestAnimationFrame(() => setSized(true)); return () => cancelAnimationFrame(frame); } }, [expanded, listH, sized]); React.useLayoutEffect(() => { const list = listRef.current; if (!list || !mounted) return; const row = active ? list.querySelector(`[data-nav="${activeIndex}"]`) : null; if (!row) { setMark((m) => (m.on ? { ...m, on: false, slide: false } : m)); return; } setMark((m) => (m.y === row.offsetTop && m.h === row.offsetHeight && m.on ? m : { y: row.offsetTop, h: row.offsetHeight, on: true, slide: m.on })); const scroller = list.parentElement; if (scroller && scroller.scrollHeight > scroller.clientHeight) { if (row.offsetTop < scroller.scrollTop) scroller.scrollTop = row.offsetTop - 4; else if (row.offsetTop + row.offsetHeight > scroller.scrollTop + scroller.clientHeight) scroller.scrollTop = row.offsetTop + row.offsetHeight - scroller.clientHeight + 8; } }, [activeIndex, active, rowsKey, mounted, listH]); /* ── Chips ── */ React.useLayoutEffect(() => { const chips = chipsRef.current; if (!chips) return; const measure = () => setFieldH((h) => (h === chips.offsetHeight ? h : chips.offsetHeight)); measure(); const observer = new ResizeObserver(measure); observer.observe(chips); return () => observer.disconnect(); }, []); React.useLayoutEffect(() => { const snap = chipSnap.current; chipSnap.current = null; if (snap) play(chipsRef.current, "data-chip", snap, chipGhosts.current, { enter: "pop", duration: 340 }); const f = flight.current; flight.current = null; const to = f && chipsRef.current?.querySelector(`[data-chip="${CSS.escape(f.value)}"] [data-chip-label]`); if (f && to) fly(f, to); }, [selectedKey]); // Declared after the effects that use them: a snapshot no change used (the same rows came back) would be stale by the next one. React.useLayoutEffect(() => { rowSnap.current = null; chipSnap.current = null; flight.current = null; }); /* ── Picking ── */ const pick = (option: ComboboxOption, row?: HTMLElement | null) => { if (option.disabled) return; if (!multiple) { if (option.value !== selected[0]?.value) commit([option]); setAnnounce(`${option.label} selected`); close(); return; } const on = picked.has(option.value); if (!on && max !== undefined && selected.length >= max) { setNotice(`You can pick up to ${max}.`); shake(row, reduced); return; } if (!reduced) chipSnap.current = snapshot(chipsRef.current, "data-chip"); const label = row?.querySelector("[data-label]"); if (!on && label && variant === "field" && !reduced) { const cs = getComputedStyle(label); flight.current = { value: option.value, rect: textRect(label), text: option.label, style: { font: cs.font, color: cs.color, letterSpacing: cs.letterSpacing } }; } const next = on ? selected.filter((o) => o.value !== option.value) : [...selected, option]; commit(next); setNotice(null); setAnnounce(`${option.label} ${on ? "removed" : "added"}. ${next.length} selected.`); }; const remove = (option: ComboboxOption) => { if (!reduced) chipSnap.current = snapshot(chipsRef.current, "data-chip"); const next = selected.filter((o) => o.value !== option.value); commit(next); setNotice(null); setAnnounce(`${option.label} removed. ${next.length} selected.`); }; const clear = () => { if (!reduced) chipSnap.current = snapshot(chipsRef.current, "data-chip"); commit(NONE); setNotice(null); setAnnounce("Cleared"); }; const create = async () => { if (!onCreate || !q || creating === "pending") return; const row = listRef.current?.querySelector(`[data-row="${CREATE_KEY}"]`); setCreating("pending"); setNotice(null); try { const made = await onCreate(q); const option = made && typeof made === "object" ? made : { value: q, label: q }; setCreated((list) => [option, ...list.filter((o) => o.value !== option.value)]); setCreating("idle"); setActiveKey(option.value); pick(option, row); } catch (err) { setCreating("error"); setNotice(err instanceof Error && err.message ? err.message : `Couldn’t create “${q}”.`); shake(row, reduced); } }; const onInputKey = (e: React.KeyboardEvent) => { if (e.nativeEvent.isComposing) return; const go = (i: number) => { e.preventDefault(); if (nav.length) setActiveKey(nav[((i % nav.length) + nav.length) % nav.length].key); }; if (e.key === "ArrowDown") go(activeIndex + 1); else if (e.key === "ArrowUp") go(activeIndex - 1); else if (e.key === "PageDown") go(Math.min(nav.length - 1, activeIndex + 8)); else if (e.key === "PageUp") go(Math.max(0, activeIndex - 8)); else if (e.key === "Enter") { e.preventDefault(); if (!active) return; if (active.create) void create(); else if (active.option) pick(active.option, listRef.current?.querySelector(`[data-nav="${activeIndex}"]`)); } else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); close(); } else if (e.key === "Tab") { e.preventDefault(); close(); } else if (e.key === "Backspace" && multiple && !query && selected.length) { e.preventDefault(); remove(selected[selected.length - 1]); } }; const onTriggerKey = (e: React.KeyboardEvent) => { if (e.key === "ArrowDown" || e.key === "ArrowUp") { e.preventDefault(); open(); } else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey && !e.altKey) { // Typing on the closed field opens it with what you typed. e.preventDefault(); open(e.key); } else if (e.key === "Backspace" && multiple && selected.length && !mounted) { e.preventDefault(); remove(selected[selected.length - 1]); } }; /* ── The field ── */ const single = selected[0]; const pill = variant === "pill"; const summary = !selected.length ? placeholder : multiple ? (selected.length === 1 ? selected[0].label : `${selected[0].label} +${selected.length - 1}`) : single!.label; const triggerName = `${label}: ${selected.length ? selected.map((o) => o.label).join(", ") : "none"}`; const ringStyle = mounted || ring ? "color-mix(in oklab, var(--ring) 55%, var(--border))" : "var(--border)"; const triggerProps = { ref: triggerRef, type: "button" as const, disabled, "aria-haspopup": "dialog" as const, "aria-expanded": expanded, "aria-controls": mounted ? panelId : undefined, "aria-label": triggerName, onKeyDown: onTriggerKey, onFocus: (e: React.FocusEvent) => setRing(e.currentTarget.matches(":focus-visible")), onBlur: () => setRing(false), }; let field: React.ReactNode; if (multiple && !pill) { field = (

{ if (disabled || e.button !== 0 || (e.target as HTMLElement).closest("[data-chip-remove]")) return; e.preventDefault(); toggle(); }} className={`rounded-[19px] border bg-background transition-[border-color] duration-200 ${disabled ? "cursor-default opacity-60" : "cursor-pointer"}`} style={{ borderColor: ringStyle }} > {/* clip, not hidden: hidden boxes still scroll, and focus would scroll the chips away. */}

{selected.map((o) => ( {hasLead(o) && ( )} {o.label} ))} {/* In the first line's corner, so it never wraps onto a line of its own. */}

); } else { const leadSize = pill ? 18 : 22; field = ( ); } /* ── The panel ── */ const maxList = Math.max(120, Math.min(MAX_LIST, fit.room - SEARCH_H - (multiple ? FOOTER_H : 0) - 10)); let navIndex = 0; let lastGroup: string | undefined; const rows: React.ReactNode[] = []; const pinnedFirst = !q && pinned.length > 0; const hasGroups = shown.some((o) => o.group); shown.forEach((o, index) => { const isPinned = pinnedFirst && index < pinned.length; if (isPinned && index === 0 && hasGroups) rows.push(

Selected

, ); if (o.group && o.group !== lastGroup && !isPinned) rows.push(

{o.group}

, ); if (!isPinned) lastGroup = o.group; const on = picked.has(o.value); const i = o.disabled ? -1 : navIndex++; rows.push( , ); }); if (canCreate) { const i = navIndex++; rows.push( , ); } if (firstLoad) rows.push(

Searching

, ); else if (failed) rows.push(

{failed} { setFailed(null); setRetry((r) => r + 1); }} />

, ); else if (!shown.length && !canCreate) rows.push(

{emptyMessage(q)}

, ); if (more) rows.push(

Showing {shown.length} of {pool.length}. Keep typing to narrow it down.

, ); const panel = mounted ? createPortal(