@motor-hero/ui-kit 0.23.2 → 0.25.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.23.2",
+  "version": "0.25.0",
   "description": "Componentes React reutilizáveis para o ecossistema MotorHero — shadcn/ui + Tailwind CSS v4",
   "author": "MotorHero",
   "license": "UNLICENSED",

package/src/components/combobox.tsx

@@ -1,8 +1,9 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { Command as CommandPrimitive } from "cmdk"
-import { Check, ChevronsUpDown, Search } from "lucide-react"
+import { Check, ChevronsUpDown, Loader2, Plus, Search } from "lucide-react"
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
+import { useInfiniteScrollSentinel } from "../hooks/use-infinite-scroll-sentinel"
 import { useIsDesktop } from "../hooks/use-is-desktop"
 import { cn } from "../lib/utils"
 
@@ -27,6 +28,24 @@ export interface ComboboxProps {
   className?: string
   "aria-invalid"?: boolean | "true" | "false"
   "aria-describedby"?: string
+  /** Modo servidor: chamado a cada tecla com o texto bruto da busca. Sua
+   *  presença ativa o modo servidor (filtro do cmdk desligado). */
+  onSearchChange?: (search: string) => void
+  /** Modo servidor: chamado ao rolar até o fim da lista. */
+  onLoadMore?: () => void
+  /** Modo servidor: mostra uma linha de carregamento no fim da lista. */
+  loading?: boolean
+  /** Modo servidor: habilita o disparo de `onLoadMore`. */
+  hasMore?: boolean
+  /** Modo servidor: rótulo do valor já selecionado que pode não estar na
+   *  página carregada (ex.: formulário de edição). */
+  selectedOption?: ComboboxOption
+  /** Permite confirmar o texto digitado como valor, mesmo fora da lista
+   *  (ex.: unidade de medida com texto livre). Mostra uma linha "criar" no
+   *  topo e exibe o valor personalizado no gatilho. */
+  creatable?: boolean
+  /** Rótulo da linha de criação. Padrão: `Usar "<texto>"`. */
+  formatCreateLabel?: (search: string) => string
 }
 
 /**
@@ -55,10 +74,51 @@ export function Combobox({
   className,
   "aria-invalid": ariaInvalid,
   "aria-describedby": ariaDescribedby,
+  onSearchChange,
+  onLoadMore,
+  loading,
+  hasMore,
+  selectedOption,
+  creatable,
+  formatCreateLabel,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState("")
   const isDesktop = useIsDesktop()
-  const selected = options.find((option) => option.value === value)
+  const isServer = onSearchChange !== undefined
+  const selected =
+    selectedOption?.value === value
+      ? selectedOption
+      : (options.find((option) => option.value === value) ??
+        (creatable && value ? { value, label: value } : undefined))
+
+  const handleOpenChange = (next: boolean) => {
+    setOpen(next)
+    if (!next) setSearch("")
+  }
+
+  const handleSelect = (next: string) => {
+    onChange(next)
+    handleOpenChange(false)
+  }
+
+  const handleSearchChange = (next: string) => {
+    setSearch(next)
+    onSearchChange?.(next)
+  }
+
+  const trimmedSearch = search.trim()
+  const showCreate =
+    !!creatable &&
+    trimmedSearch.length > 0 &&
+    !options.some(
+      (option) => option.value.toLowerCase() === trimmedSearch.toLowerCase(),
+    )
+  const { listRef, sentinelRef } = useInfiniteScrollSentinel({
+    enabled: isServer && !!hasMore,
+    loading,
+    onLoadMore,
+  })
 
   const trigger = (
     <button
@@ -82,27 +142,52 @@ export function Combobox({
   )
 
   const command = (
-    <CommandPrimitive className="flex h-full w-full flex-col overflow-hidden">
+    <CommandPrimitive
+      shouldFilter={!isServer}
+      className="flex h-full w-full flex-col overflow-hidden"
+    >
       <div className="flex items-center border-b px-3">
         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
         <CommandPrimitive.Input
           placeholder={searchPlaceholder}
+          onValueChange={
+            isServer || creatable ? handleSearchChange : undefined
+          }
           className="flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
         />
       </div>
-      <CommandPrimitive.List className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60">
-        <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
-          {emptyMessage}
-        </CommandPrimitive.Empty>
+      <CommandPrimitive.List
+        ref={listRef}
+        className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60"
+      >
+        {!isServer && !showCreate && (
+          <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </CommandPrimitive.Empty>
+        )}
+        {showCreate && (
+          <CommandPrimitive.Item
+            // cmdk pontua pelo `value`; igualar à busca mantém a linha sempre no topo.
+            value={trimmedSearch}
+            onSelect={() => handleSelect(trimmedSearch)}
+            className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground sm:py-1.5"
+          >
+            <Plus className="h-4 w-4 shrink-0" />
+            <span className="truncate">
+              {(formatCreateLabel ?? ((text) => `Usar "${text}"`))(
+                trimmedSearch,
+              )}
+            </span>
+          </CommandPrimitive.Item>
+        )}
         {options.map((option) => (
           <CommandPrimitive.Item
             key={option.value}
-            value={option.label}
+            // cliente: cmdk filtra pelo `value`, então usamos o label; servidor:
+            // o servidor já filtrou, então usamos o id (único, evita colisão de labels).
+            value={isServer ? option.value : option.label}
             disabled={option.disabled}
-            onSelect={() => {
-              onChange(option.value)
-              setOpen(false)
-            }}
+            onSelect={() => handleSelect(option.value)}
             className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5"
           >
             <Check
@@ -114,13 +199,26 @@ export function Combobox({
             <span className="truncate">{option.label}</span>
           </CommandPrimitive.Item>
         ))}
+        {isServer && !loading && options.length === 0 && (
+          <div className="py-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        )}
+        {isServer && loading && (
+          <div className="flex items-center justify-center py-6">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        )}
+        {isServer && hasMore && (
+          <div ref={sentinelRef} aria-hidden className="h-1" />
+        )}
       </CommandPrimitive.List>
     </CommandPrimitive>
   )
 
   if (isDesktop) {
     return (
-      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
+      <PopoverPrimitive.Root open={open} onOpenChange={handleOpenChange}>
         <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
           <PopoverPrimitive.Content
@@ -137,7 +235,7 @@ export function Combobox({
   }
 
   return (
-    <DrawerPrimitive.Root open={open} onOpenChange={setOpen}>
+    <DrawerPrimitive.Root open={open} onOpenChange={handleOpenChange}>
       <DrawerPrimitive.Trigger asChild>{trigger}</DrawerPrimitive.Trigger>
       <DrawerPrimitive.Portal>
         <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />

package/src/components/multi-combobox.tsx

@@ -1,8 +1,9 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 import { Command as CommandPrimitive } from "cmdk"
-import { Check, ChevronsUpDown, Search, X } from "lucide-react"
+import { Check, ChevronsUpDown, Loader2, Search, X } from "lucide-react"
 import * as React from "react"
 import { Drawer as DrawerPrimitive } from "vaul"
+import { useInfiniteScrollSentinel } from "../hooks/use-infinite-scroll-sentinel"
 import { useIsDesktop } from "../hooks/use-is-desktop"
 import { cn } from "../lib/utils"
 import type { ComboboxOption } from "./combobox"
@@ -22,6 +23,18 @@ export interface MultiComboboxProps {
   className?: string
   "aria-invalid"?: boolean | "true" | "false"
   "aria-describedby"?: string
+  /** Modo servidor: chamado a cada tecla com o texto bruto da busca. Sua
+   *  presença ativa o modo servidor (filtro do cmdk desligado). */
+  onSearchChange?: (search: string) => void
+  /** Modo servidor: chamado ao rolar até o fim da lista. */
+  onLoadMore?: () => void
+  /** Modo servidor: mostra uma linha de carregamento no fim da lista. */
+  loading?: boolean
+  /** Modo servidor: habilita o disparo de `onLoadMore`. */
+  hasMore?: boolean
+  /** Modo servidor: rótulos dos valores já selecionados que podem não estar
+   *  na página carregada (chips do formulário de edição). */
+  selectedOptions?: ComboboxOption[]
 }
 
 /**
@@ -51,10 +64,28 @@ export function MultiCombobox({
   className,
   "aria-invalid": ariaInvalid,
   "aria-describedby": ariaDescribedby,
+  onSearchChange,
+  onLoadMore,
+  loading,
+  hasMore,
+  selectedOptions,
 }: MultiComboboxProps) {
   const [open, setOpen] = React.useState(false)
   const isDesktop = useIsDesktop()
-  const selected = options.filter((option) => value.includes(option.value))
+  const isServer = onSearchChange !== undefined
+  // Chips a partir de selectedOptions (rótulos salvos) + página atual, dedup
+  // por value (primeira ocorrência vence → o rótulo salvo prevalece).
+  const seen = new Set<string>()
+  const selected = [...(selectedOptions ?? []), ...options].filter((option) => {
+    if (!value.includes(option.value) || seen.has(option.value)) return false
+    seen.add(option.value)
+    return true
+  })
+  const { listRef, sentinelRef } = useInfiniteScrollSentinel({
+    enabled: isServer && !!hasMore,
+    loading,
+    onLoadMore,
+  })
 
   const toggleValue = (optionValue: string) => {
     onChange(
@@ -119,22 +150,31 @@ export function MultiCombobox({
   )
 
   const command = (
-    <CommandPrimitive className="flex h-full w-full flex-col overflow-hidden">
+    <CommandPrimitive
+      shouldFilter={!isServer}
+      className="flex h-full w-full flex-col overflow-hidden"
+    >
       <div className="flex items-center border-b px-3">
         <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
         <CommandPrimitive.Input
           placeholder={searchPlaceholder}
+          onValueChange={isServer ? onSearchChange : undefined}
           className="flex h-11 w-full bg-transparent py-2 text-base outline-none placeholder:text-muted-foreground sm:h-9 sm:text-sm"
         />
       </div>
-      <CommandPrimitive.List className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60">
-        <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
-          {emptyMessage}
-        </CommandPrimitive.Empty>
+      <CommandPrimitive.List
+        ref={listRef}
+        className="max-h-[50vh] overflow-y-auto overflow-x-hidden p-1 sm:max-h-60"
+      >
+        {!isServer && (
+          <CommandPrimitive.Empty className="py-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </CommandPrimitive.Empty>
+        )}
         {options.map((option) => (
           <CommandPrimitive.Item
             key={option.value}
-            value={option.label}
+            value={isServer ? option.value : option.label}
             disabled={option.disabled}
             onSelect={() => toggleValue(option.value)}
             className="relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2.5 text-sm outline-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 sm:py-1.5"
@@ -148,6 +188,19 @@ export function MultiCombobox({
             <span className="truncate">{option.label}</span>
           </CommandPrimitive.Item>
         ))}
+        {isServer && !loading && options.length === 0 && (
+          <div className="py-6 text-center text-sm text-muted-foreground">
+            {emptyMessage}
+          </div>
+        )}
+        {isServer && loading && (
+          <div className="flex items-center justify-center py-6">
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          </div>
+        )}
+        {isServer && hasMore && (
+          <div ref={sentinelRef} aria-hidden className="h-1" />
+        )}
       </CommandPrimitive.List>
     </CommandPrimitive>
   )

package/src/hooks/use-infinite-scroll-sentinel.ts

@@ -0,0 +1,47 @@
+import * as React from "react"
+
+/**
+ * Dispara `onLoadMore` quando o `sentinelRef` entra na viewport do `listRef`
+ * (raiz = a lista rolável, não a janela — a lista rola por dentro do Popover/
+ * Drawer). Usa refs "latest" para `loading`/`onLoadMore` e evita reassinar o
+ * observer a cada render.
+ */
+export function useInfiniteScrollSentinel({
+  enabled,
+  loading,
+  onLoadMore,
+}: {
+  enabled: boolean
+  loading?: boolean
+  onLoadMore?: () => void
+}) {
+  const listRef = React.useRef<HTMLDivElement | null>(null)
+  const sentinelRef = React.useRef<HTMLDivElement | null>(null)
+  const loadingRef = React.useRef(loading)
+  const onLoadMoreRef = React.useRef(onLoadMore)
+
+  React.useEffect(() => {
+    loadingRef.current = loading
+    onLoadMoreRef.current = onLoadMore
+  })
+
+  React.useEffect(() => {
+    if (!enabled) return
+    const root = listRef.current
+    const sentinel = sentinelRef.current
+    if (!root || !sentinel) return
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && !loadingRef.current) {
+          onLoadMoreRef.current?.()
+        }
+      },
+      { root, rootMargin: "0px 0px 100px 0px" },
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [enabled])
+
+  return { listRef, sentinelRef }
+}