@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/ColorPicker.test.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ColorPicker from "../components/ColorPicker/ColorPicker";
+import { COLOR_PALETTE } from "../utils/paleta-de-cores";
+describe("ColorPicker", () => {
+    it("é um radiogroup com uma amostra por primitivo de cor, cada uma com nome", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Cor do marcador" }));
+        const grupo = screen.getByRole("radiogroup", { name: "Cor do marcador" });
+        expect(grupo.querySelectorAll('[role="radio"]')).toHaveLength(COLOR_PALETTE.length);
+        expect(COLOR_PALETTE).toHaveLength(31);
+        expect(screen.getByRole("radio", { name: "Azul escuro" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "Cinza muito claro" })).toBeInTheDocument();
+    });
+    it("pinta cada amostra com a variável do token", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Cor" }));
+        const azul = screen.getByRole("radio", { name: "Azul" });
+        expect(azul.style.backgroundColor).toBe("var(--umds-primitive-blue-pure)");
+    });
+    it("clicar escolhe e entrega o NOME do token em onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", onChange: aoMudar }));
+        await usuario.click(screen.getByRole("radio", { name: "Verde" }));
+        expect(aoMudar).toHaveBeenCalledWith("--umds-primitive-green-pure");
+        expect(screen.getByRole("radio", { name: "Verde" })).toHaveAttribute("aria-checked", "true");
+    });
+    it("não escolhido tem aria-checked false e só a escolhida mostra a marcação", () => {
+        const { container } = render(_jsx(ColorPicker, { ariaLabel: "Cor", defaultValue: "--umds-primitive-red-pure" }));
+        expect(screen.getByRole("radio", { name: "Vermelho" })).toHaveAttribute("aria-checked", "true");
+        expect(screen.getByRole("radio", { name: "Azul" })).toHaveAttribute("aria-checked", "false");
+        expect(container.querySelectorAll(".umds-color-picker__swatch svg")).toHaveLength(1);
+    });
+    it("Tab entra na amostra escolhida (roving tabindex)", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", value: "--umds-primitive-orange-pure" }));
+        const radios = screen.getAllByRole("radio");
+        const comTab = radios.filter((r) => r.getAttribute("tabindex") === "0");
+        expect(comTab).toHaveLength(1);
+        expect(comTab[0]).toHaveAccessibleName("Laranja");
+    });
+    it("sem valor, Tab entra na primeira amostra", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Cor" }));
+        expect(screen.getAllByRole("radio")[0]).toHaveAttribute("tabindex", "0");
+    });
+    it("setas movem a escolha e o foco; Home e End vão às pontas; dá a volta", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", families: ["blue"], defaultValue: "--umds-primitive-blue-dark", onChange: aoMudar }));
+        const radios = screen.getAllByRole("radio");
+        radios[0].focus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(aoMudar).toHaveBeenLastCalledWith("--umds-primitive-blue-pure");
+        expect(radios[1]).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}{ArrowLeft}");
+        expect(aoMudar).toHaveBeenLastCalledWith("--umds-primitive-blue-light");
+        expect(radios[3]).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(radios[0]).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(radios[3]).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(radios[0]).toHaveFocus();
+    });
+    it("pula amostra desabilitada no teclado", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", defaultValue: "a", onChange: aoMudar, swatches: [
+                { value: "a", label: "A" },
+                { value: "b", label: "B", disabled: true },
+                { value: "c", label: "C" },
+            ] }));
+        screen.getByRole("radio", { name: "A" }).focus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(aoMudar).toHaveBeenLastCalledWith("c");
+    });
+    it("families recorta a paleta", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", families: ["blue", "gray"] }));
+        expect(screen.getAllByRole("radio")).toHaveLength(11);
+    });
+    it("swatches substitui a paleta (nomes traduzidos)", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Color", swatches: [{ value: "--umds-primitive-blue-pure", label: "Blue" }] }));
+        expect(screen.getAllByRole("radio")).toHaveLength(1);
+        expect(screen.getByRole("radio", { name: "Blue" })).toBeInTheDocument();
+    });
+    it("disabled desabilita todas as amostras", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", disabled: true }));
+        for (const r of screen.getAllByRole("radio"))
+            expect(r).toBeDisabled();
+    });
+    it("label visível nomeia o grupo", () => {
+        render(_jsx(ColorPicker, { label: "Cor de fundo", id: "cp" }));
+        expect(screen.getByRole("radiogroup", { name: "Cor de fundo" })).toBeInTheDocument();
+    });
+    it("cor livre vem desligada: sem campo de hexadecimal", () => {
+        render(_jsx(ColorPicker, { ariaLabel: "Cor" }));
+        expect(screen.queryByLabelText(/hexadecimal/i)).toBeNull();
+    });
+    it("allowCustom: hexadecimal completo vira #RRGGBB em maiúsculas; incompleto não emite", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", allowCustom: true, onChange: aoMudar }));
+        const campo = screen.getByLabelText("Cor livre (hexadecimal)");
+        await usuario.type(campo, "0058d");
+        expect(aoMudar).not.toHaveBeenCalled();
+        await usuario.type(campo, "b");
+        expect(aoMudar).toHaveBeenCalledTimes(1);
+        expect(aoMudar).toHaveBeenCalledWith("#0058DB");
+    });
+    it("allowCustom: hexadecimal inválido mostra a mensagem ao sair do campo", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(ColorPicker, { ariaLabel: "Cor", allowCustom: true, customErrorMessage: "Formato inv\u00E1lido" }));
+        const campo = screen.getByLabelText("Cor livre (hexadecimal)");
+        await usuario.type(campo, "xyz");
+        expect(screen.queryByText("Formato inválido")).toBeNull();
+        await usuario.tab();
+        expect(screen.getByText("Formato inválido")).toBeInTheDocument();
+    });
+    it("controlado: reflete o value e escolher uma amostra limpa o campo livre", async () => {
+        const usuario = userEvent.setup();
+        function Controlado() {
+            const [valor, setValor] = useState("#336699");
+            return _jsx(ColorPicker, { ariaLabel: "Cor", allowCustom: true, value: valor, onChange: setValor });
+        }
+        render(_jsx(Controlado, {}));
+        const campo = screen.getByLabelText("Cor livre (hexadecimal)");
+        expect(campo.value).toBe("#336699");
+        await usuario.click(screen.getByRole("radio", { name: "Azul" }));
+        expect(campo.value).toBe("");
+    });
+});

