rl-core-front 0.14.0 → 0.14.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rl-core-front",
-  "version": "0.14.0",
-  "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
+  "version": "0.14.1",
+  "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",
   "keywords": [
@@ -66,6 +66,7 @@
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-separator": "^1.1.15",
     "@radix-ui/react-slot": "^1.3.3",

package/src/_utils/advanced-filter.ts

@@ -294,45 +294,24 @@ const asText = (field: FilterField, value: unknown): string => {
     : ((value as string | null) ?? "");
 };
 
-const jsonToNode = (
-  json: Record<string, unknown>,
-  schema: FilterField[],
-): AdvancedNode | null => {
-  const entries = Object.entries(json);
-  if (entries.length === 0) {
-    return null;
-  }
-  const [key, value] = entries[0];
-
-  if (key === "$AND" || key === "$OR") {
-    if (!Array.isArray(value)) {
-      return null;
-    }
-    const children = value
-      .map((child) =>
-        typeof child === "object" && child !== null
-          ? jsonToNode(child as Record<string, unknown>, schema)
-          : null,
-      )
-      .filter((child): child is AdvancedNode => child !== null);
-    return { id: uid(), kind: "group", combinator: key, children };
-  }
-
-  const field = schema.find((item) => item.field === key);
-  if (!field || typeof value !== "object" || value === null) {
-    return null;
-  }
-  const [operator, operand] = Object.entries(
-    value as Record<string, unknown>,
-  )[0] ?? [null, null];
-  if (!operator || !OPERATOR_SET.has(operator)) {
+/** Objeto simples — o que o DSL usa para o mapa de operadores de um campo. */
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const toRule = (
+  field: FilterField,
+  fieldName: string,
+  operator: string,
+  operand: unknown,
+): AdvancedRule | null => {
+  if (!OPERATOR_SET.has(operator)) {
     return null;
   }
 
   const rule: AdvancedRule = {
     id: uid(),
     kind: "rule",
-    field: key,
+    field: fieldName,
     operator: operator as FilterOperator,
     value: "",
   };
@@ -352,6 +331,71 @@ const jsonToNode = (
   return rule;
 };
 
+/**
+ * Uma entrada do objeto vira zero, uma ou várias regras.
+ *
+ * Várias porque o mesmo campo aceita mais de um operador —
+ * `{"age": {"$GTE": 18, "$LTE": 30}}` são duas condições unidas por `E`, e é
+ * assim que o backend as lê. Zero quando o campo não está no catálogo: a URL
+ * é editável à mão, e um campo inventado não pode derrubar a tela.
+ */
+const entryToNodes = (
+  key: string,
+  value: unknown,
+  schema: FilterField[],
+): AdvancedNode[] => {
+  if (key === "$AND" || key === "$OR") {
+    if (!Array.isArray(value)) {
+      return [];
+    }
+    const children = value
+      .map((child) =>
+        isPlainObject(child) ? jsonToNode(child, schema) : null,
+      )
+      .filter((child): child is AdvancedNode => child !== null);
+    return [{ id: uid(), kind: "group", combinator: key, children }];
+  }
+
+  const field = schema.find((item) => item.field === key);
+  if (!field) {
+    return [];
+  }
+
+  // Açúcar do DSL: valor cru equivale a $EQ — {"name": "ana"}.
+  const operators = isPlainObject(value)
+    ? value
+    : ({ $EQ: value } as Record<string, unknown>);
+
+  return Object.entries(operators)
+    .map(([operator, operand]) => toRule(field, key, operator, operand))
+    .filter((rule): rule is AdvancedRule => rule !== null);
+};
+
+/**
+ * Lê **todas** as entradas do objeto, não só a primeira.
+ *
+ * `{"name": …, "isActive": …}` são duas condições unidas por `E` — é como o
+ * backend as aplica. Ler só `entries[0]` fazia a tela reabrir com um filtro
+ * mais frouxo do que o da URL, e a primeira edição regravava a URL já sem as
+ * irmãs: o link deixava de valer sem ninguém pedir.
+ */
+const jsonToNode = (
+  json: Record<string, unknown>,
+  schema: FilterField[],
+): AdvancedNode | null => {
+  const nodes = Object.entries(json).flatMap(([key, value]) =>
+    entryToNodes(key, value, schema),
+  );
+
+  if (nodes.length === 0) {
+    return null;
+  }
+  if (nodes.length === 1) {
+    return nodes[0];
+  }
+  return { id: uid(), kind: "group", combinator: "$AND", children: nodes };
+};
+
 /**
  * JSON → árvore, para reabrir a tela no mesmo filtro.
  *

package/src/components/ui/combobox.tsx

@@ -212,7 +212,7 @@ export function Combobox({
          * e o painel continua aberto para marcar o próximo.
          */
         className={cn(
-          "max-h-72 w-(--radix-dropdown-menu-trigger-width) overflow-y-auto p-1",
+          "max-h-[min(18rem,var(--radix-dropdown-menu-content-available-height))] 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)",
         )}

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

@@ -2,7 +2,7 @@
 
 import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
 import type { JSX } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import {
   addMonths,
@@ -17,6 +17,11 @@ import {
   weekdayLabels,
 } from "#core/_utils/calendar";
 import { Button } from "#core/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "#core/components/ui/popover";
 import { useI18n } from "#core/contexts";
 import { cn } from "#core/lib/utils";
 
@@ -50,36 +55,11 @@ export function DatePicker({
   placeholder,
 }: DatePickerProps): JSX.Element {
   const { t, locale } = useI18n();
-  const containerRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
 
   const selected = fromIsoDay(value);
   const [month, setMonth] = useState<Date>(() => selected ?? today());
 
-  // Fecha ao clicar fora e no ESC — o painel é flutuante e não tem overlay
-  // próprio, então quem fecha é o documento.
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const onPointerDown = (event: MouseEvent): void => {
-      if (!containerRef.current?.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-
   const pickDay = (day: Date): void => {
     onChange(toIsoDay(day));
     setOpen(false);
@@ -96,105 +76,98 @@ export function DatePicker({
   };
 
   return (
-    <div className="relative" ref={containerRef}>
-      <button
-        type="button"
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
         disabled={disabled}
-        aria-haspopup="dialog"
-        aria-expanded={open}
         aria-label={label}
-        onClick={() => setOpen((current) => !current)}
         className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
       >
         <span className={cn("truncate", !value && "text-muted-foreground")}>
           {value ? formatDay(value, locale) : (placeholder ?? t("filters.selectDate"))}
         </span>
         <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
-      </button>
+      </PopoverTrigger>
 
-      {open && (
-        <div
-          role="dialog"
-          // Largura do campo, e não fixa: o painel é a continuação dele, e
-          // solto no meio de um formulário de duas colunas ficava torto.
-          className="absolute left-0 z-50 mt-2 w-full min-w-[17rem] rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg"
-        >
-          <div className="mb-2 flex items-center justify-between">
-            <Button
-              type="button"
-              variant="ghost"
-              size="iconSm"
-              aria-label={t("filters.previousMonth")}
-              onClick={() => setMonth(addMonths(month, -1))}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <span className="text-sm font-medium capitalize">
-              {monthLabel(month, locale)}
+      <PopoverContent
+        // Largura do campo, e não fixa: o painel é a continuação dele, e
+        // solto no meio de um formulário de duas colunas ficava torto.
+        className="w-(--radix-popover-trigger-width) min-w-[17rem]"
+      >
+        <div className="mb-2 flex items-center justify-between">
+          <Button
+            type="button"
+            variant="ghost"
+            size="iconSm"
+            aria-label={t("filters.previousMonth")}
+            onClick={() => setMonth(addMonths(month, -1))}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <span className="text-sm font-medium capitalize">
+            {monthLabel(month, locale)}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="iconSm"
+            aria-label={t("filters.nextMonth")}
+            onClick={() => setMonth(addMonths(month, 1))}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="mb-1 grid grid-cols-7 text-center text-xs text-muted-foreground">
+          {weekdayLabels(locale).map((weekday) => (
+            <span key={weekday} className="capitalize">
+              {weekday}
             </span>
-            <Button
+          ))}
+        </div>
+
+        <div className="grid grid-cols-7 gap-y-1 justify-items-center">
+          {monthGrid(month).map((day) => (
+            <button
+              key={day.toISOString()}
               type="button"
-              variant="ghost"
-              size="iconSm"
-              aria-label={t("filters.nextMonth")}
-              onClick={() => setMonth(addMonths(month, 1))}
+              onClick={() => pickDay(day)}
+              className={cn(
+                "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
+                dayClass(day),
+              )}
             >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-
-          <div className="mb-1 grid grid-cols-7 text-center text-xs text-muted-foreground">
-            {weekdayLabels(locale).map((weekday) => (
-              <span key={weekday} className="capitalize">
-                {weekday}
-              </span>
-            ))}
-          </div>
-
-          <div className="grid grid-cols-7 gap-y-1 justify-items-center">
-            {monthGrid(month).map((day) => (
-              <button
-                key={day.toISOString()}
-                type="button"
-                onClick={() => pickDay(day)}
-                className={cn(
-                  "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
-                  dayClass(day),
-                )}
-              >
-                {day.getDate()}
-              </button>
-            ))}
-          </div>
+              {day.getDate()}
+            </button>
+          ))}
+        </div>
 
-          <div className="mt-2 flex justify-between border-t border-border pt-2">
+        <div className="mt-2 flex justify-between border-t border-border pt-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              pickDay(today());
+              setMonth(today());
+            }}
+          >
+            {t("filters.today")}
+          </Button>
+          {value && (
             <Button
               type="button"
               variant="ghost"
               size="sm"
               onClick={() => {
-                pickDay(today());
-                setMonth(today());
+                onChange(undefined);
+                setOpen(false);
               }}
             >
-              {t("filters.today")}
+              {t("filters.clear")}
             </Button>
-            {value && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  onChange(undefined);
-                  setOpen(false);
-                }}
-              >
-                {t("filters.clear")}
-              </Button>
-            )}
-          </div>
+          )}
         </div>
-      )}
-    </div>
+      </PopoverContent>
+    </Popover>
   );
 }

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

@@ -2,7 +2,7 @@
 
 import { Calendar, Check, ChevronLeft, ChevronRight } from "lucide-react";
 import type { JSX } from "react";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import {
   addDays,
@@ -19,6 +19,11 @@ import {
   weekdayLabels,
 } from "#core/_utils/calendar";
 import { Button } from "#core/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "#core/components/ui/popover";
 import { useI18n } from "#core/contexts";
 import { cn } from "#core/lib/utils";
 
@@ -56,37 +61,12 @@ export function DateRangePicker({
   label,
 }: DateRangePickerProps): JSX.Element {
   const { t, locale } = useI18n();
-  const containerRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState(false);
 
   const from = fromIsoDay(value.from);
   const to = fromIsoDay(value.to);
   const [month, setMonth] = useState<Date>(() => from ?? to ?? today());
 
-  // Fecha ao clicar fora e no ESC — o painel é flutuante e não tem overlay
-  // próprio, então quem fecha é o documento.
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const onPointerDown = (event: MouseEvent): void => {
-      if (!containerRef.current?.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
-    const onKeyDown = (event: KeyboardEvent): void => {
-      if (event.key === "Escape") {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", onPointerDown);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      document.removeEventListener("mousedown", onPointerDown);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [open]);
-
   const pickDay = (day: Date): void => {
     const iso = toIsoDay(day);
     // Intervalo completo (ou vazio) recomeça a seleção; com só o início, o
@@ -138,113 +118,104 @@ export function DateRangePicker({
   const hasValue = Boolean(value.from || value.to);
 
   return (
-    <div className="relative" ref={containerRef}>
-      <button
-        type="button"
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
         disabled={disabled}
-        aria-haspopup="dialog"
-        aria-expanded={open}
         aria-label={label}
-        onClick={() => setOpen((current) => !current)}
         className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
       >
         <span className={cn("truncate", !hasValue && "text-muted-foreground")}>
           {summary()}
         </span>
         <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
-      </button>
-
-      {open && (
-        <div
-          role="dialog"
-          className="absolute left-0 z-50 mt-2 w-[19rem] rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg"
-        >
-          {presets.length > 0 && (
-            <div className="mb-3 flex flex-wrap gap-1.5">
-              {presets.map((days) => (
-                <button
-                  key={days}
-                  type="button"
-                  onClick={() => applyPreset(days)}
-                  className={cn(
-                    "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs transition-colors",
-                    isPresetActive(days)
-                      ? "border-primary bg-primary text-primary-foreground"
-                      : "border-border hover:border-ring",
-                  )}
-                >
-                  {isPresetActive(days) && <Check className="h-3 w-3" />}
-                  {t("filters.lastDays", { days })}
-                </button>
-              ))}
-            </div>
-          )}
-
-          <div className="mb-2 flex items-center justify-between">
-            <Button
-              type="button"
-              variant="ghost"
-              size="iconSm"
-              aria-label={t("filters.previousMonth")}
-              onClick={() => setMonth(addMonths(month, -1))}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <span className="text-sm font-medium capitalize">
-              {monthLabel(month, locale)}
-            </span>
-            <Button
-              type="button"
-              variant="ghost"
-              size="iconSm"
-              aria-label={t("filters.nextMonth")}
-              onClick={() => setMonth(addMonths(month, 1))}
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-          </div>
-
-          <div className="mb-1 grid grid-cols-7 text-center text-xs text-muted-foreground">
-            {weekdayLabels(locale).map((weekday) => (
-              <span key={weekday} className="capitalize">
-                {weekday}
-              </span>
-            ))}
-          </div>
+      </PopoverTrigger>
 
-          <div className="grid grid-cols-7 gap-y-1 justify-items-center">
-            {monthGrid(month).map((day) => (
+      <PopoverContent className="w-[19rem]">
+        {presets.length > 0 && (
+          <div className="mb-3 flex flex-wrap gap-1.5">
+            {presets.map((days) => (
               <button
-                key={day.toISOString()}
+                key={days}
                 type="button"
-                onClick={() => pickDay(day)}
+                onClick={() => applyPreset(days)}
                 className={cn(
-                  "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
-                  dayClass(day),
+                  "flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs transition-colors",
+                  isPresetActive(days)
+                    ? "border-primary bg-primary text-primary-foreground"
+                    : "border-border hover:border-ring",
                 )}
               >
-                {day.getDate()}
+                {isPresetActive(days) && <Check className="h-3 w-3" />}
+                {t("filters.lastDays", { days })}
               </button>
             ))}
           </div>
+        )}
+
+        <div className="mb-2 flex items-center justify-between">
+          <Button
+            type="button"
+            variant="ghost"
+            size="iconSm"
+            aria-label={t("filters.previousMonth")}
+            onClick={() => setMonth(addMonths(month, -1))}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <span className="text-sm font-medium capitalize">
+            {monthLabel(month, locale)}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="iconSm"
+            aria-label={t("filters.nextMonth")}
+            onClick={() => setMonth(addMonths(month, 1))}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
 
-          {hasValue && (
-            <div className="mt-2 flex justify-end border-t border-border pt-2">
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                onClick={() => {
-                  onChange({});
-                  setOpen(false);
-                }}
-              >
-                {t("filters.clear")}
-              </Button>
-            </div>
-          )}
+        <div className="mb-1 grid grid-cols-7 text-center text-xs text-muted-foreground">
+          {weekdayLabels(locale).map((weekday) => (
+            <span key={weekday} className="capitalize">
+              {weekday}
+            </span>
+          ))}
         </div>
-      )}
-    </div>
+
+        <div className="grid grid-cols-7 gap-y-1 justify-items-center">
+          {monthGrid(month).map((day) => (
+            <button
+              key={day.toISOString()}
+              type="button"
+              onClick={() => pickDay(day)}
+              className={cn(
+                "flex h-8 w-8 items-center justify-center rounded-full text-sm transition-colors hover:bg-accent",
+                dayClass(day),
+              )}
+            >
+              {day.getDate()}
+            </button>
+          ))}
+        </div>
+
+        {hasValue && (
+          <div className="mt-2 flex justify-end border-t border-border pt-2">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                onChange({});
+                setOpen(false);
+              }}
+            >
+              {t("filters.clear")}
+            </Button>
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
   );
 }

package/src/components/ui/index.ts

@@ -22,6 +22,7 @@ export * from "./input";
 export * from "./job-progress";
 export * from "./label";
 export * from "./password-requirements";
+export * from "./popover";
 export * from "./row-actions";
 export * from "./segmented-control";
 export * from "./select";

package/src/components/ui/popover.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+/** Folga entre o gatilho e o painel — a mesma do `DropdownMenu`. */
+const DEFAULT_SIDE_OFFSET = 4;
+
+/**
+ * Painel flutuante ancorado num gatilho — a casca de calendário, seletor de
+ * dia e afins.
+ *
+ * O `Portal` é a razão de este arquivo existir. Painel posicionado com
+ * `absolute` dentro do próprio formulário vive **dentro** da área rolável do
+ * modal (`DialogForm`), e ali ele: cresce o `scrollHeight`, faz aparecer barra
+ * horizontal, e é cortado pela borda do modal. Saindo para o `body`, o painel
+ * passa por cima do modal — que é o desenho certo — e o modal não sente nada.
+ *
+ * O resto vem de graça do Radix e some daqui: fechar no Esc e no clique fora
+ * (respeitando a pilha de camadas, então o Esc fecha o painel **sem** fechar o
+ * modal atrás), virar para cima quando não cabe embaixo e devolver o foco ao
+ * gatilho.
+ */
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(
+  (
+    { className, align = "start", sideOffset = DEFAULT_SIDE_OFFSET, ...props },
+    ref,
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        // `collisionPadding` afasta o painel da borda da janela antes de ele
+        // encostar: sem folga, o calendário aberto num campo do rodapé fica
+        // com a última linha rente ao fim da tela.
+        collisionPadding={8}
+        className={cn(
+          "z-50 max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-xl border border-border bg-popover p-3 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  ),
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/src/components/ui/select.tsx

@@ -38,7 +38,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "relative z-50 max-h-[min(24rem,var(--radix-select-content-available-height))] min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         position === "popper" && "data-[side=bottom]:translate-y-1",
         className,
       )}

package/src/features/audit/hooks/use-audit-trail.ts

@@ -14,6 +14,7 @@ import {
   auditService,
 } from "#core/features/audit/services/audit.service";
 import type { FiltersState } from "#core/hooks/use-filters";
+import { useLatestRequest } from "#core/hooks/use-latest-request";
 import { useListQuery } from "#core/hooks/use-list-query";
 import { useRequest } from "#core/hooks/use-request";
 
@@ -35,18 +36,20 @@ export interface UseAuditTrailResult {
 export function useAuditTrail(): UseAuditTrailResult {
   const { run, loading } = useRequest();
 
+  const latest = useLatestRequest();
   const list = useListQuery("/audit/data-changes/filter-schema", 20);
 
   const [rows, setRows] = useState<AuditDataChange[]>([]);
   const [total, setTotal] = useState(0);
 
   const fetch = useCallback(async () => {
-    const res = await run(() => auditService.listDataChanges(list.query));
+    // `latest` descarta a resposta que outra busca já passou para trás.
+    const res = await latest(() => run(() => auditService.listDataChanges(list.query)));
     if (res) {
       setRows(res.items);
       setTotal(res.meta.total);
     }
-  }, [run, list.query]);
+  }, [latest, run, list.query]);
 
   // Não busca antes da URL ser lida: a query sairia sem o filtro, e essa
   // resposta pode chegar depois da certa e pintar a tela com tudo.

package/src/features/logs/hooks/use-request-logs.ts

@@ -13,6 +13,7 @@ import type { FilterValues } from "#core/_utils/filter";
 import { RequestOutcome } from "#core/features/logs/enums/request-outcome.enum";
 import { logsService, RequestLog } from "#core/features/logs/services/logs.service";
 import type { FiltersState } from "#core/hooks/use-filters";
+import { useLatestRequest } from "#core/hooks/use-latest-request";
 import { useListQuery } from "#core/hooks/use-list-query";
 import { useRequest } from "#core/hooks/use-request";
 
@@ -44,6 +45,7 @@ export interface UseRequestLogsResult {
 export function useRequestLogs(): UseRequestLogsResult {
   const { run, loading } = useRequest();
 
+  const latest = useLatestRequest();
   const list = useListQuery(
     "/audit/requests/filter-schema",
     20,
@@ -54,12 +56,13 @@ export function useRequestLogs(): UseRequestLogsResult {
   const [total, setTotal] = useState(0);
 
   const fetch = useCallback(async () => {
-    const res = await run(() => logsService.listRequests(list.query));
+    // `latest` descarta a resposta que outra busca já passou para trás.
+    const res = await latest(() => run(() => logsService.listRequests(list.query)));
     if (res) {
       setRows(res.items);
       setTotal(res.meta.total);
     }
-  }, [run, list.query]);
+  }, [latest, run, list.query]);
 
   // Não busca antes da URL ser lida: a query sairia sem o filtro, e essa
   // resposta pode chegar depois da certa e pintar a tela com tudo.

package/src/features/queues/hooks/use-queue-jobs.ts

@@ -9,6 +9,7 @@ import {
   QueueJobState,
   queuesService,
 } from "#core/features/queues/services/queues.service";
+import { useLatestRequest } from "#core/hooks/use-latest-request";
 import { useRequest } from "#core/hooks/use-request";
 
 const EMPTY_COUNTS: QueueCounts = {
@@ -45,6 +46,7 @@ export interface UseQueueJobsResult {
  */
 export function useQueueJobs(): UseQueueJobsResult {
   const { run, loading } = useRequest();
+  const latest = useLatestRequest();
 
   const [rows, setRows] = useState<QueueJob[]>([]);
   const [counts, setCounts] = useState<QueueCounts>(EMPTY_COUNTS);
@@ -57,19 +59,31 @@ export function useQueueJobs(): UseQueueJobsResult {
   const [sorting, setSorting] = useState<SortingState>([]);
 
   const fetch = useCallback(async (): Promise<void> => {
-    const [list, summary] = await Promise.all([
-      // O `page` da tabela é base zero; o da API, base um.
-      run(() =>
-        queuesService.list({
-          state,
-          page: page + 1,
-          limit: pageSize,
-          sortBy: sorting[0]?.id,
-          sortDir: sorting[0] ? (sorting[0].desc ? "DESC" : "ASC") : undefined,
-        }),
-      ),
-      run(() => queuesService.counts()),
-    ]);
+    // `latest` descarta a resposta que outra busca já passou para trás —
+    // trocar de estado e de página em sequência devolve as duas fora de ordem.
+    const result = await latest(() =>
+      Promise.all([
+        // O `page` da tabela é base zero; o da API, base um.
+        run(() =>
+          queuesService.list({
+            state,
+            page: page + 1,
+            limit: pageSize,
+            sortBy: sorting[0]?.id,
+            sortDir: sorting[0]
+              ? sorting[0].desc
+                ? "DESC"
+                : "ASC"
+              : undefined,
+          }),
+        ),
+        run(() => queuesService.counts()),
+      ]),
+    );
+    if (!result) {
+      return;
+    }
+    const [list, summary] = result;
     if (list) {
       setRows(list.items);
       setTotal(list.meta.total);
@@ -77,7 +91,7 @@ export function useQueueJobs(): UseQueueJobsResult {
     if (summary) {
       setCounts(summary);
     }
-  }, [run, state, page, pageSize, sorting]);
+  }, [latest, run, state, page, pageSize, sorting]);
 
   useEffect(() => {
     void fetch();

package/src/features/users/hooks/use-users.ts

@@ -19,6 +19,7 @@ import {
   usersService,
 } from "#core/features/users/services/users.service";
 import type { FiltersState } from "#core/hooks/use-filters";
+import { useLatestRequest } from "#core/hooks/use-latest-request";
 import { useListQuery } from "#core/hooks/use-list-query";
 import { RequestOperation, useRequest } from "#core/hooks/use-request";
 
@@ -58,6 +59,7 @@ export function useUsers(): UseUsersResult {
   const { t } = useI18n();
   const { hasPermission } = useAuth();
 
+  const latest = useLatestRequest();
   const list = useListQuery("/users/filter-schema");
 
   const [rows, setRows] = useState<User[]>([]);
@@ -66,12 +68,13 @@ export function useUsers(): UseUsersResult {
   const [total, setTotal] = useState(0);
 
   const fetch = useCallback(async () => {
-    const res = await run(() => usersService.list(list.query));
+    // `latest` descarta a resposta que outra busca já passou para trás.
+    const res = await latest(() => run(() => usersService.list(list.query)));
     if (res) {
       setRows(res.items);
       setTotal(res.meta.total);
     }
-  }, [run, list.query]);
+  }, [latest, run, list.query]);
 
   // Não busca antes da URL ser lida: a query sairia sem o filtro, e essa
   // resposta pode chegar depois da certa e pintar a tela com tudo.

package/src/hooks/use-latest-request.ts

@@ -0,0 +1,30 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+
+/** Envelope que devolve `null` quando a resposta já foi passada para trás. */
+export type LatestRequest = <T>(request: () => Promise<T>) => Promise<T | null>;
+
+/**
+ * Guarda contra resposta fora de ordem numa listagem.
+ *
+ * Trocar de página, ordenar ou digitar na busca dispara uma requisição por
+ * toque, e elas não voltam na ordem em que saíram — a mais lenta chega depois
+ * e pinta a tela com o resultado que o usuário já abandonou. É o mesmo perigo
+ * que a espera pelo `list.ready` já cobre na primeira busca, só que ele não
+ * acaba na hidratação: vale para toda troca de página daí em diante.
+ *
+ * Só para busca de listagem. Ação de linha (salvar, excluir) precisa do
+ * resultado dela mesma, não do mais recente.
+ */
+export const useLatestRequest = (): LatestRequest => {
+  const lastId = useRef(0);
+
+  return useCallback(async <T,>(request: () => Promise<T>): Promise<
+    T | null
+  > => {
+    const id = ++lastId.current;
+    const result = await request();
+    return id === lastId.current ? result : null;
+  }, []);
+};

package/src/index.ts

@@ -88,6 +88,8 @@ export {
   JOB_PROGRESS_EVENT,
   useJobProgress,
 } from "#core/hooks/use-job-progress";
+export type { LatestRequest } from "#core/hooks/use-latest-request";
+export { useLatestRequest } from "#core/hooks/use-latest-request";
 export type { UseListQueryResult } from "#core/hooks/use-list-query";
 export { useListQuery } from "#core/hooks/use-list-query";
 export type { RunOptions, UseRequestResult } from "#core/hooks/use-request";