{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "select", "type": "registry:ui", "title": "Select", "description": "An accessible React select with a gliding highlight, groups, labels and a scrollable list, built on Radix Select.", "author": "FewTone ", "dependencies": [ "lucide-react@^1.52.0", "motion@^14.0.0", "radix-ui@^1.7.0" ], "registryDependencies": [ "https://ui.fewtone.com/r/tokens.json", "https://ui.fewtone.com/r/motion.json" ], "files": [ { "path": "registry/fewtone/ui/select.tsx", "type": "registry:ui", "content": "\"use client\";\n\nimport { spring } from \"@/lib/motion\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon, ChevronDownIcon, SearchIcon } from \"lucide-react\";\nimport { LayoutGroup, motion, useReducedMotion } from \"motion/react\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport {\n type ComponentProps,\n createContext,\n isValidElement,\n type KeyboardEvent,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n} from \"react\";\n\n/*\n * Select, built on Radix Select (a select-only combobox: arrow keys, Home/End, typeahead, Escape).\n * - Opening and closing are CSS keyframes from the trigger's side.\n * - The highlight is a pill that glides between options. Radix moves focus on hover and on arrow keys, so\n * the pill follows both.\n * - Long lists scroll natively, capped at 18rem. Soft fades at the ends show there's more; they replace\n * Radix's scroll arrows (owner, 2026-10-14).\n * - `searchable` adds a search field above the list (owner, 2026-10-14):\n * - Typing filters the options. Hidden options stay mounted, so the trigger keeps showing the selected value.\n * - The keyboard stays in the field: arrow keys move the pill through the matches, and Enter picks the\n * highlighted one.\n * - Typing after hovering an option goes back to the field.\n * - The popup becomes a dialog holding the field and a listbox, with aria-activedescendant on the field.\n */\n\n/** The plain text of an option's content, for matching the search */\nfunction textOf(node: ReactNode): string {\n if (node == null || typeof node === \"boolean\") return \"\";\n if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n if (Array.isArray(node)) return node.map(textOf).join(\"\");\n if (isValidElement<{ children?: ReactNode }>(node)) return textOf(node.props.children);\n return \"\";\n}\n\nfunction Select(props: ComponentProps) {\n return ;\n}\n\nfunction SelectGroup({ className, ...props }: ComponentProps) {\n return (\n \n );\n}\n\nfunction SelectValue(props: ComponentProps) {\n return ;\n}\n\nconst triggerSizes = {\n sm: \"h-(--size-control-sm) rounded-md px-2.5\",\n md: \"h-(--size-control-md) px-3\",\n} as const;\n\nfunction SelectTrigger({\n className,\n size = \"md\",\n children,\n ...props\n}: ComponentProps & { size?: keyof typeof triggerSizes }) {\n return (\n \n {children}\n \n \n \n \n );\n}\n\n/** Shared by the options of one opening: where the pill sits, and the search. It lives inside the content,\n * so every opening starts fresh. */\nconst ListContext = createContext<{\n active: string | null;\n setActive: (value: string | null | ((current: string | null) => string | null)) => void;\n reduceMotion: boolean;\n searchable: boolean;\n /** The search, trimmed and lower-cased; empty without a search field or before typing */\n query: string;\n} | null>(null);\n\n/** The soft edge shown where the list can scroll further (it replaces Radix's scroll arrows) */\nconst fade =\n \"pointer-events-none absolute inset-x-0 z-10 h-6 from-popover to-transparent transition-opacity duration-(--duration-fast)\";\n\ntype SearchOptions = {\n searchable: boolean;\n searchPlaceholder: string;\n emptyMessage: ReactNode | ((search: string) => ReactNode);\n};\n\nfunction SelectList({\n children,\n searchable,\n searchPlaceholder,\n emptyMessage,\n}: SearchOptions & { children: ReactNode }) {\n const [active, setActive] = useState(null);\n const [activeId, setActiveId] = useState();\n const [search, setSearch] = useState(\"\");\n const [empty, setEmpty] = useState(false);\n const [edges, setEdges] = useState({ top: false, bottom: false });\n const viewport = useRef(null);\n const field = useRef(null);\n const groupId = useId();\n const listId = useId();\n const reduceMotion = useReducedMotion() ?? false;\n const query = searchable ? search.trim().toLowerCase() : \"\";\n\n /** The options that can be picked right now: shown and enabled, in order */\n const options = useCallback(\n () =>\n Array.from(viewport.current?.querySelectorAll(\"[data-slot=select-item]\") ?? []).filter(\n (option) => !option.hidden && !option.hasAttribute(\"data-disabled\"),\n ),\n [],\n );\n\n // The fades at the ends show there's more to scroll to. The list's end is its last shown child:\n // scrollHeight would also count the highlight while it glides, and leave a fade on after it stops.\n const updateEdges = useCallback(() => {\n const node = viewport.current;\n if (!node) return;\n const shown = Array.from(node.children).filter(\n (child): child is HTMLElement => child instanceof HTMLElement && child.offsetParent !== null,\n );\n const last = shown[shown.length - 1];\n const end = last ? last.offsetTop + last.offsetHeight : 0;\n const top = node.scrollTop > 1;\n const bottom = node.scrollTop + node.clientHeight < end - 1;\n setEdges((current) => (current.top === top && current.bottom === bottom ? current : { top, bottom }));\n }, []);\n\n useLayoutEffect(() => {\n const node = viewport.current;\n if (!node) return;\n updateEdges();\n const observer = new ResizeObserver(updateEdges);\n observer.observe(node);\n return () => observer.disconnect();\n }, [updateEdges]);\n\n // Opening, the selected option sits in the middle of the list rather than at its edge under a fade.\n // Radix scrolls it just into view when it first takes focus; centre it on the next frame.\n useEffect(() => {\n const node = viewport.current;\n const content = node?.closest(\"[data-slot=select-content]\");\n if (!node || !content) return;\n const centre = () =>\n requestAnimationFrame(() => {\n const selected = node.querySelector(\"[data-slot=select-item][data-state=checked]\");\n if (selected && !selected.hidden)\n node.scrollTop = selected.offsetTop - (node.clientHeight - selected.offsetHeight) / 2;\n updateEdges();\n });\n content.addEventListener(\"focusin\", centre, { once: true });\n return () => content.removeEventListener(\"focusin\", centre);\n }, [updateEdges]);\n\n // Each search starts at the top, with the first match highlighted for Enter\n useLayoutEffect(() => {\n if (!searchable) return;\n const matches = options();\n setEmpty(matches.length === 0);\n if (query) {\n if (viewport.current) viewport.current.scrollTop = 0;\n setActive(matches[0]?.dataset.value ?? null);\n }\n updateEdges();\n }, [query, searchable, options, updateEdges]);\n\n // The field points screen readers at the highlighted option\n useLayoutEffect(() => {\n setActiveId(options().find((option) => option.dataset.value === active)?.id);\n }, [active, options]);\n\n // Keep the keyboard in the field. Radix first focuses the selected option (or the list), and focuses the\n // list again when the pointer leaves an option. Typing while an option has focus (after hovering) goes to\n // the field too, instead of Radix's typeahead.\n useEffect(() => {\n const input = field.current;\n const content = input?.closest(\"[data-slot=select-content]\");\n if (!searchable || !input || !content) return;\n let first = true;\n const onFocusIn = (event: FocusEvent) => {\n if (event.target === input) return;\n if (first || event.target === content) {\n first = false;\n input.focus({ preventScroll: true });\n }\n };\n const onKeyDown = (event: globalThis.KeyboardEvent) => {\n if (event.target === input || event.ctrlKey || event.metaKey || event.altKey) return;\n if (event.key.length === 1 || event.key === \"Backspace\") {\n event.stopPropagation();\n input.focus({ preventScroll: true });\n }\n };\n content.addEventListener(\"focusin\", onFocusIn);\n content.addEventListener(\"keydown\", onKeyDown, true);\n return () => {\n content.removeEventListener(\"focusin\", onFocusIn);\n content.removeEventListener(\"keydown\", onKeyDown, true);\n };\n }, [searchable]);\n\n function onFieldKeyDown(event: KeyboardEvent) {\n if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n event.preventDefault();\n event.stopPropagation();\n const matches = options();\n if (matches.length === 0) return;\n const index = matches.findIndex((option) => option.dataset.value === active);\n const next =\n index < 0\n ? 0\n : event.key === \"ArrowDown\"\n ? Math.min(index + 1, matches.length - 1)\n : Math.max(index - 1, 0);\n const option = matches[next];\n setActive(option?.dataset.value ?? null);\n option?.scrollIntoView({ block: \"nearest\" });\n } else if (event.key === \"Enter\") {\n event.preventDefault();\n event.stopPropagation();\n const matches = options();\n const option = matches.find((match) => match.dataset.value === active) ?? matches[0];\n // Radix picks an option when the option itself receives Enter\n option?.dispatchEvent(new globalThis.KeyboardEvent(\"keydown\", { key: \"Enter\", bubbles: true }));\n } else if (event.key !== \"Escape\" && event.key !== \"Tab\") {\n // Typing, Space, Home and End stay in the field rather than driving Radix's typeahead and list keys\n event.stopPropagation();\n }\n }\n\n return (\n \n {searchable ? (\n \n \n setSearch(event.target.value)}\n onKeyDown={onFieldKeyDown}\n onFocus={() => {\n // Highlight something Enter can pick: what's already highlighted, else the selected option or the first\n const matches = options();\n setActive((current) =>\n current && matches.some((option) => option.dataset.value === current)\n ? current\n : ((matches.find((option) => option.dataset.state === \"checked\") ?? matches[0])?.dataset\n .value ?? null),\n );\n }}\n autoComplete=\"off\"\n spellCheck={false}\n className=\"h-(--size-control-md) w-full min-w-0 bg-transparent text-sm outline-hidden placeholder:text-muted-foreground\"\n />\n {/* The top fade hangs just below the field, over the list */}\n \n \n ) : (\n \n )}\n \n {/* layoutScroll keeps the pill in place while the list scrolls */}\n \n {children}\n \n \n {/* The bottom fade lies over the popup's bottom edge, outside the list, so it never adds scroll height */}\n \n {searchable && empty ? (\n

\n {typeof emptyMessage === \"function\" ? emptyMessage(search.trim()) : emptyMessage}\n

\n ) : null}\n \n );\n}\n\nexport type SelectContentProps = ComponentProps & {\n /** Adds a search field above the options, for long lists */\n searchable?: boolean;\n /** The search field's placeholder and accessible name */\n searchPlaceholder?: string;\n /** Shown when nothing matches; a function receives the search */\n emptyMessage?: ReactNode | ((search: string) => ReactNode);\n};\n\nfunction SelectContent({\n className,\n children,\n position = \"popper\",\n sideOffset = 4,\n searchable = false,\n searchPlaceholder = \"Search…\",\n emptyMessage = (search: string) => `No results for “${search}”`,\n ...props\n}: SelectContentProps) {\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nfunction SelectLabel({ className, ...props }: ComponentProps) {\n return (\n \n );\n}\n\nfunction SelectItem({\n className,\n children,\n value,\n textValue,\n id,\n onFocus,\n onBlur,\n ...props\n}: ComponentProps) {\n const list = useContext(ListContext);\n const fallbackId = useId();\n const active = list?.active === value;\n // Hidden rather than removed when it doesn't match, so the trigger keeps the selected option's text\n const hidden = !!list?.query && !(textValue ?? textOf(children)).toLowerCase().includes(list.query);\n\n return (\n