package/dist/teste/ColorPickerXs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/ColorPickerXs.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ColorPicker from "../components/ColorPicker/ColorPicker";
+describe("ColorPicker · size xs", () => {
+    it("xs escreve a classe do tamanho; sm e md seguem como eram", () => {
+        const { container, rerender } = render(_jsx(ColorPicker, { ariaLabel: "Cor", size: "xs" }));
+        const raiz = () => container.firstElementChild;
+        expect(raiz()).toHaveClass("umds-color-picker--xs");
+        rerender(_jsx(ColorPicker, { ariaLabel: "Cor", size: "sm" }));
+        expect(raiz()).toHaveClass("umds-color-picker--sm");
+        expect(raiz()).not.toHaveClass("umds-color-picker--xs");
+        rerender(_jsx(ColorPicker, { ariaLabel: "Cor" }));
+        expect(raiz()).toHaveClass("umds-color-picker--md");
+    });
+    it("no xs a amostra escolhida mantém a marcação e o aria-checked", () => {
+        const { container } = render(_jsx(ColorPicker, { ariaLabel: "Cor", size: "xs", defaultValue: "--umds-primitive-red-pure" }));
+        expect(screen.getByRole("radio", { name: "Vermelho" })).toHaveAttribute("aria-checked", "true");
+        expect(container.querySelectorAll(".umds-color-picker__swatch--selected")).toHaveLength(1);
+    });
+});

