@1doc/1ds-react 2.12.2 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @1doc/1ds-react
 
+## 2.13.0
+
+### Minor Changes
+
+- ab0ee2b: feat(breadcrumb): `truncate`, a trilha numa linha só
+
+  O `Breadcrumb` ganha `truncate`. A trilha passa a ocupar uma linha só e, quando não cabe, a página atual (o último item) encolhe
+  primeiro, com reticências, até 80px (separador incluído); só então os níveis anteriores encolhem. O separador nunca encolhe e o rótulo inteiro fica no
+  `title` de cada item. Feito para barras de altura fixa, como o `AppSubheader`, quando o último nível é um texto longo: o CrisDoc
+  mostra ali o número e o assunto do processo aberto, e sem isto a trilha quebrava em três linhas no celular. Sem a prop, nada muda.
+
+  ```vue
+  <Breadcrumb
+    truncate
+    :items="[
+      { label: '1Doc', href: '/' },
+      { label: 'Proc. Administrativo 412/2026' },
+      { label: assunto },
+    ]"
+  />
+  ```
+
 ## 2.12.2
 
 ### Patch Changes

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -70,3 +70,53 @@
   font-weight: 600;
   cursor: default;
 }
+
+/* ── truncate: uma linha só, com reticências ──
+   A página atual encolhe primeiro: o `flex-shrink` alto faz o algoritmo do
+   flex tirar dela quase todo o espaço que falta, até a largura mínima; dali
+   em diante o que ainda falta se divide entre os níveis anteriores. O 100000
+   é uma razão de encolhimento, não uma medida, e precisa ser enorme: o flex
+   reparte o encolhimento na proporção (razão × largura), e com 100 os níveis
+   anteriores ainda levavam de 0,1 a 0,8px, o bastante para virar "1D…" e
+   "Emiss…" com espaço sobrando. O separador nunca encolhe.
+   Com rótulo final mais curto que o mínimo, o item ocupa o mínimo e a sobra
+   fica depois do texto, no fim da trilha, onde não aparece. */
+.umds-breadcrumb--truncate {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__list {
+  flex-wrap: nowrap;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item {
+  min-width: 0;
+  white-space: nowrap;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item:last-child {
+  flex-shrink: 100000;
+  min-width: var(--umds-primitive-spacing-xxl); /* 80px com o separador: "Reforma…" ainda se lê */
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__item:only-child {
+  min-width: 0;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__sep {
+  flex-shrink: 0;
+}
+
+.umds-breadcrumb--truncate .umds-breadcrumb__link,
+.umds-breadcrumb--truncate .umds-breadcrumb__current {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Em bloco, o alvo de 24px vem da altura da linha, e o texto fica centrado. */
+.umds-breadcrumb--truncate .umds-breadcrumb__link {
+  line-height: var(--umds-primitive-spacing-xxs); /* 24px */
+}

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -14,6 +14,7 @@ export interface BreadcrumbItem {
  * Breadcrumb component — navegação estrutural (trilha de páginas).
  * @property {BreadcrumbItem[]} items - Lista de itens da trilha; o último é a página atual
  * @property {string} separator - Separador entre itens (padrão '/')
+ * @property {boolean} truncate - Trilha numa linha só, com reticências quando não cabe
  * @property {string} className - Classes CSS adicionais
  * @quandoUsar Mostrar ONDE o usuário está na hierarquia do sistema e permitir subir de nível. Use em páginas com profundidade 2 ou mais.
  * @quandoNaoUsar Para progresso dentro de um fluxo de etapas — use `Stepper`. Para navegar entre seções da mesma página, use `Tabs`.
@@ -23,6 +24,14 @@ export interface BreadcrumbProps {
     ariaLabel?: string;
     items: BreadcrumbItem[];
     separator?: string;
+    /**
+     * Mantém a trilha numa linha só. Quando não cabe, a página atual (último item)
+     * encolhe primeiro, com reticências, até uma largura mínima; só então os
+     * níveis anteriores encolhem. O rótulo inteiro fica no `title` de cada item.
+     * Use em barras de altura fixa (subheader) e quando o último nível é um texto
+     * longo, como o assunto de um processo. @default false
+     */
+    truncate?: boolean;
     className?: string;
 }
 declare function Breadcrumb(props: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -6,11 +6,20 @@ function Breadcrumb(props) {
         return props.separator || "/";
     }
     function classes() {
-        return ["umds-breadcrumb", props.className].filter(Boolean).join(" ");
+        return [
+            "umds-breadcrumb",
+            props.truncate ? "umds-breadcrumb--truncate" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
     }
     function itemList() {
         return props.items || [];
     }
+    function titleOf(item) {
+        return props.truncate ? item.label : undefined;
+    }
     function isLast(index) {
         return index === (props.items || []).length - 1;
     }
@@ -24,6 +33,6 @@ function Breadcrumb(props) {
             }
         }
     }
-    return (_jsx("nav", { "aria-label": props.ariaLabel || "Navegação estrutural", className: classes(), children: _jsx("ol", { className: "umds-breadcrumb__list", children: itemList()?.map((item, index) => (_jsxs("li", { className: "umds-breadcrumb__item", children: [index > 0 ? (_jsx("span", { "aria-hidden": "true", className: "umds-breadcrumb__sep", children: sep() })) : null, !isLast(index) && !!item.href ? (_jsx("a", { className: "umds-breadcrumb__link", href: item.href, children: item.label })) : null, !isLast(index) && !item.href ? (_jsx("span", { role: "button", className: "umds-breadcrumb__link", tabIndex: 0, onClick: (event) => item.onClick && item.onClick(), onKeyDown: (event) => handleItemKey(event, item), children: item.label })) : null, isLast(index) ? (_jsx("span", { "aria-current": "page", className: "umds-breadcrumb__current", children: item.label })) : null] }, index))) }) }));
+    return (_jsx("nav", { "aria-label": props.ariaLabel || "Navegação estrutural", className: classes(), children: _jsx("ol", { className: "umds-breadcrumb__list", children: itemList()?.map((item, index) => (_jsxs("li", { className: "umds-breadcrumb__item", children: [index > 0 ? (_jsx("span", { "aria-hidden": "true", className: "umds-breadcrumb__sep", children: sep() })) : null, !isLast(index) && !!item.href ? (_jsx("a", { className: "umds-breadcrumb__link", href: item.href, title: titleOf(item), children: item.label })) : null, !isLast(index) && !item.href ? (_jsx("span", { role: "button", className: "umds-breadcrumb__link", tabIndex: 0, title: titleOf(item), onClick: (event) => item.onClick && item.onClick(), onKeyDown: (event) => handleItemKey(event, item), children: item.label })) : null, isLast(index) ? (_jsx("span", { "aria-current": "page", className: "umds-breadcrumb__current", title: titleOf(item), children: item.label })) : null] }, index))) }) }));
 }
 export default Breadcrumb;

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

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

package/dist/teste/BreadcrumbTruncado.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+const cssBreadcrumb = (await lerArquivo("../core/src/components/Breadcrumb/Breadcrumb.css")).replace(/\r\n/g, "\n");
+const bloco = (texto, seletor) => {
+    const inicio = texto.indexOf(seletor + " {");
+    expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+    return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+const ITENS = [
+    { label: "1Doc", href: "#" },
+    { label: "Proc. Administrativo 412/2026", onClick: () => { } },
+    { label: "Reforma da cobertura do Ginásio Poliesportivo Municipal" },
+];
+describe("Breadcrumb · truncate", () => {
+    it("truncate escreve a classe na raiz; sem a prop, não", () => {
+        const { container } = render(_jsxs(_Fragment, { children: [_jsx(Breadcrumb, { items: ITENS, truncate: true }), _jsx(Breadcrumb, { items: ITENS })] }));
+        expect(container.children[0]).toHaveClass("umds-breadcrumb--truncate");
+        expect(container.children[1]).not.toHaveClass("umds-breadcrumb--truncate");
+    });
+    it("com truncate, o rótulo inteiro vai no title do link, do item clicável e da página atual; sem, nenhum title", () => {
+        const { container } = render(_jsx(Breadcrumb, { items: ITENS, truncate: true }));
+        expect(container.querySelector("a.umds-breadcrumb__link")).toHaveAttribute("title", "1Doc");
+        expect(container.querySelector("[role=button].umds-breadcrumb__link")).toHaveAttribute("title", "Proc. Administrativo 412/2026");
+        expect(container.querySelector(".umds-breadcrumb__current")).toHaveAttribute("title", "Reforma da cobertura do Ginásio Poliesportivo Municipal");
+        const sem = render(_jsx(Breadcrumb, { items: ITENS }));
+        expect(sem.container.querySelectorAll("[title]")).toHaveLength(0);
+    });
+    it("CSS: uma linha; a página atual encolhe primeiro até 80px; o texto ganha reticências; o padrão segue quebrando linha", () => {
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__list")).toMatch(/flex-wrap:\s*nowrap/);
+        const ultimo = bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__item:last-child");
+        expect(ultimo).toMatch(/flex-shrink:\s*100000;/);
+        expect(ultimo).toMatch(/min-width:\s*var\(--umds-primitive-spacing-xxl\)/);
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__sep")).toMatch(/flex-shrink:\s*0/);
+        expect(cssBreadcrumb).toMatch(/\.umds-breadcrumb--truncate \.umds-breadcrumb__current \{[^}]*text-overflow:\s*ellipsis/);
+        expect(bloco(cssBreadcrumb, ".umds-breadcrumb__list")).toMatch(/flex-wrap:\s*wrap/);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.12.2",
+  "version": "2.13.0",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,8 +45,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.12.2",
-    "@1doc/1ds-tokens": "0.7.0"
+    "@1doc/1ds-tokens": "0.7.0",
+    "@1doc/1ds-core": "2.13.0"
   },
   "publishConfig": {
     "access": "public"

package/src/teste/BreadcrumbTruncado.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import Breadcrumb from "../components/Breadcrumb/Breadcrumb";
+import { render } from "@testing-library/react";
+import { lerArquivo } from "./lerArquivo";
+
+const cssBreadcrumb = (await lerArquivo("../core/src/components/Breadcrumb/Breadcrumb.css")).replace(/\r\n/g, "\n");
+const bloco = (texto: string, seletor: string) => {
+  const inicio = texto.indexOf(seletor + " {");
+  expect(inicio, seletor).toBeGreaterThanOrEqual(0);
+  return texto.slice(inicio, texto.indexOf("}", inicio));
+};
+
+const ITENS = [
+  { label: "1Doc", href: "#" },
+  { label: "Proc. Administrativo 412/2026", onClick: () => {} },
+  { label: "Reforma da cobertura do Ginásio Poliesportivo Municipal" },
+];
+
+describe("Breadcrumb · truncate", () => {
+  it("truncate escreve a classe na raiz; sem a prop, não", () => {
+    const { container } = render(
+      <>
+        <Breadcrumb items={ITENS} truncate />
+        <Breadcrumb items={ITENS} />
+      </>,
+    );
+    expect(container.children[0]).toHaveClass("umds-breadcrumb--truncate");
+    expect(container.children[1]).not.toHaveClass("umds-breadcrumb--truncate");
+  });
+
+  it("com truncate, o rótulo inteiro vai no title do link, do item clicável e da página atual; sem, nenhum title", () => {
+    const { container } = render(<Breadcrumb items={ITENS} truncate />);
+    expect(container.querySelector("a.umds-breadcrumb__link")).toHaveAttribute("title", "1Doc");
+    expect(container.querySelector("[role=button].umds-breadcrumb__link")).toHaveAttribute("title", "Proc. Administrativo 412/2026");
+    expect(container.querySelector(".umds-breadcrumb__current")).toHaveAttribute(
+      "title",
+      "Reforma da cobertura do Ginásio Poliesportivo Municipal",
+    );
+    const sem = render(<Breadcrumb items={ITENS} />);
+    expect(sem.container.querySelectorAll("[title]")).toHaveLength(0);
+  });
+
+  it("CSS: uma linha; a página atual encolhe primeiro até 80px; o texto ganha reticências; o padrão segue quebrando linha", () => {
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__list")).toMatch(/flex-wrap:\s*nowrap/);
+    const ultimo = bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__item:last-child");
+    expect(ultimo).toMatch(/flex-shrink:\s*100000;/);
+    expect(ultimo).toMatch(/min-width:\s*var\(--umds-primitive-spacing-xxl\)/);
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb--truncate .umds-breadcrumb__sep")).toMatch(/flex-shrink:\s*0/);
+    expect(cssBreadcrumb).toMatch(/\.umds-breadcrumb--truncate \.umds-breadcrumb__current \{[^}]*text-overflow:\s*ellipsis/);
+    expect(bloco(cssBreadcrumb, ".umds-breadcrumb__list")).toMatch(/flex-wrap:\s*wrap/);
+  });
+});