The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 5 | import { IconCheck, IconSearch, IconSelector } from "@tabler/icons-react"; |
| 6 | import { cn } from "../lib/utils"; |
| 7 | import { transitions } from "../lib/motion"; |
| 8 | import { Button } from "./button"; |
| 9 | import { Kbd } from "./spinner"; |
| 10 | import { Popover, PopoverContent, PopoverTrigger } from "./popover"; |
| 11 |
| 12 | export interface CommandItem { |
| 13 | value: string; |
| 14 | label: string; |
| 15 | description?: string; |
| 16 | icon?: React.ReactNode; |
| 17 | group?: string; |
| 18 | shortcut?: string; |
| 19 | /** Extra words that should match the search. */ |
| 20 | keywords?: string[]; |
| 21 | disabled?: boolean; |
| 22 | } |
| 23 |
| 24 | function score(item: CommandItem, query: string): number { |
| 25 | if (!query) return 1; |
| 26 | const needle = query.toLowerCase(); |
| 27 | const label = item.label.toLowerCase(); |
| 28 | if (label.startsWith(needle)) return 3; |
| 29 | if (label.includes(needle)) return 2; |
| 30 | const haystack = [item.description ?? "", ...(item.keywords ?? [])].join(" ").toLowerCase(); |
| 31 | if (haystack.includes(needle)) return 1; |
| 32 | // Subsequence match ("nwtk" → "new task") as a last resort. |
| 33 | let position = 0; |
| 34 | for (const character of needle) { |
| 35 | position = label.indexOf(character, position); |
| 36 | if (position === -1) return 0; |
| 37 | position += 1; |
| 38 | } |
| 39 | return 0.5; |
| 40 | } |
| 41 |
| 42 | /** |
| 43 | * A searchable list with keyboard navigation: type to filter, ↑/↓ to move, |
| 44 | * Enter to choose. The highlight slides between items. |
| 45 | */ |
| 46 | export function CommandList({ |
| 47 | items, |
| 48 | onSelect, |
| 49 | placeholder = "Search", |
| 50 | selectedValue, |
| 51 | emptyText = "No matches", |
| 52 | autoFocus = true, |
| 53 | className, |
| 54 | }: { |
| 55 | items: CommandItem[]; |
| 56 | onSelect: (value: string) => void; |
| 57 | placeholder?: string; |
| 58 | selectedValue?: string | null; |
| 59 | emptyText?: string; |
| 60 | autoFocus?: boolean; |
| 61 | className?: string; |
| 62 | }) { |
| 63 | const id = React.useId(); |
| 64 | const [query, setQuery] = React.useState(""); |
| 65 | const [active, setActive] = React.useState(0); |
| 66 | const listRef = React.useRef<HTMLDivElement | null>(null); |
| 67 | const filtered = React.useMemo( |
| 68 | () => |
| 69 | items |
| 70 | .map((item, order) => ({ item, order, score: score(item, query.trim()) })) |
| 71 | .filter((entry) => entry.score > 0) |
| 72 | .sort((a, b) => b.score - a.score || a.order - b.order) |
| 73 | .map((entry) => entry.item), |
| 74 | [items, query], |
| 75 | ); |
| 76 | const groups = React.useMemo(() => { |
| 77 | const map = new Map<string, CommandItem[]>(); |
| 78 | for (const item of filtered) { |
| 79 | const key = query ? "" : (item.group ?? ""); |
| 80 | map.set(key, [...(map.get(key) ?? []), item]); |
| 81 | } |
| 82 | return [...map.entries()]; |
| 83 | }, [filtered, query]); |
| 84 | const flat = groups.flatMap(([, entries]) => entries); |
| 85 |
| 86 | React.useEffect(() => { |
| 87 | listRef.current?.querySelector(`[data-index="${active}"]`)?.scrollIntoView({ block: "nearest" }); |
| 88 | }, [active]); |
| 89 |
| 90 | const choose = (item: CommandItem | undefined) => { |
| 91 | if (item && !item.disabled) onSelect(item.value); |
| 92 | }; |
| 93 |
| 94 | return ( |
| 95 | <div className={cn("flex flex-col", className)}> |
| 96 | <div className="flex items-center gap-2 border-b border-border/60 px-3"> |
| 97 | <IconSearch aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" /> |
| 98 | <input |
| 99 | role="combobox" |
| 100 | aria-expanded="true" |
| 101 | aria-controls={`${id}-list`} |
| 102 | aria-activedescendant={flat[active] ? `${id}-${active}` : undefined} |
| 103 | autoFocus={autoFocus} |
| 104 | value={query} |
| 105 | placeholder={placeholder} |
| 106 | onChange={(event) => { |
| 107 | setQuery(event.target.value); |
| 108 | setActive(0); |
| 109 | }} |
| 110 | onKeyDown={(event) => { |
| 111 | if (event.key === "ArrowDown") { |
| 112 | event.preventDefault(); |
| 113 | setActive((index) => Math.min(flat.length - 1, index + 1)); |
| 114 | } else if (event.key === "ArrowUp") { |
| 115 | event.preventDefault(); |
| 116 | setActive((index) => Math.max(0, index - 1)); |
| 117 | } else if (event.key === "Enter") { |
| 118 | event.preventDefault(); |
| 119 | choose(flat[active]); |
| 120 | } |
| 121 | }} |
| 122 | className="h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" |
| 123 | /> |
| 124 | </div> |
| 125 | <div ref={listRef} id={`${id}-list`} role="listbox" className="max-h-72 overflow-y-auto p-1.5"> |
| 126 | {flat.length === 0 ? ( |
| 127 | <p className="px-3 py-6 text-center text-sm text-muted-foreground">{emptyText}</p> |
| 128 | ) : ( |
| 129 | groups.map(([group, entries]) => ( |
| 130 | <div key={group || "_"} role="group" aria-label={group || undefined}> |
| 131 | {group ? <p className="px-2 pt-2 pb-1 text-[11px] font-medium text-muted-foreground">{group}</p> : null} |
| 132 | {entries.map((item) => { |
| 133 | const index = flat.indexOf(item); |
| 134 | const isActive = index === active; |
| 135 | return ( |
| 136 | <div |
| 137 | key={item.value} |
| 138 | id={`${id}-${index}`} |
| 139 | data-index={index} |
| 140 | role="option" |
| 141 | aria-selected={selectedValue === item.value} |
| 142 | aria-disabled={item.disabled || undefined} |
| 143 | onMouseMove={() => setActive(index)} |
| 144 | onClick={() => choose(item)} |
| 145 | className={cn( |
| 146 | "relative flex cursor-default items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm", |
| 147 | item.disabled ? "opacity-50" : "text-foreground", |
| 148 | )} |
| 149 | > |
| 150 | {isActive ? ( |
| 151 | <motion.span |
| 152 | layoutId={`${id}-highlight`} |
| 153 | transition={transitions.indicator} |
| 154 | className="absolute inset-0 rounded-lg bg-muted" |
| 155 | /> |
| 156 | ) : null} |
| 157 | {item.icon ? <span className="relative flex shrink-0 text-muted-foreground [&_svg]:size-4">{item.icon}</span> : null} |
| 158 | <span className="relative min-w-0 flex-1"> |
| 159 | <span className="block truncate">{item.label}</span> |
| 160 | {item.description ? <span className="block truncate text-xs text-muted-foreground">{item.description}</span> : null} |
| 161 | </span> |
| 162 | {item.shortcut ? <Kbd className="relative">{item.shortcut}</Kbd> : null} |
| 163 | {selectedValue === item.value ? <IconCheck className="relative size-4 shrink-0 text-action" /> : null} |
| 164 | </div> |
| 165 | ); |
| 166 | })} |
| 167 | </div> |
| 168 | )) |
| 169 | )} |
| 170 | </div> |
| 171 | </div> |
| 172 | ); |
| 173 | } |
| 174 |
| 175 | /** A select with search, for long option lists. */ |
| 176 | export function Combobox({ |
| 177 | items, |
| 178 | value, |
| 179 | onValueChange, |
| 180 | placeholder = "Choose…", |
| 181 | searchPlaceholder = "Search", |
| 182 | label, |
| 183 | className, |
| 184 | }: { |
| 185 | items: CommandItem[]; |
| 186 | value: string | null; |
| 187 | onValueChange: (value: string) => void; |
| 188 | placeholder?: string; |
| 189 | searchPlaceholder?: string; |
| 190 | /** Accessible name, e.g. "Assignee". Defaults to the placeholder. */ |
| 191 | label?: string; |
| 192 | className?: string; |
| 193 | }) { |
| 194 | const [open, setOpen] = React.useState(false); |
| 195 | const selected = items.find((item) => item.value === value); |
| 196 | // role="combobox" takes no name from its content, so name it explicitly. |
| 197 | const name = label ?? placeholder.replace(/…$/, ""); |
| 198 | const accessibleName = selected ? `${name}: ${selected.label}` : name; |
| 199 | return ( |
| 200 | <Popover open={open} onOpenChange={setOpen}> |
| 201 | <PopoverTrigger asChild> |
| 202 | <Button |
| 203 | variant="outline" |
| 204 | role="combobox" |
| 205 | aria-label={accessibleName} |
| 206 | aria-expanded={open} |
| 207 | className={cn("w-full justify-between font-normal", !selected && "text-muted-foreground", className)} |
| 208 | > |
| 209 | <span className="flex min-w-0 items-center gap-2 truncate"> |
| 210 | {selected?.icon} |
| 211 | {selected?.label ?? placeholder} |
| 212 | </span> |
| 213 | <IconSelector className="size-4 shrink-0 opacity-50" /> |
| 214 | </Button> |
| 215 | </PopoverTrigger> |
| 216 | <PopoverContent align="start" className="w-[var(--radix-popover-trigger-width)] min-w-56 p-0"> |
| 217 | <CommandList |
| 218 | items={items} |
| 219 | selectedValue={value} |
| 220 | placeholder={searchPlaceholder} |
| 221 | onSelect={(next) => { |
| 222 | onValueChange(next); |
| 223 | setOpen(false); |
| 224 | }} |
| 225 | /> |
| 226 | </PopoverContent> |
| 227 | </Popover> |
| 228 | ); |
| 229 | } |
| 230 |