package/dist/teste/DataTableArvoreEVariantes.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/DataTableArvoreEVariantes.test.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { faBoxOpen } from "@fortawesome/free-solid-svg-icons";
+import DataTable from "../components/DataTable/DataTable";
+const COLUNAS = [
+    { key: "nome", label: "Nome" },
+    { key: "sigla", label: "Sigla" },
+];
+const DADOS = [
+    { id: "a", nome: "Ana", sigla: "SADM" },
+    { id: "b", nome: "Bruno", sigla: "SOBR" },
+    { id: "c", nome: "Carla", sigla: "SEFIN" },
+];
+describe("DataTable: cabeçalho, zebra e destaque", () => {
+    it("headerVariant dark e headerUppercase ligam as classes; sem as props, nada muda", () => {
+        const { container, rerender } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS }));
+        const raiz = () => container.querySelector(".umds-datatable");
+        expect(raiz().className).not.toMatch(/header-dark|header-uppercase|striped|header-hidden/);
+        rerender(_jsx(DataTable, { columns: COLUNAS, data: DADOS, headerVariant: "dark", headerUppercase: true, striped: true, hideHeader: true }));
+        expect(raiz()).toHaveClass("umds-datatable--header-dark");
+        expect(raiz()).toHaveClass("umds-datatable--header-uppercase");
+        expect(raiz()).toHaveClass("umds-datatable--striped");
+        expect(raiz()).toHaveClass("umds-datatable--header-hidden");
+    });
+    it("hideHeader não remove o cabeçalho: as colunas continuam nomeadas", () => {
+        render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, hideHeader: true }));
+        expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+    });
+    it("striped marca as linhas ímpares", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, striped: true }));
+        const linhas = [...container.querySelectorAll("tbody tr")];
+        expect(linhas.map((l) => l.classList.contains("umds-datatable__row--striped"))).toEqual([false, true, false]);
+    });
+    it("selectedRowKeys destaca a linha sem checkbox e marca aria-selected", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, rowKey: "id", selectedRowKeys: ["b"] }));
+        const linhas = [...container.querySelectorAll("tbody tr")];
+        expect(linhas[1]).toHaveClass("umds-datatable__row--selected");
+        expect(linhas[1]).toHaveClass("umds-datatable__row--highlighted");
+        expect(linhas[1]).toHaveAttribute("aria-selected", "true");
+        expect(linhas[0]).not.toHaveClass("umds-datatable__row--selected");
+        expect(linhas[0]).not.toHaveAttribute("aria-selected");
+        expect(screen.queryByRole("checkbox")).toBeNull();
+    });
+    it("isRowSelected destaca por função", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, isRowSelected: (row) => row.sigla === "SEFIN" }));
+        const linhas = [...container.querySelectorAll("tbody tr")];
+        expect(linhas[2]).toHaveClass("umds-datatable__row--selected");
+        expect(linhas[0]).not.toHaveClass("umds-datatable__row--selected");
+    });
+    it("emptyIcon e emptyDescription entram no estado vazio", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: [], emptyMessage: "Nada por aqui", emptyDescription: "Ajuste o filtro de setor.", emptyIcon: faBoxOpen }));
+        expect(screen.getByText("Nada por aqui")).toBeInTheDocument();
+        expect(screen.getByText("Ajuste o filtro de setor.")).toBeInTheDocument();
+        expect(container.querySelector(".umds-datatable__empty-icon svg")).toHaveAttribute("data-icon", "box-open");
+    });
+    it("o ícone padrão do estado vazio continua o inbox", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: [] }));
+        expect(container.querySelector(".umds-datatable__empty-icon svg")).toHaveAttribute("data-icon", "inbox");
+        expect(container.querySelector(".umds-datatable__empty-desc")).toBeNull();
+    });
+    it("compact na tabela de documento soma as duas classes", () => {
+        const { container } = render(_jsx(DataTable, { variant: "document", density: "compact", columns: COLUNAS, data: DADOS }));
+        const raiz = container.querySelector(".umds-datatable");
+        expect(raiz).toHaveClass("umds-datatable--document");
+        expect(raiz).toHaveClass("umds-datatable--compact");
+    });
+});
+const ARVORE = [
+    {
+        id: "gab",
+        nome: "Gabinete",
+        sigla: "GAB",
+        children: [
+            { id: "sadm", nome: "Administração", sigla: "SADM", children: [{ id: "rh", nome: "Recursos Humanos", sigla: "RH" }] },
+            { id: "sobr", nome: "Obras", sigla: "SOBR" },
+        ],
+    },
+    { id: "sefin", nome: "Finanças", sigla: "SEFIN" },
+];
+const linhas = (c) => [...c.querySelectorAll("tbody tr")];
+const nomes = (c) => linhas(c).map((l) => l.querySelectorAll("td")[0].textContent);
+describe("DataTable treeData", () => {
+    it("vira treegrid; fechada, mostra só as raízes, com aria-level, posinset, setsize e expanded", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id" }));
+        expect(screen.getByRole("treegrid")).toBeInTheDocument();
+        expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+        const [gab, fin] = linhas(container);
+        expect(gab).toHaveAttribute("aria-level", "1");
+        expect(gab).toHaveAttribute("aria-posinset", "1");
+        expect(gab).toHaveAttribute("aria-setsize", "2");
+        expect(gab).toHaveAttribute("aria-expanded", "false");
+        expect(fin).not.toHaveAttribute("aria-expanded");
+    });
+    it("o botão expande e recolhe, com nome acessível e onExpand", () => {
+        const aoExpandir = vi.fn();
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", onExpand: aoExpandir }));
+        fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+        expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+        expect(aoExpandir).toHaveBeenCalledWith(["gab"], ARVORE[0], true);
+        const filha = linhas(container)[1];
+        expect(filha).toHaveAttribute("aria-level", "2");
+        expect(filha).toHaveAttribute("aria-expanded", "false");
+        fireEvent.click(screen.getAllByRole("button", { name: "Recolher" })[0]);
+        expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+        expect(aoExpandir).toHaveBeenLastCalledWith([], ARVORE[0], false);
+    });
+    it("expandLabel e collapseLabel traduzem os botões", () => {
+        render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandedKeys: ["gab"], expandLabel: "Expand", collapseLabel: "Collapse" }));
+        expect(screen.getByRole("button", { name: "Collapse" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
+    });
+    it("defaultExpandAll abre tudo, e o primeiro recolher parte da árvore aberta", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandAll: true }));
+        expect(nomes(container)).toEqual(["Gabinete", "Administração", "Recursos Humanos", "Obras", "Finanças"]);
+        expect(linhas(container)[2]).toHaveAttribute("aria-level", "3");
+        fireEvent.click(screen.getAllByRole("button", { name: "Recolher" })[1]);
+        expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+    });
+    it("expandedKeys controla: o clique avisa, mas só muda quando o pai muda a prop", () => {
+        const aoExpandir = vi.fn();
+        const { container, rerender } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", expandedKeys: [], onExpand: aoExpandir }));
+        fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+        expect(aoExpandir).toHaveBeenCalledWith(["gab"], ARVORE[0], true);
+        expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+        rerender(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", expandedKeys: ["gab"], onExpand: aoExpandir }));
+        expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+    });
+    it("sem rowKey, a chave é o caminho de índices", () => {
+        const aoExpandir = vi.fn();
+        render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, onExpand: aoExpandir }));
+        fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+        expect(aoExpandir.mock.calls[0][0]).toEqual(["0"]);
+    });
+    it("desenha os fios: tee para quem tem irmã depois, elbow para a última, line para o que continua", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandAll: true }));
+        const guias = (l) => [...l.querySelectorAll(".umds-datatable__guide")].map((g) => g.className.replace("umds-datatable__guide umds-datatable__guide--", ""));
+        const [gab, sadm, rh, sobr] = linhas(container);
+        expect(guias(gab)).toEqual([]);
+        expect(guias(sadm)).toEqual(["tee"]);
+        expect(guias(rh)).toEqual(["line", "elbow"]);
+        expect(guias(sobr)).toEqual(["elbow"]);
+    });
+    it("o recuo cresce por nível", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", defaultExpandAll: true }));
+        const recuo = (l) => l.querySelector(".umds-datatable__tree-content").style.paddingLeft;
+        expect(recuo(linhas(container)[0])).toContain("calc(0 *");
+        expect(recuo(linhas(container)[2])).toContain("calc(2 *");
+    });
+    it("teclado: ↓ ↑ andam, → expande e desce, ← recolhe e sobe, Home e End", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id" }));
+        const gab = linhas(container)[0];
+        gab.focus();
+        expect(gab).toHaveAttribute("tabindex", "0");
+        expect(linhas(container)[1]).toHaveAttribute("tabindex", "-1");
+        fireEvent.keyDown(gab, { key: "ArrowRight" });
+        expect(nomes(container)).toEqual(["Gabinete", "Administração", "Obras", "Finanças"]);
+        expect(document.activeElement).toBe(gab);
+        fireEvent.keyDown(gab, { key: "ArrowRight" });
+        expect(document.activeElement).toBe(linhas(container)[1]);
+        fireEvent.keyDown(document.activeElement, { key: "ArrowDown" });
+        expect(document.activeElement).toBe(linhas(container)[2]);
+        expect(linhas(container)[2]).toHaveAttribute("tabindex", "0");
+        fireEvent.keyDown(document.activeElement, { key: "ArrowLeft" });
+        expect(document.activeElement).toBe(linhas(container)[0]);
+        fireEvent.keyDown(document.activeElement, { key: "End" });
+        expect(document.activeElement).toBe(linhas(container)[3]);
+        fireEvent.keyDown(document.activeElement, { key: "Home" });
+        expect(document.activeElement).toBe(linhas(container)[0]);
+        fireEvent.keyDown(document.activeElement, { key: "ArrowLeft" });
+        expect(nomes(container)).toEqual(["Gabinete", "Finanças"]);
+    });
+    it("clicar no botão não aciona o onRowClick da linha", () => {
+        const aoClicar = vi.fn();
+        render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE, treeData: true, rowKey: "id", onRowClick: aoClicar }));
+        fireEvent.click(screen.getByRole("button", { name: "Expandir" }));
+        expect(aoClicar).not.toHaveBeenCalled();
+    });
+    it("sem treeData, a tabela é a de sempre: sem role, sem aria-level", () => {
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: ARVORE }));
+        expect(screen.queryByRole("treegrid")).toBeNull();
+        expect(container.querySelector("[aria-level]")).toBeNull();
+        expect(container.querySelector(".umds-datatable__tree-toggle")).toBeNull();
+    });
+    it("childrenKey troca o campo das filhas", () => {
+        const dados = [{ id: 1, nome: "Pai", sigla: "P", itens: [{ id: 2, nome: "Filho", sigla: "F" }] }];
+        const { container } = render(_jsx(DataTable, { columns: COLUNAS, data: dados, treeData: true, childrenKey: "itens", rowKey: "id", defaultExpandAll: true }));
+        expect(nomes(container)).toEqual(["Pai", "Filho"]);
+    });
+});

