60: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 61:T1173f,import { useEffect, useRef, useState, type KeyboardEvent, type ReactElement } from "react"; /* Every piece below is written once: the function renders the live demo and the string next to it is that same source file, so the code you copy is the code you see. */ type Lang = "react" | "html"; type Piece = { id: string; name: string; blurb: string; group: string; Demo: () => ReactElement; react: string; html?: string; stage: string; }; const r1Demo = (() => { const STATUSES = [ { label: "Backlog", dot: "bg-stone-400" }, { label: "Planned", dot: "bg-sky-500" }, { label: "In progress", dot: "bg-amber-500" }, { label: "In review", dot: "bg-violet-500" }, { label: "Done", dot: "bg-emerald-500" }, { label: "Cancelled", dot: "bg-rose-500" }, ]; // Select-only combobox from the WAI-ARIA Authoring Practices: focus stays on the // combobox and aria-activedescendant points at the highlighted option. function SelectOnlyCombobox() { const [value, setValue] = useState(2); const [open, setOpen] = useState(false); const [active, setActive] = useState(2); const rootRef = useRef(null); const typed = useRef({ text: "", at: 0 }); useEffect(() => { if (!open) return; const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false); document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, [open]); function choose(i: number) { setValue(i); setActive(i); setOpen(false); } function onKeyDown(e: KeyboardEvent) { const last = STATUSES.length - 1; if (!open) { if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) { e.preventDefault(); setActive(value); setOpen(true); } return; } if (e.key === "ArrowDown") setActive(Math.min(last, active + 1)); else if (e.key === "ArrowUp") setActive(Math.max(0, active - 1)); else if (e.key === "Home") setActive(0); else if (e.key === "End") setActive(last); else if (e.key === "Enter" || e.key === " ") choose(active); else if (e.key === "Escape") setOpen(false); else if (e.key === "Tab") return choose(active); else if (e.key.length === 1) { // Type-ahead: jump to the first option starting with the typed letters. const now = Date.now(); typed.current = { text: (now - typed.current.at < 600 ? typed.current.text : "") + e.key.toLowerCase(), at: now }; const hit = STATUSES.findIndex((s) => s.label.toLowerCase().startsWith(typed.current.text)); if (hit >= 0) setActive(hit); } else return; e.preventDefault(); } return (

Status {open && ( )}

); } return SelectOnlyCombobox; })(); const r1React = "import { useEffect, useRef, useState, type KeyboardEvent } from \"react\";\n\nconst STATUSES = [\n { label: \"Backlog\", dot: \"bg-stone-400\" },\n { label: \"Planned\", dot: \"bg-sky-500\" },\n { label: \"In progress\", dot: \"bg-amber-500\" },\n { label: \"In review\", dot: \"bg-violet-500\" },\n { label: \"Done\", dot: \"bg-emerald-500\" },\n { label: \"Cancelled\", dot: \"bg-rose-500\" },\n];\n\n// Select-only combobox from the WAI-ARIA Authoring Practices: focus stays on the\n// combobox and aria-activedescendant points at the highlighted option.\nexport default function SelectOnlyCombobox() {\n const [value, setValue] = useState(2);\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(2);\n const rootRef = useRef(null);\n const typed = useRef({ text: \"\", at: 0 });\n\n useEffect(() => {\n if (!open) return;\n const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false);\n document.addEventListener(\"mousedown\", close);\n return () => document.removeEventListener(\"mousedown\", close);\n }, [open]);\n\n function choose(i: number) {\n setValue(i);\n setActive(i);\n setOpen(false);\n }\n\n function onKeyDown(e: KeyboardEvent) {\n const last = STATUSES.length - 1;\n if (!open) {\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(e.key)) {\n e.preventDefault();\n setActive(value);\n setOpen(true);\n }\n return;\n }\n if (e.key === \"ArrowDown\") setActive(Math.min(last, active + 1));\n else if (e.key === \"ArrowUp\") setActive(Math.max(0, active - 1));\n else if (e.key === \"Home\") setActive(0);\n else if (e.key === \"End\") setActive(last);\n else if (e.key === \"Enter\" || e.key === \" \") choose(active);\n else if (e.key === \"Escape\") setOpen(false);\n else if (e.key === \"Tab\") return choose(active);\n else if (e.key.length === 1) {\n // Type-ahead: jump to the first option starting with the typed letters.\n const now = Date.now();\n typed.current = { text: (now - typed.current.at < 600 ? typed.current.text : \"\") + e.key.toLowerCase(), at: now };\n const hit = STATUSES.findIndex((s) => s.label.toLowerCase().startsWith(typed.current.text));\n if (hit >= 0) setActive(hit);\n } else return;\n e.preventDefault();\n }\n\n return (\n

