rl-core-front 0.11.0 → 0.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "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,
@@ -141,20 +149,51 @@ 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>

package/src/components/ui/table.tsx

@@ -57,8 +57,17 @@ const TableHead = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <th
     ref={ref}
+    /*
+     * Sem `uppercase`: a caixa alta só pegava em metade dos cabeçalhos.
+     *
+     * A coluna que ordena desenha o rótulo dentro de um `<button>`, e o estilo
+     * do próprio navegador dá `text-transform: none` a botão — o Preflight do
+     * Tailwind herda fonte, peso e cor, mas não a caixa. O resultado era uma
+     * tabela com "Personagem" ao lado de "SELOS", conforme a coluna tivesse
+     * seta ou não. Um desenho só, e é o do texto como foi escrito.
+     */
     className={cn(
-      "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-wide text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-11 px-4 text-left align-middle text-xs font-semibold text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className,
     )}
     {...props}

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...",