@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/DataTable/DataTable.css

@@ -154,6 +154,26 @@
   outline-offset: -2px;
 }
 
+/* ── Linha de grupo (prop rowGroup) ──
+   Um <th scope="rowgroup"> que atravessa a tabela. Não é clicável nem
+   selecionável, então o hover da linha comum não se aplica. */
+.umds-datatable__row--group,
+.umds-datatable__row--group:hover {
+  background: var(--umds-semantic-color-background-light); /* #F4F6F9 */
+}
+
+.umds-datatable__group {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* 8px 16px */
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: 700;
+  text-align: left;
+  color: var(--umds-semantic-color-neutral-dark-down); /* #565656 */
+}
+
+.umds-datatable--compact .umds-datatable__group {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+}
+
 /* ── Células ── */
 .umds-datatable__td {
   padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* protótipo --space-3 (12px): candidato a novo token; 16px */
@@ -192,6 +212,73 @@
   padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano); /* 6px: candidato a novo token; 4px; 8px */
 }
 
+/* ── Cabeçalho escuro (headerVariant="dark") ──
+   O navy do CrisDoc, com o texto claro do par `background-dark` / `neutral-light-pure`
+   (os dois viram juntos com o tema). Ordenação e foco no cabeçalho escuro usam o
+   texto claro, não o azul de ação, que não tem contraste sobre o navy. */
+.umds-datatable--header-dark .umds-datatable__thead {
+  background: var(--umds-semantic-color-background-dark);
+  border-bottom-color: var(--umds-semantic-color-background-dark);
+}
+
+.umds-datatable--header-dark .umds-datatable__th,
+.umds-datatable--header-dark .umds-datatable__th--sortable:hover,
+.umds-datatable--header-dark .umds-datatable__th--sorted {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-datatable--header-dark .umds-datatable__sort-icon {
+  color: var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-datatable--header-dark .umds-datatable__sort-icon--active {
+  color: inherit;
+}
+
+.umds-datatable--header-dark .umds-datatable__sort-button:focus-visible {
+  outline-color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+/* ── Caixa alta no cabeçalho (headerUppercase) ── */
+.umds-datatable--header-uppercase .umds-datatable__th {
+  text-transform: uppercase;
+  letter-spacing: var(--umds-primitive-font-letter-spacing-wide);
+}
+
+/* ── Cabeçalho só para o leitor de tela (hideHeader) ──
+   Visualmente oculto, não removido: as colunas continuam nomeadas. */
+.umds-datatable--header-hidden .umds-datatable__thead {
+  position: absolute;
+  width: var(--umds-primitive-border-width-hairline);
+  height: var(--umds-primitive-border-width-hairline);
+  margin: calc(-1 * var(--umds-primitive-border-width-hairline));
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Zebra (striped) ── */
+.umds-datatable__row--striped,
+.umds-datatable__row--striped.umds-datatable__row--group {
+  background: var(--umds-semantic-color-background-light);
+}
+
+.umds-datatable__row--striped:hover {
+  background: var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-datatable__row--striped.umds-datatable__row--selected {
+  background: var(--umds-semantic-color-primary-light);
+}
+
+/* ── Linha destacada (selectedRowKeys / isRowSelected) ──
+   Além do fundo, uma barra de 4px à esquerda: o destaque não depende só da cor. */
+.umds-datatable__row--highlighted > :first-child {
+  box-shadow: inset var(--umds-primitive-border-width-thick) 0 0 var(--umds-semantic-color-primary-pure);
+}
+
 /* ── Estado vazio ── */
 .umds-datatable__td--empty {
   padding: var(--umds-primitive-spacing-md) var(--umds-primitive-spacing-xxxs); /* 48px 16px */
@@ -213,6 +300,106 @@
   color: var(--umds-semantic-color-neutral-light-down); /* #D5D5D5 */
 }
 
+.umds-datatable__empty-desc {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+/* ── Linhas hierárquicas (treeData) ──
+   `role="treegrid"`. A primeira coluna de dados leva o recuo por nível, os fios e o
+   botão de expandir/recolher. Os fios são colunas de 24px (o passo do recuo) desenhadas
+   por trás do conteúdo, de ponta a ponta da célula, então atravessam o padding e se
+   emendam de uma linha à outra. */
+.umds-datatable__td--tree {
+  position: relative;
+}
+
+.umds-datatable__tree-guides {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--umds-primitive-spacing-xxxs);
+  display: flex;
+  pointer-events: none;
+}
+
+.umds-datatable__guide {
+  position: relative;
+  flex: 0 0 var(--umds-primitive-spacing-xxs);
+}
+
+.umds-datatable__guide--line::before,
+.umds-datatable__guide--tee::before,
+.umds-datatable__guide--elbow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  border-left: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-datatable__guide--elbow::before {
+  bottom: 50%;
+}
+
+.umds-datatable__guide--tee::after,
+.umds-datatable__guide--elbow::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  right: 0;
+  border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-datatable__tree-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck);
+  min-width: 0;
+}
+
+.umds-datatable__tree-text {
+  min-width: 0;
+}
+
+.umds-datatable__tree-toggle,
+.umds-datatable__tree-spacer {
+  flex: 0 0 var(--umds-primitive-spacing-xxs);
+  width: var(--umds-primitive-spacing-xxs);
+  height: var(--umds-primitive-spacing-xxs);
+}
+
+.umds-datatable__tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: none;
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+}
+
+.umds-datatable__tree-toggle:hover {
+  background: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-datatable__tree-toggle:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: 2px;
+}
+
+.umds-datatable--tree .umds-datatable__row:focus-visible {
+  outline: 2px solid var(--umds-semantic-color-primary-pure);
+  outline-offset: -2px;
+}
+
 /* ── Skeleton ── */
 .umds-datatable__skeleton {
   height: 16px;
@@ -237,3 +424,70 @@
   0%   { background-position: 200% 0; }
   100% { background-position: -200% 0; }
 }
+
+/* ── Variante document (variant="document") ──
+   Tabela de CONTEÚDO de documento (itens de nota, cotações): lê-se e imprime-se,
+   não se opera. Sem hover, sem cursor, sem cabeçalho grudado; grade de bordas
+   finas em todas as células, como no papel. Na impressão o cabeçalho se repete
+   a cada página e uma linha nunca é cortada ao meio. */
+.umds-datatable--document {
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-none);
+  background: transparent;
+}
+
+.umds-datatable--document .umds-datatable__table {
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-datatable--document .umds-datatable__thead {
+  position: static;
+  border-bottom: none;
+}
+
+.umds-datatable--document .umds-datatable__th,
+.umds-datatable--document .umds-datatable__td {
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  vertical-align: top;
+  user-select: auto;
+}
+
+.umds-datatable--document .umds-datatable__th {
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px: no papel o cabeçalho é lido, não escaneado */
+  white-space: normal;
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-datatable--document .umds-datatable__row,
+.umds-datatable--document .umds-datatable__row:hover {
+  background: transparent;
+  border-bottom: none;
+}
+
+.umds-datatable--document .umds-datatable__td {
+  overflow-wrap: anywhere;
+}
+
+/* Compacto na tabela de documento: fonte de 12px (a menor da escala) e célula de 4px × 8px. */
+.umds-datatable--document.umds-datatable--compact .umds-datatable__th,
+.umds-datatable--document.umds-datatable--compact .umds-datatable__td {
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano);
+  font-size: var(--umds-primitive-font-size-xxxs);
+}
+
+@media print {
+  .umds-datatable--document {
+    overflow-x: visible;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .umds-datatable--document .umds-datatable__thead {
+    display: table-header-group;
+  }
+
+  .umds-datatable--document .umds-datatable__row {
+    break-inside: avoid;
+    page-break-inside: avoid;
+  }
+}

package/dist/components/DataTable/DataTable.d.ts

@@ -7,8 +7,10 @@ import './DataTable.css';
  * @property {string} width - Largura fixa da coluna (ex.: "120px")
  * @property {string} align - Alinhamento do conteúdo: 'left' | 'center' | 'right'
  * @property {function} render - Renderização customizada da célula: recebe a linha e o
- *   índice e retorna o conteúdo (ReactNode no React; no Vue, prefira retornar string).
- *   Sem `render`, a célula exibe `row[key]` — que também aceita ReactNode diretamente.
+ *   índice e retorna o conteúdo. No React devolve qualquer nó (badge, avatar, botão).
+ *   No Vue o retorno é tratado como TEXTO: para célula com markup use o slot
+ *   `#cell-<key>` (recebe `{ row, value, rowIndex }`), que vale sobre o `render`.
+ *   Sem `render` nem slot, a célula exibe `row[key]`.
  */
 export interface DataTableColumn {
     key: string;
@@ -32,7 +34,36 @@ export interface DataTableColumn {
  *   (selectedKeys/onSelectKeys) em vez de índice — sobrevive a paginação e ordenação.
  * @property {Array<string|number>} selectedKeys - Chaves das linhas selecionadas (controlado;
  *   requer rowKey)
- * @property {string} density - Densidade das células: 'default' | 'compact'
+ * @property {string} variant - 'default' (tabela de interface) | 'document' (tabela de CONTEÚDO de documento: sem ordenação, seleção nem clique de linha, bordas finas, cabeçalho repetido e linha inteira por página na impressão)
+ * @property {string} density - Densidade das células: 'default' | 'compact'. Com `variant="document"`,
+ *   o compacto também leva a fonte a 12px (a escala do DS não tem 13px).
+ * @property {string} headerVariant - Cabeçalho: 'default' (claro) | 'dark' (navy, texto claro; o cabeçalho
+ *   escuro do CrisDoc). Cores pelos tokens `background-dark` e `neutral-light-pure`, então o tema acompanha.
+ * @property {boolean} headerUppercase - Rótulos do cabeçalho em caixa alta. Opt-in; vale para qualquer
+ *   `headerVariant`.
+ * @property {boolean} striped - Zebra: as linhas ímpares (a segunda, a quarta…) ganham o fundo claro.
+ * @property {Array<string|number>} selectedRowKeys - Chaves das linhas DESTACADAS (requer rowKey). Só
+ *   destaque visual (fundo, barra à esquerda e `aria-selected`), sem checkbox: serve à linha "aberta" de
+ *   uma lista mestre-detalhe. Não confunda com `selectedKeys`, que é a seleção por checkbox.
+ * @property {function} isRowSelected - Destaque por função `(row, rowIndex) => boolean`, com o mesmo
+ *   efeito de `selectedRowKeys`. Use quando a regra não cabe numa lista de chaves.
+ * @property {IconProp} emptyIcon - Ícone do estado vazio (objeto Font Awesome importado). Padrão: `faInbox`.
+ * @property {string} emptyDescription - Texto de apoio abaixo da `emptyMessage` do estado vazio
+ * @property {boolean} hideHeader - Esconde o cabeçalho SÓ NA TELA: as colunas continuam nomeadas para o
+ *   leitor de tela (a linha de cabeçalho fica visualmente oculta, não removida)
+ * @property {boolean} treeData - Linhas hierárquicas: cada linha pode ter filhas em `row[childrenKey]`.
+ *   A tabela vira `role="treegrid"` (`aria-level`, `aria-posinset`, `aria-setsize`, `aria-expanded` nas
+ *   linhas), a primeira coluna ganha recuo por nível, fios e o botão de expandir/recolher. Teclado: ↓ ↑ andam
+ *   entre as linhas visíveis, → expande (ou desce à primeira filha), ← recolhe (ou sobe ao pai), Home e End.
+ *   Com `treeData`, `onRowClick`, `onSelect` e os índices dos callbacks contam as linhas VISÍVEIS.
+ * @property {string} childrenKey - Campo com as linhas filhas. Padrão: 'children'
+ * @property {Array<string|number>} expandedKeys - Chaves das linhas expandidas (controlado). A chave é o
+ *   `rowKey` da linha; sem `rowKey`, o caminho de índices ("0", "0.1")
+ * @property {Array<string|number>} defaultExpandedKeys - Chaves expandidas na abertura (não controlado)
+ * @property {boolean} defaultExpandAll - Abre a árvore toda na primeira renderização (não controlado)
+ * @property {function} onExpand - Callback ao expandir ou recolher: `(chavesExpandidas, linha, expandida)`
+ * @property {string} expandLabel - Nome acessível do botão de expandir. Troque para traduzir.
+ * @property {string} collapseLabel - Nome acessível do botão de recolher. Troque para traduzir.
  * @property {string} sortKey - Chave da coluna atualmente ordenada
  * @property {string} sortDirection - Direção da ordenação: 'asc' | 'desc'
  * @property {number} skeletonRows - Número de linhas skeleton exibidas no loading
@@ -42,8 +73,16 @@ export interface DataTableColumn {
  * @property {function} onSelectKeys - Callback ao alterar a seleção por chave (requer rowKey)
  * @property {function} onRowClick - Callback ao clicar numa linha (recebe índice e a linha);
  *   cliques no checkbox de seleção não disparam
- * @quandoUsar Dados TABULARES que se comparam coluna a coluna, com ordenação, seleção e paginação. Semântica de tabela para leitor de tela.
- * @quandoNaoUsar Para hierarquia pai-filho — use `Tree`. Para cards em grade sem comparação coluna a coluna, use `Grid` com `Card`.
+ * @property {string|function} rowGroup - Agrupa linhas consecutivas: nome do campo ou função
+ *   (row, rowIndex) => rótulo. Antes da primeira linha de cada grupo entra uma linha de
+ *   grupo (`<th scope="rowgroup">` ocupando a largura toda). Linha sem rótulo não abre grupo.
+ *   A tabela não reordena: ordene `data` por grupo antes de passar.
+ * @property {function} renderRowGroup - Conteúdo da linha de grupo: (label, row, rowIndex) => nó.
+ *   Só no React. No Vue use o slot `#row-group` (recebe `{ label, row, rowIndex }`).
+ * @slot cell-<key> - Só no Vue. Célula livre da coluna `<key>`: `<template #cell-nome="{ row, value, rowIndex }">`.
+ * @slot row-group - Só no Vue. Conteúdo da linha de grupo: `{ label, row, rowIndex }`.
+ * @quandoUsar Dados TABULARES que se comparam coluna a coluna, com ordenação, seleção e paginação. Semântica de tabela para leitor de tela. Com `variant="document"`, a tabela que faz parte do TEXTO de um documento que se imprime (itens de nota, cotações): sem interação, com bordas finas e quebra de página que não corta linha.
+ * @quandoNaoUsar Para hierarquia pai-filho SEM colunas (navegação, seleção de pastas) — use `Tree`; com colunas de dado por linha, use `treeData`. Para cards em grade sem comparação coluna a coluna, use `Grid` com `Card`. Para pares rótulo/valor de um documento (sem cabeçalho de coluna), use `DescriptionList`.
  */
 export interface DataTableProps {
     columns: DataTableColumn[];
@@ -53,8 +92,44 @@ export interface DataTableProps {
     selectable?: boolean;
     selectedRows?: number[];
     rowKey?: string | ((row: Record<string, any>) => string | number);
+    rowGroup?: string | ((row: Record<string, any>, rowIndex: number) => string | undefined);
+    renderRowGroup?: (label: string, row: Record<string, any>, rowIndex: number) => any;
     selectedKeys?: Array<string | number>;
+    /** `document`: tabela de conteúdo de documento, imprimível e sem interação. @default 'default' */
+    variant?: "default" | "document";
     density?: "default" | "compact";
+    /** `dark`: cabeçalho navy com texto claro (o do CrisDoc). @default 'default' */
+    headerVariant?: "default" | "dark";
+    /** Rótulos do cabeçalho em caixa alta. @default false */
+    headerUppercase?: boolean;
+    /** Zebra nas linhas ímpares. @default false */
+    striped?: boolean;
+    /** Chaves das linhas destacadas (só visual, sem checkbox; requer `rowKey`). */
+    selectedRowKeys?: Array<string | number>;
+    /** Destaque de linha por função `(row, rowIndex) => boolean`. */
+    isRowSelected?: (row: Record<string, any>, rowIndex: number) => boolean;
+    /** Ícone do estado vazio (objeto Font Awesome importado). @default faInbox */
+    emptyIcon?: IconProp;
+    /** Texto de apoio abaixo de `emptyMessage`. */
+    emptyDescription?: string;
+    /** Esconde o cabeçalho só na tela; o leitor de tela continua lendo as colunas. @default false */
+    hideHeader?: boolean;
+    /** Linhas hierárquicas (`role="treegrid"`), com filhas em `row[childrenKey]`. @default false */
+    treeData?: boolean;
+    /** Campo das linhas filhas. @default 'children' */
+    childrenKey?: string;
+    /** Chaves das linhas expandidas (controlado). */
+    expandedKeys?: Array<string | number>;
+    /** Chaves expandidas na abertura (não controlado). */
+    defaultExpandedKeys?: Array<string | number>;
+    /** Abre a árvore toda na abertura (não controlado). @default false */
+    defaultExpandAll?: boolean;
+    /** Ao expandir ou recolher: `(chavesExpandidas, linha, expandida)`. */
+    onExpand?: (expandedKeys: Array<string | number>, row: Record<string, any>, expanded: boolean) => void;
+    /** Nome acessível do botão de expandir. Troque para traduzir. @default 'Expandir' */
+    expandLabel?: string;
+    /** Nome acessível do botão de recolher. Troque para traduzir. @default 'Recolher' */
+    collapseLabel?: string;
     sortKey?: string;
     sortDirection?: "asc" | "desc";
     skeletonRows?: number;
@@ -68,5 +143,6 @@ export interface DataTableProps {
     /** Nome acessível do checkbox de cada linha. Recebe o número da linha (a partir de 1). Troque para traduzir. @default (rowNumber) => 'Selecionar linha ' + rowNumber */
     selectRowLabel?: (rowNumber: number) => string;
 }
+import { IconProp } from "../Icon/Icon";
 declare function DataTable(props: DataTableProps): import("react/jsx-runtime").JSX.Element;
 export default DataTable;