\n \n Status\n \n (open ? setOpen(false) : (setActive(value), setOpen(true)))}\n onKeyDown={onKeyDown}\n className=\"mt-2 flex h-11 cursor-pointer items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-900 shadow-sm focus-visible:border-sky-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600/30\"\n >\n \n {STATUSES[value].label}\n \n

\n {open && (\n

e.preventDefault()}\n onClick={() => choose(i)}\n onMouseEnter={() => setActive(i)}\n className={`flex h-10 cursor-pointer items-center gap-2 px-3 text-sm text-slate-800 ${i === active ? \"bg-sky-50\" : \"\"}`}\n >\n \n {s.label}\n {i === value && (\n \n )}\n \n ))}\n

\n )}\n \n );\n}\n"; const r2Demo = (() => { const PEOPLE = [ { name: "Maya Lindqvist", role: "Design lead" }, { name: "Marcus Oyelaran", role: "Backend" }, { name: "Priya Raman", role: "Product" }, { name: "Tomás Herrera", role: "Frontend" }, { name: "Amara Osei", role: "Support" }, { name: "Jonah Feld", role: "Data" }, { name: "Lena Marsh", role: "Marketing" }, ]; // Editable combobox with list autocomplete (WAI-ARIA Authoring Practices pattern). function SearchableCombobox() { const [query, setQuery] = useState("ma"); const [selected, setSelected] = useState(""); const [open, setOpen] = useState(true); const [active, setActive] = useState(0); const rootRef = useRef(null); const listRef = useRef(null); const results = PEOPLE.filter((p) => p.name.toLowerCase().includes(query.trim().toLowerCase())); useEffect(() => { const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false); document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, []); // Keep the highlighted option visible inside the list without scrolling the page. useEffect(() => { const list = listRef.current; const el = list?.querySelector(`[data-i="${active}"]`); if (!list || !el) return; if (el.offsetTop < list.scrollTop) list.scrollTop = el.offsetTop; else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight) list.scrollTop = el.offsetTop + el.offsetHeight - list.clientHeight; }, [active]); function pick(name: string) { setSelected(name); setQuery(name); setOpen(false); } function onKeyDown(e: KeyboardEvent) { if (e.key === "ArrowDown") { if (open) setActive(Math.min(results.length - 1, active + 1)); else setOpen(true); } else if (e.key === "ArrowUp") { if (open) setActive(Math.max(0, active - 1)); } else if (e.key === "Enter" && open && results[active]) pick(results[active].name); else if (e.key === "Escape") { if (open) setOpen(false); else setQuery(""); } else return; e.preventDefault(); } const bold = (name: string) => { const i = name.toLowerCase().indexOf(query.trim().toLowerCase()); if (!query.trim() || i < 0) return name; const n = query.trim().length; return ( <> {name.slice(0, i)} {name.slice(i, i + n)} {name.slice(i + n)} ); }; return (

Assign to

{ setQuery(e.target.value); setActive(0); setOpen(true); }} onClick={() => setOpen(true)} onKeyDown={onKeyDown} className="h-11 w-full rounded-lg border border-slate-300 bg-white pl-9 pr-3 text-base text-slate-900 placeholder:text-slate-500 focus:border-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-600/30 sm:text-sm" />

{open && ( )}

); } return SearchableCombobox; })(); const r2React = "import { useEffect, useRef, useState, type KeyboardEvent } from \"react\";\n\nconst PEOPLE = [\n { name: \"Maya Lindqvist\", role: \"Design lead\" },\n { name: \"Marcus Oyelaran\", role: \"Backend\" },\n { name: \"Priya Raman\", role: \"Product\" },\n { name: \"Tomás Herrera\", role: \"Frontend\" },\n { name: \"Amara Osei\", role: \"Support\" },\n { name: \"Jonah Feld\", role: \"Data\" },\n { name: \"Lena Marsh\", role: \"Marketing\" },\n];\n\n// Editable combobox with list autocomplete (WAI-ARIA Authoring Practices pattern).\nexport default function SearchableCombobox() {\n const [query, setQuery] = useState(\"ma\");\n const [selected, setSelected] = useState(\"\");\n const [open, setOpen] = useState(true);\n const [active, setActive] = useState(0);\n const rootRef = useRef(null);\n const listRef = useRef(null);\n\n const results = PEOPLE.filter((p) => p.name.toLowerCase().includes(query.trim().toLowerCase()));\n\n useEffect(() => {\n const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false);\n document.addEventListener(\"mousedown\", close);\n return () => document.removeEventListener(\"mousedown\", close);\n }, []);\n\n // Keep the highlighted option visible inside the list without scrolling the page.\n useEffect(() => {\n const list = listRef.current;\n const el = list?.querySelector(`[data-i=\"${active}\"]`);\n if (!list || !el) return;\n if (el.offsetTop < list.scrollTop) list.scrollTop = el.offsetTop;\n else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight) list.scrollTop = el.offsetTop + el.offsetHeight - list.clientHeight;\n }, [active]);\n\n function pick(name: string) {\n setSelected(name);\n setQuery(name);\n setOpen(false);\n }\n\n function onKeyDown(e: KeyboardEvent) {\n if (e.key === \"ArrowDown\") {\n if (open) setActive(Math.min(results.length - 1, active + 1));\n else setOpen(true);\n } else if (e.key === \"ArrowUp\") {\n if (open) setActive(Math.max(0, active - 1));\n } else if (e.key === \"Enter\" && open && results[active]) pick(results[active].name);\n else if (e.key === \"Escape\") {\n if (open) setOpen(false);\n else setQuery(\"\");\n } else return;\n e.preventDefault();\n }\n\n const bold = (name: string) => {\n const i = name.toLowerCase().indexOf(query.trim().toLowerCase());\n if (!query.trim() || i < 0) return name;\n const n = query.trim().length;\n return (\n <>\n {name.slice(0, i)}\n {name.slice(i, i + n)}\n {name.slice(i + n)}\n \n );\n };\n\n return (\n

