@strategicos/ui 0.6.1 → 0.8.0

package/src/components/combobox.tsx

@@ -0,0 +1,390 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronDownIcon, Loader2Icon, PlusIcon, SearchIcon, XIcon } from "lucide-react"
+
+import { cn } from "../lib/utils.js"
+import { Button } from "./button.js"
+import { useFieldControl } from "./field.js"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js"
+import { selectTriggerVariants } from "./select.js"
+
+export type ComboboxOption = {
+  value: string
+  label: string
+  /** Texto secundário (ex.: e-mail), só na lista. */
+  description?: string
+  /** Agrupa as opções sob um título. */
+  group?: string
+  /** Bolinha de cor antes do rótulo. */
+  color?: string
+  disabled?: boolean
+}
+
+type Entry = { kind: "option"; option: ComboboxOption } | { kind: "create" }
+
+function errorMessage(err: unknown, fallback: string) {
+  return err instanceof Error && err.message ? err.message : fallback
+}
+
+/**
+ * Seleção de um item com busca, como o Select `searchable` do Mantine. Use no
+ * lugar do Select quando a lista é longa ou quando a tela precisa criar ou
+ * excluir opções ali mesmo.
+ *
+ *   <Combobox
+ *     options={setores.map(s => ({ value: s.id, label: s.name }))}
+ *     value={setorId}
+ *     onValueChange={setSetorId}
+ *     clearable
+ *     onCreate={async nome => (await criarSetor(nome)).id}
+ *   />
+ *
+ * - `clearable`: um X no gatilho volta o valor para `null`.
+ * - `onCreate`: com texto na busca que não bate com nenhuma opção, aparece
+ *   "Criar “texto”". Se a função devolver um valor, ele fica selecionado.
+ * - `onRemove`: cada opção ganha um X que pede confirmação na própria linha.
+ *   Se a opção excluída era a selecionada, o valor volta para `null`.
+ *
+ * Erros de `onCreate`/`onRemove` (promessa rejeitada) aparecem no rodapé da
+ * lista, com a mensagem do erro.
+ *
+ * Teclado: digite para filtrar, ↑/↓ para andar, Enter para escolher, Delete
+ * (com a busca vazia) para excluir a opção ativa, Esc para fechar. Dentro de
+ * um <Field>, o gatilho recebe o id e os aria-*.
+ */
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Selecione",
+  searchPlaceholder = "Buscar…",
+  emptyText = "Nada encontrado.",
+  searchable = true,
+  clearable = false,
+  onCreate,
+  createLabel = q => <>Criar &ldquo;{q}&rdquo;</>,
+  onRemove,
+  removeLabel = o => `Excluir ${o.label}`,
+  removeConfirmLabel = o => <>Excluir &ldquo;{o.label}&rdquo;?</>,
+  size = "default",
+  disabled = false,
+  className,
+  wrapperClassName,
+  contentClassName,
+  onOpenChange,
+  ...props
+}: {
+  options: ComboboxOption[]
+  value: string | null
+  onValueChange: (value: string | null) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  searchable?: boolean
+  clearable?: boolean
+  /** Cria uma opção com o texto da busca. Devolva o valor dela para
+   *  selecioná-la. */
+  onCreate?: (label: string) => string | void | Promise<string | void>
+  createLabel?: (query: string) => React.ReactNode
+  /** Exclui a opção (o X na linha, depois de confirmar). */
+  onRemove?: (option: ComboboxOption) => void | Promise<void>
+  /** Rótulo acessível do X de cada opção. */
+  removeLabel?: (option: ComboboxOption) => string
+  /** Pergunta mostrada na linha ao confirmar a exclusão. */
+  removeConfirmLabel?: (option: ComboboxOption) => React.ReactNode
+  size?: "sm" | "default"
+  disabled?: boolean
+  /** Classes do gatilho. */
+  className?: string
+  /** Classes do invólucro, que só existe com `clearable`. Use para largura e
+   *  posição no layout. */
+  wrapperClassName?: string
+  contentClassName?: string
+  onOpenChange?: (open: boolean) => void
+  id?: string
+  "aria-label"?: string
+  "aria-describedby"?: string
+  "aria-invalid"?: React.AriaAttributes["aria-invalid"]
+}) {
+  const controlProps = useFieldControl(props, { withRequired: false })
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState("")
+  const [active, setActive] = React.useState(0)
+  const [creating, setCreating] = React.useState(false)
+  const [confirming, setConfirming] = React.useState<string | null>(null)
+  const [removing, setRemoving] = React.useState<string | null>(null)
+  const [error, setError] = React.useState<string | null>(null)
+  const listId = React.useId()
+  const searchRef = React.useRef<HTMLInputElement>(null)
+
+  const selected = options.find(o => o.value === value)
+  const q = query.trim().toLowerCase()
+  const filtered = q ? options.filter(o => o.label.toLowerCase().includes(q)) : options
+  const canCreate = !!onCreate && !!q && !options.some(o => o.label.trim().toLowerCase() === q)
+
+  // Ordem do teclado: as opções habilitadas e, por último, o "Criar".
+  const entries: Entry[] = filtered.filter(o => !o.disabled).map(option => ({ kind: "option" as const, option }))
+  if (canCreate) entries.push({ kind: "create" })
+  const activeIndex = Math.min(active, entries.length - 1)
+  const entryId = (i: number) => `${listId}-${i}`
+
+  // Grupos na ordem em que aparecem nas opções.
+  const groups: { name: string | undefined; items: ComboboxOption[] }[] = []
+  for (const o of filtered) {
+    const g = groups.find(x => x.name === o.group)
+    if (g) g.items.push(o)
+    else groups.push({ name: o.group, items: [o] })
+  }
+
+  // Mantém a opção ativa à vista ao andar com as setas.
+  React.useEffect(() => {
+    if (!open || activeIndex < 0) return
+    document.getElementById(entryId(activeIndex))?.scrollIntoView({ block: "nearest" })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, activeIndex])
+
+  function handleOpenChange(o: boolean) {
+    setOpen(o)
+    if (!o) {
+      setQuery("")
+      setActive(0)
+      setConfirming(null)
+      setError(null)
+    } else {
+      // Abre com a opção selecionada ativa.
+      const i = entries.findIndex(e => e.kind === "option" && e.option.value === value)
+      setActive(Math.max(i, 0))
+    }
+    onOpenChange?.(o)
+  }
+
+  function choose(v: string) {
+    onValueChange(v)
+    handleOpenChange(false)
+  }
+
+  async function create() {
+    if (!onCreate || creating) return
+    setCreating(true)
+    setError(null)
+    try {
+      const created = await onCreate(query.trim())
+      if (typeof created === "string") onValueChange(created)
+      handleOpenChange(false)
+    } catch (err) {
+      setError(errorMessage(err, "Não foi possível criar."))
+    } finally {
+      setCreating(false)
+    }
+  }
+
+  async function remove(option: ComboboxOption) {
+    if (!onRemove) return
+    setRemoving(option.value)
+    setError(null)
+    try {
+      await onRemove(option)
+      if (option.value === value) onValueChange(null)
+    } catch (err) {
+      setError(errorMessage(err, "Não foi possível excluir."))
+    } finally {
+      setRemoving(null)
+      setConfirming(null)
+      searchRef.current?.focus()
+    }
+  }
+
+  function cancelConfirm() {
+    setConfirming(null)
+    searchRef.current?.focus()
+  }
+
+  function activate(entry: Entry | undefined) {
+    if (!entry) return
+    if (entry.kind === "create") void create()
+    else choose(entry.option.value)
+  }
+
+  function onKeyDown(e: React.KeyboardEvent) {
+    // Na confirmação, o teclado é dos botões Excluir/Cancelar.
+    if (confirming) return
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive(Math.min(activeIndex + 1, entries.length - 1)) }
+    else if (e.key === "ArrowUp") { e.preventDefault(); setActive(Math.max(activeIndex - 1, 0)) }
+    else if (e.key === "Enter") { e.preventDefault(); activate(entries[activeIndex]) }
+    else if (e.key === "Delete" && onRemove && !query) {
+      const entry = entries[activeIndex]
+      if (entry?.kind === "option") { e.preventDefault(); setConfirming(entry.option.value) }
+    }
+  }
+
+  const showClear = clearable && !!selected && !disabled
+
+  const trigger = (
+    <PopoverTrigger asChild disabled={disabled}>
+      <button
+        type="button"
+        role="combobox"
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-haspopup="listbox"
+        data-slot="combobox-trigger"
+        data-size={size}
+        data-placeholder={selected ? undefined : ""}
+        {...controlProps}
+        className={cn(
+          selectTriggerVariants({ size }),
+          "w-full min-w-0 cursor-pointer text-left",
+          showClear && "pr-9",
+          className
+        )}
+      >
+        <span className="flex min-w-0 flex-1 items-center gap-2">
+          {selected?.color && <span className="size-2 shrink-0 rounded-full" style={{ background: selected.color }} />}
+          <span className="truncate">{selected?.label ?? placeholder}</span>
+        </span>
+        {!showClear && <ChevronDownIcon className="size-4 shrink-0 opacity-70" />}
+      </button>
+    </PopoverTrigger>
+  )
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      {clearable ? (
+        <div data-slot="combobox-wrapper" className={cn("relative w-full min-w-0", wrapperClassName)}>
+          {trigger}
+          {showClear && (
+            // Irmão do gatilho, não filho: botão dentro de botão não é HTML válido.
+            <button
+              type="button"
+              onClick={() => onValueChange(null)}
+              aria-label="Limpar"
+              className="absolute inset-y-0 right-1.5 my-auto flex size-6 cursor-pointer items-center justify-center rounded text-muted-foreground outline-none hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
+            >
+              <XIcon className="size-4" />
+            </button>
+          )}
+        </div>
+      ) : trigger}
+
+      <PopoverContent
+        className={cn("w-(--radix-popover-trigger-width) min-w-60 p-0", contentClassName)}
+        onKeyDown={onKeyDown}
+        onEscapeKeyDown={e => { if (confirming) { e.preventDefault(); cancelConfirm() } }}
+      >
+        {searchable && (
+          <div className="flex items-center gap-2 border-b border-border px-3">
+            <SearchIcon className="size-4 shrink-0 text-muted-foreground" />
+            <input
+              ref={searchRef}
+              autoFocus
+              value={query}
+              onChange={e => { setQuery(e.target.value); setActive(0); setError(null) }}
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
+              aria-controls={listId}
+              aria-activedescendant={activeIndex >= 0 && !confirming ? entryId(activeIndex) : undefined}
+              aria-autocomplete="list"
+              className="h-9 w-full bg-transparent text-base outline-none placeholder:text-muted-foreground md:text-sm"
+            />
+          </div>
+        )}
+
+        <div id={listId} role="listbox" className="max-h-64 overflow-y-auto overscroll-contain p-1">
+          {filtered.length === 0 && !canCreate && (
+            <p className="px-2.5 py-6 text-center text-sm text-muted-foreground">{emptyText}</p>
+          )}
+
+          {groups.map(g => (
+            <div key={g.name ?? "_"} role="group" aria-label={g.name}>
+              {g.name && <p className="px-2.5 pt-2 pb-1 text-xs font-medium text-muted-foreground">{g.name}</p>}
+              {g.items.map(o => {
+                const index = entries.findIndex(e => e.kind === "option" && e.option.value === o.value)
+                const isSelected = o.value === value
+                const isActive = index === activeIndex
+
+                if (confirming === o.value) return (
+                  <div key={o.value} role="alert" className="flex items-center gap-1.5 rounded-md bg-destructive/10 py-1 pr-1 pl-2.5 text-sm">
+                    <span className="min-w-0 flex-1 truncate">{removeConfirmLabel(o)}</span>
+                    <Button
+                      type="button"
+                      size="sm"
+                      variant="destructive"
+                      autoFocus
+                      disabled={removing === o.value}
+                      onClick={() => remove(o)}
+                    >
+                      {removing === o.value ? <Loader2Icon className="animate-spin" /> : "Excluir"}
+                    </Button>
+                    <Button type="button" size="sm" variant="ghost" disabled={removing === o.value} onClick={cancelConfirm}>
+                      Cancelar
+                    </Button>
+                  </div>
+                )
+
+                return (
+                  <div
+                    key={o.value}
+                    id={index >= 0 ? entryId(index) : undefined}
+                    role="option"
+                    aria-selected={isSelected}
+                    aria-disabled={o.disabled || undefined}
+                    data-active={isActive || undefined}
+                    onMouseEnter={() => { if (index >= 0) setActive(index) }}
+                    onClick={() => { if (!o.disabled) choose(o.value) }}
+                    className="group/option flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-2.5 text-sm select-none data-active:bg-accent data-active:text-accent-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
+                  >
+                    {o.color && <span className="size-2 shrink-0 rounded-full" style={{ background: o.color }} />}
+                    <span className="flex min-w-0 flex-1 flex-col">
+                      <span className="truncate">{o.label}</span>
+                      {o.description && <span className="truncate text-[11px] text-muted-foreground">{o.description}</span>}
+                    </span>
+                    {isSelected && <CheckIcon className="size-4 shrink-0" />}
+                    {onRemove && !o.disabled && (
+                      // Fora da ordem do Tab (a lista anda pelas setas); no
+                      // teclado, a exclusão é o Delete na opção ativa.
+                      <button
+                        type="button"
+                        tabIndex={-1}
+                        aria-label={removeLabel(o)}
+                        title={removeLabel(o)}
+                        onClick={e => { e.stopPropagation(); setConfirming(o.value) }}
+                        className="-m-1 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground opacity-60 outline-none hover:text-destructive hover:opacity-100 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover/option:opacity-60 [@media(hover:hover)]:group-data-[active]/option:opacity-60"
+                      >
+                        <XIcon className="size-3.5" />
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+
+          {canCreate && (() => {
+            const index = entries.length - 1
+            return (
+              <div
+                id={entryId(index)}
+                role="option"
+                aria-selected={false}
+                data-active={index === activeIndex || undefined}
+                onMouseEnter={() => setActive(index)}
+                onClick={() => void create()}
+                className="flex cursor-pointer items-center gap-2 rounded-md py-1.5 pr-2 pl-2.5 text-sm font-medium text-primary-strong select-none data-active:bg-primary/10"
+              >
+                {creating ? <Loader2Icon className="size-4 shrink-0 animate-spin" /> : <PlusIcon className="size-4 shrink-0" />}
+                <span className="truncate">{createLabel(query.trim())}</span>
+              </div>
+            )
+          })()}
+        </div>
+
+        {error && (
+          <p role="alert" className="border-t border-border px-3 py-2 text-xs text-destructive">{error}</p>
+        )}
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export { Combobox }