rl-core-front 0.18.6 → 0.18.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.6",
+  "version": "0.18.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/data-table.tsx

@@ -34,6 +34,7 @@ import {
 import type {
   CSSProperties,
   JSX,
+  MouseEvent as ReactMouseEvent,
   PointerEvent as ReactPointerEvent,
 } from "react";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
@@ -468,9 +469,40 @@ const CELL_MAX_WIDTH = "24rem";
  * cortaria botão de ação. A que declara `wrap` também: nela a quebra é o
  * desenho.
  */
-function cellStyle(columnDef: {
-  meta?: unknown;
-}): { className?: string; style?: CSSProperties } {
+/** A célula (ou o que ela tem dentro) não coube e está cortada. */
+function isClipped(cell: HTMLElement): boolean {
+  if (cell.scrollWidth > cell.clientWidth) {
+    return true;
+  }
+
+  return Array.from(cell.children).some(
+    (child) => child.scrollWidth > child.clientWidth,
+  );
+}
+
+/**
+ * Abre a célula sob o cursor — se houver o que abrir.
+ *
+ * A medição acontece aqui, e não em cada render: enquanto ninguém passa o
+ * mouse, isto não custa nada. E mexer na `dataset` em vez de subir estado
+ * evita re-renderizar a tabela inteira a cada célula que o ponteiro cruza.
+ */
+function expandIfClipped(event: ReactMouseEvent<HTMLTableCellElement>): void {
+  if (isClipped(event.currentTarget)) {
+    event.currentTarget.dataset.expand = "true";
+  }
+}
+
+function collapse(event: ReactMouseEvent<HTMLTableCellElement>): void {
+  delete event.currentTarget.dataset.expand;
+}
+
+function cellStyle(columnDef: { meta?: unknown }): {
+  className?: string;
+  style?: CSSProperties;
+  onMouseEnter?: (event: ReactMouseEvent<HTMLTableCellElement>) => void;
+  onMouseLeave?: (event: ReactMouseEvent<HTMLTableCellElement>) => void;
+} {
   const meta = columnDef.meta as DataTableColumnMeta | undefined;
 
   if (meta?.shrink || meta?.wrap) {
@@ -487,16 +519,24 @@ function cellStyle(columnDef: {
     aparecem nos dois casos.
   */
   /*
-    E o mouse em cima devolve o texto inteiro: no hover só o `white-space`
-    muda, a frase volta a quebrar e a célula cresce em altura. É o mesmo gesto
-    das descrições do Financeiro — sem `title`, que só aparece depois de um
-    segundo parado, e sem tooltip flutuante, que sairia da tabela e taparia a
-    linha de baixo.
+    E o mouse em cima devolve o texto inteiro — mas **só na célula que está de
+    fato cortada**.
+
+    Com `hover:` puro, passar o mouse por uma célula que já cabia inteira a
+    fazia quebrar em duas linhas do mesmo jeito, e a linha inteira pulava sob o
+    cursor. CSS não sabe se houve corte; quem sabe é o layout já calculado, daí
+    a medição no `mouseenter` — que não custa render nenhum enquanto ninguém
+    passa o mouse. O `data-expand` liga as duas regras abaixo.
+
+    Sem `title`, que só aparece depois de um segundo parado, e sem tooltip
+    flutuante, que sairia da tabela e taparia a linha de baixo.
   */
   return {
     className:
-      "truncate hover:whitespace-normal [&>*]:truncate hover:[&>*]:whitespace-normal",
+      "truncate [&>*]:truncate data-[expand=true]:whitespace-normal data-[expand=true]:[&>*]:whitespace-normal",
     style: { maxWidth: meta?.maxWidth ?? CELL_MAX_WIDTH },
+    onMouseEnter: expandIfClipped,
+    onMouseLeave: collapse,
   };
 }