rl-core-front 0.10.2 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.10.2",
+  "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

@@ -62,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)),
@@ -159,6 +160,7 @@ export function Combobox({
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
+        ref={painelRef}
         /*
          * Largura do campo sempre; sobreposto só quando é de um valor só.
          *
@@ -196,6 +198,30 @@ export function Combobox({
               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;
               }

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;
 
 /**