\n \n Assign to\n \n

\n \n {\n setQuery(e.target.value);\n setActive(0);\n setOpen(true);\n }}\n onClick={() => setOpen(true)}\n onKeyDown={onKeyDown}\n className=\"h-11 w-full rounded-lg border border-slate-300 bg-white pl-9 pr-3 text-base text-slate-900 placeholder:text-slate-500 focus:border-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-600/30 sm:text-sm\"\n />\n

\n {open && (\n

e.preventDefault()}\n onClick={() => pick(p.name)}\n onMouseEnter={() => setActive(i)}\n className={`flex cursor-pointer items-center gap-2.5 px-3 py-2 text-sm text-slate-700 ${i === active ? \"bg-sky-50\" : \"\"}`}\n >\n \n {p.name.split(\" \").map((w) => w[0]).join(\"\")}\n \n \n {bold(p.name)}\n {p.role}\n \n \n ))}\n {results.length === 0 &&

No teammate matches \"{query}\"

}\n

\n )}\n

\n );\n}\n"; const r5Demo = (() => { const CITIES = ["Lisbon, Portugal", "Lima, Peru", "Lille, France", "Lyon, France", "Leeds, United Kingdom", "Linz, Austria", "Ljubljana, Slovenia", "Lagos, Nigeria", "Oslo, Norway", "Osaka, Japan"]; // Stand-in for a network call. Replace the body with your own request and keep the abort signal. function searchCities(q: string, signal: AbortSignal): Promise { return new Promise((resolve, reject) => { const id = setTimeout(() => resolve(CITIES.filter((c) => c.toLowerCase().startsWith(q.toLowerCase()))), 500); signal.addEventListener("abort", () => { clearTimeout(id); reject(new DOMException("aborted", "AbortError")); }); }); } function AsyncCombobox() { const [query, setQuery] = useState("li"); const [results, setResults] = useState([]); const [loading, setLoading] = useState(false); const [open, setOpen] = useState(true); const [active, setActive] = useState(0); // Debounce 250ms, cancel the previous request, then load. useEffect(() => { if (query.trim().length < 2) { setResults([]); setLoading(false); return; } const ac = new AbortController(); setLoading(true); const t = setTimeout(() => { searchCities(query.trim(), ac.signal) .then((r) => { setResults(r); setActive(0); setLoading(false); }) .catch(() => {}); }, 250); return () => { clearTimeout(t); ac.abort(); }; }, [query]); function onKeyDown(e: KeyboardEvent) { if (e.key === "ArrowDown") (open ? setActive(Math.min(results.length - 1, active + 1)) : setOpen(true)); else if (e.key === "ArrowUp") setActive(Math.max(0, active - 1)); else if (e.key === "Enter" && open && results[active]) { setQuery(results[active]); setOpen(false); } else if (e.key === "Escape") setOpen(false); else return; e.preventDefault(); } const message = query.trim().length < 2 ? "Type at least 2 letters" : loading ? "Searching" : results.length ? `${results.length} cities found` : "No cities match"; return (

!e.currentTarget.contains(e.relatedTarget) && setOpen(false)}> Office city