package/dist/teste/DataTableCelulaLivre.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/DataTableCelulaLivre.test.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen, within } from "@testing-library/react";
+import DataTable from "../components/DataTable/DataTable";
+/**
+ * Célula livre (`render` devolvendo nó) e linha de grupo (`rowGroup`).
+ * No Vue o equivalente é o slot `#cell-<key>`: ver `datatable-slots.test.mjs`.
+ */
+const USUARIOS = [
+    { id: 1, nome: "Lucas Andrade", setor: "SADM", perfil: "Administrador" },
+    { id: 2, nome: "Marina Souza", setor: "SADM", perfil: "Nível 1" },
+    { id: 3, nome: "Rafael Pereira", setor: "SOBR", perfil: "Nível 2" },
+];
+describe("DataTable · célula livre", () => {
+    it("render devolvendo elemento desenha o nó, não texto", () => {
+        const colunas = [
+            { key: "nome", label: "Usuário", render: (row) => _jsx("strong", { "data-testid": "nome", children: row.nome }) },
+            { key: "perfil", label: "Perfil" },
+        ];
+        render(_jsx(DataTable, { columns: colunas, data: USUARIOS }));
+        const nos = screen.getAllByTestId("nome");
+        expect(nos).toHaveLength(3);
+        expect(nos[0].tagName).toBe("STRONG");
+        expect(nos[0]).toHaveTextContent("Lucas Andrade");
+    });
+    it("render recebe a linha e o índice", () => {
+        const colunas = [
+            { key: "nome", label: "Usuário", render: (row, i) => `${i + 1}. ${row.nome}` },
+        ];
+        render(_jsx(DataTable, { columns: colunas, data: USUARIOS }));
+        expect(screen.getByText("2. Marina Souza")).toBeInTheDocument();
+    });
+    it("DataTableColumn é exportado e tipa a coluna com render de nó", () => {
+        const coluna = {
+            key: "acoes",
+            label: "Ações",
+            render: () => _jsx("button", { type: "button", children: "Editar" }),
+        };
+        render(_jsx(DataTable, { columns: [coluna], data: USUARIOS }));
+        expect(screen.getAllByRole("button", { name: "Editar" })).toHaveLength(3);
+    });
+});
+describe("DataTable · linha de grupo (rowGroup)", () => {
+    const colunas = [
+        { key: "nome", label: "Usuário" },
+        { key: "perfil", label: "Perfil" },
+    ];
+    it("sem rowGroup não desenha linha de grupo", () => {
+        const { container } = render(_jsx(DataTable, { columns: colunas, data: USUARIOS }));
+        expect(container.querySelector("th[scope='rowgroup']")).toBeNull();
+    });
+    it("rowGroup por campo abre um grupo por valor consecutivo", () => {
+        const { container } = render(_jsx(DataTable, { columns: colunas, data: USUARIOS, rowGroup: "setor" }));
+        const grupos = container.querySelectorAll("th[scope='rowgroup']");
+        expect(Array.from(grupos).map((g) => g.textContent)).toEqual(["SADM", "SOBR"]);
+        // a linha de grupo atravessa as colunas todas
+        expect(grupos[0]).toHaveAttribute("colspan", "2");
+    });
+    it("rowGroup por função e colspan com selectable", () => {
+        const { container } = render(_jsx(DataTable, { columns: colunas, data: USUARIOS, selectable: true, rowGroup: (row) => (row.id === 3 ? undefined : "Equipe A") }));
+        const grupos = container.querySelectorAll("th[scope='rowgroup']");
+        expect(grupos).toHaveLength(1);
+        expect(grupos[0]).toHaveTextContent("Equipe A");
+        expect(grupos[0]).toHaveAttribute("colspan", "3");
+    });
+    it("renderRowGroup devolve nó", () => {
+        render(_jsx(DataTable, { columns: colunas, data: USUARIOS, rowGroup: "setor", renderRowGroup: (rotulo) => _jsxs("em", { "data-testid": "grupo", children: [rotulo, "!"] }) }));
+        expect(screen.getAllByTestId("grupo").map((n) => n.textContent)).toEqual(["SADM!", "SOBR!"]);
+    });
+    it("a linha de grupo não entra na seleção por índice", async () => {
+        const { container } = render(_jsx(DataTable, { columns: colunas, data: USUARIOS, rowGroup: "setor", selectable: true, selectedRows: [2] }));
+        const selecionadas = container.querySelectorAll(".umds-datatable__row--selected");
+        expect(selecionadas).toHaveLength(1);
+        expect(within(selecionadas[0]).getByText("Rafael Pereira")).toBeInTheDocument();
+    });
+});

