rl-core-front 0.10.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/combobox.tsx

@@ -9,10 +9,12 @@ import { Button } from "#core/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "#core/components/ui/dropdown-menu";
 import { Input } from "#core/components/ui/input";
 import { useI18n } from "#core/contexts";
+import { cn } from "#core/lib/utils";
 
 /** O mínimo para desenhar uma opção: o que identifica e o que se lê. */
 export interface ComboboxOption {
@@ -158,17 +160,23 @@ export function Combobox({
 
       <DropdownMenuContent
         /*
-         * Cara de select: mesma largura do campo e aberto **por cima** dele.
+         * Largura do campo sempre; sobreposto só quando é de um valor só.
          *
          * A largura precisa de `var(...)` por extenso — o atalho
-         * `w-[--variavel]` era do Tailwind 3 e não gera CSS na 4. A margem
-         * negativa é o que sobrepõe: com `sideOffset` zero o painel encosta na
-         * borda do campo, e subir a altura dele cobre o campo. O `data-[side]`
-         * cuida da abertura para cima, quando não há espaço embaixo.
+         * `w-[--variavel]` era do Tailwind 3 e não gera CSS na 4.
+         *
+         * Escolhendo um valor, cobrir o campo dá cara de select e o painel
+         * fecha em seguida. No modo múltiplo o campo é onde ficam os itens já
+         * escolhidos: cobri-lo esconderia justamente o que se acabou de marcar,
+         * e o painel continua aberto para marcar o próximo.
          */
-        className="max-h-72 w-(--radix-dropdown-menu-trigger-width) overflow-y-auto p-1 data-[side=bottom]:-mt-(--radix-dropdown-menu-trigger-height) data-[side=top]:-mb-(--radix-dropdown-menu-trigger-height)"
+        className={cn(
+          "max-h-72 w-(--radix-dropdown-menu-trigger-width) overflow-y-auto p-1",
+          !multiple &&
+            "data-[side=bottom]:-mt-(--radix-dropdown-menu-trigger-height) data-[side=top]:-mb-(--radix-dropdown-menu-trigger-height)",
+        )}
         align="start"
-        sideOffset={0}
+        sideOffset={multiple ? 4 : 0}
       >
         <div className="p-1">
           <Input
@@ -176,14 +184,22 @@ export function Combobox({
             value={search}
             placeholder={searchPlaceholder ?? t("common.search")}
             onChange={(event) => setSearch(event.target.value)}
-            // O menu do Radix tem busca por digitação própria: sem parar o
-            // evento aqui, digitar "c" pularia o foco para o item "Chase" em
-            // vez de escrever no campo.
+            /*
+             * Só o que é texto fica preso no campo.
+             *
+             * O menu do Radix tem busca por digitação própria: sem parar essas
+             * teclas, digitar "c" pularia o foco para o item "Chase" em vez de
+             * escrever. Mas parar **tudo** — como estava — leva junto as setas,
+             * e aí não há como percorrer a lista pelo teclado.
+             */
             onKeyDown={(event) => {
-              event.stopPropagation();
+              if (event.key.length === 1) {
+                event.stopPropagation();
+              }
               if (event.key !== "Enter") {
                 return;
               }
+              event.stopPropagation();
               // Enter escolhe o que a busca deixou na tela — sem isto, filtrar
               // pelo teclado ainda terminaria no mouse.
               event.preventDefault();
@@ -195,15 +211,20 @@ export function Combobox({
         </div>
 
         {visiveis.map((option) => (
-          <button
+          <DropdownMenuItem
             key={option.id}
-            type="button"
-            className="flex w-full items-center justify-between rounded-sm px-2 py-1.5 text-sm hover:bg-accent"
-            onClick={() => alternar(option.id)}
+            className="flex w-full items-center justify-between"
+            // Escolher **não** fecha por conta do Radix: no modo múltiplo,
+            // fechar a cada marcação obrigaria a reabrir para o próximo. Quem
+            // fecha é o `alternar`, e só quando é de um valor só.
+            onSelect={(event) => {
+              event.preventDefault();
+              alternar(option.id);
+            }}
           >
             <span className="truncate">{option.name}</span>
             {value.includes(option.id) && <Check className="h-4 w-4" />}
-          </button>
+          </DropdownMenuItem>
         ))}
 
         {visiveis.length === 0 && (