@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/ModalVariantes.test.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Modal from "../components/Modal/Modal";
+import Select from "../components/Select/Select";
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+/** Troca `window.matchMedia` por um que responde `matches` e deixa disparar `change`. */
+function simularTela(matches) {
+    const ouvintes = new Set();
+    vi.stubGlobal("matchMedia", (consulta) => ({
+        matches,
+        media: consulta,
+        addEventListener: (_, fn) => ouvintes.add(fn),
+        removeEventListener: (_, fn) => ouvintes.delete(fn),
+    }));
+    return (novo) => ouvintes.forEach((fn) => fn({ matches: novo }));
+}
+describe("Modal · variant primary", () => {
+    it("fica no modal base (três faixas), com a classe do cabeçalho cheio", () => {
+        render(_jsx(Modal, { open: true, inline: true, variant: "primary", title: "Resolver tarefa" }));
+        const dialogo = screen.getByRole("dialog", { name: "Resolver tarefa" });
+        expect(dialogo).toHaveClass("umds-modal--primary", "umds-modal--base");
+        expect(dialogo).not.toHaveClass("umds-modal--feedback");
+        expect(dialogo.querySelector(".umds-modal__header")).not.toBeNull();
+        expect(dialogo.querySelector(".umds-modal__icon")).toBeNull();
+    });
+    it("positive continua sendo diálogo de feedback", () => {
+        render(_jsx(Modal, { open: true, inline: true, variant: "positive", title: "Pronto" }));
+        expect(screen.getByRole("dialog")).toHaveClass("umds-modal--feedback");
+    });
+});
+describe("Modal · width e maxWidth", () => {
+    it("escreve a largura e, sem maxWidth, solta o teto do size", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "600px" }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo.style.width).toBe("600px");
+        expect(dialogo.style.maxWidth).toBe("100%");
+    });
+    it("maxWidth explícito vale", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "90%", maxWidth: "720px" }));
+        expect(screen.getByRole("dialog").style.maxWidth).toBe("720px");
+    });
+    it("sem width nem maxWidth não escreve style", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.getByRole("dialog").getAttribute("style")).toBeNull();
+    });
+});
+describe("Modal · Escape", () => {
+    it("fecha com Escape no borbulho", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar }));
+        fireEvent.keyDown(document.body, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("não fecha quando outro componente já consumiu a tecla (defaultPrevented)", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar }));
+        const consumidor = document.createElement("div");
+        consumidor.addEventListener("keydown", (e) => e.preventDefault());
+        document.body.appendChild(consumidor);
+        fireEvent.keyDown(consumidor, { key: "Escape" });
+        expect(aoFechar).not.toHaveBeenCalled();
+        consumidor.remove();
+    });
+    it("Select aberto dentro do modal fecha só a lista, e o modal fica", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", onClose: aoFechar, children: _jsx(Select, { label: "Categoria", options: [{ label: "Administrativa", value: "adm" }] }) }));
+        const gatilho = screen.getByRole("combobox");
+        fireEvent.click(gatilho);
+        expect(gatilho).toHaveAttribute("aria-expanded", "true");
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        expect(gatilho).toHaveAttribute("aria-expanded", "false");
+        expect(aoFechar).not.toHaveBeenCalled();
+        // Com o Select fechado, o Esc seguinte é do modal.
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Modal · controles de janela escolhidos um a um", () => {
+    it("true liga os quatro, como antes", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: true }));
+        for (const nome of ["Modo normal", "Expandir", "Tela cheia", "Minimizar"]) {
+            expect(screen.getByRole("button", { name: nome })).toBeInTheDocument();
+        }
+    });
+    it("lista escolhe só os pedidos, sem minimizar", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: ["expand", "fullscreen"] }));
+        expect(screen.getByRole("button", { name: "Expandir" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Tela cheia" })).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Minimizar" })).toBeNull();
+        expect(screen.queryByRole("button", { name: "Modo normal" })).toBeNull();
+        expect(screen.getByRole("button", { name: "Fechar" })).toBeInTheDocument();
+    });
+    it("sem windowControls só há o ×", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.queryByRole("button", { name: "Expandir" })).toBeNull();
+        expect(screen.getByRole("button", { name: "Fechar" })).toBeInTheDocument();
+    });
+    it("sem o botão normal, clicar de novo no modo ativo volta ao normal; e o normal usa o tamanho do modal", () => {
+        render(_jsx(Modal, { open: true, inline: true, title: "x", width: "600px", windowControls: ["expand"] }));
+        const dialogo = screen.getByRole("dialog");
+        const expandir = screen.getByRole("button", { name: "Expandir" });
+        expect(dialogo).not.toHaveClass("umds-modal--janela-normal");
+        expect(dialogo.style.width).toBe("600px");
+        fireEvent.click(expandir);
+        expect(dialogo).toHaveClass("umds-modal--janela-expanded");
+        expect(dialogo.style.width).toBe("");
+        fireEvent.click(expandir);
+        expect(dialogo).not.toHaveClass("umds-modal--janela-expanded");
+        expect(dialogo.style.width).toBe("600px");
+    });
+    it("minimizar chama onMinimize", () => {
+        const aoMinimizar = vi.fn();
+        render(_jsx(Modal, { open: true, inline: true, title: "x", windowControls: ["minimize"], onMinimize: aoMinimizar }));
+        fireEvent.click(screen.getByRole("button", { name: "Minimizar" }));
+        expect(aoMinimizar).toHaveBeenCalledTimes(1);
+    });
+});
+describe("Modal · responsive", () => {
+    it("em tela larga continua centralizado", () => {
+        simularTela(false);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true }));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+    it("em tela estreita vira painel de baixo, sem controles de janela e sem a largura livre", () => {
+        simularTela(true);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true, width: "600px", windowControls: true }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo).toHaveClass("umds-modal--sheet");
+        expect(dialogo.style.width).toBe("");
+        expect(screen.queryByRole("button", { name: "Expandir" })).toBeNull();
+        expect(dialogo.querySelector(".umds-modal__grabber")).not.toBeNull();
+    });
+    it("acompanha a mudança de tamanho da tela", () => {
+        const mudar = simularTela(false);
+        render(_jsx(Modal, { open: true, inline: true, title: "x", responsive: true }));
+        const dialogo = screen.getByRole("dialog");
+        expect(dialogo).not.toHaveClass("umds-modal--sheet");
+        act(() => mudar(true));
+        expect(screen.getByRole("dialog")).toHaveClass("umds-modal--sheet");
+        act(() => mudar(false));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+    it("sem responsive nunca vira painel", () => {
+        simularTela(true);
+        render(_jsx(Modal, { open: true, inline: true, title: "x" }));
+        expect(screen.getByRole("dialog")).not.toHaveClass("umds-modal--sheet");
+    });
+});

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

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