{ setQuery(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} onKeyDown={onKeyDown} className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 pr-9 text-base text-slate-900 focus:border-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-600/30 sm:text-sm" /> {loading &&

{message}

{open && !loading && results.length > 0 && ( )}

); } return AsyncCombobox; })(); const r5React = "import { useEffect, useState, type KeyboardEvent } from \"react\";\n\nconst CITIES = [\"Lisbon, Portugal\", \"Lima, Peru\", \"Lille, France\", \"Lyon, France\", \"Leeds, United Kingdom\", \"Linz, Austria\", \"Ljubljana, Slovenia\", \"Lagos, Nigeria\", \"Oslo, Norway\", \"Osaka, Japan\"];\n\n// Stand-in for a network call. Replace the body with your own request and keep the abort signal.\nfunction searchCities(q: string, signal: AbortSignal): Promise {\n return new Promise((resolve, reject) => {\n const id = setTimeout(() => resolve(CITIES.filter((c) => c.toLowerCase().startsWith(q.toLowerCase()))), 500);\n signal.addEventListener(\"abort\", () => {\n clearTimeout(id);\n reject(new DOMException(\"aborted\", \"AbortError\"));\n });\n });\n}\n\nexport default function AsyncCombobox() {\n const [query, setQuery] = useState(\"li\");\n const [results, setResults] = useState([]);\n const [loading, setLoading] = useState(false);\n const [open, setOpen] = useState(true);\n const [active, setActive] = useState(0);\n\n // Debounce 250ms, cancel the previous request, then load.\n useEffect(() => {\n if (query.trim().length < 2) {\n setResults([]);\n setLoading(false);\n return;\n }\n const ac = new AbortController();\n setLoading(true);\n const t = setTimeout(() => {\n searchCities(query.trim(), ac.signal)\n .then((r) => {\n setResults(r);\n setActive(0);\n setLoading(false);\n })\n .catch(() => {});\n }, 250);\n return () => {\n clearTimeout(t);\n ac.abort();\n };\n }, [query]);\n\n function onKeyDown(e: KeyboardEvent) {\n if (e.key === \"ArrowDown\") (open ? setActive(Math.min(results.length - 1, active + 1)) : setOpen(true));\n else if (e.key === \"ArrowUp\") setActive(Math.max(0, active - 1));\n else if (e.key === \"Enter\" && open && results[active]) {\n setQuery(results[active]);\n setOpen(false);\n } else if (e.key === \"Escape\") setOpen(false);\n else return;\n e.preventDefault();\n }\n\n const message = query.trim().length < 2 ? \"Type at least 2 letters\" : loading ? \"Searching\" : results.length ? `${results.length} cities found` : \"No cities match\";\n\n return (\n

!e.currentTarget.contains(e.relatedTarget) && setOpen(false)}>\n \n Office city\n \n

\n {\n setQuery(e.target.value);\n setOpen(true);\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={onKeyDown}\n className=\"h-11 w-full rounded-lg border border-slate-300 bg-white px-3 pr-9 text-base text-slate-900 focus:border-sky-600 focus:outline-none focus:ring-2 focus:ring-sky-600/30 sm:text-sm\"\n />\n {loading && }\n

\n {message}\n

\n {open && !loading && results.length > 0 && (\n

e.preventDefault()}\n onClick={() => {\n setQuery(c);\n setOpen(false);\n }}\n onMouseEnter={() => setActive(i)}\n className={`flex h-10 cursor-pointer items-center justify-between px-3 text-sm text-slate-800 ${i === active ? \"bg-sky-50\" : \"\"}`}\n >\n {c.split(\",\")[0]}\n {c.split(\", \")[1]}\n \n ))}\n

\n )}\n

\n );\n}\n"; const r6Demo = (() => { const GROUPS = [ { label: "Americas", zones: [{ name: "Pacific Time", cities: "Vancouver, Los Angeles" }, { name: "Eastern Time", cities: "Toronto, New York" }, { name: "Brasília Time", cities: "São Paulo" }] }, { label: "Europe", zones: [{ name: "Greenwich Mean Time", cities: "London, Dublin" }, { name: "Central European Time", cities: "Berlin, Madrid" }] }, { label: "Asia Pacific", zones: [{ name: "India Standard Time", cities: "Mumbai, Bengaluru" }, { name: "Japan Standard Time", cities: "Tokyo" }, { name: "Australian Eastern Time", cities: "Sydney" }] }, ]; const FLAT = GROUPS.flatMap((g) => g.zones); // Grouped listbox: each group is role="group" labelled by its heading. function GroupedSelect() { const [value, setValue] = useState(4); const [open, setOpen] = useState(false); const [active, setActive] = useState(4); const rootRef = useRef(null); const listRef = useRef(null); useEffect(() => { if (!open) return; const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false); document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, [open]); useEffect(() => { const list = listRef.current; const el = list?.querySelector(`[data-i="${active}"]`); if (!list || !el) return; if (el.offsetTop < list.scrollTop + 28) list.scrollTop = Math.max(0, el.offsetTop - 28); else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight) list.scrollTop = el.offsetTop + el.offsetHeight - list.clientHeight; }, [active, open]); function choose(i: number) { setValue(i); setOpen(false); } function onKeyDown(e: KeyboardEvent) { const last = FLAT.length - 1; if (!open) { if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) { e.preventDefault(); setActive(value); setOpen(true); } return; } if (e.key === "ArrowDown") setActive(Math.min(last, active + 1)); else if (e.key === "ArrowUp") setActive(Math.max(0, active - 1)); else if (e.key === "Home") setActive(0); else if (e.key === "End") setActive(last); else if (e.key === "Enter" || e.key === " ") choose(active); else if (e.key === "Escape") setOpen(false); else if (e.key === "Tab") return setOpen(false); else return; e.preventDefault(); } let n = -1; return (

