@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/teste/Calendar.test.js

@@ -0,0 +1,221 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useState } from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Calendar from "../components/Calendar/Calendar";
+const HOJE = "2026-05-15";
+const EVENTOS = [
+    { id: "a", date: "2026-05-04", title: "Proc. Administrativo 002/2020", color: "--umds-primitive-blue-pure" },
+    { id: "b", date: "2026-05-11", title: "Protocolo 005/2020", color: "--umds-primitive-green-pure", time: "09:00" },
+    { id: "c", date: "2026-05-11", title: "Ofício 001/2020", color: "--umds-primitive-red-pure", time: "08:00" },
+    { id: "d1", date: "2026-05-20", title: "Reunião 1" },
+    { id: "d2", date: "2026-05-20", title: "Reunião 2" },
+    { id: "d3", date: "2026-05-20", title: "Reunião 3" },
+    { id: "d4", date: "2026-05-20", title: "Reunião 4" },
+    { id: "d5", date: "2026-05-20", title: "Reunião 5" },
+];
+const celula = (container, iso) => container.querySelector(`[data-date="${iso}"]`);
+describe("Calendar", () => {
+    it("é uma grade nomeada pelo mês, com sete cabeçalhos de dia", () => {
+        render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE }));
+        expect(screen.getByRole("grid", { name: "Maio 2026" })).toBeInTheDocument();
+        const cabecalhos = screen.getAllByRole("columnheader");
+        expect(cabecalhos).toHaveLength(7);
+        expect(cabecalhos[0]).toHaveAccessibleName("Domingo");
+        expect(screen.getByText("Maio 2026")).toBeInTheDocument();
+    });
+    it("o mês de maio de 2026 ocupa seis semanas inteiras; dias de fora ganham a classe", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE }));
+        expect(container.querySelectorAll('[role="gridcell"]')).toHaveLength(42);
+        expect(celula(container, "2026-04-26")).toHaveClass("umds-calendar__cell--outside");
+        expect(celula(container, "2026-05-15")).not.toHaveClass("umds-calendar__cell--outside");
+    });
+    it("hoje é marcado com aria-current", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE }));
+        expect(celula(container, HOJE)).toHaveAttribute("aria-current", "date");
+        expect(celula(container, "2026-05-16")).not.toHaveAttribute("aria-current");
+    });
+    it("cada dia tem nome acessível com a data e a contagem de eventos", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: EVENTOS }));
+        expect(celula(container, "2026-05-11")).toHaveAttribute("aria-label", "segunda-feira, 11 de maio de 2026, 2 eventos");
+        expect(celula(container, "2026-05-04")).toHaveAttribute("aria-label", "segunda-feira, 4 de maio de 2026, 1 evento");
+        expect(celula(container, "2026-05-12")).toHaveAttribute("aria-label", "terça-feira, 12 de maio de 2026, sem eventos");
+    });
+    it("dayLabel troca o nome do dia", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, dayLabel: (iso, n) => `${iso}:${n}`, events: EVENTOS }));
+        expect(celula(container, "2026-05-11")).toHaveAttribute("aria-label", "2026-05-11:2");
+    });
+    it("os eventos caem no dia certo, em ordem de horário, com a cor do dado", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: EVENTOS }));
+        const dia = celula(container, "2026-05-11");
+        const chips = within(dia).getAllByRole("button");
+        expect(chips).toHaveLength(2);
+        expect(chips[0]).toHaveTextContent("08:00");
+        expect(chips[0]).toHaveTextContent("Ofício 001/2020");
+        expect(chips[0].style.borderLeftColor).toBe("var(--umds-primitive-red-pure)");
+    });
+    it("evento sem cor usa o primário", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: EVENTOS }));
+        const chip = within(celula(container, "2026-05-20")).getAllByRole("button")[0];
+        expect(chip.style.borderLeftColor).toBe("var(--umds-semantic-color-primary-pure)");
+    });
+    it("passou de maxVisible: mostra três e um +N, que avisa com os escondidos", async () => {
+        const usuario = userEvent.setup();
+        const aoVerMais = vi.fn();
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: EVENTOS, onMoreClick: aoVerMais }));
+        const dia = celula(container, "2026-05-20");
+        expect(within(dia).getAllByText(/Reunião/)).toHaveLength(3);
+        const mais = within(dia).getByRole("button", { name: "2 eventos a mais em 20 de maio" });
+        expect(mais).toHaveTextContent("+2");
+        await usuario.click(mais);
+        expect(aoVerMais).toHaveBeenCalledTimes(1);
+        expect(aoVerMais.mock.calls[0][0]).toBe("2026-05-20");
+        expect(aoVerMais.mock.calls[0][1].map((e) => e.id)).toEqual(["d4", "d5"]);
+    });
+    it("maxVisible muda o corte", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: EVENTOS, maxVisible: 1 }));
+        expect(within(celula(container, "2026-05-20")).getAllByText(/Reunião/)).toHaveLength(1);
+        expect(within(celula(container, "2026-05-20")).getByText("+4")).toBeInTheDocument();
+    });
+    it("clicar no evento avisa com o evento e não clica no dia", async () => {
+        const usuario = userEvent.setup();
+        const aoEvento = vi.fn();
+        const aoDia = vi.fn();
+        render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: EVENTOS, onEventClick: aoEvento, onDayClick: aoDia }));
+        await usuario.click(screen.getByRole("button", { name: /Proc\. Administrativo 002\/2020/ }));
+        expect(aoEvento).toHaveBeenCalledWith(expect.objectContaining({ id: "a" }));
+        expect(aoDia).not.toHaveBeenCalled();
+    });
+    it("clicar no dia avisa com o ISO", async () => {
+        const usuario = userEvent.setup();
+        const aoDia = vi.fn();
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, onDayClick: aoDia }));
+        await usuario.click(celula(container, "2026-05-12"));
+        expect(aoDia).toHaveBeenCalledWith("2026-05-12");
+    });
+    it("anterior, próximo e hoje navegam e avisam em onDateChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, onDateChange: aoMudar }));
+        await usuario.click(screen.getByRole("button", { name: "Próximo" }));
+        expect(screen.getByText("Junho 2026")).toBeInTheDocument();
+        expect(aoMudar).toHaveBeenLastCalledWith("2026-06-15");
+        await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+        await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+        expect(screen.getByText("Abril 2026")).toBeInTheDocument();
+        await usuario.click(screen.getByRole("button", { name: "Hoje" }));
+        expect(screen.getByText("Maio 2026")).toBeInTheDocument();
+        expect(aoMudar).toHaveBeenLastCalledWith(HOJE);
+    });
+    it("só um dia entra na ordem de Tab (hoje), com os eventos dele", () => {
+        const { container } = render(_jsx(Calendar, { today: "2026-05-11", defaultDate: "2026-05-11", events: EVENTOS }));
+        const comTab = [...container.querySelectorAll('[role="gridcell"]')].filter((c) => c.getAttribute("tabindex") === "0");
+        expect(comTab).toHaveLength(1);
+        expect(comTab[0]).toHaveAttribute("data-date", "2026-05-11");
+        const chipsComTab = [...container.querySelectorAll(".umds-calendar__event")].filter((c) => c.getAttribute("tabindex") === "0");
+        expect(chipsComTab).toHaveLength(2);
+    });
+    it("setas movem o foco entre os dias; Home, End e Enter", async () => {
+        const usuario = userEvent.setup();
+        const aoDia = vi.fn();
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, onDayClick: aoDia }));
+        celula(container, HOJE).focus();
+        await usuario.keyboard("{ArrowRight}");
+        expect(celula(container, "2026-05-16")).toHaveFocus();
+        await usuario.keyboard("{ArrowDown}");
+        expect(celula(container, "2026-05-23")).toHaveFocus();
+        await usuario.keyboard("{ArrowLeft}{ArrowUp}");
+        expect(celula(container, "2026-05-15")).toHaveFocus();
+        await usuario.keyboard("{Home}");
+        expect(celula(container, "2026-05-10")).toHaveFocus();
+        await usuario.keyboard("{End}");
+        expect(celula(container, "2026-05-16")).toHaveFocus();
+        await usuario.keyboard("{Enter}");
+        expect(aoDia).toHaveBeenCalledWith("2026-05-16");
+    });
+    it("a seta que sai do mês troca de mês e leva o foco", async () => {
+        const usuario = userEvent.setup();
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: "2026-05-30" }));
+        celula(container, "2026-05-30").focus();
+        await usuario.keyboard("{ArrowRight}{ArrowRight}");
+        expect(screen.getByText("Junho 2026")).toBeInTheDocument();
+        expect(celula(container, "2026-06-01")).toHaveFocus();
+    });
+    it("PageDown e PageUp trocam de mês", async () => {
+        const usuario = userEvent.setup();
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE }));
+        celula(container, HOJE).focus();
+        await usuario.keyboard("{PageDown}");
+        expect(screen.getByText("Junho 2026")).toBeInTheDocument();
+        expect(celula(container, "2026-06-15")).toHaveFocus();
+        await usuario.keyboard("{PageUp}{PageUp}");
+        expect(screen.getByText("Abril 2026")).toBeInTheDocument();
+    });
+    it("a visão de semana mostra sete dias, todos os eventos, e avisa em onViewChange", async () => {
+        const usuario = userEvent.setup();
+        const aoVisao = vi.fn();
+        const { container } = render(_jsx(Calendar, { today: "2026-05-20", defaultDate: "2026-05-20", events: EVENTOS, onViewChange: aoVisao }));
+        await usuario.click(screen.getByRole("radio", { name: "Semana" }));
+        expect(aoVisao).toHaveBeenCalledWith("week");
+        expect(container.querySelectorAll('[role="gridcell"]')).toHaveLength(7);
+        expect(within(celula(container, "2026-05-20")).getAllByText(/Reunião/)).toHaveLength(5);
+        expect(screen.queryByText("+2")).toBeNull();
+        expect(container.querySelector(".umds-calendar--week")).not.toBeNull();
+    });
+    it("na semana, anterior e próximo andam sete dias", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(Calendar, { today: "2026-05-20", defaultDate: "2026-05-20", defaultView: "week", onDateChange: aoMudar }));
+        await usuario.click(screen.getByRole("button", { name: "Próximo" }));
+        expect(aoMudar).toHaveBeenLastCalledWith("2026-05-27");
+        await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+        await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+        expect(aoMudar).toHaveBeenLastCalledWith("2026-05-13");
+    });
+    it("weekStartsOn=1 começa a semana na segunda", () => {
+        render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, weekStartsOn: 1 }));
+        expect(screen.getAllByRole("columnheader")[0]).toHaveAccessibleName("Segunda-feira");
+    });
+    it("controlado: date e view mandam", () => {
+        function Pai() {
+            const [data, setData] = useState("2026-08-10");
+            return _jsx(Calendar, { today: HOJE, date: data, onDateChange: setData, view: "month" });
+        }
+        render(_jsx(Pai, {}));
+        expect(screen.getByText("Agosto 2026")).toBeInTheDocument();
+    });
+    it("locale e textos por prop (inglês)", () => {
+        render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, locale: "en-US", previousLabel: "Previous", nextLabel: "Next", todayLabel: "Today", monthLabel: "Month", weekLabel: "Week", viewLabel: "View" }));
+        expect(screen.getByText("May 2026")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Previous" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Today" })).toBeInTheDocument();
+        expect(screen.getByRole("radio", { name: "Week" })).toBeInTheDocument();
+        expect(screen.getByRole("group", { name: "View" })).toBeInTheDocument();
+        expect(screen.getAllByRole("columnheader")[0]).toHaveAccessibleName("Sunday");
+    });
+    it("moreLabel e moreAriaLabel traduzem o +N", () => {
+        render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: EVENTOS, locale: "en-US", moreLabel: "{count} more", moreAriaLabel: "{count} more events on {date}" }));
+        expect(screen.getByRole("button", { name: "2 more events on May 20" })).toHaveTextContent("2 more");
+    });
+    it("hideViewSwitcher esconde o seletor; os slots do cabeçalho aparecem", () => {
+        render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, hideViewSwitcher: true, headerStart: _jsx("span", { "data-testid": "filtro", children: "Todos os documentos" }), headerEnd: _jsx("span", { "data-testid": "legenda", children: "Legenda" }) }));
+        expect(screen.queryByRole("radio")).toBeNull();
+        expect(screen.getByTestId("filtro")).toBeInTheDocument();
+        expect(screen.getByTestId("legenda")).toBeInTheDocument();
+    });
+    it("selectedDate marca o dia", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, selectedDate: "2026-05-12" }));
+        expect(celula(container, "2026-05-12")).toHaveAttribute("aria-selected", "true");
+        expect(celula(container, "2026-05-12")).toHaveClass("umds-calendar__cell--selected");
+    });
+    it("evento com Date e com data-hora entra no dia", () => {
+        const { container } = render(_jsx(Calendar, { today: HOJE, defaultDate: HOJE, events: [
+                { date: new Date(2026, 4, 12), title: "Com Date" },
+                { date: "2026-05-13T10:30:00", title: "Com hora" },
+            ] }));
+        expect(within(celula(container, "2026-05-12")).getByText("Com Date")).toBeInTheDocument();
+        expect(within(celula(container, "2026-05-13")).getByText("Com hora")).toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/CalendarCabecalho.test.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Calendar from "../components/Calendar/Calendar";
+describe("Calendar · cabeçalho", () => {
+    it("headerStart e headerEnd (React: props com nó) chegam ao cabeçalho", () => {
+        render(_jsx(Calendar, { events: [], defaultDate: "2026-10-08", headerStart: _jsx("span", { children: "Todos os documentos" }), headerEnd: _jsx("span", { children: "Legenda" }) }));
+        expect(screen.getByText("Todos os documentos")).toBeInTheDocument();
+        expect(screen.getByText("Legenda")).toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/ChipsXs.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Chips from "../components/Chips/Chips";
+const raiz = (c) => c.firstElementChild;
+describe("Chips · xs e × em círculo", () => {
+    it("size xs escreve a classe; sem size continua md", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Chips, { label: "a", size: "xs" }), _jsx(Chips, { label: "b" })] }));
+        expect(container.children[0]).toHaveClass("umds-chip--xs");
+        expect(container.children[1]).toHaveClass("umds-chip--md");
+    });
+    it("circularRemove com removable escreve a classe do círculo", () => {
+        const { container } = render(_jsx(Chips, { label: "Marcador", removable: true, circularRemove: true }));
+        expect(raiz(container)).toHaveClass("umds-chip--remove-circle");
+    });
+    it("circularRemove sem removable não escreve a classe (não há ×)", () => {
+        const { container } = render(_jsx(Chips, { label: "Marcador", circularRemove: true }));
+        expect(raiz(container)).not.toHaveClass("umds-chip--remove-circle");
+        expect(screen.queryByRole("button")).toBeNull();
+    });
+    it("o × em círculo continua sendo o mesmo botão, com o mesmo nome e o mesmo clique", () => {
+        const aoRemover = vi.fn();
+        render(_jsx(Chips, { label: "Urgente", size: "xs", removable: true, circularRemove: true, onRemove: aoRemover }));
+        fireEvent.click(screen.getByRole("button", { name: "Remover Urgente" }));
+        expect(aoRemover).toHaveBeenCalledTimes(1);
+    });
+    it("sem circularRemove o chip removível é o de antes", () => {
+        const { container } = render(_jsx(Chips, { label: "x", removable: true }));
+        expect(raiz(container)).not.toHaveClass("umds-chip--remove-circle");
+    });
+});

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

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

