@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/components/RichTextEditor/RichTextEditor.js

@@ -3,13 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import './RichTextEditor.css';
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
-import { faBold, faItalic, faUnderline, faStrikethrough, faListUl, faListOl, faLink, faRotateLeft, faRotateRight, faEraser, } from "@fortawesome/free-solid-svg-icons";
+import { faBold, faItalic, faUnderline, faStrikethrough, faListUl, faListOl, faLink, faRotateLeft, faRotateRight, faEraser, faAlignLeft, faAlignCenter, faAlignRight, faAlignJustify, faImage, faTable, faFont, faTextHeight, faPalette, } from "@fortawesome/free-solid-svg-icons";
 import Button from "../Button/Button";
+import ColorPicker from "../ColorPicker/ColorPicker";
+import Select from "../Select/Select";
 import Icon from "../Icon/Icon";
 import Input from "../Input/Input";
 import Text from "../Text/Text";
 import { gerarId } from "../../utils/id";
-import { htmlDoLink, htmlVazio, normalizarEndereco, sanitizarHtml, } from "../../utils/html-seguro";
+import { htmlDaImagem, htmlDaTabela, htmlDoLink, estiloDeTexto, htmlVazio, imagemSegura, normalizarEndereco, sanitizarHtml, } from "../../utils/html-seguro";
 function RichTextEditor(props) {
     const editorRef = useRef(null);
     const toolbarRef = useRef(null);
@@ -18,12 +20,30 @@ function RichTextEditor(props) {
     const selecaoRef = useRef(null);
     const focoPendenteRef = useRef("");
     const observadorRef = useRef(null);
+    const imageInputWrapRef = useRef(null);
+    const tableInputWrapRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const celulaRef = useRef(null);
+    const styleWrapRef = useRef(null);
     const [uid, setUid] = useState(() => "");
     const [linkOpen, setLinkOpen] = useState(() => false);
     const [linkUrl, setLinkUrl] = useState(() => "");
     const [linkError, setLinkError] = useState(() => false);
     const [toolFocus, setToolFocus] = useState(() => 0);
     const [active, setActive] = useState(() => "");
+    const [styleOpen, setStyleOpen] = useState(() => "");
+    const [styleError, setStyleError] = useState(() => false);
+    const [imageOpen, setImageOpen] = useState(() => false);
+    const [imgUrl, setImgUrl] = useState(() => "");
+    const [imgAlt, setImgAlt] = useState(() => "");
+    const [imgData, setImgData] = useState(() => "");
+    const [imgFileName, setImgFileName] = useState(() => "");
+    const [imgError, setImgError] = useState(() => "");
+    const [tableOpen, setTableOpen] = useState(() => false);
+    const [tblRows, setTblRows] = useState(() => "3");
+    const [tblCols, setTblCols] = useState(() => "3");
+    const [tblError, setTblError] = useState(() => false);
+    const [inTable, setInTable] = useState(() => false);
     function baseId() {
         return props.id || uid;
     }
@@ -99,6 +119,38 @@ function RichTextEditor(props) {
             linkRemove: "Remover link",
             linkCancel: "Cancelar",
             linkInvalid: "Use um endereço http, https, mailto ou tel.",
+            alignLeft: "Alinhar à esquerda",
+            alignCenter: "Centralizar",
+            alignRight: "Alinhar à direita",
+            alignJustify: "Justificar",
+            image: "Imagem",
+            table: "Tabela",
+            imageUrl: "Endereço da imagem",
+            imageAlt: "Texto alternativo",
+            imageFile: "Escolher arquivo",
+            imageApply: "Inserir imagem",
+            imageCancel: "Cancelar",
+            imageInvalid: "Use um endereço http ou https, ou escolha um arquivo.",
+            imageType: "Use uma imagem PNG, JPEG, GIF ou WebP.",
+            imageTooLarge: "A imagem passa de 2 MB.",
+            tableRows: "Linhas",
+            tableCols: "Colunas",
+            tableApply: "Inserir tabela",
+            tableCancel: "Cancelar",
+            tableInvalid: "Use de 1 a 20 linhas e de 1 a 10 colunas.",
+            tableActions: "Tabela",
+            tableAddRow: "Adicionar linha",
+            tableRemoveRow: "Remover linha",
+            tableAddCol: "Adicionar coluna",
+            tableRemoveCol: "Remover coluna",
+            tableRemove: "Remover tabela",
+            fontFamily: "Fonte",
+            fontSize: "Tamanho da fonte",
+            textColor: "Cor do texto",
+            fontFamilyBase: "Padrão",
+            fontFamilyMono: "Monoespaçada",
+            styleClose: "Fechar",
+            styleNeedsSelection: "Selecione o texto antes de aplicar.",
         };
         const dado = props.labels || {};
         return dado[chave] || padrao[chave];
@@ -172,6 +224,51 @@ function RichTextEditor(props) {
                 icon: faEraser,
                 toggle: false,
             },
+            alignLeft: {
+                command: "justifyLeft",
+                icon: faAlignLeft,
+                toggle: true,
+            },
+            alignCenter: {
+                command: "justifyCenter",
+                icon: faAlignCenter,
+                toggle: true,
+            },
+            alignRight: {
+                command: "justifyRight",
+                icon: faAlignRight,
+                toggle: true,
+            },
+            alignJustify: {
+                command: "justifyFull",
+                icon: faAlignJustify,
+                toggle: true,
+            },
+            image: {
+                command: "image",
+                icon: faImage,
+                toggle: false,
+            },
+            table: {
+                command: "table",
+                icon: faTable,
+                toggle: false,
+            },
+            fontFamily: {
+                command: "fontFamily",
+                icon: faFont,
+                toggle: false,
+            },
+            fontSize: {
+                command: "fontSize",
+                icon: faTextHeight,
+                toggle: false,
+            },
+            textColor: {
+                command: "textColor",
+                icon: faPalette,
+                toggle: false,
+            },
         };
         const saida = [];
         let posicao = 0;
@@ -239,12 +336,29 @@ function RichTextEditor(props) {
             selecao.rangeCount > 0 &&
             editorRef.current.contains(selecao.anchorNode));
     }
