rl-core-front 0.18.3 → 0.18.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.18.3",
+  "version": "0.18.5",
   "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

@@ -324,11 +324,18 @@ export function Combobox({
          * fecha em seguida. No modo múltiplo o campo é onde ficam os itens já
          * escolhidos: cobri-lo esconderia justamente o que se acabou de marcar,
          * e o painel continua aberto para marcar o próximo.
+         *
+         * Só quando abre para **baixo**: ali o que fica sobre o campo é a
+         * busca, e soltar o clique nela não faz nada. Virado para cima — campo
+         * no fim da tela, lista longa — cobrir o campo punha a **última opção**
+         * sob o cursor, e o `pointerup` do mesmo clique que abriu a escolhia:
+         * o painel fechava na hora com um valor que ninguém pediu, e a tela
+         * parecia um select que "não abre". Para cima, o painel encosta no
+         * campo sem cobri-lo.
          */
         className={cn(
           "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)",
+          !multiple && "data-[side=bottom]:-mt-(--radix-dropdown-menu-trigger-height)",
         )}
         align="start"
         sideOffset={multiple ? 4 : 0}

package/src/components/ui/data-table.tsx

@@ -31,7 +31,11 @@ import {
   GripVertical,
   SlidersHorizontal,
 } from "lucide-react";
-import type { JSX, PointerEvent as ReactPointerEvent } from "react";
+import type {
+  CSSProperties,
+  JSX,
+  PointerEvent as ReactPointerEvent,
+} from "react";
 import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 
 import { countConditions } from "#core/_utils/advanced-filter";
@@ -257,6 +261,15 @@ interface DataTableProps<T extends RowData> {
    * enquanto a listagem estiver na tela; não é gravada.
    */
   collapsibleGroups?: boolean;
+  /**
+   * As seções que nascem fechadas — por chave.
+   *
+   * Para a listagem longa em que só uma seção interessa de saída: o ano
+   * agrupado por mês abre com o mês corrente à vista e os outros na faixa.
+   * Lida uma vez, na montagem; quem quiser reaplicar quando os dados trocam
+   * remonta a tabela (`key`). Sem `collapsibleGroups` não tem efeito.
+   */
+  defaultCollapsedGroups?: string[];
   /**
    * A ordem das seções.
    *
@@ -286,6 +299,26 @@ export interface DataTableColumnMeta {
    * É o caso da coluna de ações: sem isso o `<table>` a esticava.
    */
   shrink?: boolean;
+  /**
+   * A célula quebra em várias linhas em vez de cortar com reticências.
+   *
+   * O padrão é cortar: numa tabela, a linha que cresce para caber um texto
+   * desloca todas as vizinhas, e correr o olho por uma coluna deixa de ser
+   * possível. Quem precisa do texto inteiro tem o detalhe da linha.
+   *
+   * Liga-se onde a célula não é texto corrido e sim um conjunto que empilha —
+   * marcadores, chips, uma lista de badges: ali a quebra é o desenho, e cortar
+   * esconderia item, não fim de frase.
+   */
+  wrap?: boolean;
+  /**
+   * O teto de largura da célula, quando o padrão não serve.
+   *
+   * Aceita qualquer largura CSS (`"12rem"`, `"320px"`). Existe porque a coluna
+   * que carrega o nome principal da linha merece mais espaço que a de apoio, e
+   * sem isso as duas cortariam no mesmo ponto.
+   */
+  maxWidth?: string;
   /**
    * A coluna existe, mas não aparece até alguém ligá-la em "Colunas".
    *
@@ -418,6 +451,47 @@ function shrinkClass(columnDef: { meta?: unknown }): string | undefined {
   return meta?.shrink ? "w-px whitespace-nowrap" : undefined;
 }
 
+/**
+ * O teto padrão de uma célula — 24rem, a largura em que uma frase ainda se lê
+ * inteira e duas colunas de apoio ainda cabem ao lado.
+ */
+const CELL_MAX_WIDTH = "24rem";
+
+/**
+ * Como a célula se comporta quando o conteúdo não cabe: corta com reticências.
+ *
+ * É o padrão, e não um ajuste por tela: sem ele, cada tabela nova volta a
+ * crescer em altura no primeiro texto longo, e quem monta a coluna precisa
+ * lembrar de podá-la — lembrar é o que ninguém faz.
+ *
+ * A coluna que encolhe (`shrink`) fica fora: ela já não cresce, e um teto ali
+ * 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 } {
+  const meta = columnDef.meta as DataTableColumnMeta | undefined;
+
+  if (meta?.shrink || meta?.wrap) {
+    return { className: shrinkClass(columnDef) };
+  }
+
+  /*
+    O corte vale para a célula **e** para o que ela tem dentro.
+
+    `truncate` na `<td>` sozinho só clipa quando o conteúdo é um bloco — um
+    `<div>` que envolve o texto, que é como metade das colunas é escrita: o
+    texto some no meio da palavra, sem as reticências, porque quem transborda é
+    o filho e não a célula. Repetindo o corte no filho direto, as reticências
+    aparecem nos dois casos.
+  */
+  return {
+    className: "truncate [&>*]:truncate",
+    style: { maxWidth: meta?.maxWidth ?? CELL_MAX_WIDTH },
+  };
+}
+
 export function DataTable<T extends RowData>({
   columns,
   data,
@@ -448,11 +522,14 @@ export function DataTable<T extends RowData>({
   renderGroupHeader,
   groupOrder,
   collapsibleGroups = false,
+  defaultCollapsedGroups,
 }: DataTableProps<T>): JSX.Element {
   const { t } = useI18n();
   const [colsOpen, setColsOpen] = useState(false);
   /** As seções fechadas, por chave. */
-  const [collapsedGroups, setCollapsedGroups] = useState<string[]>([]);
+  const [collapsedGroups, setCollapsedGroups] = useState<string[]>(
+    () => defaultCollapsedGroups ?? [],
+  );
   const [filtersOpen, setFiltersOpen] = useState(false);
   /** A linha na mão e a linha embaixo do dedo, enquanto o arrasto dura. */
   const [draggedRow, setDraggedRow] = useState<string | null>(null);
@@ -1114,7 +1191,7 @@ export function DataTable<T extends RowData>({
                           {row.getVisibleCells().map((cell) => (
                             <TableCell
                               key={cell.id}
-                              className={shrinkClass(cell.column.columnDef)}
+                              {...cellStyle(cell.column.columnDef)}
                             >
                               {flexRender(
                                 cell.column.columnDef.cell,
@@ -1139,7 +1216,7 @@ export function DataTable<T extends RowData>({
                     {grupo.headers.map((header) => (
                       <TableCell
                         key={header.id}
-                        className={shrinkClass(header.column.columnDef)}
+                        {...cellStyle(header.column.columnDef)}
                       >
                         {header.isPlaceholder
                           ? null