package/dist/teste/NomeAcessivelSsr.test.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, screen } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import { hydrateRoot } from "react-dom/client";
+import Select from "../components/Select/Select";
+import MultiSelect from "../components/MultiSelect/MultiSelect";
+import SegmentedControl from "../components/SegmentedControl/SegmentedControl";
+/**
+ * Select, MultiSelect e SegmentedControl nascem SEM id automático (utils/id):
+ * o id só é gerado no onMount, para o servidor e a primeira renderização do
+ * cliente saírem idênticos. Só que o nome acessível deles vinha de
+ * `aria-labelledby` apontando para esse id — no HTML do servidor, e até a
+ * hidratação, o combobox ficava sem nome (axe `aria-input-field-name`, visto
+ * no portal Astro com `client:visible`).
+ *
+ * Aqui o HTML sai do `renderToString`, que não dispara o onMount, e vai para
+ * o DOM do jsdom como o navegador receberia. O nome é conferido pelo cálculo
+ * do Testing Library, o mesmo algoritmo de nome acessível que o axe usa.
+ */
+const OPCOES = [
+    { label: "Recursos Humanos", value: "rh" },
+    { label: "Financeiro", value: "fin" },
+];
+const POR_PAGINA = [
+    { label: "10", value: "10" },
+    { label: "25", value: "25" },
+];
+function comoDoServidor(html) {
+    const raiz = document.createElement("div");
+    raiz.innerHTML = html;
+    document.body.appendChild(raiz);
+    return raiz;
+}
+describe("Nome acessível no HTML do servidor", () => {
+    // As raízes são montadas à mão (fora do render), e o cleanup global não as vê.
+    afterEach(() => {
+        document.body.innerHTML = "";
+    });
+    it("Select: o combobox tem o nome do label antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(Select, { label: "Setor", options: OPCOES })));
+        const campo = screen.getByRole("combobox", { name: "Setor" });
+        expect(campo).not.toHaveAttribute("aria-labelledby");
+        expect(campo).toHaveAttribute("aria-label", "Setor");
+    });
+    it("Select: `ariaLabel` continua valendo sobre o label", () => {
+        comoDoServidor(renderToString(_jsx(Select, { label: "Setor", ariaLabel: "Setor do servidor", options: OPCOES })));
+        expect(screen.getByRole("combobox", { name: "Setor do servidor" })).toBeInTheDocument();
+    });
+    it("Select com `id`: o servidor já liga pelo aria-labelledby", () => {
+        const html = renderToString(_jsx(Select, { id: "setor", label: "Setor", options: OPCOES }));
+        expect(html).toContain('aria-labelledby="setor-label"');
+        expect(html).not.toContain('aria-label="Setor"');
+    });
+    it("MultiSelect: o combobox tem o nome do label antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(MultiSelect, { label: "Setores", options: OPCOES })));
+        expect(screen.getByRole("combobox", { name: "Setores" })).toBeInTheDocument();
+    });
+    it("SegmentedControl: grupo e segmentos têm nome antes do mount", () => {
+        comoDoServidor(renderToString(_jsx(SegmentedControl, { label: "Itens", options: POR_PAGINA })));
+        expect(screen.getByRole("radiogroup", { name: "Itens" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "10" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "25" })).toBeInTheDocument();
+    });
+    it("hidrata sem divergência e, montado, volta ao aria-labelledby", async () => {
+        const arvore = (_jsxs("div", { children: [_jsx(Select, { label: "Setor", options: OPCOES }), _jsx(MultiSelect, { label: "Setores", options: OPCOES }), _jsx(SegmentedControl, { label: "Itens", options: POR_PAGINA })] }));
+        const raiz = comoDoServidor(renderToString(arvore));
+        const erro = vi.spyOn(console, "error").mockImplementation(() => { });
+        const avisosDeHidratacao = [];
+        await act(async () => {
+            hydrateRoot(raiz, arvore, {
+                onRecoverableError: (e) => avisosDeHidratacao.push(e),
+            });
+        });
+        const chamadas = erro.mock.calls.map((c) => String(c[0]));
+        erro.mockRestore();
+        expect(avisosDeHidratacao).toEqual([]);
+        expect(chamadas.filter((c) => /hydrat|did not match/i.test(c))).toEqual([]);
+        const select = screen.getByRole("combobox", { name: "Setor" });
+        expect(select).toHaveAttribute("aria-labelledby");
+        expect(select).not.toHaveAttribute("aria-label");
+        const multi = screen.getByRole("combobox", { name: "Setores" });
+        expect(multi).toHaveAttribute("aria-labelledby");
+        const grupo = screen.getByRole("radiogroup", { name: "Itens" });
+        expect(grupo).toHaveAttribute("aria-labelledby");
+        expect(screen.getByRole("radio", { name: "10" })).not.toHaveAttribute("aria-label");
+    });
+});

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

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

