@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/teste/RichTextEditorAlinhaImagemTabela.test.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { htmlDaTabela, htmlVazio, imagemSegura, sanitizarHtml } from "../utils/html-seguro";
+let execCommand;
+let estados;
+beforeEach(() => {
+    estados = {};
+    execCommand = vi.fn(() => true);
+    document.execCommand = execCommand;
+    document.queryCommandState = (comando) => !!estados[comando];
+});
+const area = () => screen.getByRole("textbox");
+const PNG = "data:image/png;base64,iVBORw0KGgo=";
+describe("html-seguro: alinhamento, imagem e tabela", () => {
+    it("text-align fica nos blocos, em style ou em align; o resto do style sai", () => {
+        expect(sanitizarHtml('<p style="text-align: center; color: red">a</p>')).toBe('<p style="text-align: center;">a</p>');
+        expect(sanitizarHtml('<div align="right">a</div>')).toBe('<div style="text-align: right;">a</div>');
+        expect(sanitizarHtml('<p style="text-align: expression(alert(1))">a</p>')).toBe("<p>a</p>");
+        expect(sanitizarHtml('<li style="text-align:justify">a</li>')).toBe('<li style="text-align: justify;">a</li>');
+        expect(sanitizarHtml('<b style="text-align:center">a</b>')).toBe("<b>a</b>");
+    });
+    it("imagem: http(s), caminho e data:image em PNG, JPEG, GIF e WebP ficam; o resto some inteiro", () => {
+        expect(sanitizarHtml('<img src="https://a.com/x.png" alt="Brasão" onerror="x()">')).toBe('<img src="https://a.com/x.png" alt="Brasão">');
+        expect(sanitizarHtml('<img src="/img/x.png">')).toBe('<img src="/img/x.png" alt="">');
+        expect(sanitizarHtml(`<img src="${PNG}" alt="a">`)).toBe(`<img src="${PNG}" alt="a">`);
+        for (const mau of ["javascript:alert(1)", "x", "data:image/svg+xml;base64,PHN2Zz4=", "data:text/html;base64,PGI+", "//evil.com/x.png", "ftp://a/x.png"]) {
+            expect(sanitizarHtml(`<p>a<img src="${mau}">b</p>`)).toBe("<p>ab</p>");
+        }
+    });
+    it("imagemSegura devolve vazio para o perigoso", () => {
+        expect(imagemSegura("java\nscript:alert(1)")).toBe("");
+        expect(imagemSegura("https://a.com/x.png")).toBe("https://a.com/x.png");
+        expect(imagemSegura("")).toBe("");
+    });
+    it("tabela simples: tags e colspan/rowspan ficam; atributos soltos saem", () => {
+        const html = '<table class="x" onclick="a()"><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3" style="color:red">a</td><td colspan="x">b</td></tr></tbody></table>';
+        expect(sanitizarHtml(html)).toBe('<table><thead><tr><th colspan="2">T</th></tr></thead><tbody><tr><td rowspan="3">a</td><td>b</td></tr></tbody></table>');
+    });
+    it("htmlVazio: imagem e tabela contam como conteúdo", () => {
+        expect(htmlVazio("<img src='/a.png'>")).toBe(false);
+        expect(htmlVazio(htmlDaTabela(1, 1))).toBe(false);
+        expect(htmlVazio("<p><br></p>")).toBe(true);
+    });
+    it("htmlDaTabela faz linhas × colunas de células com quebra", () => {
+        const celulas = (htmlDaTabela(2, 3).match(/<td><br><\/td>/g) || []).length;
+        expect(celulas).toBe(6);
+        expect((htmlDaTabela(2, 3).match(/<tr>/g) || []).length).toBe(2);
+    });
+});
+describe("RichTextEditor: alinhamento", () => {
+    it("as quatro ferramentas de alinhamento pedem o comando e seguem o cursor", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["alignLeft", "alignCenter", "alignRight", "alignJustify"], defaultValue: "<p>x</p>" }));
+        const esperado = {
+            "Alinhar à esquerda": "justifyLeft",
+            Centralizar: "justifyCenter",
+            "Alinhar à direita": "justifyRight",
+            Justificar: "justifyFull",
+        };
+        for (const [nome, comando] of Object.entries(esperado)) {
+            execCommand.mockClear();
+            await usuario.click(screen.getByRole("button", { name: nome }));
+            expect(execCommand).toHaveBeenCalledWith(comando, false, undefined);
+        }
+        estados.justifyCenter = true;
+        const faixa = document.createRange();
+        faixa.selectNodeContents(area());
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(faixa);
+        fireEvent(document, new Event("selectionchange"));
+        expect(screen.getByRole("button", { name: "Centralizar" })).toHaveAttribute("aria-pressed", "true");
+        expect(screen.getByRole("button", { name: "Justificar" })).toHaveAttribute("aria-pressed", "false");
+    });
+    it("a barra padrão não ganha as ferramentas novas", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        for (const nome of ["Centralizar", "Imagem", "Tabela"])
+            expect(screen.queryByRole("button", { name: nome })).toBeNull();
+    });
+});
+describe("RichTextEditor: imagem", () => {
+    const abrirImagem = async (props = {}, botao = "Imagem") => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["image"], defaultValue: "<p>texto</p>", ...props }));
+        await usuario.click(screen.getByRole("button", { name: botao }));
+        return usuario;
+    };
+    it("o botão abre o painel com foco no endereço; Esc fecha", async () => {
+        const usuario = await abrirImagem();
+        expect(screen.getByLabelText("Endereço da imagem")).toHaveFocus();
+        expect(screen.getByLabelText("Texto alternativo")).toBeInTheDocument();
+        await usuario.keyboard("{Escape}");
+        expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+    });
+    it("endereço e texto alternativo inserem o img com alt", async () => {
+        const aoMudar = vi.fn();
+        const usuario = await abrirImagem({ onChange: aoMudar });
+        await usuario.type(screen.getByLabelText("Endereço da imagem"), "exemplo.com.br/brasao.png");
+        await usuario.type(screen.getByLabelText("Texto alternativo"), "Brasão da prefeitura");
+        await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<img src="https://exemplo.com.br/brasao.png" alt="Brasão da prefeitura">');
+        expect(screen.queryByLabelText("Endereço da imagem")).toBeNull();
+        expect(aoMudar).toHaveBeenCalled();
+    });
+    it("endereço perigoso mostra o erro e o painel continua aberto", async () => {
+        const usuario = await abrirImagem();
+        await usuario.type(screen.getByLabelText("Endereço da imagem"), "javascript:alert(1)");
+        await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+        expect(screen.getByText("Use um endereço http ou https, ou escolha um arquivo.")).toBeInTheDocument();
+        expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+        expect(screen.getByLabelText("Endereço da imagem")).toBeInTheDocument();
+    });
+    it("arquivo vira data URL e entra no img", async () => {
+        const usuario = await abrirImagem();
+        const entrada = document.querySelector('input[type="file"]');
+        const arquivo = new File([new Uint8Array([137, 80, 78, 71])], "brasao.png", { type: "image/png" });
+        fireEvent.change(entrada, { target: { files: [arquivo] } });
+        await waitFor(() => expect(screen.getByText("brasao.png")).toBeInTheDocument());
+        await usuario.click(screen.getByRole("button", { name: "Inserir imagem" }));
+        const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+        expect(chamada[2]).toMatch(/^<img src="data:image\/png;base64,[A-Za-z0-9+/=]+" alt="">$/);
+    });
+    it("arquivo que não é PNG, JPEG, GIF ou WebP é recusado; acima de 2 MB também", async () => {
+        await abrirImagem();
+        const entrada = document.querySelector('input[type="file"]');
+        fireEvent.change(entrada, { target: { files: [new File(["x"], "a.svg", { type: "image/svg+xml" })] } });
+        expect(await screen.findByText("Use uma imagem PNG, JPEG, GIF ou WebP.")).toBeInTheDocument();
+        const grande = new File(["x"], "g.png", { type: "image/png" });
+        Object.defineProperty(grande, "size", { value: 3 * 1024 * 1024 });
+        fireEvent.change(entrada, { target: { files: [grande] } });
+        expect(await screen.findByText("A imagem passa de 2 MB.")).toBeInTheDocument();
+    });
+    it("os textos do painel vêm por labels", async () => {
+        await abrirImagem({ labels: { image: "Image", imageUrl: "Image address", imageAlt: "Alt text", imageApply: "Insert image", imageCancel: "Cancel", imageFile: "Choose file" } }, "Image");
+        expect(screen.getByLabelText("Image address")).toBeInTheDocument();
+        expect(screen.getByLabelText("Alt text")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Insert image" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Choose file" })).toBeInTheDocument();
+    });
+});
+describe("RichTextEditor: tabela", () => {
+    it("o painel insere linhas × colunas; o padrão é 3 × 3", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"] }));
+        await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+        expect(screen.getByLabelText("Linhas")).toHaveFocus();
+        await usuario.clear(screen.getByLabelText("Linhas"));
+        await usuario.type(screen.getByLabelText("Linhas"), "2");
+        await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+        const chamada = execCommand.mock.calls.find((c) => c[0] === "insertHTML");
+        expect(chamada[2]).toBe(htmlDaTabela(2, 3));
+    });
+    it("fora de 1 a 20 linhas e 1 a 10 colunas mostra o erro e não insere", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"] }));
+        await usuario.click(screen.getByRole("button", { name: "Tabela" }));
+        await usuario.clear(screen.getByLabelText("Colunas"));
+        await usuario.type(screen.getByLabelText("Colunas"), "11");
+        await usuario.click(screen.getByRole("button", { name: "Inserir tabela" }));
+        expect(screen.getByText("Use de 1 a 20 linhas e de 1 a 10 colunas.")).toBeInTheDocument();
+        expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+    });
+    const TABELA = "<table><tbody><tr><td>a</td><td>b</td></tr><tr><td>c</td><td>d</td></tr></tbody></table>";
+    const cursorNaCelula = (indice) => {
+        const celula = area().querySelectorAll("td")[indice];
+        const faixa = document.createRange();
+        faixa.selectNodeContents(celula);
+        window.getSelection().removeAllRanges();
+        window.getSelection().addRange(faixa);
+        fireEvent(document, new Event("selectionchange"));
+    };
+    it("com o cursor numa célula aparece a barra; sem tabela na toolbar, não aparece", async () => {
+        const { rerender } = render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"], defaultValue: TABELA }));
+        expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+        cursorNaCelula(0);
+        expect(await screen.findByRole("group", { name: "Tabela" })).toBeInTheDocument();
+        rerender(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["bold"], defaultValue: TABELA }));
+        expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+    });
+    it("adiciona e remove linha e coluna na célula do cursor e avisa onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"], defaultValue: TABELA, onChange: aoMudar }));
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Adicionar coluna" }));
+        expect(area().querySelectorAll("tr")[0].cells.length).toBe(3);
+        expect(area().querySelectorAll("tr")[1].cells.length).toBe(3);
+        expect(aoMudar).toHaveBeenCalled();
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Adicionar linha" }));
+        expect(area().querySelectorAll("tr")).toHaveLength(3);
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+        expect(area().querySelectorAll("tr")).toHaveLength(2);
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover coluna" }));
+        expect(area().querySelectorAll("tr")[0].cells.length).toBe(2);
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover tabela" }));
+        expect(area().querySelector("table")).toBeNull();
+        expect(screen.queryByRole("group", { name: "Tabela" })).toBeNull();
+    });
+    it("remover a única linha ou coluna remove a tabela", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: ["table"], defaultValue: "<table><tbody><tr><td>a</td></tr></tbody></table>" }));
+        cursorNaCelula(0);
+        await usuario.click(await screen.findByRole("button", { name: "Remover linha" }));
+        expect(area().querySelector("table")).toBeNull();
+    });
+});

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

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