Time zone {open && ( )}

); } return GroupedSelect; })(); const r6React = "import { useEffect, useRef, useState, type KeyboardEvent } from \"react\";\n\nconst GROUPS = [\n { label: \"Americas\", zones: [{ name: \"Pacific Time\", cities: \"Vancouver, Los Angeles\" }, { name: \"Eastern Time\", cities: \"Toronto, New York\" }, { name: \"Brasília Time\", cities: \"São Paulo\" }] },\n { label: \"Europe\", zones: [{ name: \"Greenwich Mean Time\", cities: \"London, Dublin\" }, { name: \"Central European Time\", cities: \"Berlin, Madrid\" }] },\n { label: \"Asia Pacific\", zones: [{ name: \"India Standard Time\", cities: \"Mumbai, Bengaluru\" }, { name: \"Japan Standard Time\", cities: \"Tokyo\" }, { name: \"Australian Eastern Time\", cities: \"Sydney\" }] },\n];\nconst FLAT = GROUPS.flatMap((g) => g.zones);\n\n// Grouped listbox: each group is role=\"group\" labelled by its heading.\nexport default function GroupedSelect() {\n const [value, setValue] = useState(4);\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(4);\n const rootRef = useRef(null);\n const listRef = useRef(null);\n\n useEffect(() => {\n if (!open) return;\n const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false);\n document.addEventListener(\"mousedown\", close);\n return () => document.removeEventListener(\"mousedown\", close);\n }, [open]);\n\n useEffect(() => {\n const list = listRef.current;\n const el = list?.querySelector(`[data-i=\"${active}\"]`);\n if (!list || !el) return;\n if (el.offsetTop < list.scrollTop + 28) list.scrollTop = Math.max(0, el.offsetTop - 28);\n else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.clientHeight) list.scrollTop = el.offsetTop + el.offsetHeight - list.clientHeight;\n }, [active, open]);\n\n function choose(i: number) {\n setValue(i);\n setOpen(false);\n }\n\n function onKeyDown(e: KeyboardEvent) {\n const last = FLAT.length - 1;\n if (!open) {\n if ([\"ArrowDown\", \"ArrowUp\", \"Enter\", \" \"].includes(e.key)) {\n e.preventDefault();\n setActive(value);\n setOpen(true);\n }\n return;\n }\n if (e.key === \"ArrowDown\") setActive(Math.min(last, active + 1));\n else if (e.key === \"ArrowUp\") setActive(Math.max(0, active - 1));\n else if (e.key === \"Home\") setActive(0);\n else if (e.key === \"End\") setActive(last);\n else if (e.key === \"Enter\" || e.key === \" \") choose(active);\n else if (e.key === \"Escape\") setOpen(false);\n else if (e.key === \"Tab\") return setOpen(false);\n else return;\n e.preventDefault();\n }\n\n let n = -1;\n return (\n

\n \n Time zone\n \n (open ? setOpen(false) : (setActive(value), setOpen(true)))}\n onKeyDown={onKeyDown}\n className=\"mt-2 flex h-12 cursor-pointer flex-col justify-center rounded-lg border border-slate-300 bg-white px-3 focus-visible:border-sky-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600/30\"\n >\n {FLAT[value].name}\n {FLAT[value].cities}\n

\n {open && (\n

\n {GROUPS.map((g, gi) => (\n

\n {g.label}\n

e.preventDefault()}\n onClick={() => choose(i)}\n onMouseEnter={() => setActive(i)}\n className={`cursor-pointer px-3 py-2 ${i === active ? \"bg-sky-50\" : \"\"}`}\n >\n {z.name}\n {z.cities}\n \n );\n })}\n

\n ))}\n

