@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/components/Modal/Modal.css

@@ -407,6 +407,25 @@
   background: var(--umds-semantic-color-primary-medium);
 }
 
+/* ── density="1doc": as proporções do modal do CrisDoc ──
+   Cabeçalho de 67px (o padrão dá 61), rodapé de 65px (o padrão dá 73) e raio de 12px (o DS usa 8). Sem token
+   para essas medidas: literais comentados, como o resto do modal base. As alturas são mínimas, então título
+   com subtítulo ou botão mais alto continua crescendo. Fora a tela cheia e o painel, que têm cantos próprios. */
+.umds-modal--1doc:not(.umds-modal--fullscreen):not(.umds-modal--janela-fullscreen):not(.umds-modal--sheet) {
+  /* stylelint-disable-next-line 1ds/raio-canonico -- o 12px é a opção density="1doc" (o modal do CrisDoc); o padrão segue em 8px */
+  border-radius: 12px;
+}
+
+.umds-modal--1doc.umds-modal--base .umds-modal__header {
+  align-items: center;
+  min-height: 67px;
+}
+
+.umds-modal--1doc.umds-modal--base .umds-modal__footer {
+  min-height: 65px;
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxs); /* 12px 24px */
+}
+
 /* ── responsive: abaixo do breakpoint vira painel que sobe pela borda de baixo ──
    Mesma anatomia do BottomSheet (largura total, cantos de cima arredondados,
    alça, entrada por baixo). Quem decide o breakpoint é o componente (media

package/dist/components/Modal/Modal.d.ts

@@ -95,6 +95,13 @@ export interface ModalProps {
      * @default 'dialog'
      */
     layout?: "dialog" | "content";
+    /**
+     * Proporções do modal. `1doc` leva o cabeçalho a 67px, o rodapé a 65px e o raio a 12px, as medidas do
+     * modal do CrisDoc; o padrão (`default`) segue com 61px, 73px e 8px. Só o modal base (com título), e
+     * combina com `variant="primary"`. Tela cheia e painel (`responsive`) mantêm os cantos deles.
+     * @default 'default'
+     */
+    density?: "default" | "1doc";
     /** Classes CSS adicionais para o container do modal */
     className?: string;
     /** Se verdadeiro, renderiza o modal inline (sem fixed/overlay), útil para documentação */

package/dist/components/Modal/Modal.js

@@ -149,6 +149,7 @@ function Modal(props) {
             `umds-modal--${props.variant || "default"}`,
             props.size && props.size !== "md" ? `umds-modal--${props.size}` : "",
             ehFeedback() ? "umds-modal--feedback" : "umds-modal--base",
+            props.density === "1doc" ? "umds-modal--1doc" : "",
             classeDaJanela(),
             props.responsive && isCompact ? "umds-modal--sheet" : "",
             props.className,

package/dist/components/RichTextEditor/RichTextEditor.css

@@ -142,6 +142,27 @@
   gap: var(--umds-primitive-spacing-nano); /* 8px */
 }
 