package/dist/teste/DataTableDocumento.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/DataTableDocumento.test.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import DataTable from "../components/DataTable/DataTable";
+import DescriptionList from "../components/DescriptionList/DescriptionList";
+const COLUNAS = [
+    { key: "descricao", label: "Descrição", sortable: true },
+    { key: "quantidade", label: "Quantidade", align: "right" },
+];
+const DADOS = [
+    { descricao: "Diesel S10", quantidade: "5.760" },
+    { descricao: "Gasolina comum", quantidade: "1.200" },
+];
+describe("DataTable variant=document", () => {
+    it("é a tabela de documento: classe própria, cabeçalho e linhas", () => {
+        const { container } = render(_jsx(DataTable, { variant: "document", columns: COLUNAS, data: DADOS }));
+        expect(container.querySelector(".umds-datatable--document")).not.toBeNull();
+        expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+        expect(screen.getByText("Diesel S10")).toBeInTheDocument();
+    });
+    it("não ordena: sem botão de ordenar, sem aria-sort", () => {
+        render(_jsx(DataTable, { variant: "document", columns: COLUNAS, data: DADOS, sortKey: "descricao", sortDirection: "asc" }));
+        expect(screen.queryByRole("button")).toBeNull();
+        for (const th of screen.getAllByRole("columnheader"))
+            expect(th).not.toHaveAttribute("aria-sort");
+    });
+    it("não seleciona: selectable é ignorado", () => {
+        render(_jsx(DataTable, { variant: "document", selectable: true, columns: COLUNAS, data: DADOS }));
+        expect(screen.queryByRole("checkbox")).toBeNull();
+        expect(screen.getAllByRole("columnheader")).toHaveLength(2);
+    });
+    it("linha não é clicável nem entra na ordem de Tab", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        const { container } = render(_jsx(DataTable, { variant: "document", columns: COLUNAS, data: DADOS, onRowClick: aoClicar }));
+        const linha = container.querySelector("tbody tr");
+        expect(linha).not.toHaveAttribute("tabindex");
+        expect(linha).not.toHaveClass("umds-datatable__row--clickable");
+        await usuario.click(linha);
+        expect(aoClicar).not.toHaveBeenCalled();
+    });
+    it("a tabela de interface continua igual (ordena, seleciona, clica)", async () => {
+        const usuario = userEvent.setup();
+        const aoOrdenar = vi.fn();
+        render(_jsx(DataTable, { columns: COLUNAS, data: DADOS, selectable: true, onSort: aoOrdenar }));
+        expect(screen.getAllByRole("checkbox").length).toBeGreaterThan(0);
+        await usuario.click(screen.getByRole("button", { name: /Descrição/ }));
+        expect(aoOrdenar).toHaveBeenCalledWith("descricao", "asc");
+    });
+});
+describe("DescriptionList", () => {
+    const ITENS = [
+        { label: "Dotação", value: "02.031.0001" },
+        { label: "Empenho", value: "2026NE000184" },
+        { label: "Fonte", value: "" },
+    ];
+    it("é um dl com um dt e um dd por par", () => {
+        const { container } = render(_jsx(DescriptionList, { items: ITENS, ariaLabel: "Dados de empenho" }));
+        const dl = container.querySelector("dl");
+        expect(dl).toHaveAttribute("aria-label", "Dados de empenho");
+        expect(dl.querySelectorAll("dt")).toHaveLength(3);
+        expect(dl.querySelectorAll("dd")).toHaveLength(3);
+        expect(dl.querySelector("dt")).toHaveTextContent("Dotação");
+        expect(dl.querySelector("dd")).toHaveTextContent("02.031.0001");
+    });
+    it("valor vazio mostra o traço, ou o texto de emptyValue", () => {
+        const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS }));
+        expect(container.querySelectorAll("dd")[2]).toHaveTextContent("—");
+        rerender(_jsx(DescriptionList, { items: ITENS, emptyValue: "N\u00E3o informado" }));
+        expect(container.querySelectorAll("dd")[2]).toHaveTextContent("Não informado");
+    });
+    it("inline é o padrão; fit encolhe", () => {
+        const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS }));
+        const dl = container.querySelector("dl");
+        expect(dl).toHaveClass("umds-description-list--inline");
+        expect(dl).not.toHaveClass("umds-description-list--fit");
+        rerender(_jsx(DescriptionList, { items: ITENS, fit: true }));
+        expect(container.querySelector("dl")).toHaveClass("umds-description-list--fit");
+    });
+    it("stacked ganha as colunas e a caixa do valor", () => {
+        const { container } = render(_jsx(DescriptionList, { items: ITENS, layout: "stacked", columns: 3, bordered: true }));
+        const dl = container.querySelector("dl");
+        expect(dl).toHaveClass("umds-description-list--stacked");
+        expect(dl).toHaveClass("umds-description-list--cols-3");
+        expect(dl).toHaveClass("umds-description-list--bordered");
+    });
+    it("sem itens, não desenha par nenhum", () => {
+        const { container } = render(_jsx(DescriptionList, {}));
+        expect(container.querySelectorAll("dt")).toHaveLength(0);
+    });
+});

