rl-core-front 0.10.1 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "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 {
@@ -60,6 +62,7 @@ export function Combobox({
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
+  const painelRef = useRef<HTMLDivElement>(null);
 
   const selected = useMemo(
     () => options.filter((option) => value.includes(option.id)),
@@ -157,18 +160,25 @@ export function Combobox({
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
+        ref={painelRef}
         /*
-         * 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 +186,46 @@ 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();
+              }
+
+              /*
+               * O primeiro salto do campo para a lista é por conta da gente.
+               *
+               * O Radix navega entre os itens com as setas, mas só depois que o
+               * foco já está num deles: a checagem dele é
+               * `if (event.target !== content) return`, e daqui o alvo é o
+               * campo de busca. Sem este empurrão, a seta não faz nada — e foi
+               * por isso que declarar os itens como `DropdownMenuItem` não
+               * bastou.
+               */
+              if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                const itens = painelRef.current?.querySelectorAll<HTMLElement>(
+                  '[role="menuitem"]',
+                );
+                if (itens?.length) {
+                  event.preventDefault();
+                  const alvo =
+                    event.key === "ArrowDown" ? itens[0] : itens[itens.length - 1];
+                  alvo.focus();
+                }
+                return;
+              }
+
               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 +237,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 && (

package/src/components/ui/dialog.tsx

@@ -148,16 +148,80 @@ export interface DialogContentProps
    * curta, por exemplo, que esticada só fica com mais vazio.
    */
   expandable?: boolean;
+  /**
+   * Há edição não salva: fechar passa a perguntar antes.
+   *
+   * Vale para as três saídas — `Esc`, clique fora e o `X` —, porque são todas a
+   * mesma tecla errada. Quem sabe se há edição é o formulário (com
+   * `react-hook-form`, `formState.isDirty`), então a resposta vem de fora.
+   */
+  unsavedChanges?: boolean;
+  /**
+   * Textos da pergunta, para quem traduz.
+   *
+   * Por prop e não pelo i18n porque este componente não depende do provider —
+   * e passar a depender quebraria todo uso fora dele, inclusive nos testes.
+   */
+  unsavedTexts?: {
+    title?: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+  };
 }
 
+/** O que a pergunta diz quando ninguém traduz. */
+const UNSAVED_PADRAO = {
+  title: "Descartar as alterações?",
+  description:
+    "O que você preencheu ainda não foi salvo e será perdido ao fechar.",
+  confirmLabel: "Descartar",
+  cancelLabel: "Continuar editando",
+} as const;
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   DialogContentProps
->(({ className, children, expandable = true, onOpenAutoFocus, ...props }, ref) => {
+>(
+  (
+    {
+      className,
+      children,
+      expandable = true,
+      onOpenAutoFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      unsavedChanges = false,
+      unsavedTexts,
+      ...props
+    },
+    ref,
+  ) => {
   // Reinicia a cada montagem: o Radix desmonta o conteúdo ao fechar, então
   // reabrir traz o modal no tamanho normal — modal pequeno que volta ampliado
   // surpreende quem o abriu.
   const [expanded, setExpanded] = React.useState(false);
+  const [confirmandoSaida, setConfirmandoSaida] = React.useState(false);
+
+  /**
+   * Fecha de verdade, depois de confirmado.
+   *
+   * O `open` do modal é de quem o abriu, e daqui não há como mexer nele — este
+   * `Close` escondido é o que empresta o fechamento do Radix sem pedir uma prop
+   * nova a todas as telas que já usam o componente.
+   */
+  const fecharRef = React.useRef<HTMLButtonElement>(null);
+
+  const textos = { ...UNSAVED_PADRAO, ...unsavedTexts };
+
+  /** Segura a saída e pergunta, quando há o que perder. */
+  const interceptar = (event: { preventDefault: () => void }): void => {
+    if (!unsavedChanges) {
+      return;
+    }
+    event.preventDefault();
+    setConfirmandoSaida(true);
+  };
 
   // O cabeçalho sai da lista para dividir a primeira linha com os botões; o
   // resto segue na ordem em que o chamador escreveu.
@@ -202,6 +266,18 @@ const DialogContent = React.forwardRef<
             primeiroCampo.focus();
           }
         }}
+        onEscapeKeyDown={(event) => {
+          onEscapeKeyDown?.(event);
+          if (!event.defaultPrevented) {
+            interceptar(event);
+          }
+        }}
+        onPointerDownOutside={(event) => {
+          onPointerDownOutside?.(event);
+          if (!event.defaultPrevented) {
+            interceptar(event);
+          }
+        }}
         {...props}
       >
         {/* Título e botões na mesma linha de um flex, em vez de os botões
@@ -227,17 +303,65 @@ const DialogContent = React.forwardRef<
                 </span>
               </button>
             )}
-            <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <DialogPrimitive.Close
+              onClick={interceptar}
+              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
               <X className="h-4 w-4" />
               <span className="sr-only">Fechar</span>
             </DialogPrimitive.Close>
           </div>
         </div>
         {body}
+
+        <DialogPrimitive.Close ref={fecharRef} className="hidden" tabIndex={-1} />
       </DialogPrimitive.Content>
+
+      {/*
+        A pergunta é montada aqui, com os primitivos do próprio arquivo, e não
+        com o `ConfirmDialog`: é ele que importa daqui, e usá-lo fecharia o
+        ciclo entre os dois módulos.
+      */}
+      <DialogPrimitive.Root
+        open={confirmandoSaida}
+        onOpenChange={(aberto) => !aberto && setConfirmandoSaida(false)}
+      >
+        <DialogPortal>
+          <DialogOverlay />
+          <DialogPrimitive.Content className="fixed left-[50%] top-[50%] z-50 flex w-[calc(100%-2rem)] max-w-sm translate-x-[-50%] translate-y-[-50%] flex-col gap-4 rounded-xl border border-border bg-card p-6 shadow-lg">
+            <DialogPrimitive.Title className="text-lg font-semibold">
+              {textos.title}
+            </DialogPrimitive.Title>
+            <DialogPrimitive.Description className="text-sm text-muted-foreground">
+              {textos.description}
+            </DialogPrimitive.Description>
+            <div className="-mb-2 flex flex-col-reverse gap-2 border-t border-border pt-4 sm:flex-row sm:justify-end">
+              <button
+                type="button"
+                onClick={() => setConfirmandoSaida(false)}
+                className="inline-flex h-10 items-center justify-center rounded-md border border-input px-4 py-2 text-sm font-medium transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {textos.cancelLabel}
+              </button>
+              <button
+                type="button"
+                autoFocus
+                onClick={() => {
+                  setConfirmandoSaida(false);
+                  fecharRef.current?.click();
+                }}
+                className="inline-flex h-10 items-center justify-center rounded-md bg-destructive px-4 py-2 text-sm font-medium text-destructive-foreground transition-colors hover:bg-destructive/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {textos.confirmLabel}
+              </button>
+            </div>
+          </DialogPrimitive.Content>
+        </DialogPortal>
+      </DialogPrimitive.Root>
     </DialogPortal>
   );
-});
+  },
+);
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 /**