@motor-hero/ui-kit 0.23.1 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motor-hero/ui-kit",
-  "version": "0.23.1",
+  "version": "0.24.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, 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,12 +28,28 @@ 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
 }
 
 /**
  * Select com busca (combobox) acessível e responsivo.
  *
- * - Desktop: Popover (modal) + cmdk — o dropdown acompanha a largura do gatilho.
+ * - Desktop: Popover não-modal + cmdk — o dropdown acompanha a largura do
+ *   gatilho. Não-modal (com `pointer-events-auto` no conteúdo) de propósito:
+ *   dentro de um Dialog, um Popover modal trava `body { pointer-events: none }`
+ *   e prende o foco, então a busca não recebe clique/digitação (mesmo motivo do
+ *   MultiCombobox).
  * - Mobile: Drawer (bottom sheet) + cmdk — evita os problemas de foco/clique de
  *   Popover dentro de modal no touch, então a busca funciona no celular.
  *
@@ -51,10 +68,24 @@ export function Combobox({
   className,
   "aria-invalid": ariaInvalid,
   "aria-describedby": ariaDescribedby,
+  onSearchChange,
+  onLoadMore,
+  loading,
+  hasMore,
+  selectedOption,
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false)
   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)
+  const { listRef, sentinelRef } = useInfiniteScrollSentinel({
+    enabled: isServer && !!hasMore,
+    loading,
+    onLoadMore,
+  })
 
   const trigger = (
     <button
@@ -78,22 +109,33 @@ 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 ? 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}
+            // 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)
@@ -110,19 +152,32 @@ 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} modal>
+      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>
         <PopoverPrimitive.Trigger asChild>{trigger}</PopoverPrimitive.Trigger>
         <PopoverPrimitive.Portal>
           <PopoverPrimitive.Content
             align="start"
             sideOffset={4}
-            className="z-50 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md"
+            className="pointer-events-auto z-50 overflow-hidden rounded-md border bg-popover p-0 text-popover-foreground shadow-md"
             style={{ width: "var(--radix-popover-trigger-width)" }}
           >
             {command}

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 }
+}