@1doc/1ds-react 2.9.0 → 2.11.0

package/src/teste/TagPositivoTingido.test.tsx

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import Tag from "../components/Tag/Tag";
+import { lerArquivo } from "./lerArquivo";
+
+const cssTag = await lerArquivo("../core/src/components/Tag/Tag.css");
+const tema1doc = await lerArquivo("../tokens/dist/css/theme-1doc.css");
+const temaEscuro = await lerArquivo("../tokens/dist/css/theme-1doc-dark.css");
+const temaAltoContraste = await lerArquivo("../tokens/dist/css/theme-1doc-high-contrast.css");
+
+const css = cssTag.replace(/\r\n/g, "\n");
+const bloco = (seletor: string) => {
+  const inicio = css.indexOf(seletor + " {");
+  return css.slice(inicio, css.indexOf("}", inicio));
+};
+
+const TEMAS: Record<string, string> = { "theme-1doc.css": tema1doc, "theme-1doc-dark.css": temaEscuro, "theme-1doc-high-contrast.css": temaAltoContraste };
+const tema = (arquivo: string) => {
+  const texto = TEMAS[arquivo];
+  const cor = (nome: string) => (texto.match(new RegExp("--umds-theme-" + nome + ":\\s*(#[0-9A-Fa-f]{6})")) as RegExpMatchArray)[1];
+  return cor;
+};
+const luz = (hex: string) => {
+  const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((v) => (v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
+  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+};
+const contraste = (a: string, b: string) => {
+  const [x, y] = [luz(a), luz(b)].sort((m, n) => n - m);
+  return (x + 0.05) / (y + 0.05);
+};
+
+describe("Tag positive outlined sobre fundo tingido", () => {
+  it("escreve as classes que a regra de CSS escolhe", () => {
+    const { container } = render(<Tag label="Entregue" variant="positive" appearance="outlined" />);
+    const tag = container.firstElementChild as HTMLElement;
+    expect(tag).toHaveClass("umds-tag--outlined", "umds-tag--positive");
+  });
+
+  it("o texto é positive-dark e o contorno segue positive-pure", () => {
+    const regra = bloco(".umds-tag--outlined.umds-tag--positive");
+    expect(regra).toMatch(/color:\s*var\(--umds-semantic-color-feedback-positive-dark\)/);
+    expect(regra).toMatch(/border-color:\s*var\(--umds-semantic-color-feedback-positive-pure\)/);
+  });
+
+  it("no tema 1doc, sobre o azul-claro do card o texto passa de 4,5:1 (o pure dava 3,6:1)", () => {
+    const cor = tema("theme-1doc.css");
+    const fundo = cor("primary-light");
+    expect(contraste(cor("feedback-positive-pure"), fundo)).toBeLessThan(4.5);
+    expect(contraste(cor("feedback-positive-dark"), fundo)).toBeGreaterThanOrEqual(4.5);
+  });
+
+  it("nos temas escuro e de alto contraste o texto também passa de 4,5:1 sobre o fundo tingido e sobre a página", () => {
+    for (const arquivo of ["theme-1doc-dark.css", "theme-1doc-high-contrast.css"]) {
+      const cor = tema(arquivo);
+      for (const fundo of [cor("primary-light"), cor("background-white")]) {
+        expect(contraste(cor("feedback-positive-dark"), fundo)).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+});

package/src/teste/ToastAcaoEDetalhes.test.tsx

@@ -0,0 +1,109 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import Toast from "../components/Toast/Toast";
+import ToastStack from "../components/Toast/ToastStack";
+import { dismissAllToasts, toast } from "../utils/toast";
+
+afterEach(() => {
+  act(() => dismissAllToasts());
+});
+
+describe("Toast · ação e detalhes", () => {
+  it("actionLabel com onAction desenha o botão; acionar chama onAction e fecha", () => {
+    const aoAgir = vi.fn();
+    const aoFechar = vi.fn();
+    render(<Toast open message="Despacho enviado" actionLabel="Desfazer" onAction={aoAgir} onClose={aoFechar} />);
+    fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+    expect(aoAgir).toHaveBeenCalledTimes(1);
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("a ação roda antes de fechar", () => {
+    const ordem: string[] = [];
+    render(
+      <Toast
+        open
+        message="x"
+        actionLabel="Ver processo"
+        onAction={() => ordem.push("acao")}
+        onClose={() => ordem.push("fechar")}
+      />,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Ver processo" }));
+    expect(ordem).toEqual(["acao", "fechar"]);
+  });
+
+  it("actionLabel sem onAction, ou onAction sem actionLabel, não desenha botão de ação", () => {
+    const { rerender } = render(<Toast open message="x" actionLabel="Desfazer" />);
+    expect(screen.queryByRole("button", { name: "Desfazer" })).toBeNull();
+    rerender(<Toast open message="x" onAction={() => {}} />);
+    expect(document.querySelector(".umds-toast__action")).toBeNull();
+  });
+
+  it("details vira uma lista de linhas abaixo da descrição", () => {
+    render(<Toast open message="3 anexos não enviados" description="Corrija e envie de novo." details={["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"]} />);
+    const itens = screen.getAllByRole("listitem");
+    expect(itens.map((i) => i.textContent)).toEqual(["Anexo 1 acima de 10 MB", "Anexo 2 sem assunto"]);
+  });
+
+  it("sem details não há lista", () => {
+    render(<Toast open message="Salvo" />);
+    expect(document.querySelector(".umds-toast__details")).toBeNull();
+  });
+
+  it("o botão de fechar continua ao lado da ação", () => {
+    render(<Toast open message="x" actionLabel="Desfazer" onAction={() => {}} />);
+    expect(screen.getByRole("button", { name: "Fechar notificação" })).toBeInTheDocument();
+  });
+});
+
+describe("toast() imperativo com ação e detalhes", () => {
+  it("passa ação e detalhes ao ToastStack, e acionar a ação fecha o toast", () => {
+    const aoAgir = vi.fn();
+    render(<ToastStack />);
+    act(() => {
+      toast({ message: "Despacho enviado", details: ["SADM", "SOBR"], actionLabel: "Desfazer", onAction: aoAgir });
+    });
+    expect(screen.getByText("Despacho enviado")).toBeInTheDocument();
+    expect(screen.getAllByRole("listitem")).toHaveLength(2);
+    fireEvent.click(screen.getByRole("button", { name: "Desfazer" }));
+    expect(aoAgir).toHaveBeenCalledTimes(1);
+    expect(screen.queryByText("Despacho enviado")).toBeNull();
+  });
+
+  it("toast com ação não some sozinho (duration 0); sem ação continua em 5000", () => {
+    vi.useFakeTimers();
+    try {
+      render(<ToastStack />);
+      act(() => {
+        toast({ message: "Com ação", actionLabel: "Desfazer", onAction: () => {} });
+        toast({ message: "Sem ação" });
+      });
+      expect(screen.getByText("Com ação")).toBeInTheDocument();
+      expect(screen.getByText("Sem ação")).toBeInTheDocument();
+      act(() => {
+        vi.advanceTimersByTime(5100);
+      });
+      expect(screen.queryByText("Sem ação")).toBeNull();
+      expect(screen.getByText("Com ação")).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it("um duration explícito vale também com ação", () => {
+    vi.useFakeTimers();
+    try {
+      render(<ToastStack />);
+      act(() => {
+        toast({ message: "Curto", actionLabel: "Desfazer", onAction: () => {}, duration: 1000 });
+      });
+      act(() => {
+        vi.advanceTimersByTime(1100);
+      });
+      expect(screen.queryByText("Curto")).toBeNull();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

package/src/teste/lerArquivo.ts

@@ -0,0 +1,13 @@
+/**
+ * Lê um arquivo do pacote (relativo à pasta `packages/react`) para os testes que conferem uma regra de CSS na
+ * fonte: o jsdom não tem cascata de arquivo, e o `css: false` do vitest esvazia o `?raw` do CSS.
+ * O `node:fs` entra por import dinâmico com nome calculado porque o `tsc` do pacote não traz os tipos do Node.
+ */
+const modulo = (nome: string): Promise<any> => import(/* @vite-ignore */ nome);
+
+export async function lerArquivo(relativo: string): Promise<string> {
+  const fs = await modulo("node:fs");
+  const path = await modulo("node:path");
+  const raiz: string = (globalThis as any).process.cwd();
+  return fs.readFileSync(path.resolve(raiz, relativo), "utf8");
+}

package/src/utils/html-seguro.ts

@@ -5,14 +5,20 @@
  * fora (um valor guardado, um texto colado) pode trazer `<img onerror>`,
  * `<a href="javascript:...">`, `<script>`, `style` e classes de outro site. Este
  * módulo reduz o HTML ao que o editor sabe escrever: negrito, itálico,
- * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação e link.
+ * sublinhado, tachado, listas, parágrafos, quebras, títulos, citação, link,
+ * estilo de texto por token (`color`, `font-size`, `font-family` em `<span>`),
+ * alinhamento de bloco (`text-align`), imagem (`http(s)`, caminho ou `data:image`
+ * em PNG, JPEG, GIF e WebP) e tabela simples.
  *
  * Roda no navegador (precisa de DOM). Dentro de um `<template>` o HTML é inerte:
  * nada executa e nenhuma imagem carrega enquanto se higieniza. Sem DOM
  * (servidor), devolve o texto escapado.
  */
 
-const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE"];
+const PERMITIDAS = ["A", "B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "UL", "OL", "LI", "P", "BR", "DIV", "SPAN", "H1", "H2", "H3", "H4", "BLOCKQUOTE", "IMG", "TABLE", "THEAD", "TBODY", "TR", "TH", "TD"];
+/** Blocos que aceitam `text-align`. */
+const ALINHAVEIS = ["P", "DIV", "H1", "H2", "H3", "H4", "LI", "BLOCKQUOTE", "TH", "TD"];
+const ALINHAMENTOS = ["left", "center", "right", "justify"];
 const DESCARTADAS = ["SCRIPT", "STYLE", "IFRAME", "OBJECT", "EMBED", "LINK", "META", "TEMPLATE", "NOSCRIPT", "SVG", "MATH", "FORM", "INPUT", "BUTTON", "TEXTAREA", "SELECT"];
 const escapar = (texto: string): string => texto.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 
@@ -41,6 +47,66 @@ export const normalizarEndereco = (bruto: string): string => {
   if (/^[a-z][a-z0-9+.-]*:/i.test(semControle)) return "";
   return "https://" + texto;
 };
+
+/** Cor, tamanho e família de fonte só valem como TOKEN do DS: `var(--umds-...)`. Cor em hex, rgb ou nome sai. */
+const COR_TOKEN = /^var\(--umds-(?:primitive|semantic)-[a-z0-9-]+\)$/;
+const TAMANHO_TOKEN = /^var\(--umds-primitive-font-size-[a-z0-9]+\)$/;
+const FAMILIA_TOKEN = /^var\(--umds-(?:primitive|semantic)-font-family-(?:base|mono)\)$/;
+
+/**
+ * Declaração de estilo de texto que o editor aceita: `color`, `font-size` e `font-family`,
+ * cada uma só com um token do DS. Devolve a declaração limpa ("color: var(--x);") ou "".
+ */
+export const estiloDeTexto = (propriedade: string, valor: string): string => {
+  const prop = String(propriedade || "").trim().toLowerCase();
+  const val = String(valor || "").trim();
+  if (prop === "color" && COR_TOKEN.test(val)) return "color: " + val + ";";
+  if (prop === "font-size" && TAMANHO_TOKEN.test(val)) return "font-size: " + val + ";";
+  if (prop === "font-family" && FAMILIA_TOKEN.test(val)) return "font-family: " + val + ";";
+  return "";
+};
+
+/** As declarações válidas de um atributo `style` (só color, font-size e font-family por token). */
+const estiloDoSpan = (estilo: string): string => {
+  const partes = String(estilo || "").split(";");
+  let saida = "";
+  for (let i = 0; i < partes.length; i++) {
+    const corte = partes[i].indexOf(":");
+    if (corte === -1) continue;
+    const decl = estiloDeTexto(partes[i].slice(0, corte), partes[i].slice(corte + 1));
+    if (decl) saida += (saida ? " " : "") + decl;
+  }
+  return saida;
+};
+
+/**
+ * Endereço de imagem que o editor aceita: `http(s)`, caminho (`/x`, `./x`, `../x`) ou
+ * `data:image` em base64 de PNG, JPEG, GIF ou WebP (SVG fica de fora: carrega script).
+ * Devolve o endereço limpo, ou "" se for perigoso ou vazio.
+ */
+export const imagemSegura = (bruto: string): string => {
+  const texto = (bruto || "").trim();
+  if (!texto) return "";
+  const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+  if (/^data:image\/(png|jpe?g|gif|webp);base64,[a-z0-9+/]+=*$/i.test(semControle)) return semControle;
+  // `//host/x` (sem esquema) carregaria de outro site sem o autor ter pedido: fica de fora.
+  if (/^(https?:\/\/|\/(?!\/)|\.\.?\/)/i.test(semControle)) return texto;
+  return "";
+};
+
+/** O `text-align` de um elemento, pelo `style` ou pelo atributo `align`: left, center, right, justify ou "". */
+const alinhamentoDe = (elemento: any): string => {
+  const estilo = String(elemento.getAttribute("style") || "");
+  const achado = /(?:^|;)\s*text-align\s*:\s*([a-z]+)\s*(?:;|$)/i.exec(estilo);
+  const valor = (achado ? achado[1] : String(elemento.getAttribute("align") || "")).toLowerCase();
+  return ALINHAMENTOS.indexOf(valor) !== -1 ? valor : "";
+};
+
+/** Número inteiro de 2 a 99 em `colspan`/`rowspan`; o resto some. */
+const vao = (valor: any): string => {
+  const n = parseInt(String(valor || ""), 10);
+  return n >= 2 && n <= 99 ? String(n) : "";
+};
 const limparNo = (no: any, saida: any, documento: any): void => {
   const filhos = Array.prototype.slice.call(no.childNodes);
   for (let i = 0; i < filhos.length; i++) {
@@ -57,7 +123,31 @@ const limparNo = (no: any, saida: any, documento: any): void => {
       limparNo(filho, saida, documento);
       continue;
     }
+    if (tag === "IMG") {
+      // Imagem sem endereço seguro some inteira (não deixa um <img> quebrado nem carregando de fora).
+      const origem = imagemSegura(filho.getAttribute("src") || "");
+      if (!origem) continue;
+      const imagem = documento.createElement("img");
+      imagem.setAttribute("src", origem);
+      imagem.setAttribute("alt", String(filho.getAttribute("alt") || ""));
+      saida.appendChild(imagem);
+      continue;
+    }
     const novo = documento.createElement(tag.toLowerCase());
+    if (ALINHAVEIS.indexOf(tag) !== -1) {
+      const alinhamento = alinhamentoDe(filho);
+      if (alinhamento) novo.setAttribute("style", "text-align: " + alinhamento + ";");
+    }
+    if (tag === "SPAN") {
+      const estiloValido = estiloDoSpan(filho.getAttribute("style") || "");
+      if (estiloValido) novo.setAttribute("style", estiloValido);
+    }
+    if (tag === "TD" || tag === "TH") {
+      const colunas = vao(filho.getAttribute("colspan"));
+      const linhas = vao(filho.getAttribute("rowspan"));
+      if (colunas) novo.setAttribute("colspan", colunas);
+      if (linhas) novo.setAttribute("rowspan", linhas);
+    }
     if (tag === "A") {
       const href = enderecoSeguro(filho.getAttribute("href") || "");
       if (href) {
@@ -81,8 +171,21 @@ export const sanitizarHtml = (html: string): string => {
   return saida.innerHTML;
 };
 
+/** A tabela vazia que o editor insere: `linhas` × `colunas` células com uma quebra, para o cursor entrar. */
+export const htmlDaTabela = (linhas: number, colunas: number): string => {
+  let celulas = "";
+  for (let c = 0; c < colunas; c++) celulas += "<td><br></td>";
+  let corpo = "";
+  for (let l = 0; l < linhas; l++) corpo += "<tr>" + celulas + "</tr>";
+  return "<table><tbody>" + corpo + "</tbody></table><p><br></p>";
+};
+
+/** O `<img>` que o editor insere (endereço já seguro). */
+export const htmlDaImagem = (endereco: string, alt: string): string => '<img src="' + escapar(endereco) + '" alt="' + escapar(alt || "") + '">';
+
 /** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
 export const htmlVazio = (html: string): boolean => {
+  if (/<(img|table)[\s>]/i.test(html || "")) return false;
   const texto = (html || "").replace(/<br\s*\/?>/gi, "").replace(/<\/?(div|p|span)[^>]*>/gi, "").trim();
   return texto === "";
 };

package/src/utils/toast.ts

@@ -22,7 +22,13 @@ export interface ToastOptions {
   description?: string;
   /** Variante semântica @default 'info' */
   variant?: ToastVariant;
-  /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 */
+  /** Linhas de detalhe abaixo da descrição */
+  details?: string[];
+  /** Rótulo do botão de ação ("Desfazer"); só aparece com `onAction` */
+  actionLabel?: string;
+  /** Chamado ao acionar o botão de ação; depois dele o toast fecha */
+  onAction?: (event?: any) => void;
+  /** Auto-dismiss em ms; 0 = não fecha sozinho @default 5000 (0 quando há ação: dá tempo de agir, WCAG 2.2.1) */
   duration?: number;
   /** Exibe o botão de fechar @default true */
   closable?: boolean;
@@ -31,6 +37,9 @@ export interface ToastData {
   id: number;
   message: string;
   description?: string;
+  details?: string[];
+  actionLabel?: string;
+  onAction?: (event?: any) => void;
   variant: ToastVariant;
   duration: number;
   closable: boolean;
@@ -50,7 +59,8 @@ export const toast = (options: ToastOptions): number => {
   const id = sequence;
   items = [...items, {
     variant: "info",
-    duration: 5000,
+    // Toast com ação não some antes de dar tempo de agir.
+    duration: options.actionLabel && options.onAction ? 0 : 5000,
     closable: true,
     ...options,
     id