@1doc/1ds-react 2.8.0 → 2.9.0

package/src/teste/TabsContadorFechavel.test.tsx

@@ -0,0 +1,144 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import Tabs from "../components/Tabs/Tabs";
+import Tab from "../components/Tabs/Tab";
+
+describe("Tab · count", () => {
+  it("mostra o contador em pílula e ele entra no nome da aba", () => {
+    render(
+      <Tabs value="0" ariaLabel="Tarefas">
+        <Tab label="Todas" index="0" count={31} />
+        <Tab label="Atribuídas" index="1" count={9} />
+      </Tabs>,
+    );
+    expect(screen.getByRole("tab", { name: "Todas 31" })).toBeInTheDocument();
+    expect(screen.getByRole("tab", { name: "Atribuídas 9" })).toBeInTheDocument();
+  });
+
+  it("o 0 aparece; sem count, não há pílula", () => {
+    const { container } = render(
+      <Tabs value="0">
+        <Tab label="Concluídas" index="0" count={0} />
+        <Tab label="Sem contador" index="1" />
+      </Tabs>,
+    );
+    const pilulas = container.querySelectorAll(".umds-tabs__count");
+    expect(pilulas).toHaveLength(1);
+    expect(pilulas[0].textContent).toBe("0");
+  });
+
+  it("a pílula fica dentro da aba selecionada (que a pinta de azul pelo CSS)", () => {
+    const { container } = render(
+      <Tabs value="1">
+        <Tab label="A" index="0" count={1} />
+        <Tab label="B" index="1" count={2} />
+      </Tabs>,
+    );
+    const selecionada = container.querySelector(".umds-tabs__tab--selected");
+    expect(selecionada?.querySelector(".umds-tabs__count")?.textContent).toBe("2");
+  });
+});
+
+describe("Tab · closable", () => {
+  it("o × é um botão irmão da aba, com o nome 'Fechar <aba>'", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="Documento 1" index="0" closable />
+      </Tabs>,
+    );
+    const fechar = screen.getByRole("button", { name: "Fechar Documento 1" });
+    const aba = screen.getByRole("tab");
+    expect(aba.contains(fechar)).toBe(false);
+    expect(fechar.parentElement).toBe(aba.parentElement);
+  });
+
+  it("o rótulo do × vem por prop", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="Doc 1" index="0" closable closeLabel="Close" />
+      </Tabs>,
+    );
+    expect(screen.getByRole("button", { name: "Close Doc 1" })).toBeInTheDocument();
+  });
+
+  it("clicar no × chama onClose com o index e não troca de aba", () => {
+    const aoFechar = vi.fn();
+    const aoTrocar = vi.fn();
+    render(
+      <Tabs value="0" onChange={aoTrocar}>
+        <Tab label="Um" index="0" />
+        <Tab label="Dois" index="1" closable onClose={aoFechar} />
+      </Tabs>,
+    );
+    fireEvent.click(screen.getByRole("button", { name: "Fechar Dois" }));
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+    expect(aoFechar.mock.calls[0][0]).toBe("1");
+    expect(aoTrocar).not.toHaveBeenCalled();
+  });
+
+  it("Delete na aba focada fecha; sem closable, não", () => {
+    const aoFechar = vi.fn();
+    render(
+      <Tabs value="0">
+        <Tab label="Fechável" index="0" closable onClose={aoFechar} />
+        <Tab label="Fixa" index="1" onClose={aoFechar} />
+      </Tabs>,
+    );
+    fireEvent.keyDown(screen.getByRole("tab", { name: "Fechável" }), { key: "Delete" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+    fireEvent.keyDown(screen.getByRole("tab", { name: "Fixa" }), { key: "Delete" });
+    expect(aoFechar).toHaveBeenCalledTimes(1);
+  });
+
+  it("sem closable não há ×", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="Fixa" index="0" />
+      </Tabs>,
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("o tablist só tem abas como filhas de papel (o × não é tab)", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="A" index="0" closable />
+        <Tab label="B" index="1" closable />
+      </Tabs>,
+    );
+    expect(screen.getAllByRole("tab")).toHaveLength(2);
+  });
+});
+
+describe("Tabs · onAdd", () => {
+  it("mostra o + fora do tablist e chama onAdd", () => {
+    const aoAdicionar = vi.fn();
+    render(
+      <Tabs value="0" onAdd={aoAdicionar}>
+        <Tab label="A" index="0" />
+      </Tabs>,
+    );
+    const mais = screen.getByRole("button", { name: "Adicionar aba" });
+    expect(screen.getByRole("tablist").contains(mais)).toBe(false);
+    fireEvent.click(mais);
+    expect(aoAdicionar).toHaveBeenCalledTimes(1);
+  });
+
+  it("o rótulo do + vem por prop", () => {
+    render(
+      <Tabs value="0" onAdd={() => {}} addLabel="New tab">
+        <Tab label="A" index="0" />
+      </Tabs>,
+    );
+    expect(screen.getByRole("button", { name: "New tab" })).toBeInTheDocument();
+  });
+
+  it("sem onAdd não há botão", () => {
+    render(
+      <Tabs value="0">
+        <Tab label="A" index="0" />
+      </Tabs>,
+    );
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+});

package/src/teste/TooltipDark.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import Tooltip from "../components/Tooltip/Tooltip";
+
+async function abrir(ui: React.ReactElement) {
+  render(ui);
+  screen.getByRole("button").focus();
+  await waitFor(() => expect(screen.getByRole("tooltip")).toHaveClass("umds-tooltip__bubble--open"));
+  return screen.getByRole("tooltip");
+}
+
+describe("Tooltip · variant dark e maxWidth", () => {
+  it("dark escreve a classe no balão e no wrapper flutuante", async () => {
+    const balao = await abrir(
+      <Tooltip content="Atualizar" variant="dark">
+        <button type="button">Atualizar</button>
+      </Tooltip>,
+    );
+    expect(balao).toHaveClass("umds-tooltip__bubble--dark");
+    expect(balao.parentElement).toHaveClass("umds-tooltip__floating--dark");
+  });
+
+  it("sem variant o balão é o padrão", async () => {
+    const balao = await abrir(
+      <Tooltip content="Atualizar">
+        <button type="button">Atualizar</button>
+      </Tooltip>,
+    );
+    expect(balao).not.toHaveClass("umds-tooltip__bubble--dark");
+    expect(balao.parentElement).not.toHaveClass("umds-tooltip__floating--dark");
+    expect(balao.parentElement?.style.maxWidth).toBe("");
+  });
+
+  it("maxWidth vai ao wrapper flutuante, em qualquer variante", async () => {
+    const balao = await abrir(
+      <Tooltip content="Texto longo" variant="dark" maxWidth="140px">
+        <button type="button">x</button>
+      </Tooltip>,
+    );
+    expect(balao.parentElement?.style.maxWidth).toBe("140px");
+  });
+
+  it("a descrição acessível não muda com a variante", () => {
+    render(
+      <Tooltip content="Atualizar" variant="dark">
+        <button type="button">Recarregar</button>
+      </Tooltip>,
+    );
+    expect(screen.getByRole("button")).toHaveAccessibleDescription("Atualizar");
+  });
+});

package/src/utils/calendario.ts

@@ -0,0 +1,78 @@
+/**
+ * Datas do `Calendar`, em ISO local (`YYYY-MM-DD`) e sem biblioteca.
+ *
+ * Tudo aqui trabalha com o DIA como texto: `"2026-05-15"`. O `Date` só aparece
+ * por dentro, sempre à meia-noite LOCAL (`new Date(ano, mes, dia)`), nunca
+ * `new Date("2026-05-15")`, que o JavaScript lê como UTC e, no fuso do Brasil,
+ * devolve o dia anterior.
+ */
+
+const doisDigitos = (n: number): string => n < 10 ? "0" + n : String(n);
+
+/** `Date` local → `YYYY-MM-DD`. */
+export const toIso = (data: Date): string => data.getFullYear() + "-" + doisDigitos(data.getMonth() + 1) + "-" + doisDigitos(data.getDate());
+
+/** `YYYY-MM-DD` → `Date` à meia-noite local. */
+export const parseIso = (iso: string): Date => {
+  const partes = iso.slice(0, 10).split("-");
+  return new Date(Number(partes[0]), Number(partes[1]) - 1, Number(partes[2]));
+};
+
+/** Aceita `Date` ou texto (`2026-05-15` e `2026-05-15T10:00`) e devolve `YYYY-MM-DD`; "" se não der. */
+export const normalizeIso = (valor: any): string => {
+  if (!valor) return "";
+  if (typeof valor === "string") return /^\d{4}-\d{2}-\d{2}/.test(valor) ? valor.slice(0, 10) : "";
+  if (valor instanceof Date && !isNaN(valor.getTime())) return toIso(valor);
+  return "";
+};
+export const addDays = (iso: string, dias: number): string => {
+  const data = parseIso(iso);
+  data.setDate(data.getDate() + dias);
+  return toIso(data);
+};
+
+/** Soma meses mantendo o dia, ou o último dia do mês de chegada (31/01 + 1 mês = 28/02). */
+export const addMonths = (iso: string, meses: number): string => {
+  const data = parseIso(iso);
+  const dia = data.getDate();
+  data.setDate(1);
+  data.setMonth(data.getMonth() + meses);
+  const ultimo = new Date(data.getFullYear(), data.getMonth() + 1, 0).getDate();
+  data.setDate(Math.min(dia, ultimo));
+  return toIso(data);
+};
+
+/** Dia da semana: 0 = domingo. */
+export const weekdayOf = (iso: string): number => parseIso(iso).getDay();
+
+/** Primeiro dia da semana que contém `iso`, dado o dia em que a semana começa (0 = domingo, 1 = segunda). */
+export const startOfWeek = (iso: string, comecaEm: number): string => {
+  const recuo = (weekdayOf(iso) - comecaEm + 7) % 7;
+  return addDays(iso, -recuo);
+};
+export const startOfMonth = (iso: string): string => iso.slice(0, 8) + "01";
+export const endOfMonth = (iso: string): string => {
+  const data = parseIso(iso);
+  return toIso(new Date(data.getFullYear(), data.getMonth() + 1, 0));
+};
+export const isSameMonth = (a: string, b: string): boolean => a.slice(0, 7) === b.slice(0, 7);
+
+/** Os sete dias da semana que contém `iso`. */
+export const weekDays = (iso: string, comecaEm: number): string[] => {
+  const inicio = startOfWeek(iso, comecaEm);
+  const dias: string[] = [];
+  for (let i = 0; i < 7; i++) dias.push(addDays(inicio, i));
+  return dias;
+};
+
+/** O mês de `iso` em semanas inteiras (de 4 a 6 linhas), com os dias dos meses vizinhos que completam as pontas. */
+export const monthMatrix = (iso: string, comecaEm: number): string[][] => {
+  const ultimo = endOfMonth(iso);
+  let cursor = startOfWeek(startOfMonth(iso), comecaEm);
+  const semanas: string[][] = [];
+  while (cursor <= ultimo) {
+    semanas.push(weekDays(cursor, comecaEm));
+    cursor = addDays(cursor, 7);
+  }
+  return semanas;
+}

package/src/utils/html-seguro.ts

@@ -0,0 +1,94 @@
+/**
+ * HTML seguro para o `RichTextEditor`.
+ *
+ * O editor devolve HTML (`onChange`) e recebe HTML (`value`). HTML que vem de
+ * 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.
+ *
+ * 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 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;");
+
+/**
+ * Endereço de link que o editor aceita: `http:`, `https:`, `mailto:`, `tel:`,
+ * caminho (`/x`, `./x`, `../x`) ou âncora (`#x`). Devolve o endereço limpo, ou ""
+ * se for perigoso (`javascript:`, `data:`, `vbscript:`...).
+ */
+export const enderecoSeguro = (bruto: string): string => {
+  const texto = (bruto || "").trim();
+  if (!texto) return "";
+  // Caracteres de controle e espaços no meio do esquema são o truque clássico (`java\nscript:`).
+  const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+  if (/^(https?:\/\/|mailto:|tel:|\/|\.\.?\/|#)/i.test(semControle)) return texto;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(semControle)) return "";
+  return "";
+};
+
+/** Devolve o endereço pronto para `href`: o seguro como veio, ou `https://` + o texto quando não tem esquema. "" se perigoso ou vazio. */
+export const normalizarEndereco = (bruto: string): string => {
+  const texto = (bruto || "").trim();
+  if (!texto) return "";
+  const seguro = enderecoSeguro(texto);
+  if (seguro) return seguro;
+  const semControle = texto.replace(/[\u0000-\u001f\u007f\s]+/g, "");
+  if (/^[a-z][a-z0-9+.-]*:/i.test(semControle)) return "";
+  return "https://" + texto;
+};
+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++) {
+    const filho = filhos[i];
+    if (filho.nodeType === 3) {
+      saida.appendChild(documento.createTextNode(filho.nodeValue));
+      continue;
+    }
+    if (filho.nodeType !== 1) continue;
+    const tag = String(filho.tagName).toUpperCase();
+    if (DESCARTADAS.indexOf(tag) !== -1) continue;
+    if (PERMITIDAS.indexOf(tag) === -1) {
+      // Tag desconhecida: some a tag, fica o conteúdo.
+      limparNo(filho, saida, documento);
+      continue;
+    }
+    const novo = documento.createElement(tag.toLowerCase());
+    if (tag === "A") {
+      const href = enderecoSeguro(filho.getAttribute("href") || "");
+      if (href) {
+        novo.setAttribute("href", href);
+        novo.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    limparNo(filho, novo, documento);
+    saida.appendChild(novo);
+  }
+};
+
+/** Reduz `html` ao que o editor escreve. Sem DOM, devolve o texto escapado. */
+export const sanitizarHtml = (html: string): string => {
+  const bruto = html || "";
+  if (typeof document === "undefined") return escapar(bruto);
+  const molde: any = document.createElement("template");
+  molde.innerHTML = bruto;
+  const saida: any = document.createElement("div");
+  limparNo(molde.content, saida, document);
+  return saida.innerHTML;
+};
+
+/** O editor está "vazio": sem texto, sem lista e sem quebra solta (o `<br>` que o navegador deixa). */
+export const htmlVazio = (html: string): boolean => {
+  const texto = (html || "").replace(/<br\s*\/?>/gi, "").replace(/<\/?(div|p|span)[^>]*>/gi, "").trim();
+  return texto === "";
+};
+
+/** O `<a>` que o editor escreve quando o link não tem texto escolhido: o endereço (já seguro) é o href e o texto. */
+export const htmlDoLink = (endereco: string): string => {
+  const seguro = escapar(endereco);
+  return '<a href="' + seguro + '">' + seguro + "</a>";
+}

package/src/utils/paleta-de-cores.ts

@@ -0,0 +1,34 @@
+/**
+ * Paleta de cor categórica do 1DS: os primitivos `--umds-primitive-<família>-<tom>`.
+ *
+ * É a lista que o `ColorPicker` mostra por padrão. Ela existe como constante
+ * exportada para o app mapear o valor guardado (o nome do token) de volta para
+ * um rótulo, ou montar a própria lista a partir dela (`COLOR_PALETTE.filter(...)`).
+ *
+ * Primitivo não muda com o tema: é o certo para cor de DADO (marcador, tipo de
+ * documento, setor), que precisa ser a mesma no claro e no escuro. Para cor com
+ * PAPEL (primário, erro, sucesso) use os semânticos `--umds-semantic-color-*`,
+ * que não entram aqui.
+ */
+export type PaletteColor = {
+  /** Nome da variável CSS, ex.: `--umds-primitive-blue-pure`. Use como `var(${value})`. */
+  value: string;
+  /** Nome em português, ex.: "Azul escuro". */
+  label: string;
+  /** Família: blue, red, green, orange, yellow, purple ou gray. */
+  family: string;
+  /** Tom claro o bastante para o ícone de marcação sair escuro (contraste mínimo de 3:1). */
+  onLight: boolean;
+};
+const cor = (family: string, tone: string, label: string, onLight: boolean): PaletteColor => ({
+  value: "--umds-primitive-" + family + "-" + tone,
+  label,
+  family,
+  onLight
+});
+
+/** Os 31 primitivos de cor (6 famílias x 4 tons + 7 cinzas), do mais escuro ao mais claro. */
+export const COLOR_PALETTE: PaletteColor[] = [cor("blue", "dark", "Azul escuro", false), cor("blue", "pure", "Azul", false), cor("blue", "medium", "Azul médio", false), cor("blue", "light", "Azul claro", true), cor("red", "dark", "Vermelho escuro", false), cor("red", "pure", "Vermelho", false), cor("red", "medium", "Vermelho médio", false), cor("red", "light", "Vermelho claro", true), cor("green", "dark", "Verde escuro", false), cor("green", "pure", "Verde", false), cor("green", "medium", "Verde médio", false), cor("green", "light", "Verde claro", true), cor("orange", "dark", "Laranja escuro", false), cor("orange", "pure", "Laranja", false), cor("orange", "medium", "Laranja médio", true), cor("orange", "light", "Laranja claro", true), cor("yellow", "dark", "Amarelo escuro", false), cor("yellow", "pure", "Amarelo", true), cor("yellow", "medium", "Amarelo médio", true), cor("yellow", "light", "Amarelo claro", true), cor("purple", "dark", "Roxo escuro", false), cor("purple", "pure", "Roxo", false), cor("purple", "medium", "Roxo médio", false), cor("purple", "light", "Roxo claro", true), cor("gray", "darkest", "Cinza muito escuro", false), cor("gray", "darker", "Cinza escuro", false), cor("gray", "dark", "Cinza", false), cor("gray", "medium", "Cinza médio", true), cor("gray", "light", "Cinza claro", true), cor("gray", "lighter", "Cinza mais claro", true), cor("gray", "lightest", "Cinza muito claro", true)];
+
+/** `#RRGGBB` completo (o `#` é opcional). Hexadecimal curto (`#FFF`) não vale. */
+export const isHexColor = (texto: string): boolean => /^#?[0-9a-fA-F]{6}$/.test((texto || "").trim())

package/src/utils/texto.ts

@@ -0,0 +1,5 @@
+/**
+ * Texto para comparar: minúsculo, sem acento e sem espaço nas pontas. É o que a
+ * busca do `IconPicker` usa para achar "usuario" em "Usuário".
+ */
+export const semAcento = (texto: string): string => String(texto || "").normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase().trim()