package/dist/teste/OrgChart.test.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import OrgChart from "../components/OrgChart/OrgChart";
+const ARVORE = [
+    {
+        id: "copirn",
+        title: "COPIRN",
+        subtitle: "Companhia Potiguar de Infraestrutura",
+        children: [
+            { id: "aj", title: "AJ", subtitle: "Assessoria Jurídica" },
+            {
+                id: "sadm",
+                title: "SADM",
+                subtitle: "Secretaria de Administração",
+                children: [
+                    { id: "al", title: "AL", subtitle: "Almoxarifado" },
+                    { id: "ssa", title: "SSA", subtitle: "Subsetor do Almoxarifado" },
+                ],
+            },
+            { id: "sfin", title: "SFIN", subtitle: "Secretaria de Finanças" },
+        ],
+    },
+];
+const item = (id) => document.querySelector(`[data-node-id="${id}"]`);
+const esquerda = (id) => parseFloat(item(id).style.left);
+describe("OrgChart", () => {
+    it("é uma tree nomeada, com um treeitem por nó visível e níveis ARIA", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, ariaLabel: "Setores" }));
+        expect(screen.getByRole("tree", { name: "Setores" })).toBeInTheDocument();
+        expect(screen.getAllByRole("treeitem")).toHaveLength(6);
+        expect(item("copirn")).toHaveAttribute("aria-level", "1");
+        expect(item("al")).toHaveAttribute("aria-level", "3");
+        expect(item("sadm")).toHaveAttribute("aria-posinset", "2");
+        expect(item("sadm")).toHaveAttribute("aria-setsize", "3");
+        expect(item("sadm")).toHaveAttribute("aria-expanded", "true");
+        expect(item("aj")).not.toHaveAttribute("aria-expanded");
+    });
+    it("o nome padrão é Organograma; título e subtítulo aparecem", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE }));
+        expect(screen.getByRole("tree", { name: "Organograma" })).toBeInTheDocument();
+        expect(within(item("aj")).getByText("AJ")).toBeInTheDocument();
+        expect(within(item("aj")).getByText("Assessoria Jurídica")).toBeInTheDocument();
+    });
+    it("o pai se centra sobre os filhos e os irmãos andam lado a lado", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, nodeWidth: 100, gapX: 20 }));
+        expect(esquerda("aj")).toBe(0);
+        expect(esquerda("al")).toBe(120);
+        expect(esquerda("ssa")).toBe(240);
+        expect(esquerda("sadm")).toBe(180);
+        expect(esquerda("sfin")).toBe(360);
+        expect(esquerda("copirn")).toBe((0 + 360) / 2);
+        expect(parseFloat(item("sadm").style.top)).toBeGreaterThan(parseFloat(item("copirn").style.top));
+    });
+    it("desenha um conector por pai expandido", () => {
+        const { container } = render(_jsx(OrgChart, { nodes: ARVORE }));
+        expect(container.querySelectorAll(".umds-org-chart__line")).toHaveLength(2);
+    });
+    it("a raiz é cheia e o nó marcado leva aria-selected", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, selectedId: "aj" }));
+        expect(item("copirn")).toHaveClass("umds-org-chart__node--root");
+        expect(item("aj")).toHaveAttribute("aria-selected", "true");
+        expect(item("sfin")).not.toHaveAttribute("aria-selected");
+    });
+    it("recolher esconde os filhos e avisa; expandir volta", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OrgChart, { nodes: ARVORE, onCollapsedChange: aoMudar }));
+        item("sadm").focus();
+        await usuario.keyboard(" ");
+        expect(aoMudar).toHaveBeenLastCalledWith(["sadm"]);
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+        expect(item("sadm")).toHaveAttribute("aria-expanded", "false");
+        await usuario.keyboard(" ");
+        expect(aoMudar).toHaveBeenLastCalledWith([]);
+        expect(screen.getAllByRole("treeitem")).toHaveLength(6);
+    });
+    it("o botão de expandir do mouse faz o mesmo e não aciona o nó", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        const { container } = render(_jsx(OrgChart, { nodes: ARVORE, onNodeClick: aoClicar }));
+        const botoes = container.querySelectorAll(".umds-org-chart__toggle");
+        expect(botoes).toHaveLength(2);
+        await usuario.click(botoes[1]);
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+        expect(aoClicar).not.toHaveBeenCalled();
+    });
+    it("defaultCollapsedIds começa recolhido; collapsedIds controla", () => {
+        const { rerender } = render(_jsx(OrgChart, { nodes: ARVORE, defaultCollapsedIds: ["sadm"] }));
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+        rerender(_jsx(OrgChart, { nodes: ARVORE, collapsedIds: ["copirn"] }));
+        expect(screen.getAllByRole("treeitem")).toHaveLength(1);
+    });
+    it("clicar e Enter acionam o nó com o nó", async () => {
+        const usuario = userEvent.setup();
+        const aoClicar = vi.fn();
+        render(_jsx(OrgChart, { nodes: ARVORE, onNodeClick: aoClicar }));
+        await usuario.click(item("aj"));
+        expect(aoClicar).toHaveBeenLastCalledWith(expect.objectContaining({ id: "aj" }));
+        item("sfin").focus();
+        await usuario.keyboard("{Enter}");
+        expect(aoClicar).toHaveBeenLastCalledWith(expect.objectContaining({ id: "sfin" }));
+    });
+    it("só um nó entra na ordem de Tab (o primeiro)", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE }));
+        const comTab = screen.getAllByRole("treeitem").filter((n) => n.getAttribute("tabindex") === "0");
+        expect(comTab).toHaveLength(1);
+        expect(comTab[0]).toHaveAttribute("data-node-id", "copirn");
+    });
+    it("setas: baixo desce ao primeiro filho, cima sobe ao pai, lados andam entre irmãos, Home e End", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OrgChart, { nodes: ARVORE }));
+        item("copirn").focus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("aj")).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(item("sadm")).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("al")).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(item("ssa")).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(item("al")).toHaveFocus();
+        await usuario.keyboard("{ArrowUp}");
+        expect(item("sadm")).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(item("sfin")).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}{ArrowLeft}");
+        expect(item("aj")).toHaveFocus();
+    });
+    it("baixo num nó recolhido abre; o foco desce no seguinte", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OrgChart, { nodes: ARVORE, defaultCollapsedIds: ["sadm"] }));
+        item("sadm").focus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("sadm")).toHaveAttribute("aria-expanded", "true");
+        await usuario.keyboard("{ArrowDown}");
+        expect(item("al")).toHaveFocus();
+    });
+    it("renderNode troca o conteúdo do nó", () => {
+        render(_jsx(OrgChart, { nodes: ARVORE, renderNode: (no, meta) => _jsx("b", { "data-testid": "c-" + no.id, children: no.title + ":" + meta.level }) }));
+        expect(screen.getByTestId("c-ssa")).toHaveTextContent("SSA:2");
+        expect(item("ssa").querySelector(".umds-org-chart__title")).toBeNull();
+    });
+    it("textos do botão por prop; sem nós, não desenha a árvore", () => {
+        const { container, rerender } = render(_jsx(OrgChart, { nodes: ARVORE, expandLabel: "Expand", collapseLabel: "Collapse" }));
+        expect(container.querySelector(".umds-org-chart__toggle")).toHaveAttribute("title", "Collapse");
+        rerender(_jsx(OrgChart, { nodes: [] }));
+        expect(screen.queryByRole("tree")).toBeNull();
+    });
+    it("controlado por pai", () => {
+        function Pai() {
+            const [fechados, setFechados] = useState([]);
+            return (_jsxs(_Fragment, { children: [_jsx(OrgChart, { nodes: ARVORE, collapsedIds: fechados, onCollapsedChange: setFechados }), _jsx("button", { onClick: () => setFechados(["sadm"]), children: "fechar" })] }));
+        }
+        render(_jsx(Pai, {}));
+        fireEvent.click(screen.getByText("fechar"));
+        expect(screen.getAllByRole("treeitem")).toHaveLength(4);
+    });
+});

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

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