package/dist/teste/Coachmark.test.js

@@ -0,0 +1,149 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { useRef, useState } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import Coachmark from "../components/Coachmark/Coachmark";
+const PASSOS = [
+    { target: "#alvo-a", title: "Cada item é uma aba", content: "Fluxos e formulários abrem em abas." },
+    { target: "#alvo-b", title: "Salvo sozinho", content: "Tudo fica neste navegador." },
+    { title: "Pronto", content: "Sem alvo: o cartão fica no centro." },
+];
+function Pagina(props) {
+    return (_jsxs("div", { children: [_jsx("button", { id: "alvo-a", children: "A" }), _jsx("button", { id: "alvo-b", children: "B" }), _jsx(Coachmark, { steps: PASSOS, ...props })] }));
+}
+describe("Coachmark", () => {
+    it("fechado não desenha nada", () => {
+        render(_jsx(Pagina, { open: false }));
+        expect(screen.queryByRole("dialog")).toBeNull();
+    });
+    it("aberto é um diálogo modal nomeado pelo título, com contador e texto", () => {
+        render(_jsx(Pagina, { open: true }));
+        const dialogo = screen.getByRole("dialog", { name: "Cada item é uma aba" });
+        expect(dialogo).toHaveAttribute("aria-modal", "true");
+        expect(dialogo).toHaveAccessibleDescription("Fluxos e formulários abrem em abas.");
+        expect(screen.getAllByText("1 de 3").length).toBeGreaterThan(0);
+        expect(screen.getByRole("button", { name: "Próximo" })).toBeInTheDocument();
+        expect(screen.queryByRole("button", { name: "Anterior" })).toBeNull();
+    });
+    it("o foco entra no cartão ao abrir", () => {
+        render(_jsx(Pagina, { open: true }));
+        expect(screen.getByRole("dialog")).toHaveFocus();
+    });
+    it("Próximo e Anterior trocam de passo e avisam em onStepChange", async () => {
+        const usuario = userEvent.setup();
+        const aoMudar = vi.fn();
+        render(_jsx(Pagina, { open: true, onStepChange: aoMudar }));
+        await usuario.click(screen.getByRole("button", { name: "Próximo" }));
+        expect(aoMudar).toHaveBeenLastCalledWith(1);
+        expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+        await usuario.click(screen.getByRole("button", { name: "Anterior" }));
+        expect(aoMudar).toHaveBeenLastCalledWith(0);
+        expect(screen.getByRole("dialog", { name: "Cada item é uma aba" })).toBeInTheDocument();
+    });
+    it("setas direita e esquerda avançam e voltam", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(Pagina, { open: true }));
+        await usuario.keyboard("{ArrowRight}");
+        expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+        await usuario.keyboard("{ArrowLeft}");
+        expect(screen.getByRole("dialog", { name: "Cada item é uma aba" })).toBeInTheDocument();
+    });
+    it("o último passo troca Próximo por Concluir e fecha com 'finish'", async () => {
+        const usuario = userEvent.setup();
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { open: true, defaultStep: 2, onClose: aoFechar }));
+        expect(screen.queryByRole("button", { name: "Próximo" })).toBeNull();
+        await usuario.click(screen.getByRole("button", { name: "Concluir" }));
+        expect(aoFechar).toHaveBeenCalledWith("finish");
+    });
+    it("Sair do tour fecha com 'skip' e hideSkip esconde o botão", async () => {
+        const usuario = userEvent.setup();
+        const aoFechar = vi.fn();
+        const { rerender } = render(_jsx(Pagina, { open: true, onClose: aoFechar }));
+        await usuario.click(screen.getByRole("button", { name: "Sair do tour" }));
+        expect(aoFechar).toHaveBeenCalledWith("skip");
+        rerender(_jsx(Pagina, { open: true, hideSkip: true, onClose: aoFechar }));
+        expect(screen.queryByRole("button", { name: "Sair do tour" })).toBeNull();
+    });
+    it("Esc fecha com 'escape'", async () => {
+        const usuario = userEvent.setup();
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { open: true, onClose: aoFechar }));
+        await usuario.keyboard("{Escape}");
+        expect(aoFechar).toHaveBeenCalledWith("escape");
+    });
+    it("o foco fica preso no cartão: Tab gira e Shift+Tab volta", async () => {
+        const usuario = userEvent.setup();
+        render(_jsx(Pagina, { open: true }));
+        const sair = screen.getByRole("button", { name: "Sair do tour" });
+        const proximo = screen.getByRole("button", { name: "Próximo" });
+        proximo.focus();
+        await usuario.tab();
+        expect(sair).toHaveFocus();
+        await usuario.tab({ shift: true });
+        expect(proximo).toHaveFocus();
+    });
+    it("todos os textos vêm por prop", () => {
+        render(_jsx(Pagina, { open: true, defaultStep: 1, nextLabel: "Next", previousLabel: "Back", skipLabel: "Skip tour", counterLabel: "{current} of {total}" }));
+        expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Back" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Skip tour" })).toBeInTheDocument();
+        expect(screen.getAllByText("2 of 3").length).toBeGreaterThan(0);
+    });
+    it("finishLabel troca o texto do último passo", () => {
+        render(_jsx(Pagina, { open: true, defaultStep: 2, finishLabel: "Done" }));
+        expect(screen.getByRole("button", { name: "Done" })).toBeInTheDocument();
+    });
+    it("com alvo, desenha o recorte; sem alvo (ou alvo que não existe), não", () => {
+        const { container, rerender } = render(_jsx(Pagina, { open: true }));
+        expect(document.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+        rerender(_jsx(Pagina, { open: true, step: 2 }));
+        expect(document.querySelector(".umds-coachmark__cutout")).toBeNull();
+        expect(document.querySelector(".umds-coachmark--no-target")).not.toBeNull();
+        void container;
+    });
+    it("alvo por ref do React e por elemento", () => {
+        function ComRef() {
+            const ref = useRef(null);
+            return (_jsxs("div", { children: [_jsx("button", { ref: ref, children: "Alvo" }), _jsx(Coachmark, { open: true, steps: [{ target: ref, title: "Por ref" }] })] }));
+        }
+        render(_jsx(ComRef, {}));
+        expect(screen.getByRole("dialog", { name: "Por ref" })).toBeInTheDocument();
+        expect(document.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+    });
+    it("step controlado manda no passo atual", () => {
+        render(_jsx(Pagina, { open: true, step: 1 }));
+        expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+    });
+    it("ao fechar, o foco volta ao elemento de antes", async () => {
+        const usuario = userEvent.setup();
+        function Dono() {
+            const [aberto, setAberto] = useState(false);
+            return (_jsxs("div", { children: [_jsx("button", { id: "abrir", onClick: () => setAberto(true), children: "Fazer o tour" }), _jsx(Coachmark, { open: aberto, steps: PASSOS, onClose: () => setAberto(false) })] }));
+        }
+        render(_jsx(Dono, {}));
+        const abrir = screen.getByRole("button", { name: "Fazer o tour" });
+        await usuario.click(abrir);
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+        // O foco entra no cartão depois da montagem (um quadro de animação): na CI,
+        // mais lenta, o Esc chegava antes e caía no body.
+        await waitFor(() => expect(screen.getByRole("dialog").contains(document.activeElement)).toBe(true));
+        await usuario.keyboard("{Escape}");
+        await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+        expect(abrir).toHaveFocus();
+    });
+    it("reabrir recomeça do primeiro passo", async () => {
+        const usuario = userEvent.setup();
+        function Dono() {
+            const [aberto, setAberto] = useState(true);
+            return (_jsxs("div", { children: [_jsx("button", { onClick: () => setAberto(true), children: "Reabrir" }), _jsx(Coachmark, { open: aberto, steps: PASSOS, onClose: () => setAberto(false) })] }));
+        }
+        render(_jsx(Dono, {}));
+        await usuario.keyboard("{ArrowRight}");
+        expect(screen.getByRole("dialog", { name: "Salvo sozinho" })).toBeInTheDocument();
+        await usuario.keyboard("{Escape}");
+        await usuario.click(screen.getByRole("button", { name: "Reabrir" }));
+        expect(screen.getByRole("dialog", { name: "Cada item é uma aba" })).toBeInTheDocument();
+    });
+});

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

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

