rl-core-front 0.16.6 → 0.16.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.16.6",
+  "version": "0.16.8",
   "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/breadcrumbs.tsx

@@ -9,6 +9,7 @@ import {
   breadcrumbTrail,
 } from "#core/_utils/breadcrumb-trail";
 import { useI18n } from "#core/contexts";
+import { useDocumentTitle } from "#core/hooks/use-document-title";
 
 /**
  * Rótulo das telas do próprio core — o projeto não precisa cadastrá-las.
@@ -36,6 +37,11 @@ export function Breadcrumbs({ navItems }: BreadcrumbsProps): JSX.Element {
 
   const trail = breadcrumbTrail(pathname, navItems, SEGMENT_LABELS);
 
+  // A aba do navegador acompanha a migalha: o último degrau é a tela, e é o
+  // mesmo nome nos dois lugares — inclusive nas telas do próprio core.
+  const ultimo = trail[trail.length - 1];
+  useDocumentTitle(ultimo ? t(ultimo.label) : null);
+
   return (
     <nav className="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
       <button

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/hooks/use-document-title.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * O título com que a página carregou — o que o `metadata` do projeto mandou.
+ *
+ * Lido uma vez por carregamento e nunca reescrito: é o sufixo de todos os
+ * títulos daqui em diante, e o projeto não precisa dizer duas vezes como se
+ * chama (o prefixo "Dev - " que ele põe no `metadata` vem junto de graça).
+ */
+let baseTitle: string | null = null;
+
+/** O que fica entre o nome da tela e o do sistema. */
+const SEPARATOR = " · ";
+
+/**
+ * A aba do navegador diz em que tela se está.
+ *
+ * Com cinco abas do sistema abertas, todas se chamavam só pelo nome dele — e
+ * achar a do financeiro era clicar uma a uma. A tela vem **antes** do nome do
+ * sistema, e não depois: a aba trunca pelo fim, e "ControlX - Controle
+ * fina…" vira "ControlX" em todas.
+ *
+ * `null` devolve o título de origem — é o que a tela sem migalha faz.
+ */
+export const useDocumentTitle = (title: string | null): void => {
+  useEffect(() => {
+    if (baseTitle === null) {
+      baseTitle = document.title;
+    }
+
+    if (!title) {
+      document.title = baseTitle;
+      return;
+    }
+
+    document.title = baseTitle ? `${title}${SEPARATOR}${baseTitle}` : title;
+  }, [title]);
+};

package/src/index.ts

@@ -82,6 +82,7 @@ export type {
   UseConfirmResult,
 } from "#core/hooks/use-confirm";
 export { useConfirm } from "#core/hooks/use-confirm";
+export { useDocumentTitle } from "#core/hooks/use-document-title";
 export type { ExportQuery, UseExportResult } from "#core/hooks/use-export";
 export { useExport } from "#core/hooks/use-export";
 export type { UseFilterSchemaResult } from "#core/hooks/use-filter-schema";