@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/Popover/Popover.d.ts

@@ -22,6 +22,7 @@ import './Popover.css';
  * @property {boolean} closable - Exibe o botão de fechar no topo.
  * @property {string} closeLabel - Nome acessível do botão de fechar. Padrão: "Fechar".
  * @property {number} width - Largura do painel, em px. Padrão: 240.
+ * @property {number | string} maxHeight - Altura máxima do corpo, que rola quando o conteúdo passa dela. Número vira px; texto vai como CSS (`"60vh"`). `"none"` deixa o corpo crescer com o conteúdo (painel "Colunas do card"). Sem a prop, o teto histórico de 300px continua.
  * @property {string} ariaLabel - Nome acessível quando não há `title`.
  * @property {string} className - Classes CSS adicionais.
  * @property {function} onOpenChange - Avisa quando abre e quando fecha.
@@ -45,6 +46,12 @@ export interface PopoverProps {
     closable?: boolean;
     closeLabel?: string;
     width?: number;
+    /**
+     * Altura máxima do corpo. Número vira px; texto vai como CSS (`"60vh"`).
+     * `"none"` deixa o corpo crescer com o conteúdo. Sem a prop, vale o teto de
+     * 300px de sempre (o cabeçalho e o × não rolam junto).
+     */
+    maxHeight?: number | string;
     ariaLabel?: string;
     className?: string;
     children?: any;

package/dist/components/Popover/Popover.js

@@ -305,6 +305,16 @@ function Popover(props) {
             visibility: positioned ? "visible" : "hidden",
         };
     }
+    function corpoStyle() {
+        if (props.maxHeight === undefined || props.maxHeight === null) {
+            return undefined;
+        }
+        return {
+            maxHeight: typeof props.maxHeight === "number"
+                ? props.maxHeight + "px"
+                : props.maxHeight,
+        };
+    }
     function panelStyle() {
         return {
             opacity: positioned ? 1 : 0,
@@ -339,6 +349,6 @@ function Popover(props) {
     }, []);
     return (_jsxs("span", { ref: anchorRef, className: anchorClasses(), style: {
             display: "inline-flex",
-        }, children: [_jsx("span", { className: "umds-popover__trigger", ref: triggerButtonRef, id: triggerIdText(), role: triggerIsInteractive ? undefined : "button", tabIndex: triggerIsInteractive ? undefined : 0, "aria-haspopup": triggerIsInteractive ? undefined : "dialog", "aria-expanded": triggerIsInteractive ? undefined : ariaExpandedText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeydown(event), children: _jsx(_Fragment, { children: props.children }) }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-popover__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("div", { className: "umds-popover__panel", role: "dialog", "aria-modal": "false", ref: panelRef, "aria-labelledby": labelledByText(), "aria-label": props.title ? undefined : props.ariaLabel, tabIndex: -1, style: panelStyle(), onKeyDown: (event) => handlePanelKeydown(event), children: [props.title || props.closable ? (_jsxs("div", { className: "umds-popover__header", children: [props.title ? (_jsx(Text, { as: "span", variant: "body2", weight: "semibold", id: titleIdText(), children: props.title })) : null, props.closable ? (_jsx("button", { type: "button", className: "umds-popover__close", "aria-label": props.closeLabel || "Fechar", onClick: (event) => close(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faXmark }) })) : null] })) : null, _jsx("div", { className: "umds-popover__body", children: _jsx(_Fragment, { children: props.content }) })] }) })) : null })] }));
+        }, children: [_jsx("span", { className: "umds-popover__trigger", ref: triggerButtonRef, id: triggerIdText(), role: triggerIsInteractive ? undefined : "button", tabIndex: triggerIsInteractive ? undefined : 0, "aria-haspopup": triggerIsInteractive ? undefined : "dialog", "aria-expanded": triggerIsInteractive ? undefined : ariaExpandedText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeydown(event), children: _jsx(_Fragment, { children: props.children }) }), _jsx(Portal, { children: mounted ? (_jsx("span", { className: "umds-popover__floating", ref: floatingRef, style: floatingStyle(), children: _jsxs("div", { className: "umds-popover__panel", role: "dialog", "aria-modal": "false", ref: panelRef, "aria-labelledby": labelledByText(), "aria-label": props.title ? undefined : props.ariaLabel, tabIndex: -1, style: panelStyle(), onKeyDown: (event) => handlePanelKeydown(event), children: [props.title || props.closable ? (_jsxs("div", { className: "umds-popover__header", children: [props.title ? (_jsx(Text, { as: "span", variant: "body2", weight: "semibold", id: titleIdText(), children: props.title })) : null, props.closable ? (_jsx("button", { type: "button", className: "umds-popover__close", "aria-label": props.closeLabel || "Fechar", onClick: (event) => close(), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: faXmark }) })) : null] })) : null, _jsx("div", { className: "umds-popover__body", style: corpoStyle(), children: _jsx(_Fragment, { children: props.content }) })] }) })) : null })] }));
 }
 export default Popover;