package/dist/teste/CoachmarkSemVeu.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import Coachmark from "../components/Coachmark/Coachmark";
+const PASSOS = [{ target: "#alvo-a", title: "Novo: arrastar", content: "Arraste a linha para trocar a ordem." }];
+function Pagina(props) {
+    return (_jsxs("div", { children: [_jsx("button", { id: "alvo-a", children: "A" }), _jsx("button", { id: "fora", children: "Fora" }), _jsx(Coachmark, { steps: PASSOS, open: true, ...props })] }));
+}
+describe("Coachmark · modal={false}", () => {
+    it("sem véu nem recorte; o cartão é um diálogo não modal e a raiz deixa o ponteiro passar", () => {
+        const { baseElement } = render(_jsx(Pagina, { modal: false }));
+        expect(baseElement.querySelector(".umds-coachmark__veil")).toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark__cutout")).toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark")).toHaveClass("umds-coachmark--modeless");
+        expect(screen.getByRole("dialog", { name: "Novo: arrastar" })).toHaveAttribute("aria-modal", "false");
+    });
+    it("o padrão continua modal: véu, recorte e aria-modal verdadeiro", () => {
+        const { baseElement } = render(_jsx(Pagina, {}));
+        expect(baseElement.querySelector(".umds-coachmark__veil")).not.toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark__cutout")).not.toBeNull();
+        expect(baseElement.querySelector(".umds-coachmark")).not.toHaveClass("umds-coachmark--modeless");
+        expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+        const { unmount } = render(_jsx(Pagina, { modal: true }));
+        unmount();
+    });
+    it("o foco entra no cartão, mas o Tab não fica preso", async () => {
+        render(_jsx(Pagina, { modal: false }));
+        const cartao = screen.getByRole("dialog");
+        await waitFor(() => expect(cartao).toHaveFocus());
+        const concluir = screen.getByRole("button", { name: "Concluir" });
+        concluir.focus();
+        const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+        concluir.dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(false);
+    });
+    it("no modal o Tab continua preso (o último volta ao primeiro)", () => {
+        render(_jsx(Pagina, {}));
+        const concluir = screen.getByRole("button", { name: "Concluir" });
+        concluir.focus();
+        const evento = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+        concluir.dispatchEvent(evento);
+        expect(evento.defaultPrevented).toBe(true);
+    });
+    it("a página segue clicável: o clique fora não é capturado e o tour não fecha sozinho", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        fireEvent.click(screen.getByRole("button", { name: "Fora" }));
+        expect(aoFechar).not.toHaveBeenCalled();
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+    it("o Esc fecha de qualquer lugar da página, uma vez só", () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        const fora = screen.getByRole("button", { name: "Fora" });
+        fora.focus();
+        fireEvent.keyDown(fora, { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+        expect(aoFechar).toHaveBeenCalledWith("escape");
+    });
+    it("o Esc dentro do cartão também fecha uma vez só", async () => {
+        const aoFechar = vi.fn();
+        render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+        fireEvent.keyDown(screen.getByRole("dialog"), { key: "Escape" });
+        expect(aoFechar).toHaveBeenCalledTimes(1);
+    });
+    it("depois de fechar, o ouvinte do Esc sai do documento", () => {
+        const aoFechar = vi.fn();
+        const { rerender } = render(_jsx(Pagina, { modal: false, onClose: aoFechar }));
+        rerender(_jsx(Pagina, { modal: false, open: false, onClose: aoFechar }));
+        fireEvent.keyDown(document, { key: "Escape" });
+        expect(aoFechar).not.toHaveBeenCalled();
+    });
+    it("ao fechar, o foco volta ao elemento de antes, se a pessoa não foi a outro lugar", async () => {
+        const { rerender } = render(_jsx(Pagina, { modal: false, open: false }));
+        const gatilho = screen.getByRole("button", { name: "Fora" });
+        gatilho.focus();
+        expect(gatilho).toHaveFocus();
+        rerender(_jsx(Pagina, { modal: false, open: true }));
+        // O foco entra no cartão depois da montagem (um quadro de animação).
+        await waitFor(() => expect(screen.getByRole("dialog")).toHaveFocus());
+        rerender(_jsx(Pagina, { modal: false, open: false }));
+        await waitFor(() => expect(gatilho).toHaveFocus());
+    });
+});

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

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