+    function celulaAtual() {
+        if (typeof window === "undefined" ||
+            !window.getSelection ||
+            !editorRef.current)
+            return null;
+        const selecao = window.getSelection();
+        if (!selecao || selecao.rangeCount === 0)
+            return null;
+        const no = selecao.anchorNode;
+        const elemento = no && no.nodeType === 3 ? no.parentNode : no;
+        const celula = elemento && elemento.closest ? elemento.closest("td, th") : null;
+        return celula && editorRef.current.contains(celula) ? celula : null;
+    }
     function lerEstados() {
         if (typeof document === "undefined" ||
             typeof document.queryCommandState !== "function")
             return;
         if (!selecaoNaArea())
             return;
+        celulaRef.current = celulaAtual();
+        const dentro = !!celulaRef.current;
+        if (dentro !== inTable)
+            setInTable(dentro);
         const comandos = [
             "bold",
             "italic",
@@ -252,6 +366,10 @@ function RichTextEditor(props) {
             "strikeThrough",
             "insertUnorderedList",
             "insertOrderedList",
+            "justifyLeft",
+            "justifyCenter",
+            "justifyRight",
+            "justifyFull",
         ];
         const ligados = [];
         for (let i = 0; i < comandos.length; i++) {
@@ -320,6 +438,20 @@ function RichTextEditor(props) {
             abrirLink();
             return;
         }
+        if (ferramenta.command === "image") {
+            abrirImagem();
+            return;
+        }
+        if (ferramenta.command === "table") {
+            abrirTabela();
+            return;
+        }
+        if (ferramenta.command === "fontFamily" ||
+            ferramenta.command === "fontSize" ||
+            ferramenta.command === "textColor") {
+            abrirEstilo(ferramenta.command);
+            return;
+        }
         if (editorRef.current && !selecaoNaArea())
             editorRef.current.focus();
         document.execCommand(ferramenta.command, false, undefined);
@@ -371,6 +503,9 @@ function RichTextEditor(props) {
         }
         setLinkUrl(enderecoAtual);
         setLinkError(false);
+        setImageOpen(false);
+        setTableOpen(false);
+        setStyleOpen("");
         setLinkOpen(true);
         focoPendenteRef.current = "link";
     }
@@ -435,6 +570,313 @@ function RichTextEditor(props) {
             fecharLink();
         }
     }
+    function guardarSelecao() {
+        selecaoRef.current = null;
+        if (selecaoNaArea() && typeof window !== "undefined") {
+            const selecao = window.getSelection();
+            selecaoRef.current = selecao.getRangeAt(0).cloneRange();
+        }
+    }
+    function abrirImagem() {
+        if (!isEditable() || typeof window === "undefined" || imageOpen)
+            return;
+        guardarSelecao();
+        setImgUrl("");
+        setImgAlt("");
+        setImgData("");
+        setImgFileName("");
+        setImgError("");
+        setLinkOpen(false);
+        setTableOpen(false);
+        setStyleOpen("");
+        setImageOpen(true);
+        focoPendenteRef.current = "image";
+    }
+    function fecharImagem() {
+        setImageOpen(false);
+        setImgError("");
+        focoPendenteRef.current = "editor";
+    }
+    function handleImageUrl(texto) {
+        setImgUrl(texto);
+        setImgData("");
+        setImgFileName("");
+        if (imgError)
+            setImgError("");
+    }
+    function handleImageAlt(texto) {
+        setImgAlt(texto);
+    }
+    function escolherArquivo() {
+        if (fileInputRef.current)
+            fileInputRef.current.click();
+    }
+    function handleArquivo(event) {
+        const alvo = event && event.target ? event.target : null;
+        const arquivo = alvo && alvo.files ? alvo.files[0] : null;
+        if (!arquivo)
+            return;
+        if (!/^image\/(png|jpe?g|gif|webp)$/i.test(String(arquivo.type))) {
+            setImgError("type");
+            return;
+        }
+        if (arquivo.size > 2 * 1024 * 1024) {
+            setImgError("size");
+            return;
+        }
+        const leitor = new FileReader();
+        leitor.onload = () => {
+            setImgData(String(leitor.result || ""));
+            setImgFileName(arquivo.name);
+            setImgUrl("");
+            setImgError("");
+        };
+        leitor.readAsDataURL(arquivo);
+    }
+    function aplicarImagem() {
+        if (typeof document === "undefined")
+            return;
+        const origem = imagemSegura(imgData || normalizarEndereco(imgUrl));
+        if (!origem) {
+            setImgError("invalid");
+            return;
+        }
+        restaurarSelecao();
+        document.execCommand("insertHTML", false, htmlDaImagem(origem, imgAlt));
+        setImageOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function handleImageSubmit(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        aplicarImagem();
+    }
+    function handlePanelKeyDown(event) {
+        if (!event || event.key !== "Escape")
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if (imageOpen)
+            fecharImagem();
+        else
+            fecharTabela();
+    }
+    function imageErrorText() {
+        if (imgError === "invalid")
+            return rotulo("imageInvalid");
+        if (imgError === "type")
+            return rotulo("imageType");
+        if (imgError === "size")
+            return rotulo("imageTooLarge");
+        return undefined;
+    }
+    function abrirTabela() {
+        if (!isEditable() || typeof window === "undefined" || tableOpen)
+            return;
+        guardarSelecao();
+        setTblError(false);
+        setLinkOpen(false);
+        setImageOpen(false);
+        setStyleOpen("");
+        setTableOpen(true);
+        focoPendenteRef.current = "table";
+    }
+    function fecharTabela() {
+        setTableOpen(false);
+        setTblError(false);
+        focoPendenteRef.current = "editor";
+    }
+    function handleTableRows(texto) {
+        setTblRows(texto);
+        if (tblError)
+            setTblError(false);
+    }
+    function handleTableCols(texto) {
+        setTblCols(texto);
+        if (tblError)
+            setTblError(false);
+    }
+    function aplicarTabela() {
+        if (typeof document === "undefined")
+            return;
+        const linhas = parseInt(tblRows, 10);
+        const colunas = parseInt(tblCols, 10);
+        if (!(linhas >= 1 && linhas <= 20 && colunas >= 1 && colunas <= 10)) {
+            setTblError(true);
+            return;
+        }
+        restaurarSelecao();
+        document.execCommand("insertHTML", false, htmlDaTabela(linhas, colunas));
+        setTableOpen(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function handleTableSubmit(event) {
+        if (event && event.preventDefault)
+            event.preventDefault();
+        aplicarTabela();
+    }
+    function tableErrorText() {
+        return tblError ? rotulo("tableInvalid") : undefined;
+    }
+    function tableBarVisible() {
+        if (!inTable || !isEditable())
+            return false;
+        const lista = props.toolbar || [];
+        return lista.indexOf("table") !== -1;
+    }
+    function handleTableAction(acao) {
+        const celula = celulaRef.current;
+        if (!celula || !editorRef.current || !editorRef.current.contains(celula))
+            return;
+        const linha = celula.parentNode;
+        const tabela = celula.closest("table");
+        if (!linha || !tabela)
+            return;
+        const indice = celula.cellIndex;
+        const linhas = Array.prototype.slice.call(tabela.rows);
+        const nova = (tag) => {
+            const c = document.createElement(tag);
+            c.appendChild(document.createElement("br"));
+            return c;
+        };
+        if (acao === "addRow") {
+            const novaLinha = document.createElement("tr");
+            for (let i = 0; i < linha.cells.length; i++)
+                novaLinha.appendChild(nova("td"));
+            linha.parentNode.insertBefore(novaLinha, linha.nextSibling);
+        }
+        else if (acao === "removeRow") {
+            if (linhas.length <= 1)
+                tabela.parentNode.removeChild(tabela);
+            else
+                linha.parentNode.removeChild(linha);
+        }
+        else if (acao === "addCol") {
+            for (let i = 0; i < linhas.length; i++) {
+                const ref = linhas[i].cells[indice];
+                const tag = ref && ref.tagName === "TH" ? "th" : "td";
+                const novaCelula = nova(tag);
+                if (ref)
+                    linhas[i].insertBefore(novaCelula, ref.nextSibling);
+                else
+                    linhas[i].appendChild(novaCelula);
+            }
+        }
+        else if (acao === "removeCol") {
+            if (linha.cells.length <= 1)
+                tabela.parentNode.removeChild(tabela);
+            else {
+                for (let i = 0; i < linhas.length; i++) {
+                    const ref = linhas[i].cells[indice];
+                    if (ref)
+                        linhas[i].removeChild(ref);
+                }
+            }
+        }
+        else if (acao === "removeTable") {
+            tabela.parentNode.removeChild(tabela);
+        }
+        celulaRef.current = null;
+        setInTable(false);
+        handleInput();
+        if (editorRef.current)
+            editorRef.current.focus();
+    }
+    function fontFamilyOptions() {
+        return [
+            {
+                label: rotulo("fontFamilyBase"),
+                value: "var(--umds-semantic-font-family-base)",
+            },
+            {
+                label: rotulo("fontFamilyMono"),
+                value: "var(--umds-semantic-font-family-mono)",
+            },
+        ];
+    }
+    function fontSizeOptions() {
+        return [
+            {
+                label: "12",
+                value: "var(--umds-primitive-font-size-xxxs)",
+            },
+            {
+                label: "14",
+                value: "var(--umds-primitive-font-size-xxs)",
+            },
+            {
+                label: "16",
+                value: "var(--umds-primitive-font-size-xs)",
+            },
+            {
+                label: "20",
+                value: "var(--umds-primitive-font-size-sm)",
+            },
+            {
+                label: "24",
+                value: "var(--umds-primitive-font-size-md)",
+            },
+        ];
+    }
+    function abrirEstilo(qual) {
+        if (!isEditable() || typeof window === "undefined")
+            return;
+        guardarSelecao();
+        setStyleError(false);
+        setLinkOpen(false);
+        setImageOpen(false);
+        setTableOpen(false);
+        setStyleOpen(qual);
+        focoPendenteRef.current = "style";
+    }
+    function fecharEstilo() {
+        setStyleOpen("");
+        setStyleError(false);
+        focoPendenteRef.current = "editor";
+    }
+    function aplicarEstilo(propriedade, valor) {
+        if (typeof document === "undefined" || typeof window === "undefined")
+            return;
+        const declaracao = estiloDeTexto(propriedade, valor);
+        if (!declaracao)
+            return;
+        restaurarSelecao();
+        const selecao = window.getSelection();
+        if (!selecao || selecao.rangeCount === 0 || selecao.isCollapsed) {
+            setStyleError(true);
+            return;
+        }
+        const molde = document.createElement("div");
+        molde.appendChild(selecao.getRangeAt(0).cloneContents());
+        document.execCommand("insertHTML", false, '<span style="' + declaracao + '">' + molde.innerHTML + "</span>");
+        setStyleOpen("");
+        setStyleError(false);
+        focoPendenteRef.current = "editor";
+        handleInput();
+    }
+    function aplicarCor(token) {
+        if (!token || token.indexOf("--") !== 0)
+            return;
+        aplicarEstilo("color", "var(" + token + ")");
+    }
+    function handleStyleKeyDown(event) {
+        if (!event || event.key !== "Escape")
+            return;
+        // O Select aberto já tratou o Esc (fechou a lista e deu preventDefault): o painel fica para o próximo.
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        fecharEstilo();
+    }
+    function styleErrorText() {
+        return styleError ? rotulo("styleNeedsSelection") : undefined;
+    }
+    function stylePanelLabel() {
+        return styleOpen ? rotulo(styleOpen) : "";
+    }
     function linkErrorText() {
         return linkError ? rotulo("linkInvalid") : undefined;
     }
@@ -479,6 +921,21 @@ function RichTextEditor(props) {
                 if (campo)
                     campo.focus();
             }
+            else if (alvo === "image" && imageInputWrapRef.current) {
+                const campo = imageInputWrapRef.current.querySelector("input");
+                if (campo)
+                    campo.focus();
+            }
+            else if (alvo === "table" && tableInputWrapRef.current) {
+                const campo = tableInputWrapRef.current.querySelector("input");
+                if (campo)
+                    campo.focus();
+            }
+            else if (alvo === "style" && styleWrapRef.current) {
+                const campo = styleWrapRef.current.querySelector('[role="combobox"], [role="radio"], button');
+                if (campo)
+                    campo.focus();
+            }
         }
     });
     useEffect(() => {
@@ -489,6 +946,6 @@ function RichTextEditor(props) {
             }
         };
     }, []);
