@1doc/1ds-react 2.8.0 → 2.9.0

package/dist/components/Modal/Modal.js

@@ -12,6 +12,7 @@ function Modal(props) {
     const escCleanupRef = useRef(null);
     const closeFnRef = useRef(null);
     const previousFocusRef = useRef(null);
+    const mediaCleanupRef = useRef(null);
     const [lastOpen, setLastOpen] = useState(() => false);
     const [uid, setUid] = useState(() => "umds-modal-" + Math.random().toString(36).slice(2, 9));
     function titleId() {
@@ -32,18 +33,83 @@ function Modal(props) {
         return props.description ? uid + "-description" : undefined;
     }
     function ehFeedback() {
-        const temVariante = props.variant ? props.variant !== "default" : false;
+        // `primary` é só o cabeçalho cheio do modal base: não é feedback.
+        const temVariante = props.variant
+            ? props.variant !== "default" && props.variant !== "primary"
+            : false;
         return temVariante || props.layout === "dialog";
     }
     const [modoAtual, setModoAtual] = useState(() => "normal");
+    const [isCompact, setIsCompact] = useState(() => false);
+    function ehSheet() {
+        return !!props.responsive && isCompact;
+    }
+    function temNormal() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("normal"));
+    }
+    function temExpandir() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("expand"));
+    }
+    function temTelaCheia() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("fullscreen"));
+    }
+    function temMinimizar() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) &&
+            props.windowControls.includes("minimize"));
+    }
+    function temControles() {
+        if (props.responsive && isCompact)
+            return false;
+        if (props.windowControls === true)
+            return true;
+        return (Array.isArray(props.windowControls) && props.windowControls.length > 0);
+    }
+    function janelaPorLista() {
+        return Array.isArray(props.windowControls);
+    }
+    function estiloDoDialogo() {
+        if (!props.width && !props.maxWidth)
+            return undefined;
+        if (props.responsive && isCompact)
+            return undefined;
+        if (props.windowControls && modoAtual !== "normal")
+            return undefined;
+        const estilo = {};
+        if (props.width)
+            estilo.width = props.width;
+        if (props.maxWidth)
+            estilo.maxWidth = props.maxWidth;
+        else
+            estilo.maxWidth = "100%";
+        return estilo;
+    }
     function irParaNormal() {
         setModoAtual("normal");
     }
     function irParaExpandido() {
-        setModoAtual("expanded");
+        setModoAtual(modoAtual === "expanded" && !temNormal() ? "normal" : "expanded");
     }
     function irParaTelaCheia() {
-        setModoAtual("fullscreen");
+        setModoAtual(modoAtual === "fullscreen" && !temNormal() ? "normal" : "fullscreen");
     }
     function classeDoControle(modo) {
         return modo === modoAtual
@@ -53,6 +119,12 @@ function Modal(props) {
     function classeDaJanela() {
         if (!props.windowControls)
             return "";
+        if (props.responsive && isCompact)
+            return "";
+        // Lista de controles: o normal é o tamanho do próprio modal.
+        if (Array.isArray(props.windowControls) && modoAtual === "normal") {
+            return "";
+        }
         return `umds-modal--janela-${modoAtual}`;
     }
     function temRodape() {
@@ -66,6 +138,7 @@ function Modal(props) {
             props.inline ? "umds-modal-root--inline" : "umds-modal-root",
             props.open ? "umds-modal-root--open" : "umds-modal-root--closed",
             props.size === "fullscreen" ? "umds-modal-root--fullscreen" : "",
+            props.responsive && isCompact ? "umds-modal-root--sheet" : "",
         ]
             .filter(Boolean)
             .join(" ");
@@ -77,6 +150,7 @@ function Modal(props) {
             props.size && props.size !== "md" ? `umds-modal--${props.size}` : "",
             ehFeedback() ? "umds-modal--feedback" : "umds-modal--base",
             classeDaJanela(),
+            props.responsive && isCompact ? "umds-modal--sheet" : "",
             props.className,
         ]
             .filter(Boolean)
@@ -108,6 +182,10 @@ function Modal(props) {
     function handleEscClose(event) {
         if (props.closeOnEsc === false)
             return;
+        // Quem já usou o Esc (Select, DatePicker, Popover aberto dentro do
+        // modal) chamou preventDefault: a tecla é dele, o modal não fecha.
+        if (event && event.defaultPrevented)
+            return;
         if (!isTopOverlay(uid))
             return;
         handleClose(event);
@@ -173,10 +251,23 @@ function Modal(props) {
                 closeFnRef.current(event);
             }
         };
-        document.addEventListener("keydown", watcher, true);
+        // No borbulho (false), não na captura: o ouvinte do document só vê a tecla
+        // depois que o componente aberto dentro do modal teve a vez de consumi-la.
+        document.addEventListener("keydown", watcher, false);
         escCleanupRef.current = () => {
-            document.removeEventListener("keydown", watcher, true);
+            document.removeEventListener("keydown", watcher, false);
         };
+        if (typeof window !== "undefined" && window.matchMedia) {
+            const consulta = window.matchMedia("(max-width: " + (props.responsiveBreakpoint || 640) + "px)");
+            const aoMudar = (e) => {
+                setIsCompact(!!e.matches);
+            };
+            setIsCompact(!!consulta.matches);
+            consulta.addEventListener("change", aoMudar);
+            mediaCleanupRef.current = () => {
+                consulta.removeEventListener("change", aoMudar);
+            };
+        }
         syncOpenState();
     }, []);
     useEffect(() => {
@@ -190,9 +281,13 @@ function Modal(props) {
                 escCleanupRef.current();
                 escCleanupRef.current = null;
             }
+            if (mediaCleanupRef.current) {
+                mediaCleanupRef.current();
+                mediaCleanupRef.current = null;
+            }
             removeOverlay(uid);
         };
     }, []);
-    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsxs("div", { className: rootClasses(), children: [_jsx("div", { className: "umds-modal-overlay", onClick: (e) => handleOverlayClick(e) }), _jsxs("div", { role: "dialog", "aria-modal": "true", ref: dialogRef, "aria-label": nomeAcessivel(), "aria-labelledby": labelledBy(), "aria-describedby": describedBy(), tabIndex: -1, onKeyDown: (event) => handleTrapKeydown(event), className: modalClasses(), children: [!ehFeedback() ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "umds-modal__header", children: [_jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx("span", { className: "umds-modal__title", id: titleId(), children: props.title })) : null, props.description ? (_jsx("span", { className: "umds-modal__subtitle", id: descriptionId(), children: props.description })) : null] }), _jsxs("div", { className: "umds-modal__header-actions", children: [props.windowControls ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", title: props.normalModeLabel || "Modo normal", "aria-label": props.normalModeLabel || "Modo normal", "aria-pressed": modoAtual === "normal", onClick: (event) => irParaNormal(), className: classeDoControle("normal"), children: _jsx(Icon, { customSize: "14px", icon: faWindowRestore }) }), _jsx("button", { type: "button", title: props.expandLabel || "Expandir", "aria-label": props.expandLabel || "Expandir", "aria-pressed": modoAtual === "expanded", onClick: (event) => irParaExpandido(), className: classeDoControle("expanded"), children: _jsx(Icon, { customSize: "14px", icon: faUpRightAndDownLeftFromCenter }) }), _jsx("button", { type: "button", title: props.fullscreenLabel || "Tela cheia", "aria-label": props.fullscreenLabel || "Tela cheia", "aria-pressed": modoAtual === "fullscreen", onClick: (event) => irParaTelaCheia(), className: classeDoControle("fullscreen"), children: _jsx(Icon, { customSize: "14px", icon: faExpand }) }), _jsx("button", { type: "button", className: "umds-modal__ctrl", title: props.minimizeLabel || "Minimizar", "aria-label": props.minimizeLabel || "Minimizar", onClick: (e) => props.onMinimize?.(e), children: _jsx(Icon, { customSize: "14px", icon: faMinus }) }), _jsx("span", { className: "umds-modal__ctrl-divider" })] })) : null, !props.hideCloseButton ? (_jsx("button", { type: "button", className: "umds-modal__ctrl umds-modal__ctrl--close", onClick: (e) => handleClose(e), title: props.closeLabel || "Fechar", "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { customSize: "16px", icon: faXmark }) })) : null] })] }), _jsx("div", { className: "umds-modal__body", children: _jsx(_Fragment, { children: props.children }) }), temRodape() ? (_jsxs("div", { className: "umds-modal__footer", children: [_jsx("div", { className: "umds-modal__footer-start", children: props.footerStart ? _jsx(_Fragment, { children: props.footerStart }) : null }), _jsxs("div", { className: "umds-modal__footer-end", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })) : null] })) : null, ehFeedback() ? (_jsxs(_Fragment, { children: [!props.hideCloseButton ? (_jsx("div", { className: "umds-modal__close-wrapper", children: _jsx("button", { className: "umds-modal__close-button", onClick: (e) => handleClose(e), "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { size: "sm", icon: faXmark }) }) })) : null, _jsxs("div", { className: "umds-modal__content", children: [_jsxs("div", { className: "umds-modal__header umds-modal__header--feedback", children: [props.variant && props.variant !== "default" ? (_jsx("div", { className: `umds-modal__icon ${iconVariantClass()}`, children: _jsx(Icon, { customSize: "40px", icon: iconName() }) })) : null, _jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx(Text, { variant: "h5", weight: "bold", id: titleId(), children: props.title })) : null, props.description ? (_jsx(Text, { variant: "body2", color: "secondary", id: descriptionId(), children: props.description })) : null] })] }), _jsx(_Fragment, { children: props.children }), _jsxs("div", { className: "umds-modal__footer umds-modal__footer--feedback", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })] })) : null] })] }) })) : null }));
+    return (_jsx(_Fragment, { children: props.open ? (_jsx(_Fragment, { children: _jsxs("div", { className: rootClasses(), children: [_jsx("div", { className: "umds-modal-overlay", onClick: (e) => handleOverlayClick(e) }), _jsxs("div", { role: "dialog", "aria-modal": "true", ref: dialogRef, "aria-label": nomeAcessivel(), "aria-labelledby": labelledBy(), "aria-describedby": describedBy(), tabIndex: -1, style: estiloDoDialogo(), onKeyDown: (event) => handleTrapKeydown(event), className: modalClasses(), children: [!ehFeedback() ? (_jsxs(_Fragment, { children: [ehSheet() ? (_jsx("div", { "aria-hidden": "true", className: "umds-modal__grabber", children: _jsx("span", { className: "umds-modal__grabber-bar" }) })) : null, _jsxs("div", { className: "umds-modal__header", children: [_jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx("span", { className: "umds-modal__title", id: titleId(), children: props.title })) : null, props.description ? (_jsx("span", { className: "umds-modal__subtitle", id: descriptionId(), children: props.description })) : null] }), _jsxs("div", { className: "umds-modal__header-actions", children: [temNormal() ? (_jsx("button", { type: "button", title: props.normalModeLabel || "Modo normal", "aria-label": props.normalModeLabel || "Modo normal", "aria-pressed": modoAtual === "normal", onClick: (event) => irParaNormal(), className: classeDoControle("normal"), children: _jsx(Icon, { customSize: "14px", icon: faWindowRestore }) })) : null, temExpandir() ? (_jsx("button", { type: "button", title: props.expandLabel || "Expandir", "aria-label": props.expandLabel || "Expandir", "aria-pressed": modoAtual === "expanded", onClick: (event) => irParaExpandido(), className: classeDoControle("expanded"), children: _jsx(Icon, { customSize: "14px", icon: faUpRightAndDownLeftFromCenter }) })) : null, temTelaCheia() ? (_jsx("button", { type: "button", title: props.fullscreenLabel || "Tela cheia", "aria-label": props.fullscreenLabel || "Tela cheia", "aria-pressed": modoAtual === "fullscreen", onClick: (event) => irParaTelaCheia(), className: classeDoControle("fullscreen"), children: _jsx(Icon, { customSize: "14px", icon: faExpand }) })) : null, temMinimizar() ? (_jsx("button", { type: "button", className: "umds-modal__ctrl", title: props.minimizeLabel || "Minimizar", "aria-label": props.minimizeLabel || "Minimizar", onClick: (e) => props.onMinimize?.(e), children: _jsx(Icon, { customSize: "14px", icon: faMinus }) })) : null, temControles() && !props.hideCloseButton ? (_jsx("span", { className: "umds-modal__ctrl-divider" })) : null, !props.hideCloseButton ? (_jsx("button", { type: "button", className: "umds-modal__ctrl umds-modal__ctrl--close", onClick: (e) => handleClose(e), title: props.closeLabel || "Fechar", "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { customSize: "16px", icon: faXmark }) })) : null] })] }), _jsx("div", { className: "umds-modal__body", children: _jsx(_Fragment, { children: props.children }) }), temRodape() ? (_jsxs("div", { className: "umds-modal__footer", children: [_jsx("div", { className: "umds-modal__footer-start", children: props.footerStart ? _jsx(_Fragment, { children: props.footerStart }) : null }), _jsxs("div", { className: "umds-modal__footer-end", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })) : null] })) : null, ehFeedback() ? (_jsxs(_Fragment, { children: [!props.hideCloseButton ? (_jsx("div", { className: "umds-modal__close-wrapper", children: _jsx("button", { className: "umds-modal__close-button", onClick: (e) => handleClose(e), "aria-label": props.closeLabel || "Fechar", children: _jsx(Icon, { size: "sm", icon: faXmark }) }) })) : null, _jsxs("div", { className: "umds-modal__content", children: [_jsxs("div", { className: "umds-modal__header umds-modal__header--feedback", children: [props.variant && props.variant !== "default" ? (_jsx("div", { className: `umds-modal__icon ${iconVariantClass()}`, children: _jsx(Icon, { customSize: "40px", icon: iconName() }) })) : null, _jsxs("div", { className: "umds-modal__text-group", children: [props.title ? (_jsx(Text, { variant: "h5", weight: "bold", id: titleId(), children: props.title })) : null, props.description ? (_jsx(Text, { variant: "body2", color: "secondary", id: descriptionId(), children: props.description })) : null] })] }), _jsx(_Fragment, { children: props.children }), _jsxs("div", { className: "umds-modal__footer umds-modal__footer--feedback", children: [props.footerSlot ? _jsx(_Fragment, { children: props.footerSlot }) : null, !props.footerSlot ? (_jsxs(_Fragment, { children: [props.cancelLabel ? (_jsx(Button, { variant: "text", onClick: (e) => props.onCancel?.(e), children: props.cancelLabel })) : null, props.confirmLabel ? (_jsx(Button, { variant: "primary", onClick: (e) => props.onConfirm?.(e), children: props.confirmLabel })) : null] })) : null] })] })] })) : null] })] }) })) : null }));
 }
 export default Modal;

package/dist/components/MultiSelect/MultiSelect.css

@@ -378,6 +378,14 @@
   border-color: var(--umds-semantic-field-border-default);
 }
 
+/* Somente leitura não é desabilitado: o texto segue lido e a WCAG 1.4.3 vale
+   sem isenção. O placeholder padrão foi calibrado para fundo branco e cai para
+   ~4,2:1 sobre o fundo de somente leitura; neutral-dark-down passa 4,5:1 em
+   todos os temas (1doc 6,78:1 · 1doc-dark 10,83:1 · alto contraste 16,48:1). */
+.umds-multiselect--readonly .umds-multiselect__placeholder {
+  color: var(--umds-semantic-color-neutral-dark-down);
+}
+
 /* O campo de busca precisa de indicador de foco — o painel foca ele ao abrir.
    Um outline no <input> desenhava um retângulo azul solto no meio do painel,
    porque o input não tem borda própria para o anel acompanhar.

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,6 +56,12 @@ function MultiSelect(props) {
     function labelIdText() {
         return baseId() ? baseId() + "-label" : undefined;
     }
+    function comboboxLabelledBy() {
+        return props.label && baseId() ? labelIdText() : undefined;
+    }
+    function comboboxAriaLabel() {
+        return props.label && !baseId() ? props.label : undefined;
+    }
     function errorIdText() {
         return baseId() ? baseId() + "-error" : undefined;
     }
@@ -162,6 +168,8 @@ function MultiSelect(props) {
             toggle();
         }
         else if (event.key === "Escape" && isOpen) {
+            // O Esc é da lista (fecha só ela): o Modal em volta não reage.
+            event.preventDefault();
             setIsOpen(false);
             setSearchTerm("");
         }
@@ -177,6 +185,7 @@ function MultiSelect(props) {
     }
     function handleSearchKeyDown(event) {
         if (event.key === "Escape") {
+            event.preventDefault();
             setIsOpen(false);
             setSearchTerm("");
             setActiveIndex(-1);
@@ -285,6 +294,6 @@ function MultiSelect(props) {
             }
         };
     }, []);
-    return (_jsxs("div", { ref: containerRef, className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-multiselect__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-multiselect__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-multiselect__container", children: [_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-multiselect__trigger", id: comboboxIdText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-labelledby": props.label ? labelIdText() : undefined, "aria-disabled": props.disabled, "aria-invalid": ariaInvalidText(), "aria-describedby": describedByText(), tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-multiselect__tags-area", children: [selectedOptions().length === 0 ? (_jsx("span", { className: "umds-multiselect__placeholder", children: props.placeholder || "Selecione..." })) : null, selectedOptions().length > 0 ? (_jsx(_Fragment, { children: selectedOptions()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, closeAriaLabel: removeTagAriaLabelText(opt.label), onClose: (event) => removeTag(opt.value, event) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-multiselect__actions", children: [selectedOptions().length > 0 && !props.disabled ? (_jsx("span", { role: "button", className: "umds-multiselect__clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, "aria-label": clearSelectionText(), title: clearSelectionText(), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null, _jsx("div", { className: "umds-multiselect__arrow", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: faChevronDown }) })] })] }), isOpen ? (_jsxs("div", { className: "umds-multiselect__dropdown", children: [_jsxs("div", { className: "umds-multiselect__search", children: [_jsx("div", { className: "umds-multiselect__search-icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", role: "combobox", className: "umds-multiselect__search-input", ref: searchInputRef, "aria-label": props.searchAriaLabel || "Buscar", placeholder: props.searchPlaceholder || "Buscar...", value: searchTerm, onInput: (event) => handleSearch(event), onChange: (event) => handleSearch(event), onKeyDown: (event) => handleSearchKeyDown(event), onClick: (event) => event.stopPropagation(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-activedescendant": activeOptionId() }), !!searchTerm ? (_jsx("span", { role: "button", className: "umds-multiselect__search-clear", onClick: (event) => clearSearchTerm(), onKeyDown: (event) => aoTeclarLimparBusca(event), tabIndex: 0, "aria-label": props.clearSearchAriaLabel || "Limpar busca", children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }), _jsxs("div", { role: "listbox", "aria-multiselectable": "true", className: "umds-multiselect__options", id: listboxIdText(), children: [filteredOptions().length === 0 ? (_jsx("div", { className: "umds-multiselect__empty", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptions()?.map((option, indice) => (_jsxs("div", { role: "option", id: optionIdText(indice), onClick: (event) => selectOption(option.value), "aria-selected": isSelected(option.value), className: optionClasses(option.value, indice), children: [_jsx("div", { "aria-hidden": "true", className: "umds-multiselect__option-checkbox", children: _jsx(Checkbox, { size: "sm", checked: isSelected(option.value), decorative: true }) }), _jsx("span", { className: "umds-multiselect__option-label", children: option.label })] }, option.value)))] }), selectedOptions().length > 0 ? (_jsxs("div", { className: "umds-multiselect__footer", children: [_jsx(Text, { variant: "caption", color: "secondary", children: selectedCountText() }), _jsx("span", { role: "button", className: "umds-multiselect__footer-clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, children: props.clearAllLabel || "Limpar tudo" })] })) : null] })) : null] }), props.name ? (_jsx(_Fragment, { children: currentValue()?.map((val) => (_jsx("input", { type: "hidden", name: props.name, value: String(val) }, String(val)))) })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-multiselect__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-multiselect__description", id: helperIdText(), children: textoDeApoio() })) : null] }));
+    return (_jsxs("div", { ref: containerRef, className: wrapperClasses(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-multiselect__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-multiselect__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-multiselect__container", children: [_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-multiselect__trigger", id: comboboxIdText(), onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-disabled": props.disabled, "aria-invalid": ariaInvalidText(), "aria-describedby": describedByText(), tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-multiselect__tags-area", children: [selectedOptions().length === 0 ? (_jsx("span", { className: "umds-multiselect__placeholder", children: props.placeholder || "Selecione..." })) : null, selectedOptions().length > 0 ? (_jsx(_Fragment, { children: selectedOptions()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, closeAriaLabel: removeTagAriaLabelText(opt.label), onClose: (event) => removeTag(opt.value, event) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-multiselect__actions", children: [selectedOptions().length > 0 && !props.disabled ? (_jsx("span", { role: "button", className: "umds-multiselect__clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, "aria-label": clearSelectionText(), title: clearSelectionText(), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null, _jsx("div", { className: "umds-multiselect__arrow", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: faChevronDown }) })] })] }), isOpen ? (_jsxs("div", { className: "umds-multiselect__dropdown", children: [_jsxs("div", { className: "umds-multiselect__search", children: [_jsx("div", { className: "umds-multiselect__search-icon", children: _jsx(Icon, { variant: "inherit", customSize: "14px", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", role: "combobox", className: "umds-multiselect__search-input", ref: searchInputRef, "aria-label": props.searchAriaLabel || "Buscar", placeholder: props.searchPlaceholder || "Buscar...", value: searchTerm, onInput: (event) => handleSearch(event), onChange: (event) => handleSearch(event), onKeyDown: (event) => handleSearchKeyDown(event), onClick: (event) => event.stopPropagation(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-activedescendant": activeOptionId() }), !!searchTerm ? (_jsx("span", { role: "button", className: "umds-multiselect__search-clear", onClick: (event) => clearSearchTerm(), onKeyDown: (event) => aoTeclarLimparBusca(event), tabIndex: 0, "aria-label": props.clearSearchAriaLabel || "Limpar busca", children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }), _jsxs("div", { role: "listbox", "aria-multiselectable": "true", className: "umds-multiselect__options", id: listboxIdText(), children: [filteredOptions().length === 0 ? (_jsx("div", { className: "umds-multiselect__empty", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptions()?.map((option, indice) => (_jsxs("div", { role: "option", id: optionIdText(indice), onClick: (event) => selectOption(option.value), "aria-selected": isSelected(option.value), className: optionClasses(option.value, indice), children: [_jsx("div", { "aria-hidden": "true", className: "umds-multiselect__option-checkbox", children: _jsx(Checkbox, { size: "sm", checked: isSelected(option.value), decorative: true }) }), _jsx("span", { className: "umds-multiselect__option-label", children: option.label })] }, option.value)))] }), selectedOptions().length > 0 ? (_jsxs("div", { className: "umds-multiselect__footer", children: [_jsx(Text, { variant: "caption", color: "secondary", children: selectedCountText() }), _jsx("span", { role: "button", className: "umds-multiselect__footer-clear", onClick: (event) => clearAll(event), onKeyDown: (event) => aoTeclarLimparTudo(event), tabIndex: 0, children: props.clearAllLabel || "Limpar tudo" })] })) : null] })) : null] }), props.name ? (_jsx(_Fragment, { children: currentValue()?.map((val) => (_jsx("input", { type: "hidden", name: props.name, value: String(val) }, String(val)))) })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-multiselect__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-multiselect__description", id: helperIdText(), children: textoDeApoio() })) : null] }));
 }
 export default MultiSelect;

package/dist/components/OrgChart/OrgChart.css

@@ -0,0 +1,149 @@
+/* ─────────────────────────────────────────────
+   ORG CHART
+   Organograma de cima para baixo, com conectores.
+
+   O desenho é calculado em JS (posições absolutas numa superfície do tamanho do
+   organograma); este CSS dá a cara dos nós e das linhas. A raiz sai cheia na
+   cor primária, os demais em tom claro. O texto do nó corta com reticências.
+
+   Cores: semânticos · Medidas: primitivos
+───────────────────────────────────────────── */
+
+.umds-org-chart {
+  font-family: var(--umds-semantic-font-family-base);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+.umds-org-chart__scroller {
+  overflow: auto;
+  /* Folga para o foco e a sombra dos nós não serem cortados pelo overflow. */
+  padding: var(--umds-primitive-spacing-nano);
+}
+
+.umds-org-chart__surface {
+  position: relative;
+  margin: 0 auto;
+}
+
+.umds-org-chart__lines {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.umds-org-chart__line {
+  fill: none;
+  stroke: var(--umds-semantic-color-neutral-light-down);
+  stroke-width: var(--umds-primitive-border-width-hairline);
+}
+
+/* ── Nó ── */
+.umds-org-chart__node {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--umds-primitive-spacing-micro); /* 2px */
+  padding: var(--umds-primitive-spacing-nano); /* 8px */
+  text-align: center;
+  background: var(--umds-semantic-color-primary-light);
+  color: var(--umds-semantic-color-primary-dark);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-medium);
+  border-radius: var(--umds-primitive-border-radius-sm);
+  box-shadow: var(--umds-semantic-shadow-sm);
+  cursor: pointer;
+  transition:
+    box-shadow var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard),
+    border-color var(--umds-semantic-motion-duration-fast) var(--umds-semantic-motion-easing-standard);
+}
+
+.umds-org-chart__node--root {
+  background: var(--umds-semantic-color-primary-pure);
+  /* Texto claro sobre o primário cheio. */
+  color: var(--umds-semantic-color-background-white);
+  border-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-org-chart__node:hover {
+  box-shadow: var(--umds-semantic-shadow-md);
+}
+
+.umds-org-chart__node--selected {
+  border-color: var(--umds-semantic-color-primary-pure);
+  box-shadow: 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-primary-pure);
+}
+
+.umds-org-chart__node:focus-visible {
+  outline: var(--umds-primitive-border-width-thin) solid var(--umds-semantic-color-primary-pure);
+  outline-offset: var(--umds-primitive-border-width-thin);
+}
+
+.umds-org-chart__title,
+.umds-org-chart__subtitle {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.umds-org-chart__title {
+  font-size: var(--umds-primitive-font-size-xs); /* 16px */
+  font-weight: var(--umds-primitive-font-weight-bold);
+}
+
+.umds-org-chart__subtitle {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+.umds-org-chart__custom {
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ── Expandir e recolher (mouse; o teclado usa Espaço no nó) ── */
+.umds-org-chart__toggle {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-xxs); /* 24px */
+  height: var(--umds-primitive-spacing-xxs);
+  margin: 0;
+  padding: 0;
+  transform: translate(-50%, -50%);
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+  border-radius: var(--umds-primitive-border-radius-circular);
+  background: var(--umds-semantic-color-background-white);
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font: inherit;
+  font-size: var(--umds-primitive-font-size-xs); /* 16px */
+  line-height: 1;
+  cursor: pointer;
+}
+
+.umds-org-chart__toggle:hover {
+  background: var(--umds-semantic-color-background-light);
+  color: var(--umds-semantic-color-neutral-dark-pure);
+}
+
+@media (forced-colors: active) {
+  .umds-org-chart__node {
+    border: var(--umds-primitive-border-width-hairline) solid CanvasText;
+  }
+
+  .umds-org-chart__node--selected {
+    outline: var(--umds-primitive-border-width-thin) solid Highlight;
+  }
+
+  .umds-org-chart__line {
+    stroke: CanvasText;
+  }
+}

package/dist/components/OrgChart/OrgChart.d.ts

@@ -0,0 +1,83 @@
+import './OrgChart.css';
+/**
+ * Nó do organograma.
+ * @property {string} id - Identidade do nó (única no organograma)
+ * @property {string} title - Título do nó (a sigla, por exemplo)
+ * @property {string} subtitle - Segunda linha (o nome por extenso)
+ * @property {OrgChartNode[]} children - Nós filhos
+ */
+export interface OrgChartNode {
+    id: string;
+    title: string;
+    subtitle?: string;
+    children?: OrgChartNode[];
+    [key: string]: any;
+}
+/**
+ * OrgChart — organograma: uma árvore hierárquica desenhada de cima para baixo,
+ * com conectores, em que cada nó mostra título e subtítulo (ou o conteúdo que
+ * você der) e os que têm filhos expandem e recolhem.
+ *
+ * O desenho é calculado, não aninhado: cada nó tem largura e altura fixas
+ * (`nodeWidth`, `nodeHeight`), os filhos se distribuem sob o pai e o pai se
+ * centra sobre eles. Por isso o texto do nó corta com reticências (o `title`
+ * completo vai no tooltip) e o conteúdo livre precisa caber na caixa. Se o
+ * organograma passar da largura do container, o container rola.
+ *
+ * O primeiro nível (a raiz) sai cheio na cor primária e os demais em tom claro;
+ * `selectedId` marca um nó. O conteúdo do nó é livre: no React, `renderNode(nó,
+ * { level, expanded })`; no Vue, o slot `node` com `{ node, level, expanded }`.
+ *
+ * Acessibilidade: é uma `role="tree"` com nós `treeitem` (`aria-level`,
+ * `aria-posinset`, `aria-setsize`, `aria-expanded`). Um Tab entra no nó em foco;
+ * Cima vai ao pai, Baixo ao primeiro filho (abrindo o nó, se estiver recolhido),
+ * Esquerda e Direita aos irmãos, Home e End ao primeiro e ao último irmão, Espaço
+ * expande ou recolhe, Enter aciona o nó (`onNodeClick`). O botão de expandir
+ * desenhado no nó é para o mouse (a mesma ação do teclado já existe).
+ *
+ * Tudo expandido por padrão: `collapsedIds` (controlado) ou `defaultCollapsedIds`
+ * escolhem o que começa recolhido, e `onCollapsedChange` avisa a lista nova.
+ *
+ * Limites: só de cima para baixo; sem zoom nem arrastar (a rolagem é a do
+ * container); nó de altura variável não cabe: use `nodeHeight` para o maior.
+ * @property {OrgChartNode[]} nodes - A árvore: lista de nós raiz, cada um com `children`
+ * @property {string[]} collapsedIds - Ids recolhidos (controlado)
+ * @property {string[]} defaultCollapsedIds - Ids que começam recolhidos (não controlado)
+ * @property {string} selectedId - Id do nó marcado
+ * @property {number} nodeWidth - Largura de cada nó, em px (padrão 176)
+ * @property {number} nodeHeight - Altura de cada nó, em px (padrão 64)
+ * @property {number} gapX - Espaço entre nós irmãos, em px (padrão 16)
+ * @property {number} gapY - Espaço entre um nível e o seguinte, em px (padrão 40)
+ * @property {string} ariaLabel - Nome acessível da árvore (padrão "Organograma")
+ * @property {string} expandLabel - Nome do botão de expandir (padrão "Expandir")
+ * @property {string} collapseLabel - Nome do botão de recolher (padrão "Recolher")
+ * @property {string} className - Classes CSS adicionais
+ * @property {function} renderNode - Só no React: conteúdo do nó, `(nó, { level, expanded }) => nó`. No Vue, o slot `node`.
+ * @property {function} onNodeClick - Clique ou Enter num nó: recebe o nó
+ * @property {function} onCollapsedChange - Mudou o que está recolhido: recebe a lista de ids
+ * @slot node - Só no Vue. Conteúdo do nó: `{ node, level, expanded }`.
+ * @quandoUsar Mostrar a estrutura de setores ou de cargos de um órgão como um desenho, com a hierarquia à vista.
+ * @quandoNaoUsar Para navegar e escolher em hierarquias grandes, use `Tree` (lista indentada, mais densa e acessível). Para um fluxo de processo, use o editor de processos. Para uma lista plana, use `List`.
+ */
+export interface OrgChartProps {
+    nodes?: OrgChartNode[];
+    collapsedIds?: string[];
+    defaultCollapsedIds?: string[];
+    selectedId?: string;
+    nodeWidth?: number;
+    nodeHeight?: number;
+    gapX?: number;
+    gapY?: number;
+    ariaLabel?: string;
+    expandLabel?: string;
+    collapseLabel?: string;
+    className?: string;
+    renderNode?: (node: OrgChartNode, meta: {
+        level: number;
+        expanded: boolean;
+    }) => any;
+    onNodeClick?: (node: OrgChartNode) => void;
+    onCollapsedChange?: (ids: string[]) => void;
+}
+declare function OrgChart(props: OrgChartProps): import("react/jsx-runtime").JSX.Element;
+export default OrgChart;