\n )}\n \n );\n}\n"; const r3Demo = (() => { const TEAMS = ["Design", "Engineering", "Marketing", "Operations", "Sales", "Support"]; // Select-only combobox whose listbox allows several choices (aria-multiselectable). function MultiSelectCheckmarks() { const [picked, setPicked] = useState(["Design", "Marketing"]); const [open, setOpen] = useState(false); const [active, setActive] = useState(0); const rootRef = useRef(null); useEffect(() => { if (!open) return; const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false); document.addEventListener("mousedown", close); return () => document.removeEventListener("mousedown", close); }, [open]); const toggle = (t: string) => setPicked(picked.includes(t) ? picked.filter((p) => p !== t) : [...picked, t]); function onKeyDown(e: KeyboardEvent) { if (!open) { if (["ArrowDown", "Enter", " "].includes(e.key)) { e.preventDefault(); setOpen(true); } return; } if (e.key === "ArrowDown") setActive(Math.min(TEAMS.length - 1, active + 1)); else if (e.key === "ArrowUp") setActive(Math.max(0, active - 1)); else if (e.key === "Enter" || e.key === " ") toggle(TEAMS[active]); else if (e.key === "Escape") setOpen(false); else if (e.key === "Tab") return setOpen(false); else return; e.preventDefault(); } const summary = picked.length === 0 ? "Any team" : picked.length <= 2 ? picked.join(", ") : `${picked[0]}, ${picked[1]} +${picked.length - 2}`; return (

Visible to teams {picked.length > 0 && ( )}

{open && ( )}

); } return MultiSelectCheckmarks; })(); const r3React = "import { useEffect, useRef, useState, type KeyboardEvent } from \"react\";\n\nconst TEAMS = [\"Design\", \"Engineering\", \"Marketing\", \"Operations\", \"Sales\", \"Support\"];\n\n// Select-only combobox whose listbox allows several choices (aria-multiselectable).\nexport default function MultiSelectCheckmarks() {\n const [picked, setPicked] = useState([\"Design\", \"Marketing\"]);\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(0);\n const rootRef = useRef(null);\n\n useEffect(() => {\n if (!open) return;\n const close = (e: MouseEvent) => !rootRef.current?.contains(e.target as Node) && setOpen(false);\n document.addEventListener(\"mousedown\", close);\n return () => document.removeEventListener(\"mousedown\", close);\n }, [open]);\n\n const toggle = (t: string) => setPicked(picked.includes(t) ? picked.filter((p) => p !== t) : [...picked, t]);\n\n function onKeyDown(e: KeyboardEvent) {\n if (!open) {\n if ([\"ArrowDown\", \"Enter\", \" \"].includes(e.key)) {\n e.preventDefault();\n setOpen(true);\n }\n return;\n }\n if (e.key === \"ArrowDown\") setActive(Math.min(TEAMS.length - 1, active + 1));\n else if (e.key === \"ArrowUp\") setActive(Math.max(0, active - 1));\n else if (e.key === \"Enter\" || e.key === \" \") toggle(TEAMS[active]);\n else if (e.key === \"Escape\") setOpen(false);\n else if (e.key === \"Tab\") return setOpen(false);\n else return;\n e.preventDefault();\n }\n\n const summary = picked.length === 0 ? \"Any team\" : picked.length <= 2 ? picked.join(\", \") : `${picked[0]}, ${picked[1]} +${picked.length - 2}`;\n\n return (\n

\n \n Visible to teams\n \n {picked.length > 0 && (\n \n )}\n

\n setOpen(!open)}\n onKeyDown={onKeyDown}\n className=\"flex h-11 cursor-pointer items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 text-sm text-slate-900 focus-visible:border-sky-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600/30\"\n >\n {summary}\n {picked.length}\n

\n {open && (\n

e.preventDefault()}\n onClick={() => toggle(t)}\n onMouseEnter={() => setActive(i)}\n className={`flex h-10 cursor-pointer items-center gap-2.5 px-3 text-sm text-slate-800 ${i === active ? \"bg-sky-50\" : \"\"}`}\n >\n \n {on && (\n \n )}\n \n {t}\n \n );\n })}\n

\n )}\n \n );\n}\n"; const r4Demo = (() => { const TOOLS = ["Figma", "Framer", "Notion", "Linear", "GitHub", "Slack", "Webflow", "Airtable", "Miro"]; // Multi-select with chips and a search box. Only known options can be added. function TagMultiSelect() { const [tags, setTags] = useState(["Figma", "Notion"]); const [query, setQuery] = useState(""); const [open, setOpen] = useState(false); const [active, setActive] = useState(0); const inputRef = useRef(null); const options = TOOLS.filter((t) => !tags.includes(t) && t.toLowerCase().includes(query.toLowerCase())); function add(t: string) { setTags([...tags, t]); setQuery(""); setActive(0); inputRef.current?.focus(); } function remove(t: string) { setTags(tags.filter((x) => x !== t)); inputRef.current?.focus(); } function onKeyDown(e: KeyboardEvent) { if (e.key === "ArrowDown") { setOpen(true); setActive(Math.min(options.length - 1, active + 1)); } else if (e.key === "ArrowUp") setActive(Math.max(0, active - 1)); else if (e.key === "Enter" && open && options[active]) add(options[active]); else if (e.key === "Escape") setOpen(false); else if (e.key === "Backspace" && !query && tags.length) return setTags(tags.slice(0, -1)); else return; e.preventDefault(); } return (