-    return (_jsxs("div", { className: classes(), children: [props.label ? (_jsx("span", { className: "umds-rte__label", id: labelId(), children: props.label })) : null, _jsxs("div", { className: "umds-rte__frame", children: [showToolbar() ? (_jsx("div", { role: "toolbar", className: "umds-rte__toolbar", ref: toolbarRef, "aria-label": toolbarName(), "aria-controls": editorId(), onKeyDown: (event) => handleToolbarKeyDown(event), children: tools()?.map((ferramenta) => (_jsxs(React.Fragment, { children: [ferramenta.separator ? (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: "umds-rte__separator" })) : null, !ferramenta.separator ? (_jsx("button", { type: "button", "aria-label": ferramenta.label, title: ferramenta.label, "aria-pressed": pressedText(ferramenta), tabIndex: toolTabIndex(ferramenta), disabled: !isEditable(), onMouseDown: (event) => handleToolMouseDown(event), onClick: (event) => handleToolClick(ferramenta), onFocus: (event) => handleToolFocus(ferramenta), className: toolClasses(ferramenta), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: ferramenta.icon }) })) : null] }, ferramenta.key))) })) : null, linkOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleLinkSubmit(event), onKeyDown: (event) => handleLinkKeyDown(event), children: [_jsx("div", { className: "umds-rte__link-field", ref: linkInputWrapRef, children: _jsx(Input, { size: "sm", type: "url", placeholder: "https://", label: rotulo("linkAddress"), value: linkUrl, errorMessage: linkErrorText(), onChange: (texto) => handleLinkInput(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("linkApply") }), linkRemoveVisible() ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => removerLink(), children: rotulo("linkRemove") })) : null, _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharLink(), children: rotulo("linkCancel") })] })] })) : null, _jsx("div", { role: "textbox", "aria-multiline": "true", className: "umds-rte__editor", ref: editorRef, id: editorId(), "aria-label": editorAriaLabel(), "aria-labelledby": labelId(), "aria-describedby": describedBy(), "aria-invalid": isInvalid() ? "true" : undefined, "aria-readonly": props.readOnly ? "true" : undefined, "aria-disabled": props.disabled ? "true" : undefined, "aria-placeholder": props.placeholder, "data-placeholder": props.placeholder, contentEditable: editableText(), tabIndex: props.disabled ? -1 : 0, style: editorStyle(), onInput: (event) => handleInput(), onPaste: (event) => handlePaste(event), onKeyDown: (event) => handleEditorKeyDown(event), onBlur: (event) => handleBlur(event) }), props.footer ? (_jsx("div", { className: "umds-rte__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: props.errorMessage })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: props.helperText })) : null] }));
+    return (_jsxs("div", { className: classes(), children: [props.label ? (_jsx("span", { className: "umds-rte__label", id: labelId(), children: props.label })) : null, _jsxs("div", { className: "umds-rte__frame", children: [showToolbar() ? (_jsx("div", { role: "toolbar", className: "umds-rte__toolbar", ref: toolbarRef, "aria-label": toolbarName(), "aria-controls": editorId(), onKeyDown: (event) => handleToolbarKeyDown(event), children: tools()?.map((ferramenta) => (_jsxs(React.Fragment, { children: [ferramenta.separator ? (_jsx("span", { role: "separator", "aria-orientation": "vertical", className: "umds-rte__separator" })) : null, !ferramenta.separator ? (_jsx("button", { type: "button", "aria-label": ferramenta.label, title: ferramenta.label, "aria-pressed": pressedText(ferramenta), tabIndex: toolTabIndex(ferramenta), disabled: !isEditable(), onMouseDown: (event) => handleToolMouseDown(event), onClick: (event) => handleToolClick(ferramenta), onFocus: (event) => handleToolFocus(ferramenta), className: toolClasses(ferramenta), children: _jsx(Icon, { size: "sm", variant: "inherit", icon: ferramenta.icon }) })) : null] }, ferramenta.key))) })) : null, linkOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleLinkSubmit(event), onKeyDown: (event) => handleLinkKeyDown(event), children: [_jsx("div", { className: "umds-rte__link-field", ref: linkInputWrapRef, children: _jsx(Input, { size: "sm", type: "url", placeholder: "https://", label: rotulo("linkAddress"), value: linkUrl, errorMessage: linkErrorText(), onChange: (texto) => handleLinkInput(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("linkApply") }), linkRemoveVisible() ? (_jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => removerLink(), children: rotulo("linkRemove") })) : null, _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharLink(), children: rotulo("linkCancel") })] })] })) : null, imageOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleImageSubmit(event), onKeyDown: (event) => handlePanelKeyDown(event), children: [_jsx("div", { className: "umds-rte__link-field", ref: imageInputWrapRef, children: _jsx(Input, { size: "sm", type: "url", placeholder: "https://", label: rotulo("imageUrl"), value: imgUrl, errorMessage: imageErrorText(), onChange: (texto) => handleImageUrl(texto) }) }), _jsx("div", { className: "umds-rte__link-field", children: _jsx(Input, { size: "sm", label: rotulo("imageAlt"), value: imgAlt, onChange: (texto) => handleImageAlt(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "secondary", size: "sm", onClick: (event) => escolherArquivo(), children: rotulo("imageFile") }), _jsx("input", { type: "file", accept: "image/png,image/jpeg,image/gif,image/webp", ref: fileInputRef, hidden: true, onChange: (event) => handleArquivo(event) }), imgFileName ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", children: imgFileName })) : null, _jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("imageApply") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharImagem(), children: rotulo("imageCancel") })] })] })) : null, tableOpen ? (_jsxs("form", { className: "umds-rte__link", noValidate: true, onSubmit: (event) => handleTableSubmit(event), onKeyDown: (event) => handlePanelKeyDown(event), children: [_jsx("div", { className: "umds-rte__table-field", ref: tableInputWrapRef, children: _jsx(Input, { size: "sm", type: "number", label: rotulo("tableRows"), value: tblRows, errorMessage: tableErrorText(), onChange: (texto) => handleTableRows(texto) }) }), _jsx("div", { className: "umds-rte__table-field", children: _jsx(Input, { size: "sm", type: "number", label: rotulo("tableCols"), value: tblCols, onChange: (texto) => handleTableCols(texto) }) }), _jsxs("div", { className: "umds-rte__link-actions", children: [_jsx(Button, { variant: "primary", size: "sm", type: "submit", children: rotulo("tableApply") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharTabela(), children: rotulo("tableCancel") })] })] })) : null, styleOpen !== "" ? (_jsxs("div", { role: "group", className: "umds-rte__link", "aria-label": stylePanelLabel(), onKeyDown: (event) => handleStyleKeyDown(event), children: [_jsxs("div", { className: "umds-rte__style-field", ref: styleWrapRef, children: [styleOpen === "fontFamily" ? (_jsx(Select, { size: "sm", ariaLabel: rotulo("fontFamily"), placeholder: rotulo("fontFamily"), options: fontFamilyOptions(), onChange: (valor) => aplicarEstilo("font-family", String(valor)) })) : null, styleOpen === "fontSize" ? (_jsx(Select, { size: "sm", ariaLabel: rotulo("fontSize"), placeholder: rotulo("fontSize"), options: fontSizeOptions(), onChange: (valor) => aplicarEstilo("font-size", String(valor)) })) : null, styleOpen === "textColor" ? (_jsx(ColorPicker, { size: "xs", ariaLabel: rotulo("textColor"), onChange: (token) => aplicarCor(token) })) : null] }), _jsx("div", { className: "umds-rte__link-actions", children: _jsx(Button, { variant: "text", size: "sm", onClick: (event) => fecharEstilo(), children: rotulo("styleClose") }) }), styleErrorText() ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", role: "alert", children: styleErrorText() })) : null] })) : null, tableBarVisible() ? (_jsxs("div", { role: "group", className: "umds-rte__table-bar", "aria-label": rotulo("tableActions"), children: [_jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("addRow"), children: rotulo("tableAddRow") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("removeRow"), children: rotulo("tableRemoveRow") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("addCol"), children: rotulo("tableAddCol") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("removeCol"), children: rotulo("tableRemoveCol") }), _jsx(Button, { variant: "text", size: "sm", onClick: (event) => handleTableAction("removeTable"), children: rotulo("tableRemove") })] })) : null, _jsx("div", { role: "textbox", "aria-multiline": "true", className: "umds-rte__editor", ref: editorRef, id: editorId(), "aria-label": editorAriaLabel(), "aria-labelledby": labelId(), "aria-describedby": describedBy(), "aria-invalid": isInvalid() ? "true" : undefined, "aria-readonly": props.readOnly ? "true" : undefined, "aria-disabled": props.disabled ? "true" : undefined, "aria-placeholder": props.placeholder, "data-placeholder": props.placeholder, contentEditable: editableText(), tabIndex: props.disabled ? -1 : 0, style: editorStyle(), onInput: (event) => handleInput(), onPaste: (event) => handlePaste(event), onKeyDown: (event) => handleEditorKeyDown(event), onBlur: (event) => handleBlur(event) }), props.footer ? (_jsx("div", { className: "umds-rte__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", id: errorId(), children: props.errorMessage })) : null, props.helperText ? (_jsx(Text, { as: "span", variant: "caption", color: "secondary", id: helperId(), children: props.helperText })) : null] }));
 }
 export default RichTextEditor;

