@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/components/ColorPicker/ColorPicker.css

@@ -35,7 +35,8 @@
   padding: var(--umds-primitive-spacing-quarck);
 }
 
-.umds-color-picker--sm .umds-color-picker__swatches {
+.umds-color-picker--sm .umds-color-picker__swatches,
+.umds-color-picker--xs .umds-color-picker__swatches {
   gap: var(--umds-primitive-spacing-quarck); /* 4px */
 }
 
@@ -76,6 +77,12 @@
   height: var(--umds-primitive-spacing-xxs);
 }
 
+/* xs: 20px, o tamanho do CrisDoc (16 + 4, dois degraus da escala somados; sem token próprio). */
+.umds-color-picker--xs .umds-color-picker__swatch {
+  width: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck)); /* 20px */
+  height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-quarck));
+}
+
 .umds-color-picker__swatch--on-light {
   /* stylelint-disable-next-line 1ds/cor-por-token -- par fixo da marcação sobre amostra clara (ver acima) */
   color: var(--umds-primitive-gray-darkest);

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -44,7 +44,7 @@ export interface ColorPickerSwatch {
  * @property {boolean} allowCustom - Liga o campo de cor livre (hexadecimal)
  * @property {string} customLabel - Rótulo do campo de cor livre (padrão: "Cor livre (hexadecimal)")
  * @property {string} customErrorMessage - Mensagem do hexadecimal inválido (padrão: "Use o formato #RRGGBB")
- * @property {string} size - Tamanho da amostra: 'sm' (24px) | 'md' (32px)
+ * @property {string} size - Tamanho da amostra: 'xs' (20px, o do CrisDoc) | 'sm' (24px) | 'md' (32px). A marcação de selecionada (o anel duplo) é a mesma nos três.
  * @property {boolean} disabled - Desabilita o grupo inteiro
  * @property {string} id - Base dos ids internos; passe em SSR para os ids já saírem no HTML do servidor
  * @property {string} className - Classes CSS adicionais
@@ -63,7 +63,7 @@ export interface ColorPickerProps {
     allowCustom?: boolean;
     customLabel?: string;
     customErrorMessage?: string;
-    size?: "sm" | "md";
+    size?: "xs" | "sm" | "md";
     disabled?: boolean;
     id?: string;
     className?: string;

package/dist/components/DataTable/DataTable.css

@@ -207,11 +207,120 @@
   padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-nano); /* 6px: candidato a novo token; 8px */
 }
 
+/* Cabeçalho e linha de 44px (a altura de campo do DS). `height` na célula vale como mínimo: conteúdo mais
+   alto (avatar, botão) estica a linha. O documento imprime justo e fica fora. */
+.umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__th,
+.umds-datatable--compact:not(.umds-datatable--document) .umds-datatable__td {
+  box-sizing: border-box;
+  height: var(--umds-semantic-field-height);
+}
+
 .umds-datatable--compact .umds-datatable__th--checkbox,
 .umds-datatable--compact .umds-datatable__td--checkbox {
   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);
+}
+
+/* ── Tom por linha (rowTone) ──
+   Fundo claro da cor semântica; a linha selecionada ou destacada vence o tom (por isso o :not). Fica depois da
+   zebra para vencê-la. `muted` só esmaece o texto. */
+.umds-datatable__row--negative:not(.umds-datatable__row--selected),
+.umds-datatable__row--negative:not(.umds-datatable__row--selected).umds-datatable__row--striped {
+  background: var(--umds-semantic-color-feedback-negative-light);
+}
+
+.umds-datatable__row--positive:not(.umds-datatable__row--selected),
+.umds-datatable__row--positive:not(.umds-datatable__row--selected).umds-datatable__row--striped {
+  background: var(--umds-semantic-color-feedback-positive-light);
+}
+
+.umds-datatable__row--info:not(.umds-datatable__row--selected),
+.umds-datatable__row--info:not(.umds-datatable__row--selected).umds-datatable__row--striped {
+  background: var(--umds-semantic-color-feedback-info-light);
+}
+
+.umds-datatable__row--negative:not(.umds-datatable__row--selected):hover {
+  background: color-mix(in srgb, var(--umds-semantic-color-feedback-negative-light) 85%, var(--umds-semantic-color-background-white));
+}
+
+.umds-datatable__row--positive:not(.umds-datatable__row--selected):hover {
+  background: color-mix(in srgb, var(--umds-semantic-color-feedback-positive-light) 85%, var(--umds-semantic-color-background-white));
+}
+
+.umds-datatable__row--info:not(.umds-datatable__row--selected):hover {
+  background: color-mix(in srgb, var(--umds-semantic-color-feedback-info-light) 85%, var(--umds-semantic-color-background-white));
+}
+
+.umds-datatable__row--muted .umds-datatable__td {
+  color: var(--umds-semantic-color-neutral-dark-down); /* #565656: 7,3:1 sobre branco */
+}
+
+/* ── 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 */
@@ -233,6 +342,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;
@@ -301,6 +510,13 @@
   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;

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

@@ -35,7 +35,40 @@ export interface DataTableColumn {
  * @property {Array<string|number>} selectedKeys - Chaves das linhas selecionadas (controlado;
  *   requer rowKey)
  * @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'
+ * @property {string} density - Densidade das células: 'default' | 'compact'. O compacto aperta o padding e
+ *   fixa a altura do cabeçalho e da linha em 44px (a altura de campo do DS; o conteúdo maior que isso cresce a
+ *   linha). Com `variant="document"`, o compacto também leva a fonte a 12px (a escala do DS não tem 13px).
+ * @property {string|function} rowTone - Tom por linha: nome do campo da linha que traz o tom, ou função
+ *   `(row, rowIndex) => tom`. Tons: 'negative' (vermelho claro), 'positive' (verde claro), 'info' (laranja claro)
+ *   e 'muted' (texto esmaecido). Sem tom, a linha segue o padrão; a linha selecionada ou destacada vence o tom.
+ *   O tom é decoração: diga o estado também em texto ou ícone (a cor sozinha não basta).
+ * @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
@@ -54,7 +87,7 @@ export interface DataTableColumn {
  * @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 — use `Tree`. 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`.
+ * @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[];
@@ -70,6 +103,40 @@ export interface DataTableProps {
     /** `document`: tabela de conteúdo de documento, imprimível e sem interação. @default 'default' */
     variant?: "default" | "document";
     density?: "default" | "compact";
+    /** Tom por linha: nome do campo ou função `(row, rowIndex) => 'negative' | 'positive' | 'info' | 'muted'`. */
+    rowTone?: string | ((row: Record<string, any>, rowIndex: number) => string | undefined);
+    /** `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;
@@ -83,5 +150,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;