package/dist/components/RichTextEditor/RichTextEditor.css

@@ -0,0 +1,203 @@
+/* ─────────────────────────────────────────────
+   RICH TEXT EDITOR
+   Editor de texto rico leve sobre contenteditable.
+
+   A moldura (borda, raio, foco, erro) segue a família de campos. A barra é uma
+   faixa de fundo claro com botões de 32px: o botão LIGADO (negrito, lista...)
+   ganha o fundo e a cor do primário, e a mesma informação sai em `aria-pressed`.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-rte {
+  display: flex;
+  flex-direction: column;
+  gap: var(--umds-primitive-spacing-quarck); /* 4px */
+  font-family: var(--umds-semantic-font-family-base);
+}
+
+.umds-rte__label {
+  font-size: var(--umds-semantic-field-label-size);
+  font-weight: var(--umds-semantic-field-label-weight);
+  color: var(--umds-semantic-field-label-color);
+}
+
+.umds-rte__frame {
+  display: flex;
+  flex-direction: column;
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-field-border-default);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: var(--umds-semantic-color-background-white);
+  overflow: hidden;
+  transition:
+    border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-rte__frame:hover {
+  border-color: var(--umds-semantic-field-border-hover);
+}
+
+.umds-rte__frame:focus-within {
+  border-color: var(--umds-semantic-field-border-focus);
+  box-shadow: var(--umds-semantic-field-ring-focus);
+}
+
+.umds-rte--invalid .umds-rte__frame,
+.umds-rte--invalid .umds-rte__frame:hover {
+  border-color: var(--umds-semantic-field-border-error);
+}
+
+.umds-rte--invalid .umds-rte__frame:focus-within {
+  box-shadow: var(--umds-semantic-field-ring-error);
+}
+
+.umds-rte--disabled .umds-rte__frame {
+  background: var(--umds-semantic-field-disabled-background);
+  opacity: var(--umds-semantic-field-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.umds-rte--readonly .umds-rte__frame {
+  background: var(--umds-semantic-field-readonly-background);
+}
+
+/* ── Barra ── */
+.umds-rte__toolbar {
+  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);
+}
+
+.umds-rte__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-xs); /* 32px */
+  height: var(--umds-primitive-spacing-xs);
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: var(--umds-primitive-border-radius-sm);
+  background: transparent;
+  color: var(--umds-semantic-color-neutral-dark-down);
+  cursor: pointer;
+  transition:
+    background-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-rte__tool:hover:not(:disabled) {
+  background: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-rte__tool--active,
+.umds-rte__tool--active:hover:not(:disabled) {
+  background: var(--umds-semantic-color-primary-light);
+  color: var(--umds-semantic-color-primary-dark);
+}
+
+.umds-rte__tool:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: calc(var(--umds-primitive-border-width-thin) * -1);
+}
+
+.umds-rte__tool:disabled {
+  cursor: not-allowed;
+  opacity: var(--umds-semantic-field-disabled-opacity);
+}
+
+.umds-rte__separator {
+  align-self: stretch;
+  width: var(--umds-primitive-border-width-hairline);
+  margin: var(--umds-primitive-spacing-quarck) var(--umds-primitive-spacing-micro);
+  background: var(--umds-semantic-color-neutral-light-down);
+}
+
+/* ── Campo de link, logo abaixo da barra ── */
+.umds-rte__link {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-mini); /* 8px 12px */
+  background: var(--umds-semantic-color-background-light);
+  border-bottom: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+}
+
+.umds-rte__link-field {
+  flex: 1 1 var(--umds-primitive-spacing-giant);
+  min-width: 0;
+}
+
+.umds-rte__link-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--umds-primitive-spacing-nano); /* 8px */
+}
+
+/* ── Área de escrita ── */
+.umds-rte__editor {
+  box-sizing: border-box;
+  min-height: var(--umds-primitive-spacing-xxxl); /* 120px */
+  padding: var(--umds-primitive-spacing-mini) var(--umds-primitive-spacing-xxxs); /* 12px 16px */
+  font-size: var(--umds-semantic-field-text-size); /* 14px */
+  line-height: var(--umds-primitive-font-line-height-lg);
+  color: var(--umds-semantic-field-text-color);
+  outline: none;
+  overflow-wrap: anywhere;
+  overflow-y: auto;
+}
+
+.umds-rte--resizable .umds-rte__editor {
+  resize: vertical;
+}
+
+/* Placeholder: o :empty some assim que há conteúdo (o JS limpa o <br> que sobra). */
+.umds-rte__editor:empty::before {
+  content: attr(data-placeholder);
+  color: var(--umds-semantic-field-placeholder-color);
+  pointer-events: none;
+}
+
+.umds-rte__editor ul,
+.umds-rte__editor ol {
+  margin: var(--umds-primitive-spacing-quarck) 0;
+  padding-left: var(--umds-primitive-spacing-xxs); /* 24px */
+}
+
+.umds-rte__editor p,
+.umds-rte__editor blockquote {
+  margin: 0 0 var(--umds-primitive-spacing-nano);
+}
+
+.umds-rte__editor blockquote {
+  padding-left: var(--umds-primitive-spacing-mini);
+  border-left: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-neutral-light-down);
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+.umds-rte__editor a {
+  color: var(--umds-semantic-color-primary-pure);
+  text-decoration: underline;
+}
+
+.umds-rte__footer {
+  padding: var(--umds-primitive-spacing-nano) var(--umds-primitive-spacing-xxxs); /* 8px 16px */
+  border-top: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  background: var(--umds-semantic-color-background-light);
+  font-size: var(--umds-primitive-font-size-xxs); /* 14px */
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
+@media (forced-colors: active) {
+  .umds-rte__tool--active {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+}

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

@@ -0,0 +1,83 @@
+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" | "|";
+/**
+ * RichTextEditor — editor de texto rico leve, sobre `contenteditable`, sem
+ * biblioteca: negrito, itálico, sublinhado, tachado, listas, link, desfazer e
+ * refazer, e limpar formatação.
+ *
+ * O valor é HTML (`value`/`defaultValue`/`onChange`) e SEMPRE passa por uma
+ * higienização: só ficam negrito, itálico, sublinhado, tachado, listas,
+ * parágrafos, quebras, títulos, citação e link; o resto (`script`, `style`,
+ * `onerror`, `class`, `javascript:`) sai, tanto do `value` que entra quanto do
+ * que se cola (colar entra como texto puro). Link só aceita `http(s)`, `mailto`,
+ * `tel`, caminho e âncora.
+ *
+ * A barra é um `role="toolbar"` com Tab numa parada só e setas entre as
+ * ferramentas; negrito, itálico, sublinhado, tachado e as listas são botões de
+ * liga/desliga (`aria-pressed`) que seguem a posição do cursor. Os atalhos do
+ * navegador (Ctrl+B, Ctrl+I, Ctrl+U, Ctrl+Z) valem, e Ctrl+K abre o link. O
+ * botão de link abre um campo logo abaixo da barra (endereço, aplicar, remover,
+ * cancelar), sem modal.
+ *
+ * A barra se escolhe por `toolbar`: a completa é o padrão; `["bold", "italic",
+ * "underline", "ul", "ol", "link"]` é a compacta; `["bold", "italic"]`, a mínima.
+ * O rodapé aceita o slot `footer` (a assinatura do autor, por exemplo) e a área
+ * pode ser redimensionável (`resizable`).
+ *
+ * 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.
+ * @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} 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 {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
+ * @property {boolean} readOnly - Só leitura: a área não edita e a barra some
+ * @property {boolean} invalid - Estado de erro
+ * @property {string} errorMessage - Mensagem de erro (liga o estado de erro)
+ * @property {string} helperText - Texto de ajuda abaixo do campo
+ * @property {string} id - Base dos ids internos; passe em SSR para os ids já saírem no HTML do servidor
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} onChange - Chamado com o HTML a cada edição
+ * @property {function} onBlur - Chamado quando o foco sai da área de escrita
+ * @slot footer - Rodapé dentro da moldura, abaixo da área de escrita (assinatura).
+ * @quandoUsar Texto formatado que vira conteúdo de documento: despacho, resposta, descrição de serviço, modelo de texto.
+ * @quandoNaoUsar Para texto simples de várias linhas, use `Textarea`. Para texto de uma linha, `Input`. Quando for preciso tabela, imagem, cor ou fonte, este corte não serve: peça ao DS ou use um editor especializado.
+ */
+/** Ferramentas da barra, na ordem em que aparecem em `toolbar`. `"|"` é um separador. */
+export interface RichTextEditorProps {
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    ariaLabel?: string;
+    placeholder?: string;
+    toolbar?: RichTextTool[];
+    toolbarLabel?: string;
+    labels?: Record<string, string>;
+    minHeight?: number;
+    resizable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    invalid?: boolean;
+    errorMessage?: string;
+    helperText?: string;
+    id?: string;
+    className?: string;
+    /** Slot `footer`: abaixo da área de escrita. */
+    footer?: any;
+    onChange?: (html: string) => void;
+    onBlur?: (event?: any) => void;
+}
+declare function RichTextEditor(props: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export default RichTextEditor;