package/dist/components/SegmentedControl/SegmentedControl.css

@@ -184,3 +184,73 @@
 [data-density="touch"] .umds-segmented__item {
   min-height: var(--umds-semantic-field-height);
 }
+
+/* ── Contador em pílula (count) ──
+   Mesmos 18px da pílula do Tab (16 + 2, dois degraus do DS somados; sem token
+   próprio): cinza no segmento solto, branco sobre o azul do escolhido. */
+.umds-segmented__count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+  min-width: calc(var(--umds-primitive-spacing-xxxs) + var(--umds-primitive-spacing-micro)); /* 18px */
+  padding: 0 var(--umds-primitive-spacing-quarck); /* 4px */
+  border-radius: var(--umds-primitive-border-radius-pill);
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-semibold);
+  line-height: 1;
+}
+
+.umds-segmented__input:checked + .umds-segmented__item .umds-segmented__count {
+  background-color: var(--umds-semantic-color-neutral-light-pure);
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+/* ── variant="surface": o escolhido em superfície branca (o seletor do CrisDoc) ──
+   Trilho cinza claro sem divisores; o segmento escolhido é uma peça branca com sombra e texto escuro em
+   negrito (a seleção não depende só do tom: o peso e a sombra a dizem). O trilho deixa de recortar, para a
+   sombra aparecer. O contador do escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho. */
+.umds-segmented--surface .umds-segmented__track {
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+  border-color: var(--umds-semantic-color-neutral-light-medium);
+  overflow: visible;
+}
+
+.umds-segmented--surface .umds-segmented__item {
+  background-color: transparent;
+  border-right-color: transparent;
+  border-radius: var(--umds-primitive-border-radius-sm);
+}
+
+.umds-segmented--surface .umds-segmented__item:hover {
+  background-color: var(--umds-semantic-color-neutral-light-down);
+}
+
+.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item,
+.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item:hover {
+  background-color: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font-weight: var(--umds-primitive-font-weight-bold);
+  box-shadow: var(--umds-semantic-shadow-md);
+}
+
+.umds-segmented--surface .umds-segmented__input:disabled + .umds-segmented__item:hover {
+  background-color: transparent;
+}
+
+.umds-segmented--surface .umds-segmented__input:disabled:checked + .umds-segmented__item:hover {
+  background-color: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-segmented--surface .umds-segmented__count {
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-segmented--surface .umds-segmented__input:checked + .umds-segmented__item .umds-segmented__count {
+  background-color: var(--umds-semantic-color-neutral-light-medium);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -6,6 +6,7 @@ import './SegmentedControl.css';
  * @property {any} icon - Ícone Font Awesome antes do texto. Com `label` vazio, o segmento vira só o ícone — e aí `ariaLabel` é obrigatório.
  * @property {string} ariaLabel - Nome acessível do segmento quando não há texto visível.
  * @property {boolean} disabled - Desabilita só este segmento.
+ * @property {number|string} count - Contador em pílula depois do texto (ex.: "Todas 31"), como o da `Tab`: cinza no segmento solto, branco sobre o azul do escolhido. É lido junto do nome do segmento. 0 aparece; vazio e `undefined` não.
  */
 export interface SegmentedControlOption {
     label?: string;
@@ -13,6 +14,7 @@ export interface SegmentedControlOption {
     icon?: any;
     ariaLabel?: string;
     disabled?: boolean;
+    count?: number | string;
     [key: string]: any;
 }
 /**
@@ -38,6 +40,7 @@ export interface SegmentedControlOption {
  * @property {boolean} invalid - Estado de erro.
  * @property {string} errorMessage - Mensagem de erro do grupo.
  * @property {string} size - Tamanho: 'sm' (32px) | 'md' (40px).
+ * @property {string} variant - 'default' (padrão): o segmento escolhido é azul cheio com texto branco. 'surface': trilho cinza claro e o segmento escolhido em superfície branca, com sombra e texto em negrito (o seletor do CrisDoc). O contador do escolhido fica cinza sobre o branco e o dos outros, branco sobre o trilho.
  * @property {boolean} fullWidth - Os segmentos dividem a largura do container.
  * @property {string} className - Classes CSS adicionais.
  * @property {function} onChange - Callback com o valor escolhido.
@@ -56,6 +59,8 @@ export interface SegmentedControlProps {
     invalid?: boolean;
     errorMessage?: string;
     size?: "sm" | "md";
+    /** `surface`: o escolhido em superfície branca sobre trilho cinza, no lugar do azul cheio. @default 'default' */
+    variant?: "default" | "surface";
     fullWidth?: boolean;
     className?: string;
     onChange?: (value: string) => void;