package/dist/teste/RichTextEditorEstiloDeTexto.test.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import RichTextEditor from "../components/RichTextEditor/RichTextEditor";
+import { estiloDeTexto, sanitizarHtml } from "../utils/html-seguro";
+let execCommand;
+beforeEach(() => {
+    execCommand = vi.fn(() => true);
+    document.execCommand = execCommand;
+    document.queryCommandState = () => false;
+});
+const area = () => screen.getByRole("textbox");
+const selecionarTexto = () => {
+    const alvo = area().querySelector("p").firstChild;
+    const faixa = document.createRange();
+    faixa.setStart(alvo, 0);
+    faixa.setEnd(alvo, alvo.length);
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(faixa);
+};
+const abrir = (toolbar, props = {}) => render(_jsx(RichTextEditor, { ariaLabel: "x", toolbar: toolbar, defaultValue: "<p>Parecer</p>", ...props }));
+describe("html-seguro: estilo de texto por token", () => {
+    it("estiloDeTexto só aceita token do DS", () => {
+        expect(estiloDeTexto("color", "var(--umds-primitive-red-pure)")).toBe("color: var(--umds-primitive-red-pure);");
+        expect(estiloDeTexto("color", "var(--umds-semantic-color-feedback-negative-pure)")).toBe("color: var(--umds-semantic-color-feedback-negative-pure);");
+        expect(estiloDeTexto("font-size", "var(--umds-primitive-font-size-xs)")).toBe("font-size: var(--umds-primitive-font-size-xs);");
+        expect(estiloDeTexto("font-family", "var(--umds-semantic-font-family-mono)")).toBe("font-family: var(--umds-semantic-font-family-mono);");
+        for (const mau of ["red", "#ff0000", "rgb(255,0,0)", "var(--outra-coisa)", "var(--umds-primitive-red-pure); background: red", "expression(alert(1))", "url(x)"]) {
+            expect(estiloDeTexto("color", mau)).toBe("");
+        }
+        expect(estiloDeTexto("font-size", "12px")).toBe("");
+        expect(estiloDeTexto("font-size", "var(--umds-primitive-red-pure)")).toBe("");
+        expect(estiloDeTexto("font-family", "Comic Sans MS")).toBe("");
+        expect(estiloDeTexto("background", "var(--umds-primitive-red-pure)")).toBe("");
+    });
+    it("o span guarda só as declarações válidas; o resto do style sai", () => {
+        expect(sanitizarHtml('<span style="color: var(--umds-primitive-red-pure); background: red; font-size: 40px">a</span>')).toBe('<span style="color: var(--umds-primitive-red-pure);">a</span>');
+        expect(sanitizarHtml('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm)">a</span>')).toBe('<span style="font-family: var(--umds-semantic-font-family-mono); font-size: var(--umds-primitive-font-size-sm);">a</span>');
+        expect(sanitizarHtml('<span style="color: red">a</span>')).toBe("<span>a</span>");
+    });
+    it("estilo só vale em span: em outras tags sai", () => {
+        expect(sanitizarHtml('<b style="color: var(--umds-primitive-red-pure)">a</b>')).toBe("<b>a</b>");
+        expect(sanitizarHtml('<p style="color: var(--umds-primitive-red-pure)">a</p>')).toBe("<p>a</p>");
+    });
+});
+describe("RichTextEditor: fonte, tamanho e cor do texto", () => {
+    it("a barra padrão não ganha as ferramentas novas", () => {
+        render(_jsx(RichTextEditor, { ariaLabel: "x" }));
+        for (const nome of ["Fonte", "Tamanho da fonte", "Cor do texto"])
+            expect(screen.queryByRole("button", { name: nome })).toBeNull();
+    });
+    it("cada ferramenta abre um painel nomeado abaixo da barra; Fechar e Esc fecham", async () => {
+        const usuario = userEvent.setup();
+        abrir(["fontFamily", "fontSize", "textColor"]);
+        await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+        expect(screen.getByRole("group", { name: "Tamanho da fonte" })).toBeInTheDocument();
+        await usuario.click(screen.getByRole("button", { name: "Fechar" }));
+        expect(screen.queryByRole("group", { name: "Tamanho da fonte" })).toBeNull();
+        await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+        expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+        fireEvent.keyDown(screen.getByRole("group", { name: "Cor do texto" }), { key: "Escape" });
+        expect(screen.queryByRole("group", { name: "Cor do texto" })).toBeNull();
+    });
+    it("a fonte monoespaçada embrulha o texto selecionado num span com o token", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        abrir(["fontFamily"], { onChange: aoMudar });
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Fonte" }));
+        await usuario.click(screen.getByRole("combobox", { name: "Fonte" }));
+        await usuario.click(screen.getByRole("option", { name: "Monoespaçada" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-family: var(--umds-semantic-font-family-mono);">Parecer</span>');
+        expect(aoMudar).toHaveBeenCalled();
+        expect(screen.queryByRole("group", { name: "Fonte" })).toBeNull();
+    });
+    it("o tamanho usa os degraus da escala do DS", async () => {
+        const usuario = userEvent.setup();
+        abrir(["fontSize"]);
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Tamanho da fonte" }));
+        await usuario.click(screen.getByRole("combobox", { name: "Tamanho da fonte" }));
+        const opcoes = screen.getAllByRole("option").map((o) => o.textContent);
+        expect(opcoes).toEqual(["12", "14", "16", "20", "24"]);
+        await usuario.click(screen.getByRole("option", { name: "20" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="font-size: var(--umds-primitive-font-size-sm);">Parecer</span>');
+    });
+    it("a cor vem da paleta do DS e vira var() do token", async () => {
+        const usuario = userEvent.setup();
+        abrir(["textColor"]);
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+        await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+        expect(execCommand).toHaveBeenCalledWith("insertHTML", false, '<span style="color: var(--umds-primitive-red-pure);">Parecer</span>');
+    });
+    it("sem texto selecionado o painel pede a seleção e não aplica nada", async () => {
+        const usuario = userEvent.setup();
+        abrir(["textColor"]);
+        window.getSelection().removeAllRanges();
+        await usuario.click(screen.getByRole("button", { name: "Cor do texto" }));
+        await usuario.click(screen.getByRole("radio", { name: "Vermelho" }));
+        expect(screen.getByText("Selecione o texto antes de aplicar.")).toBeInTheDocument();
+        expect(execCommand).not.toHaveBeenCalledWith("insertHTML", expect.anything(), expect.anything());
+        expect(screen.getByRole("group", { name: "Cor do texto" })).toBeInTheDocument();
+    });
+    it("os textos vêm por labels", async () => {
+        const usuario = userEvent.setup();
+        abrir(["fontFamily", "textColor"], { labels: { fontFamily: "Font", textColor: "Text color", fontFamilyMono: "Monospaced", styleClose: "Close" } });
+        selecionarTexto();
+        await usuario.click(screen.getByRole("button", { name: "Font" }));
+        await usuario.click(screen.getByRole("combobox", { name: "Font" }));
+        expect(screen.getByRole("option", { name: "Monospaced" })).toBeInTheDocument();
+        await usuario.keyboard("{Escape}");
+        expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+    });
+    it("o valor volta higienizado com o estilo por token", () => {
+        abrir(["textColor"], { defaultValue: '<p><span style="color: var(--umds-primitive-blue-pure); background: red">a</span></p>' });
+        expect(area().innerHTML).toBe('<p><span style="color: var(--umds-primitive-blue-pure);">a</span></p>');
+    });
+});

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

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

package/dist/teste/SegmentedControlContador.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+const FILA = [
+    { label: "Todas", value: "todas", count: 31 },
+    { label: "Minhas", value: "minhas", count: 0 },
+    { label: "Arquivadas", value: "arquivadas" },
+    { label: "Vazias", value: "vazias", count: "" },
+];
+describe("SegmentedControl · count", () => {
+    it("desenha a pílula do contador depois do texto; 0 aparece, vazio e ausente não", () => {
+        const { container } = render(_jsx(SegmentedControl, { label: "Fila", options: FILA }));
+        const itens = [...container.querySelectorAll(".umds-segmented__item")];
+        expect(itens[0].querySelector(".umds-segmented__count")).toHaveTextContent("31");
+        expect(itens[1].querySelector(".umds-segmented__count")).toHaveTextContent("0");
+        expect(itens[2].querySelector(".umds-segmented__count")).toBeNull();
+        expect(itens[3].querySelector(".umds-segmented__count")).toBeNull();
+        const conteudo = itens[0].querySelector(".umds-segmented__conteudo");
+        expect(conteudo.lastElementChild).toHaveClass("umds-segmented__count");
+    });
+    it("o contador entra no nome acessível do segmento (o texto visível manda)", () => {
+        render(_jsx(SegmentedControl, { label: "Fila", id: "fila", options: FILA }));
+        expect(screen.getByRole("radio", { name: /Todas\s*31/ })).toBeInTheDocument();
+    });
+    it("o contador acompanha a escolha e a escolha segue funcionando", async () => {
+        const usuario = userEvent.setup();
+        const { container } = render(_jsx(SegmentedControl, { label: "Fila", options: FILA, defaultValue: "todas" }));
+        expect(screen.getByRole("radio", { name: /Todas/ })).toBeChecked();
+        await usuario.click(screen.getByText("Minhas"));
+        expect(screen.getByRole("radio", { name: /Minhas/ })).toBeChecked();
+        expect(container.querySelectorAll(".umds-segmented__count")).toHaveLength(2);
+    });
+    it("sem count em nenhum segmento, nada muda", () => {
+        const { container } = render(_jsx(SegmentedControl, { label: "x", options: [{ label: "25", value: "25" }] }));
+        expect(container.querySelector(".umds-segmented__count")).toBeNull();
+    });
+});

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

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

package/dist/teste/SegmentedControlSuperficie.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssSegmentedControl = await lerArquivo("../core/src/components/SegmentedControl/SegmentedControl.css");
+const CSS = { SegmentedControl: cssSegmentedControl };
+const css = (componente) => CSS[componente].replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+describe("SegmentedControl · variant surface", () => {
+    const OPCOES = [
+        { label: "Individual", value: "individual", count: 12 },
+        { label: "Em lote", value: "lote" },
+    ];
+    it("surface escreve a classe; sem a prop e com default, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(SegmentedControl, { options: OPCOES, variant: "surface", defaultValue: "individual" }), _jsx(SegmentedControl, { options: OPCOES, defaultValue: "individual" }), _jsx(SegmentedControl, { options: OPCOES, variant: "default", defaultValue: "individual" })] }));
+        expect(container.children[0]).toHaveClass("umds-segmented--surface");
+        expect(container.children[1]).not.toHaveClass("umds-segmented--surface");
+        expect(container.children[2]).not.toHaveClass("umds-segmented--surface");
+    });
+    it("CSS: o escolhido é branco, em negrito e com sombra; o trilho é cinza claro; o azul cheio do padrão segue", () => {
+        const t = css("SegmentedControl");
+        const escolhido = bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,\n.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover");
+        expect(escolhido).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
+        expect(escolhido).toMatch(/font-weight:\s*var\(--umds-primitive-font-weight-bold\)/);
+        expect(escolhido).toMatch(/box-shadow:\s*var\(--umds-semantic-shadow-md\)/);
+        expect(bloco(t, ".umds-segmented--surface .umds-segmented__track")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+        expect(t).toMatch(/\.umds-segmented__input:checked \+ \.umds-segmented__item,\n\.umds-segmented__input:checked \+ \.umds-segmented__item:hover \{\n\s*background-color:\s*var\(--umds-semantic-color-primary-pure\)/);
+    });
+    it("o contador do escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho", () => {
+        const t = css("SegmentedControl");
+        expect(bloco(t, ".umds-segmented--surface .umds-segmented__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-background-white\)/);
+        expect(bloco(t, ".umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item .umds-segmented__count")).toMatch(/background-color:\s*var\(--umds-semantic-color-neutral-light-medium\)/);
+    });
+});

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

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

package/dist/teste/SelectAbertoControladoEFlutuante.test.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { faFilter } from "@fortawesome/free-solid-svg-icons";
+import Select from "../components/Select/Select";
+const OPCOES = [
+    { label: "Urgente", value: "urgente" },
+    { label: "Revisão", value: "revisao" },
+];
+afterEach(() => vi.restoreAllMocks());
+describe("Select · open e onOpenChange", () => {
+    it("open controlado mostra a lista sem clique; fechado, não mostra", () => {
+        const { rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: false }));
+        expect(screen.queryByRole("listbox")).toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true }));
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-expanded", "true");
+    });
+    it("controlado: o clique só avisa; quem abre é o pai", () => {
+        const aoAbrir = vi.fn();
+        const { rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: false, onOpenChange: aoAbrir }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(aoAbrir).toHaveBeenCalledWith(true);
+        expect(screen.queryByRole("listbox")).toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, onOpenChange: aoAbrir }));
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
+    });
+    it("controlado aberto: escolher uma opção, Esc e clique fora pedem para fechar", () => {
+        const aoAbrir = vi.fn();
+        const { rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, onOpenChange: aoAbrir }));
+        fireEvent.click(screen.getAllByRole("option")[0]);
+        expect(aoAbrir).toHaveBeenLastCalledWith(false);
+        aoAbrir.mockClear();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, onOpenChange: aoAbrir }));
+        fireEvent.keyDown(screen.getByRole("combobox"), { key: "Escape" });
+        expect(aoAbrir).toHaveBeenLastCalledWith(false);
+        aoAbrir.mockClear();
+        fireEvent.mouseDown(document.body);
+        expect(aoAbrir).toHaveBeenCalledWith(false);
+    });
+    it("o clique fora não avisa quando a lista está fechada", () => {
+        const aoAbrir = vi.fn();
+        render(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: false, onOpenChange: aoAbrir }));
+        fireEvent.mouseDown(document.body);
+        expect(aoAbrir).not.toHaveBeenCalled();
+    });
+    it("clique fora vê o open de agora, não o do primeiro render", () => {
+        const aoAbrir = vi.fn();
+        const { rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: false, onOpenChange: aoAbrir }));
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, open: true, onOpenChange: aoAbrir }));
+        fireEvent.mouseDown(document.body);
+        expect(aoAbrir).toHaveBeenCalledWith(false);
+    });
+    it("sem open, o Select abre e fecha sozinho e também avisa", () => {
+        const aoAbrir = vi.fn();
+        render(_jsx(Select, { ariaLabel: "x", options: OPCOES, onOpenChange: aoAbrir }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
+        expect(aoAbrir).toHaveBeenLastCalledWith(true);
+        fireEvent.click(screen.getAllByRole("option")[1]);
+        expect(screen.queryByRole("listbox")).toBeNull();
+        expect(aoAbrir).toHaveBeenLastCalledWith(false);
+    });
+});
+describe("Select · gatilho com ícone, amostra e aria-required", () => {
+    it("triggerIcon e triggerSwatch aparecem no gatilho, decorativos", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, triggerIcon: faFilter, triggerSwatch: "var(--umds-semantic-color-primary-pure)" }));
+        const icone = container.querySelector(".umds-select__trigger-icon");
+        expect(icone).toHaveAttribute("aria-hidden", "true");
+        expect(icone.querySelector("svg")).toHaveAttribute("data-icon", "filter");
+        const amostra = container.querySelector(".umds-select__swatch");
+        expect(amostra).toHaveAttribute("aria-hidden", "true");
+        expect(amostra.style.background).toContain("--umds-semantic-color-primary-pure");
+        expect(container.querySelector(".umds-select--has-trigger-icon")).not.toBeNull();
+    });
+    it("sem as props, não há ícone nem amostra", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        expect(container.querySelector(".umds-select__trigger-icon")).toBeNull();
+        expect(container.querySelector(".umds-select__swatch")).toBeNull();
+    });
+    it("required repassa aria-required ao combobox", () => {
+        const { rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, required: true }));
+        expect(screen.getByRole("combobox")).toHaveAttribute("aria-required", "true");
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        expect(screen.getByRole("combobox")).not.toHaveAttribute("aria-required");
+    });
+});
+describe("Select · variantes de filtro", () => {
+    it("search e combo escrevem a classe do filtro e a própria", () => {
+        const { container, rerender } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "search" }));
+        expect(container.querySelector(".umds-select--filter.umds-select--filter-search")).not.toBeNull();
+        rerender(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "combo" }));
+        expect(container.querySelector(".umds-select--filter.umds-select--filter-combo")).not.toBeNull();
+        expect(container.querySelector(".umds-select--filter-search")).toBeNull();
+    });
+    it("search foca a busca ao abrir, como o filter", async () => {
+        render(_jsx(Select, { ariaLabel: "x", options: OPCOES, variant: "search", searchable: true }));
+        fireEvent.click(screen.getByRole("combobox"));
+        await waitFor(() => expect(document.activeElement).toBe(screen.getByRole("textbox")));
+    });
+});
+describe("Select · por cima do diálogo", () => {
+    it("dentro de role=dialog a lista vira fixed, ancorada no gatilho", async () => {
+        const { container } = render(_jsx("div", { role: "dialog", "aria-label": "Filtros", style: { overflow: "clip" }, children: _jsx(Select, { ariaLabel: "x", options: OPCOES }) }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const lista = container.querySelector(".umds-select__dropdown");
+        expect(container.querySelector(".umds-select--floating")).not.toBeNull();
+        expect(lista.style.position).toBe("fixed");
+        await waitFor(() => expect(lista.style.visibility).toBe("visible"));
+    });
+    it("fora de diálogo a lista continua posicionada pelo CSS (sem fixed)", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const lista = container.querySelector(".umds-select__dropdown");
+        expect(container.querySelector(".umds-select--floating")).toBeNull();
+        expect(lista.style.position).toBe("");
+    });
+    it("aria-modal também conta como diálogo", () => {
+        const { container } = render(_jsx("div", { "aria-modal": "true", children: _jsx(Select, { ariaLabel: "x", options: OPCOES }) }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--floating")).not.toBeNull();
+    });
+});
+describe("Select · placement auto mede o ancestral que rola", () => {
+    it("abre para cima e limita a altura da lista ao espaço do ancestral", () => {
+        vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function () {
+            const rolante = this.getAttribute("data-rolante") !== null;
+            const [topo, base] = rolante ? [100, 300] : [200, 244];
+            return { top: topo, bottom: base, left: 0, right: 0, width: 0, height: base - topo, x: 0, y: topo, toJSON() { } };
+        });
+        Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+        const { container } = render(_jsx("div", { "data-rolante": true, style: { overflowY: "auto" }, children: _jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }) }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).not.toBeNull();
+        expect(container.querySelector(".umds-select__dropdown").style.maxHeight).toBe("96px");
+    });
+    it("sem ancestral que corta, só a janela conta e a lista não ganha teto", () => {
+        vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(() => ({ top: 20, bottom: 64, left: 0, right: 0, width: 0, height: 44, x: 0, y: 20, toJSON() { } }));
+        Object.defineProperty(window, "innerHeight", { value: 900, configurable: true });
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: OPCOES, placement: "auto" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select--placement-top")).toBeNull();
+        expect(container.querySelector(".umds-select__dropdown").style.maxHeight).toBe("");
+    });
+});

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

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