"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { cn } from "@/lib/utils"; import { ColorSwatch } from "@/components/ui/color-swatch"; export type CategoryItem = { id: string; label: string; /** Hex color rendered as the leading swatch. */ color: string; }; export type CategoryPickerProps = { /** Controlled selection, or null when nothing is chosen. */ value: string | null; onChange: (id: string | null) => void; items: CategoryItem[]; placeholder?: string; searchPlaceholder?: string; /** Show a "clear" row when something is selected. */ allowClear?: boolean; /** * When set, renders a "+ create {query}" row that calls this with the typed * label. The caller owns appending the new item and selecting it. */ onCreate?: (label: string) => void; className?: string; ariaLabel?: string; }; /** * Searchable dropdown of color-coded items with click-outside + Escape to close * and an optional inline create row. Generalized from the calendar category * picker — no fetching, no domain coupling; fully controlled. */ export function CategoryPicker({ value, onChange, items, placeholder = "no category", searchPlaceholder = "search…", allowClear, onCreate, className, ariaLabel, }: CategoryPickerProps) { const [open, setOpen] = useState(false); const [query, setQuery] = useState(""); const containerRef = useRef(null); useEffect(() => { if (!open) { setQuery(""); return; } function onPointer(e: MouseEvent) { if (containerRef.current && !containerRef.current.contains(e.target as Node)) { setOpen(false); } } function onKey(e: KeyboardEvent) { if (e.key === "Escape") { // Capture-phase + stopImmediatePropagation so an open picker nested in a // dialog swallows the Escape and only closes itself. e.stopImmediatePropagation(); e.preventDefault(); setOpen(false); } } document.addEventListener("mousedown", onPointer); document.addEventListener("keydown", onKey, true); return () => { document.removeEventListener("mousedown", onPointer); document.removeEventListener("keydown", onKey, true); }; }, [open]); const selected = items.find((i) => i.id === value) ?? null; const filtered = useMemo(() => { const q = query.trim().toLowerCase(); if (!q) return items; return items.filter((i) => i.label.toLowerCase().includes(q)); }, [items, query]); const trimmed = query.trim(); return (

{open && (

setQuery(e.target.value)} className="w-full border-b border-white/20 bg-transparent px-3 py-2 text-sm outline-none focus:border-white/60" />

)}

); }

category-picker.