package/dist/teste/OtpInput.test.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 OtpInput from "../components/OtpInput/OtpInput";
+const caixas = () => screen.getAllByRole("textbox");
+describe("OtpInput", () => {
+    it("tem 6 caixas por padrão, cada uma com nome próprio, num grupo nomeado", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo de verifica\u00E7\u00E3o" }));
+        expect(screen.getByRole("group", { name: "Código de verificação" })).toBeInTheDocument();
+        expect(caixas()).toHaveLength(6);
+        expect(screen.getByRole("textbox", { name: "Dígito 3 de 6" })).toBeInTheDocument();
+    });
+    it("length muda a quantidade e digitLabel traduz o nome", () => {
+        render(_jsx(OtpInput, { ariaLabel: "Code", length: 4, digitLabel: "Digit {n} of {total}" }));
+        expect(caixas()).toHaveLength(4);
+        expect(screen.getByRole("textbox", { name: "Digit 2 of 4" })).toBeInTheDocument();
+    });
+    it("a primeira caixa leva autocomplete one-time-code e teclado numérico", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo" }));
+        expect(caixas()[0]).toHaveAttribute("autocomplete", "one-time-code");
+        expect(caixas()[1]).toHaveAttribute("autocomplete", "off");
+        expect(caixas()[0]).toHaveAttribute("inputmode", "numeric");
+    });
+    it("digitar avança o foco e entrega o código em onChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", onChange: aoMudar }));
+        caixas()[0].focus();
+        await usuario.keyboard("482");
+        expect(aoMudar).toHaveBeenLastCalledWith("482");
+        expect(caixas().map((c) => c.value).join("")).toBe("482");
+        expect(caixas()[3]).toHaveFocus();
+    });
+    it("rejeita o que não é dígito (numeric)", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", onChange: aoMudar }));
+        caixas()[0].focus();
+        await usuario.keyboard("a-b");
+        expect(aoMudar).not.toHaveBeenCalled();
+        expect(caixas()[0].value).toBe("");
+        expect(caixas()[0]).toHaveFocus();
+    });
+    it("alphanumeric aceita letras e sai em maiúsculas", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", type: "alphanumeric", length: 4, onChange: aoMudar }));
+        caixas()[0].focus();
+        await usuario.keyboard("a9z");
+        expect(aoMudar).toHaveBeenLastCalledWith("A9Z");
+        expect(caixas()[0]).toHaveAttribute("inputmode", "text");
+    });
+    it("colar o código inteiro em qualquer caixa distribui e chama onComplete uma vez", async () => {
+        const usuario = userEvent.setup();
+        const aoCompletar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", onComplete: aoCompletar }));
+        caixas()[2].focus();
+        await usuario.paste("482 913");
+        expect(caixas().map((c) => c.value).join("")).toBe("482913");
+        expect(aoCompletar).toHaveBeenCalledTimes(1);
+        expect(aoCompletar).toHaveBeenCalledWith("482913");
+        expect(caixas()[5]).toHaveFocus();
+    });
+    it("colar um pedaço entra a partir da caixa atual", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "12" }));
+        caixas()[2].focus();
+        await usuario.paste("345");
+        expect(caixas().map((c) => c.value).join("")).toBe("12345");
+    });
+    it("onComplete só dispara quando as caixas enchem", async () => {
+        const usuario = userEvent.setup();
+        const aoCompletar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", length: 3, onComplete: aoCompletar }));
+        caixas()[0].focus();
+        await usuario.keyboard("12");
+        expect(aoCompletar).not.toHaveBeenCalled();
+        await usuario.keyboard("3");
+        expect(aoCompletar).toHaveBeenCalledWith("123");
+    });
+    it("Backspace apaga o caractere e, em caixa vazia, volta e apaga o anterior", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "123", onChange: aoMudar }));
+        caixas()[3].focus();
+        await usuario.keyboard("{Backspace}");
+        expect(aoMudar).toHaveBeenLastCalledWith("12");
+        expect(caixas()[2]).toHaveFocus();
+        await usuario.keyboard("{Backspace}");
+        expect(aoMudar).toHaveBeenLastCalledWith("1");
+    });
+    it("setas, Home e End movem o foco", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "1234" }));
+        caixas()[4].focus();
+        await usuario.keyboard("{ArrowLeft}");
+        expect(caixas()[3]).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(caixas()[0]).toHaveFocus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(caixas()[1]).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(caixas()[4]).toHaveFocus();
+    });
+    it("focar uma caixa à frente da primeira vazia volta para ela (sem buraco)", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", defaultValue: "12" }));
+        await usuario.click(caixas()[5]);
+        expect(caixas()[2]).toHaveFocus();
+    });
+    it("controlado: reflete o value e escreve no pai", async () => {
+        const usuario = userEvent.setup();
+        function Pai() {
+            const [codigo, setCodigo] = useState("");
+            return (_jsxs(_Fragment, { children: [_jsx(OtpInput, { ariaLabel: "C\u00F3digo", value: codigo, onChange: setCodigo }), _jsx("output", { "data-testid": "codigo", children: codigo })] }));
+        }
+        render(_jsx(Pai, {}));
+        caixas()[0].focus();
+        await usuario.keyboard("90");
+        expect(screen.getByTestId("codigo")).toHaveTextContent("90");
+        expect(caixas()[1].value).toBe("0");
+    });
+    it("errorMessage liga o estado de erro e descreve as caixas", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", errorMessage: "C\u00F3digo inv\u00E1lido", id: "otp" }));
+        expect(screen.getByText("Código inválido")).toBeInTheDocument();
+        for (const c of caixas()) {
+            expect(c).toHaveAttribute("aria-invalid", "true");
+            expect(c).toHaveAttribute("aria-describedby", "otp-error");
+        }
+    });
+    it("disabled desabilita todas as caixas; label visível nomeia o grupo", () => {
+        render(_jsx(OtpInput, { label: "C\u00F3digo do app", disabled: true, id: "o" }));
+        for (const c of caixas())
+            expect(c).toBeDisabled();
+        expect(screen.getByRole("group", { name: "Código do app" })).toBeInTheDocument();
+    });
+    it("autoFocus foca a primeira caixa vazia", () => {
+        render(_jsx(OtpInput, { ariaLabel: "C\u00F3digo", autoFocus: true, defaultValue: "12" }));
+        expect(caixas()[2]).toHaveFocus();
+    });
+});

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

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