!e.currentTarget.contains(e.relatedTarget) && setOpen(false)}> Tools you use

{ setQuery(e.target.value); setActive(0); setOpen(true); }} onFocus={() => setOpen(true)} onKeyDown={onKeyDown} className="h-8 min-w-[6rem] flex-1 bg-transparent px-1 text-base text-slate-900 outline-none placeholder:text-slate-500 sm:text-sm" />

{open && ( )}

Backspace in the empty box removes the last tool.

); } return TagMultiSelect; })(); const r4React = "import { useRef, useState, type KeyboardEvent } from \"react\";\n\nconst TOOLS = [\"Figma\", \"Framer\", \"Notion\", \"Linear\", \"GitHub\", \"Slack\", \"Webflow\", \"Airtable\", \"Miro\"];\n\n// Multi-select with chips and a search box. Only known options can be added.\nexport default function TagMultiSelect() {\n const [tags, setTags] = useState([\"Figma\", \"Notion\"]);\n const [query, setQuery] = useState(\"\");\n const [open, setOpen] = useState(false);\n const [active, setActive] = useState(0);\n const inputRef = useRef(null);\n\n const options = TOOLS.filter((t) => !tags.includes(t) && t.toLowerCase().includes(query.toLowerCase()));\n\n function add(t: string) {\n setTags([...tags, t]);\n setQuery(\"\");\n setActive(0);\n inputRef.current?.focus();\n }\n\n function remove(t: string) {\n setTags(tags.filter((x) => x !== t));\n inputRef.current?.focus();\n }\n\n function onKeyDown(e: KeyboardEvent) {\n if (e.key === \"ArrowDown\") {\n setOpen(true);\n setActive(Math.min(options.length - 1, active + 1));\n } else if (e.key === \"ArrowUp\") setActive(Math.max(0, active - 1));\n else if (e.key === \"Enter\" && open && options[active]) add(options[active]);\n else if (e.key === \"Escape\") setOpen(false);\n else if (e.key === \"Backspace\" && !query && tags.length) return setTags(tags.slice(0, -1));\n else return;\n e.preventDefault();\n }\n\n return (\n

!e.currentTarget.contains(e.relatedTarget) && setOpen(false)}>\n \n Tools you use\n \n

\n {t}\n \n

\n {\n setQuery(e.target.value);\n setActive(0);\n setOpen(true);\n }}\n onFocus={() => setOpen(true)}\n onKeyDown={onKeyDown}\n className=\"h-8 min-w-[6rem] flex-1 bg-transparent px-1 text-base text-slate-900 outline-none placeholder:text-slate-500 sm:text-sm\"\n />\n

\n {open && (\n

e.preventDefault()}\n onClick={() => add(t)}\n onMouseEnter={() => setActive(i)}\n className={`flex h-10 cursor-pointer items-center px-3 text-sm text-slate-800 ${i === active ? \"bg-sky-50\" : \"\"}`}\n >\n {t}\n \n ))}\n {options.length === 0 &&

Nothing left to add

}\n

\n )}\n

Backspace in the empty box removes the last tool.

