rl-core-front 0.10.2 → 0.11.1

package/package.json

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

@@ -28,6 +28,13 @@ export interface ComboboxProps {
   value: string[];
   onChange: (ids: string[]) => void;
   multiple?: boolean;
+  /**
+   * Mostra o X que devolve o campo ao vazio.
+   *
+   * Só faz sentido onde o vazio é resposta válida: num campo obrigatório o X
+   * seria um atalho para o erro de validação. Por isso não vem ligado.
+   */
+  clearable?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
   emptyMessage?: string;
@@ -53,6 +60,7 @@ export function Combobox({
   value,
   onChange,
   multiple = false,
+  clearable = false,
   placeholder,
   searchPlaceholder,
   emptyMessage,
@@ -62,6 +70,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)),
@@ -140,25 +149,57 @@ export function Combobox({
               ? selected.map((option) => (
                   <Badge key={option.id} variant="secondary" className="gap-1">
                     {option.name}
-                    <X
-                      className="h-3 w-3 cursor-pointer"
-                      onClick={(event) => {
-                        // Sem isto, tirar um selo abriria o menu junto.
+                    <span
+                      aria-label={`${t("common.remove")} ${option.name}`}
+                      className="cursor-pointer"
+                      /*
+                       * Tirar um item é no `pointerdown`, não no `click`.
+                       *
+                       * O gatilho do Radix abre no `pointerdown`, e o menu
+                       * aberto tira o `pointer-events` de tudo que está fora do
+                       * painel — inclusive deste X, que mora no gatilho. O
+                       * `click` chegava tarde: quando ele viria, o alvo já não
+                       * recebia evento, e o item ficava marcado para sempre.
+                       *
+                       * `stopPropagation` no lugar do `onClick` de antes: aqui
+                       * ele chega a tempo de o gatilho não ver o evento, e o
+                       * menu não abre junto.
+                       */
+                      onPointerDown={(event) => {
+                        event.preventDefault();
                         event.stopPropagation();
                         onChange(value.filter((id) => id !== option.id));
                       }}
-                    />
+                    >
+                      <X className="h-3 w-3" />
+                    </span>
                   </Badge>
                 ))
               : selected.map((option) => (
                   <span key={option.id}>{option.name}</span>
                 ))}
           </span>
+          {clearable && selected.length > 0 && !disabled && (
+            <span
+              aria-label={t("common.clear")}
+              className="shrink-0 opacity-60 hover:opacity-100"
+              // Mesmo motivo do X do chip: no `click` o gatilho já teria aberto
+              // o menu e tirado o ponteiro de quem está fora do painel.
+              onPointerDown={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onChange([]);
+              }}
+            >
+              <X className="h-4 w-4" />
+            </span>
+          )}
           <ChevronDown className="h-4 w-4 shrink-0 opacity-60" />
         </Button>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
+        ref={painelRef}
         /*
          * Largura do campo sempre; sobreposto só quando é de um valor só.
          *
@@ -196,6 +237,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;
 
 /**

package/src/i18n/messages/en.ts

@@ -200,6 +200,8 @@ export const en: Messages = {
     select: "Select…",
     search: "Search…",
     noResults: "Nothing found",
+    remove: "Remove",
+    clear: "Clear",
     no: "No",
     actions: "Actions",
     loading: "Loading...",

package/src/i18n/messages/pt.ts

@@ -202,6 +202,8 @@ export const pt = {
     select: "Selecionar…",
     search: "Pesquisar…",
     noResults: "Nada encontrado",
+    remove: "Remover",
+    clear: "Limpar",
     no: "Não",
     actions: "Ações",
     loading: "Carregando...",