@motor-hero/ui-kit 0.44.1 → 0.45.0

package/package.json

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

package/src/components/combobox.tsx

@@ -93,11 +93,26 @@ export function Combobox({
 	const [search, setSearch] = React.useState("");
 	const isDesktop = useIsDesktop();
 	const isServer = onSearchChange !== undefined;
-	const selected =
+	// Mesmo cache do multi-combobox: em modo servidor `options` é só a página
+	// carregada, então o rótulo do valor escolhido precisa sobreviver à troca de
+	// página — senão o gatilho volta ao placeholder com o valor ainda setado.
+	const labelCache = React.useRef(new Map<string, ComboboxOption>());
+	const fromPage =
 		selectedOption?.value === value
 			? selectedOption
-			: (options.find((option) => option.value === value) ??
-				(creatable && value ? { value, label: value } : undefined));
+			: options.find((option) => option.value === value);
+
+	// No efeito, nunca no render — mutar a ref durante o render é impuro.
+	React.useEffect(() => {
+		for (const option of options) labelCache.current.set(option.value, option);
+		if (selectedOption)
+			labelCache.current.set(selectedOption.value, selectedOption);
+	});
+
+	const selected =
+		fromPage ??
+		(value ? labelCache.current.get(value) : undefined) ??
+		(creatable && value ? { value, label: value } : undefined);
 
 	const handleOpenChange = (next: boolean) => {
 		setOpen(next);

package/src/components/multi-combobox.tsx

@@ -73,14 +73,30 @@ export function MultiCombobox({
   const [open, setOpen] = React.useState(false)
   const isDesktop = useIsDesktop()
   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
+  // Em modo servidor `options` é só a página carregada no momento, então um
+  // rótulo visto uma vez precisa sobreviver à troca de página: sem esse cache,
+  // buscar (ou paginar) fazia o chip de um valor ainda selecionado sumir do
+  // gatilho, como se nada estivesse escolhido. Prioridade de rótulo:
+  // `selectedOptions` (o salvo) → página atual → cache.
+  const labelCache = React.useRef(new Map<string, ComboboxOption>())
+  const byValue = new Map<string, ComboboxOption>()
+  for (const option of options) byValue.set(option.value, option)
+  for (const option of selectedOptions ?? []) byValue.set(option.value, option)
+
+  // Escrita no efeito, nunca no render — mutar a ref durante o render é impuro.
+  // Não pisca: no render em que a opção fica selecionável ela ainda está em
+  // `options`, e este efeito a grava antes de `options` mudar.
+  React.useEffect(() => {
+    for (const [key, option] of byValue) labelCache.current.set(key, option)
   })
+
+  // Ordem de seleção (`value`), que é estável — a antiga vinha da ordem da
+  // página carregada e mudava sozinha conforme as páginas chegavam. Um valor
+  // sem rótulo conhecido (edição sem `selectedOptions`) segue sem chip.
+  const selected = value
+    .map((v) => byValue.get(v) ?? labelCache.current.get(v))
+    .filter((option): option is ComboboxOption => option !== undefined)
+
   const { listRef, sentinelRef } = useInfiniteScrollSentinel({
     enabled: isServer && !!hasMore,
     loading,

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

@@ -1,10 +1,19 @@
 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.
+ * Dispara `onLoadMore` quando o sentinela entra na viewport da lista rolável
+ * (raiz = a lista, não a janela — ela rola por dentro do Popover/Drawer). Usa
+ * refs "latest" para `loading`/`onLoadMore` e não reassina o observer a cada
+ * render.
+ *
+ * Os nós entram como **estado** (callback refs), não como `useRef`: lista e
+ * sentinela vivem dentro do Portal do Popover/Drawer e só existem no DOM com o
+ * dropdown aberto, o que acontece bem depois de `enabled` virar `true`. Com
+ * `useRef` + deps `[enabled]` o efeito rodava uma única vez, com o dropdown
+ * fechado e os dois refs `null`, e o observer nunca chegava a ser registrado —
+ * a paginação por scroll simplesmente não acontecia. Guardar os nós em estado
+ * também refaz a assinatura quando o sentinela desmonta e remonta (`hasMore`
+ * oscilando), em vez de deixar o observer preso a um nó já destacado.
  */
 export function useInfiniteScrollSentinel({
   enabled,
@@ -15,21 +24,29 @@ export function useInfiniteScrollSentinel({
   loading?: boolean
   onLoadMore?: () => void
 }) {
-  const listRef = React.useRef<HTMLDivElement | null>(null)
-  const sentinelRef = React.useRef<HTMLDivElement | null>(null)
+  const [listNode, setListNode] = React.useState<HTMLDivElement | null>(null)
+  const [sentinelNode, setSentinelNode] = React.useState<HTMLDivElement | null>(
+    null,
+  )
   const loadingRef = React.useRef(loading)
   const onLoadMoreRef = React.useRef(onLoadMore)
 
+  // Memoizadas de propósito: uma callback ref recriada a cada render é chamada
+  // com `null` e de novo com o nó em *todo* render, realimentando o estado.
+  const listRef = React.useCallback((node: HTMLDivElement | null) => {
+    setListNode(node)
+  }, [])
+  const sentinelRef = React.useCallback((node: HTMLDivElement | null) => {
+    setSentinelNode(node)
+  }, [])
+
   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
+    if (!enabled || !listNode || !sentinelNode) return
 
     const observer = new IntersectionObserver(
       (entries) => {
@@ -37,11 +54,11 @@ export function useInfiniteScrollSentinel({
           onLoadMoreRef.current?.()
         }
       },
-      { root, rootMargin: "0px 0px 100px 0px" },
+      { root: listNode, rootMargin: "0px 0px 100px 0px" },
     )
-    observer.observe(sentinel)
+    observer.observe(sentinelNode)
     return () => observer.disconnect()
-  }, [enabled])
+  }, [enabled, listNode, sentinelNode])
 
   return { listRef, sentinelRef }
 }