\n );\n}\n"; const PIECES: Piece[] = [ { id: "r1", name: "Select-only dropdown", blurb: "A styled replacement for a native select, with status dots and type-ahead.", group: "single", Demo: r1Demo, react: r1React, stage: "min-h-[320px] bg-slate-50 ring-1 ring-inset ring-slate-200/80" }, { id: "r2", name: "Searchable combobox", blurb: "Filters teammates as you type and bolds the matching letters.", group: "single", Demo: r2Demo, react: r2React, stage: "min-h-[320px] bg-slate-50 ring-1 ring-inset ring-slate-200/80" }, { id: "r5", name: "Async options with debounce", blurb: "Waits for a pause, cancels the old request and announces the result count.", group: "single", Demo: r5Demo, react: r5React, stage: "min-h-[320px] bg-slate-50 ring-1 ring-inset ring-slate-200/80" }, { id: "r6", name: "Grouped options with descriptions", blurb: "Time zones in labelled groups with sticky headings.", group: "single", Demo: r6Demo, react: r6React, stage: "min-h-[320px] bg-slate-50 ring-1 ring-inset ring-slate-200/80" }, { id: "r3", name: "Multi-select with checkmarks", blurb: "The list stays open while you toggle, and the field sums up the choice.", group: "multi", Demo: r3Demo, react: r3React, stage: "min-h-[320px] bg-slate-50 ring-1 ring-inset ring-slate-200/80" }, { id: "r4", name: "Chip multi-select", blurb: "Search a fixed list, add chips, remove with a button or Backspace.", group: "multi", Demo: r4Demo, react: r4React, stage: "min-h-[320px] bg-slate-50 ring-1 ring-inset ring-slate-200/80" } ]; const GROUPS: { key: string; label: string }[] = [{"key":"single","label":"Single select"},{"key":"multi","label":"Multi select"}]; const TEXT: { eyebrow: string; title: string; lead: string; refTitle: string; refNote: string } = {"eyebrow":"React · Tailwind · no dependencies","title":"React select and searchable dropdowns","lead":"Six dropdowns built on the combobox pattern: a select-only menu with type-ahead, a searchable autocomplete, grouped options, a checkmark multi-select, a chip multi-select and a search that loads results as you type. No package, full keyboard support.","refTitle":"Combobox keyboard and ARIA reference","refNote":"Roles, states and keys follow the combobox and listbox patterns in the WAI-ARIA Authoring Practices Guide. DOM focus never leaves the combobox; aria-activedescendant tells assistive technology which option is highlighted."}; const REF_HEAD: string[] = ["Key or attribute","Behaviour","Pieces"]; const REF_ROWS: string[][] = [ [ "Down Arrow / Up Arrow", "Open the list if closed, otherwise move the highlight to the next or previous option.", "All six." ], [ "Enter", "Accept the highlighted option and close the list. In the multi-selects it toggles or adds the option instead.", "All six." ], [ "Escape", "Close the list. In the searchable field, a second Escape clears the text.", "All six." ], [ "Home / End", "Highlight the first or last option while the list is open.", "Select-only and grouped." ], [ "Printable letters", "Type-ahead in the select-only menu; filter the options in the editable ones.", "Status (type-ahead), assignee, tools, city." ], [ "role=\"combobox\" + aria-expanded", "Marks the field that controls a popup list and says whether the list is shown.", "All six." ], [ "aria-controls + aria-activedescendant", "Point from the combobox to the listbox and to the id of the highlighted option.", "All six." ], [ "aria-autocomplete=\"list\"", "Says the options are filtered by what is typed, without inline completion.", "Assignee, tools, city." ], [ "aria-multiselectable=\"true\"", "On the listbox, tells users that more than one option can be selected.", "Team visibility." ] ]; const COPY_ICON = "M9 9h10v10H9zM5 15V5h10"; const CHECK_ICON = "M5 12.5l4.5 4.5L19 7.5"; const CODE_ICON = "M8 7l-5 5 5 5M16 7l5 5-5 5"; export default function ReactSelectDropdownCollection() { const [group, setGroup] = useState("all"); const [langs, setLangs] = useState>({}); const [open, setOpen] = useState(null); const [copied, setCopied] = useState(null); const [announce, setAnnounce] = useState(""); const timer = useRef | null>(null); useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [] ); const shown = group === "all" ? PIECES : PIECES.filter((p) => p.group === group); const langOf = (p: Piece): Lang => (p.html ? langs[p.id] ?? "react" : "react"); const codeOf = (p: Piece) => (langOf(p) === "html" && p.html ? p.html : p.react); const langName = (l: Lang) => (l === "html" ? "HTML, CSS and JS" : "React and Tailwind"); async function copy(p: Piece) { let ok = false; try { await navigator.clipboard.writeText(codeOf(p)); ok = true; } catch { ok = false; } if (!ok) setOpen(p.id); setCopied(ok ? p.id : null); setAnnounce(ok ? `${p.name}: ${langName(langOf(p))} copied` : "Copy was blocked, so the code is shown under the demo for you to select"); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => setCopied(null), 1600); } const ring = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 focus-visible:ring-offset-2"; const chip = `inline-flex min-h-[40px] items-center gap-1.5 whitespace-nowrap rounded-full px-4 text-[13px] font-medium transition-colors ${ring}`; return (

{TEXT.eyebrow}

{TEXT.title}

{TEXT.lead}

{[{ key: "all", label: "All" }, ...GROUPS, { key: "ref", label: "Reference table" }].map((g) => { const on = group === g.key; const n = g.key === "ref" ? REF_ROWS.length : g.key === "all" ? PIECES.length : PIECES.filter((p) => p.group === g.key).length; return ( ); })}

{announce}

{group !== "ref" && (

{p.name}

{p.blurb}

{p.html && (
{(["react", "html"] as Lang[]).map((x) => ( ))}
)}
{isOpen && (
```
                    {codeOf(p)}
                  
```
)}

)} {group === "ref" && (

{TEXT.refTitle}

{TEXT.refNote}

{REF_HEAD.map((h) => ( ))} {REF_ROWS.map((r, i) => ( {r.map((c, j) => j === 0 ? ( ) : ( ) )} ))}

{h}
{c}	{c}

)}

); } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L60",null,{"files":[{"path":"components/we-inc/react-select-dropdown-collection-with-searchable-combobox-multi-select-async-options-and-keyboard-support.tsx","content":"$61","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]