+.umds-rte__table-field {
+  flex: 0 1 var(--umds-primitive-spacing-xxxl); /* 120px */
+  min-width: 0;
+}
+
+.umds-rte__style-field {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+/* Barra de linha e coluna: aparece com o cursor numa célula. */
+.umds-rte__table-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
 /* ── Área de escrita ── */
 .umds-rte__editor {
   box-sizing: border-box;
@@ -183,6 +204,32 @@
   color: var(--umds-semantic-color-neutral-dark-down);
 }
 
+.umds-rte__editor img {
+  max-width: 100%;
+  height: auto;
+}
+
+.umds-rte__editor table {
+  width: 100%;
+  margin: var(--umds-primitive-spacing-nano) 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.umds-rte__editor th,
+.umds-rte__editor td {
+  min-width: var(--umds-primitive-spacing-sm); /* 40px: a célula vazia continua alcançável */
+  padding: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-nano); /* 4px 8px */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  vertical-align: top;
+  text-align: left;
+}
+
+.umds-rte__editor th {
+  background: var(--umds-semantic-color-background-light);
+  font-weight: var(--umds-primitive-font-weight-semibold);
+}
+
 .umds-rte__editor a {
   color: var(--umds-semantic-color-primary-pure);
   text-decoration: underline;

package/dist/components/RichTextEditor/RichTextEditor.d.ts

@@ -1,6 +1,6 @@
 import './RichTextEditor.css';
 /** Ferramentas da barra, na ordem em que aparecem em `toolbar`. `"|"` é um separador. */
-export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "ol" | "link" | "undo" | "redo" | "clear" | "|";
+export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "ol" | "link" | "undo" | "redo" | "clear" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "image" | "table" | "fontFamily" | "fontSize" | "textColor" | "|";
 /**
  * RichTextEditor — editor de texto rico leve, sobre `contenteditable`, sem
  * biblioteca: negrito, itálico, sublinhado, tachado, listas, link, desfazer e
@@ -27,19 +27,33 @@ export type RichTextTool = "bold" | "italic" | "underline" | "strike" | "ul" | "
  *
  * Todos os textos são props (`labels`, `toolbarLabel`, `placeholder`).
  *
- * Limites do primeiro corte: sem tabela, imagem, cor, fonte, tamanho nem
- * alinhamento; usa `document.execCommand`, que o navegador mantém mas está
- * marcado como obsoleto (o comportamento do desfazer varia um pouco entre
- * navegadores). Nada disso é preciso para o que as telas de despacho, resposta e
- * descrição pedem.
+ * Opcionais na `toolbar` (fora da barra padrão): alinhamento (`alignLeft`,
+ * `alignCenter`, `alignRight`, `alignJustify`), imagem (`image`: por endereço ou por
+ * arquivo, que entra como `data:` URL, com texto alternativo) e tabela simples
+ * (`table`: insere linhas × colunas; com o cursor numa célula aparece a barra de
+ * adicionar e remover linha e coluna). Imagem e tabela passam pela mesma
+ * higienização: só PNG, JPEG, GIF e WebP em `data:`, ou `http(s)`; sem SVG.
+ *
+ * Estilo de texto por TOKEN do DS, também opcional na `toolbar`: `fontFamily`
+ * (padrão ou monoespaçada), `fontSize` (12, 14, 16, 20 e 24px, da escala do DS) e
+ * `textColor` (a paleta do DS). Cada um abre um painel abaixo da barra e aplica ao
+ * texto selecionado (sem seleção, o painel pede que se selecione). O valor guarda
+ * `<span style="color: var(--umds-primitive-red-pure)">`: só token do DS passa na
+ * higienização, cor em hex, rgb ou nome sai. Para voltar ao padrão, use `clear`.
+ *
+ * Limites: usa `document.execCommand`, que o
+ * navegador mantém mas está marcado como obsoleto (o comportamento do desfazer
+ * varia um pouco entre navegadores; adicionar e remover linha ou coluna mexe no
+ * DOM e não entra no desfazer). Imagem de arquivo passa de 2 MB? Recusada: o HTML
+ * do valor guarda a imagem inteira.
  * @property {string} value - HTML (controlado)
  * @property {string} defaultValue - HTML inicial (não controlado)
  * @property {string} label - Rótulo visível do campo
  * @property {string} ariaLabel - Nome acessível quando não há `label` visível
  * @property {string} placeholder - Texto de apoio com o editor vazio
- * @property {string[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | '|' (separador)
+ * @property {string[]} toolbar - Ferramentas da barra, em ordem: 'bold' | 'italic' | 'underline' | 'strike' | 'ul' | 'ol' | 'link' | 'undo' | 'redo' | 'clear' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'image' | 'table' | 'fontFamily' | 'fontSize' | 'textColor' | '|' (separador)
  * @property {string} toolbarLabel - Nome da barra (padrão "Formatação")
- * @property {object} labels - Nomes das ferramentas e do campo de link, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid }`
+ * @property {object} labels - Nomes das ferramentas e dos campos, parcial: `{ bold, italic, underline, strike, ul, ol, link, undo, redo, clear, alignLeft, alignCenter, alignRight, alignJustify, image, table, linkAddress, linkApply, linkRemove, linkCancel, linkInvalid, imageUrl, imageAlt, imageFile, imageApply, imageCancel, imageInvalid, imageType, imageTooLarge, tableRows, tableCols, tableApply, tableCancel, tableInvalid, tableActions, tableAddRow, tableRemoveRow, tableAddCol, tableRemoveCol, tableRemove, fontFamily, fontSize, textColor, fontFamilyBase, fontFamilyMono, styleClose, styleNeedsSelection }`
  * @property {number} minHeight - Altura mínima da área de escrita, em px (padrão 120)
  * @property {boolean} resizable - Deixa redimensionar a altura pelo canto
  * @property {boolean} disabled - Desabilita barra e área