package/dist/teste/PopoverMaxHeight.test.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { beforeAll, describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Popover from "../components/Popover/Popover";
+import Button from "../components/Button/Button";
+beforeAll(() => {
+    if (!globalThis.ResizeObserver) {
+        globalThis.ResizeObserver = class {
+            observe() { }
+            unobserve() { }
+            disconnect() { }
+        };
+    }
+});
+async function abrirCom(maxHeight) {
+    const usuario = userEvent.setup();
+    render(_jsx(Popover, { title: "Colunas", maxHeight: maxHeight, content: _jsx("p", { children: "Corpo do painel" }), children: _jsx(Button, { variant: "secondary", children: "Abrir" }) }));
+    await usuario.click(screen.getByRole("button", { name: "Abrir" }));
+    const corpo = document.querySelector(".umds-popover__body");
+    expect(corpo).not.toBeNull();
+    return corpo;
+}
+describe("Popover · maxHeight", () => {
+    it("sem a prop não escreve style no corpo (o teto de 300px do CSS segue valendo)", async () => {
+        const corpo = await abrirCom();
+        expect(corpo.getAttribute("style")).toBeNull();
+    });
+    it("número vira px", async () => {
+        expect((await abrirCom(180)).style.maxHeight).toBe("180px");
+    });
+    it("texto vai como CSS", async () => {
+        expect((await abrirCom("60vh")).style.maxHeight).toBe("60vh");
+    });
+    it("none deixa o corpo crescer", async () => {
+        expect((await abrirCom("none")).style.maxHeight).toBe("none");
+    });
+});

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

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