rl-core-front 0.16.5 → 0.16.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.5",
+  "version": "0.16.7",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/combobox.tsx

@@ -2,7 +2,7 @@
 
 import { Check, ChevronDown, X } from "lucide-react";
 import type { JSX } from "react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 
 import { Badge } from "#core/components/ui/badge";
 import { Button } from "#core/components/ui/button";
@@ -54,6 +54,11 @@ export interface ComboboxProps {
  *
  * Só escolhe — não cria. Quem cadastra o item nem sempre é quem pode cadastrar
  * na origem, e um "criar" aqui daria um botão que falha na cara de quem clicou.
+ *
+ * **O foco nunca sai do campo de busca.** Quem aponta o item é o `ativo`, e não
+ * o foco do navegador: dentro do menu do Radix, foco em item entrega as teclas
+ * seguintes à busca por digitação dele — a letra salta para outra opção em vez
+ * de entrar na busca.
  */
 export function Combobox({
   options,
@@ -69,8 +74,23 @@ export function Combobox({
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
+  /**
+   * O item que o teclado aponta. Nulo é "o primeiro que a busca deixou".
+   *
+   * Guardar o id, e não a posição, é o que faz o apontado sobreviver à
+   * digitação: enquanto ele continuar na lista filtrada segue apontado, e sai
+   * do topo só quando a busca o exclui.
+   */
+  const [apontado, setApontado] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const painelRef = useRef<HTMLDivElement>(null);
+  const itensRef = useRef<Record<string, HTMLElement | null>>({});
+  /*
+   * O `open` do estado não serve dentro do `onKeyDown` do gatilho: a tecla
+   * seguinte pode chegar antes de a render nova existir, e ali a closure ainda
+   * enxerga o painel fechado.
+   */
+  const abertoRef = useRef(false);
+  const idLista = useId();
 
   const selected = useMemo(
     () => options.filter((option) => value.includes(option.id)),
@@ -86,6 +106,12 @@ export function Combobox({
     [options, termo],
   );
 
+  /** A posição do apontado; sem ele — ou fora da busca — é a do primeiro. */
+  const ativo = Math.max(
+    visiveis.findIndex((option) => option.id === apontado),
+    0,
+  );
+
   const alternar = (id: string): void => {
     if (!multiple) {
       onChange([id]);
@@ -101,11 +127,14 @@ export function Combobox({
     );
   };
 
+  useEffect(() => {
+    abertoRef.current = open;
+  }, [open]);
+
   // O Radix leva o foco para o menu ao abrir, e isso vence o `autoFocus` do
   // campo de busca — sem devolver o foco, só depois de clicar nele a digitação
-  // pesquisa. `onOpenAutoFocus` é prop privada do `DropdownMenu` e não dá para
-  // interceptar, então o foco volta no quadro seguinte, quando o controle de
-  // foco do Radix já agiu.
+  // pesquisa. O painel monta num commit posterior ao do `open`, então o foco
+  // volta no quadro seguinte, quando o controle de foco do Radix já agiu.
   useEffect(() => {
     if (!open) {
       return;
@@ -115,6 +144,17 @@ export function Combobox({
     return () => cancelAnimationFrame(quadro);
   }, [open]);
 
+  // O item apontado precisa estar à vista: a lista rola até ele. A chamada é
+  // opcional porque o jsdom não implementa `scrollIntoView`.
+  useEffect(() => {
+    const alvo = visiveis[ativo];
+    if (!open || !alvo) {
+      return;
+    }
+
+    itensRef.current[alvo.id]?.scrollIntoView?.({ block: "nearest" });
+  }, [ativo, open, visiveis]);
+
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild disabled={disabled}>
@@ -135,7 +175,9 @@ export function Combobox({
               return;
             }
             event.preventDefault();
-            setSearch(event.key);
+            // Tecla que chega antes de o painel montar continua a busca em vez
+            // de recomeçá-la — senão a letra anterior se perde na abertura.
+            setSearch((atual) => (abertoRef.current ? atual + event.key : event.key));
             setOpen(true);
           }}
         >
@@ -199,7 +241,32 @@ export function Combobox({
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        ref={painelRef}
+        /*
+         * Letra digitada no painel é da busca, esteja o foco onde estiver.
+         *
+         * Este é o antídoto para a busca por digitação do menu, que achava o
+         * item na lista e não escrevia nada no campo. Ela roubava as teclas
+         * sempre que o foco não estivesse no campo — no quadro que o efeito
+         * acima espera, ou com o ponteiro repousado sobre a lista. O Radix
+         * compõe os handlers com o de fora primeiro, e desiste do seu quando o
+         * evento já foi tratado: o `preventDefault` daqui é o que o desarma.
+         */
+        onKeyDown={(event) => {
+          // Tecla nascida na busca já foi tratada lá.
+          if (
+            event.target === inputRef.current ||
+            event.key.length !== 1 ||
+            event.ctrlKey ||
+            event.metaKey ||
+            event.altKey
+          ) {
+            return;
+          }
+
+          event.preventDefault();
+          setSearch((atual) => atual + event.key);
+          inputRef.current?.focus();
+        }}
         /*
          * Largura do campo sempre; sobreposto só quando é de um valor só.
          *
@@ -224,14 +291,20 @@ export function Combobox({
             ref={inputRef}
             value={search}
             placeholder={searchPlaceholder ?? t("common.search")}
+            role="combobox"
+            aria-expanded
+            // Quem lê a tela precisa saber qual item as setas apontam: o foco
+            // fica aqui, então é este atributo que conta a navegação.
+            aria-activedescendant={
+              visiveis[ativo] ? `${idLista}-${visiveis[ativo].id}` : undefined
+            }
             onChange={(event) => setSearch(event.target.value)}
             /*
              * 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.
+             * escrever.
              */
             onKeyDown={(event) => {
               if (event.key.length === 1) {
@@ -239,25 +312,24 @@ export function Combobox({
               }
 
               /*
-               * O primeiro salto do campo para a lista é por conta da gente.
+               * A seta anda pela lista sem tirar o foco do campo.
                *
-               * 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.
+               * Mover o foco para o item — como era aqui — entregava as teclas
+               * seguintes à busca por digitação do Radix: a letra saltava para
+               * outra opção em vez de entrar na busca, e do primeiro item a
+               * seta para cima dava a volta na lista sem nunca devolver o
+               * campo. Quem aponta agora é o `ativo`.
                */
               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();
+                // Sem isto o cursor do campo salta para as pontas do texto.
+                event.preventDefault();
+                if (visiveis.length === 0) {
+                  return;
                 }
+
+                const passo = event.key === "ArrowDown" ? 1 : -1;
+                const proximo = (ativo + passo + visiveis.length) % visiveis.length;
+                setApontado(visiveis[proximo].id);
                 return;
               }
 
@@ -265,20 +337,39 @@ export function Combobox({
                 return;
               }
               event.stopPropagation();
-              // Enter escolhe o que a busca deixou na tela — sem isto, filtrar
-              // pelo teclado ainda terminaria no mouse.
+              // Enter escolhe o item apontado — sem isto, filtrar pelo teclado
+              // ainda terminaria no mouse.
               event.preventDefault();
-              if (visiveis[0]) {
-                alternar(visiveis[0].id);
+              const escolhido = visiveis[ativo];
+              if (escolhido) {
+                alternar(escolhido.id);
               }
             }}
           />
         </div>
 
-        {visiveis.map((option) => (
+        {visiveis.map((option, indice) => (
           <DropdownMenuItem
             key={option.id}
-            className="flex w-full items-center justify-between"
+            id={`${idLista}-${option.id}`}
+            ref={(node) => {
+              itensRef.current[option.id] = node;
+            }}
+            className={cn(
+              "flex w-full items-center justify-between",
+              // O apontado se destaca sozinho: o `focus:` do item não serve
+              // mais, porque o foco não sai do campo de busca.
+              indice === ativo && "bg-accent text-accent-foreground",
+            )}
+            /*
+             * O mouse aponta, mas não rouba o foco: o item do Radix se foca no
+             * `pointermove`, e bastava o ponteiro repousar sobre a lista para a
+             * digitação parar de chegar ao campo.
+             */
+            onPointerMove={(event) => {
+              event.preventDefault();
+              setApontado(option.id);
+            }}
             // 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ó.

package/src/components/ui/date-picker.tsx

@@ -38,6 +38,18 @@ export interface DatePickerProps {
   /** Descreve o campo para quem usa leitor de tela. */
   label?: string;
   placeholder?: string;
+  /**
+   * O primeiro dia escolhível (`"yyyy-MM-dd"`) — os anteriores ficam apagados
+   * no calendário e o digitado é recusado.
+   *
+   * Existe porque avisar depois não serve para data: o vencimento anterior à
+   * compra e o pagamento anterior ao lançamento são erros que a pessoa comete
+   * sem perceber, e descobrir no botão Salvar é refazer o caminho. Aqui o dia
+   * simplesmente não se deixa escolher.
+   */
+  minDay?: string;
+  /** O último dia escolhível, pela mesma razão. */
+  maxDay?: string;
 }
 
 /**
@@ -69,6 +81,8 @@ export function DatePicker({
   disabled,
   label,
   placeholder,
+  minDay,
+  maxDay,
 }: DatePickerProps): JSX.Element {
   const { t, locale } = useI18n();
   const [open, setOpen] = useState(false);
@@ -104,8 +118,24 @@ export function DatePicker({
     caret.current = null;
   });
 
+  /**
+   * O dia está dentro da faixa permitida?
+   *
+   * Comparação de texto ISO, e não de `Date`: `2026-09-03 < 2026-09-08` é
+   * verdade em ordem alfabética porque o formato é fixo, e assim não há
+   * conversão de fuso no meio para transformar o dia 1º no dia 30.
+   */
+  const dayAllowed = (iso: string): boolean =>
+    (!minDay || iso >= minDay) && (!maxDay || iso <= maxDay);
+
   const pickDay = (day: Date): void => {
-    onChange(toIsoDay(day));
+    const iso = toIsoDay(day);
+
+    if (!dayAllowed(iso)) {
+      return;
+    }
+
+    onChange(iso);
     setTyped(null);
     setOpen(false);
   };
@@ -129,7 +159,9 @@ export function DatePicker({
       (selected ?? today()).getFullYear(),
     );
 
-    if (iso) {
+    // Digitar é o outro caminho para o mesmo campo: sem esta guarda, o dia que
+    // o calendário recusa entraria pelo teclado.
+    if (iso && dayAllowed(iso)) {
       onChange(iso);
       setMonth(fromIsoDay(iso) ?? month);
     }
@@ -180,6 +212,11 @@ export function DatePicker({
   };
 
   const dayClass = (day: Date): string => {
+    if (!dayAllowed(toIsoDay(day))) {
+      // Continua desenhado, e não escondido: o calendário sem os dias 1 a 7
+      // pareceria quebrado, e é o cinza que diz "existe, mas não aqui".
+      return "text-muted-foreground/30 line-through";
+    }
     if (selected && isSameDay(day, selected)) {
       return "bg-primary text-primary-foreground font-semibold";
     }
@@ -285,9 +322,13 @@ export function DatePicker({
             <button
               key={day.toISOString()}
               type="button"
+              disabled={!dayAllowed(toIsoDay(day))}
               onClick={() => pickDay(day)}
               className={cn(
-                "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
+                "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors",
+                dayAllowed(toIsoDay(day))
+                  ? "hover:bg-accent"
+                  : "cursor-not-allowed hover:bg-transparent",
                 dayClass(day),
               )}
             >

package/src/features/rbac/panels/roles-panel.tsx

@@ -19,6 +19,7 @@ import {
   DialogHeader,
   DialogTitle,
   Field,
+  HoverTip,
   Input,
   Label,
 } from "#core/components/ui";
@@ -151,23 +152,29 @@ export function RolesPanel(): JSX.Element {
                 {canManage && (
                   <div className="flex">
                     {hasPermission("roles:update:any") && (
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => openEdit(role)}
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
+                      <HoverTip label={t("common.edit")}>
+                        <Button
+                          aria-label={t("common.edit")}
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => openEdit(role)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      </HoverTip>
                     )}
                     {hasPermission("roles:delete:any") && (
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        className="text-destructive"
-                        onClick={() => remove(role)}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
+                      <HoverTip label={t("common.delete")}>
+                        <Button
+                          aria-label={t("common.delete")}
+                          variant="ghost"
+                          size="icon"
+                          className="text-destructive"
+                          onClick={() => remove(role)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </HoverTip>
                     )}
                   </div>
                 )}