@traky-app/ui 1.5.0 → 1.6.1

package/src/ui/option-combobox.tsx

@@ -0,0 +1,307 @@
+"use client"
+
+import { useState, type ComponentType } from "react"
+import { IconCheck, IconSelector } from "@tabler/icons-react"
+import { Button } from "./button"
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./popover"
+import { cn, commandFilterAccentInsensitive } from "../lib/utils"
+
+export type OptionComboboxOption = {
+  value: string
+  label: string
+  icon?: ComponentType<{ className?: string; stroke?: number }>
+  iconClassName?: string
+  /** Pastilla de color, por ejemplo una etiqueta. */
+  color?: string
+  /** Sangría para una opción hija. */
+  indented?: boolean
+}
+
+function OptionGlyph({
+  icon: Icon,
+  className,
+}: {
+  icon?: OptionComboboxOption["icon"]
+  className?: string
+}) {
+  if (!Icon) return null
+  return <Icon className={cn("size-4 shrink-0", className)} stroke={1.75} />
+}
+
+function OptionFace({ option }: { option: OptionComboboxOption }) {
+  if (option.color) {
+    return (
+      <span
+        className="inline-flex max-w-full items-center truncate rounded-full border px-2 py-0.5 text-xs font-medium"
+        style={{
+          color: option.color,
+          borderColor: option.color,
+          backgroundColor: `${option.color}1A`,
+        }}
+      >
+        {option.label}
+      </span>
+    )
+  }
+  return (
+    <span className="flex min-w-0 items-center gap-2">
+      <OptionGlyph icon={option.icon} className={option.iconClassName} />
+      <span className="truncate">{option.label}</span>
+    </span>
+  )
+}
+
+export function OptionCombobox({
+  value = "",
+  options,
+  onChange,
+  placeholder = "Seleccionar…",
+  searchPlaceholder = "Buscar…",
+  emptyLabel = "No se encontraron resultados.",
+  groupHeading,
+  allowEmpty = false,
+  emptyValueLabel,
+  emptyValueIcon,
+  clearLabel,
+  clearOption,
+  allOption,
+  groups,
+  multiple = false,
+  values = [],
+  onValuesChange,
+  className,
+  disabled = false,
+  modal = false,
+  title,
+}: {
+  value?: string
+  options: OptionComboboxOption[]
+  onChange?: (value: string) => void
+  /** Varias opciones a la vez. El menú no se cierra al marcar. */
+  multiple?: boolean
+  values?: string[]
+  onValuesChange?: (values: string[]) => void
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: string
+  groupHeading?: string
+  /** Si es true, la primera fila deja el valor vacío y no pertenece a `options`. */
+  allowEmpty?: boolean
+  /** Texto de esa fila vacía. Si no se indica, usa `placeholder`. */
+  emptyValueLabel?: string
+  emptyValueIcon?: OptionComboboxOption["icon"]
+  /** Opción para vaciar el valor. El botón sigue mostrando `placeholder`. */
+  clearLabel?: string
+  /** Opción para vaciar el valor, visible también en el botón. */
+  clearOption?: OptionComboboxOption
+  /** Opción extra al inicio. Si no hay valor, el botón la muestra. */
+  allOption?: OptionComboboxOption
+  /** Varios grupos, por ejemplo persona y empresa. */
+  groups?: { heading?: string; options: OptionComboboxOption[] }[]
+  className?: string
+  disabled?: boolean
+  modal?: boolean
+  title?: string
+}) {
+  const [open, setOpen] = useState(false)
+  const blankLabel = emptyValueLabel || placeholder
+  const realOptions = allowEmpty
+    ? options.filter((option) => option.value !== "")
+    : options
+  const grouped = (groups ?? []).filter((group) => group.options.length > 0)
+  const catalog = grouped.length
+    ? grouped.flatMap((group) => group.options)
+    : realOptions
+  const listOptions = allOption ? [allOption, ...catalog] : catalog
+  const emptyChoice: OptionComboboxOption = {
+    value: "",
+    label: blankLabel,
+    icon: emptyValueIcon,
+  }
+  const selected = allowEmpty && value === ""
+    ? emptyChoice
+    : clearOption && value === ""
+      ? clearOption
+      : listOptions.find((option) => option.value === value)
+        ?? (!value ? allOption : undefined)
+  const selectedMany = multiple
+    ? values.flatMap((id) => {
+        const option = listOptions.find((item) => item.value === id)
+        return option ? [option] : []
+      })
+    : []
+
+  const chosen = (optionValue: string) =>
+    multiple ? values.includes(optionValue) : value === optionValue
+
+  const choose = (next: string) => {
+    if (multiple) {
+      onValuesChange?.(
+        values.includes(next)
+          ? values.filter((item) => item !== next)
+          : [...values, next],
+      )
+      return
+    }
+    onChange?.(next)
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={disabled ? undefined : setOpen}
+      modal={modal}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          title={title}
+          className={cn(
+            "w-full justify-between font-normal",
+            multiple && "h-auto py-2",
+            className,
+          )}
+        >
+          {multiple ? (
+            <span className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+              {selectedMany.length ? (
+                selectedMany.map((option) => (
+                  <OptionFace key={option.value} option={option} />
+                ))
+              ) : (
+                <span className="truncate text-muted-foreground">
+                  {placeholder}
+                </span>
+              )}
+            </span>
+          ) : selected ? (
+            <OptionFace option={selected} />
+          ) : (
+            <span className="truncate text-muted-foreground">{placeholder}</span>
+          )}
+          <IconSelector className="size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      {disabled ? null : (
+        <PopoverContent
+          align="start"
+          className="z-[60] w-[var(--radix-popover-trigger-width)] min-w-56 p-0"
+        >
+          <Command filter={commandFilterAccentInsensitive}>
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyLabel}</CommandEmpty>
+              {grouped.length ? (
+                grouped.map((group) => (
+                  <CommandGroup
+                    key={group.heading ?? group.options[0]?.value}
+                    heading={group.heading}
+                  >
+                    {group.options.map((option) => (
+                      <CommandItem
+                        key={option.value || option.label}
+                        value={`${option.label} ${option.value}`}
+                        className={option.indented ? "pl-6" : undefined}
+                        onSelect={() => choose(option.value)}
+                      >
+                        <OptionFace option={option} />
+                        <IconCheck
+                          className={cn(
+                            "ml-auto size-4",
+                            chosen(option.value) ? "opacity-100" : "opacity-0",
+                          )}
+                        />
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                ))
+              ) : (
+                <CommandGroup heading={groupHeading}>
+                  {allowEmpty ? (
+                    <CommandItem
+                      value={`__empty__ ${blankLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph icon={emptyValueIcon} />
+                      {blankLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {clearOption ? (
+                    <CommandItem
+                      value={`__clear__ ${clearOption.label}`}
+                      onSelect={() => choose("")}
+                    >
+                      <OptionGlyph
+                        icon={clearOption.icon}
+                        className={clearOption.iconClassName}
+                      />
+                      {clearOption.label}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : clearLabel ? (
+                    <CommandItem
+                      value={`__clear__ ${clearLabel}`}
+                      onSelect={() => choose("")}
+                    >
+                      {clearLabel}
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          value ? "opacity-0" : "opacity-100",
+                        )}
+                      />
+                    </CommandItem>
+                  ) : null}
+                  {listOptions.map((option) => (
+                    <CommandItem
+                      key={option.value || option.label}
+                      value={`${option.label} ${option.value}`}
+                      className={option.indented ? "pl-6" : undefined}
+                      onSelect={() => choose(option.value)}
+                    >
+                      <OptionFace option={option} />
+                      <IconCheck
+                        className={cn(
+                          "ml-auto size-4",
+                          chosen(option.value) ? "opacity-100" : "opacity-0",
+                        )}
+                      />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      )}
+    </Popover>
+  )
+}