package/dist/teste/DatePicker.test.js

@@ -69,3 +69,26 @@ describe("DatePicker · teclado", () => {
         expect(screen.getByRole("combobox")).toHaveTextContent(/15\/\d{2}\/\d{4}/);
     });
 });
+/**
+ * A story "Com valor" mostrava "Selecione o período" com `value="2025-12-31"`.
+ * Não era a story: no modo single o componente só lia `range`, e `value` e
+ * `defaultValue` eram declarados e nunca chegavam ao campo.
+ */
+describe("DatePicker · valor no modo single", () => {
+    it("`value` aparece no campo, no formato pedido", () => {
+        render(_jsx(DatePicker, { label: "Vencimento", value: "2025-12-31", format: "DD/MM/YYYY" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("31/12/2025");
+    });
+    it("`defaultValue` semeia o campo no modo não-controlado", () => {
+        render(_jsx(DatePicker, { label: "Vencimento", defaultValue: "2025-06-15" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("15/06/2025");
+    });
+    it("`value` vazio no modo controlado mostra o placeholder", () => {
+        render(_jsx(DatePicker, { label: "Vencimento", value: "", placeholder: "DD/MM/AAAA" }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("DD/MM/AAAA");
+    });
+    it("o modo range continua lendo `range`, não `value`", () => {
+        render(_jsx(DatePicker, { mode: "range", label: "Per\u00EDodo", value: "2025-01-01", range: { from: "2025-03-01", to: "2025-03-10" } }));
+        expect(screen.getByRole("combobox")).toHaveTextContent("01/03/2025 – 10/03/2025");
+    });
+});

package/dist/teste/DescriptionListCompacta.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/DescriptionListCompacta.test.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import DescriptionList from "../components/DescriptionList/DescriptionList";
+const ITENS = [{ label: "Dotação", value: "02.031.0001" }];
+describe("DescriptionList · density", () => {
+    it("compact escreve a classe; o padrão não", () => {
+        const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS, density: "compact" }));
+        const dl = () => container.querySelector("dl");
+        expect(dl()).toHaveClass("umds-description-list--compact");
+        rerender(_jsx(DescriptionList, { items: ITENS, density: "default" }));
+        expect(dl()).not.toHaveClass("umds-description-list--compact");
+        rerender(_jsx(DescriptionList, { items: ITENS }));
+        expect(dl()).not.toHaveClass("umds-description-list--compact");
+    });
+    it("compact vale nos dois desenhos", () => {
+        const { container, rerender } = render(_jsx(DescriptionList, { items: ITENS, density: "compact", layout: "stacked", bordered: true }));
+        expect(container.querySelector("dl")).toHaveClass("umds-description-list--stacked", "umds-description-list--compact");
+        rerender(_jsx(DescriptionList, { items: ITENS, density: "compact", fit: true }));
+        expect(container.querySelector("dl")).toHaveClass("umds-description-list--inline", "umds-description-list--compact");
+    });
+});

package/dist/teste/EmptyStateTituloRico.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/teste/EmptyStateTituloRico.test.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { faInbox } from "@fortawesome/free-solid-svg-icons";
+import EmptyState from "../components/EmptyState/EmptyState";
+describe("EmptyState · título rico", () => {
+    it("título em texto continua igual", () => {
+        const { container } = render(_jsx(EmptyState, { icon: faInbox, title: "Nenhuma mensagem", description: "Tudo em dia." }));
+        expect(container.querySelector(".umds-empty-state__title")).toHaveTextContent("Nenhuma mensagem");
+        expect(screen.getByText("Tudo em dia.")).toBeInTheDocument();
+    });
+    it("título aceita conteúdo rico: negrito, link", () => {
+        const { container } = render(_jsx(EmptyState, { title: _jsxs(_Fragment, { children: ["Nenhum processo para ", _jsx("strong", { "data-testid": "termo", children: "SOBR" }), " ", _jsx("a", { href: "#limpar", children: "Limpar filtro" })] }) }));
+        const titulo = container.querySelector(".umds-empty-state__title");
+        expect(titulo).toContainElement(screen.getByTestId("termo"));
+        expect(titulo.querySelector("a")).toHaveAttribute("href", "#limpar");
+    });
+    it("o título é um div (conteúdo de bloco não vira HTML inválido dentro de p)", () => {
+        const { container } = render(_jsx(EmptyState, { title: _jsx("div", { "data-testid": "bloco", children: "Bloco" }) }));
+        expect(container.querySelector(".umds-empty-state__title").tagName).toBe("DIV");
+        expect(screen.getByTestId("bloco").parentElement).toHaveClass("umds-empty-state__title");
+    });
+});

package/dist/teste/FileInputTrigger.test.d.ts

@@ -0,0 +1 @@
+export {};