@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/Select/Select.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import './Select.css';
 import { useState, useRef, useEffect } from "react";
 import { faChevronUp, faChevronDown, faMagnifyingGlass, faXmark, faCheck, faTrash, } from "@fortawesome/free-solid-svg-icons";
+import { computePosition, autoUpdate, offset, flip, size, } from "@floating-ui/dom";
 import Text from "../Text/Text";
 import Icon from "../Icon/Icon";
 import Spinner from "../Spinner/Spinner";
@@ -15,6 +16,10 @@ function Select(props) {
     const searchInputRef = useRef(null);
     const outsideWatcherRef = useRef(null);
     const searchTimeoutRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const floatCleanupRef = useRef(null);
+    const latestOpenRef = useRef(false);
+    const latestOpenChangeRef = useRef(null);
     function textoDeApoio() {
         return props.helperText || props.description || "";
     }
@@ -25,16 +30,43 @@ function Select(props) {
         return props.readOnly ? "true" : undefined;
     }
     const [isOpen, setIsOpen] = useState(() => false);
+    const [prepared, setPrepared] = useState(() => false);
+    const [floatMode, setFloatMode] = useState(() => false);
+    const [floatReady, setFloatReady] = useState(() => false);
+    const [floatX, setFloatX] = useState(() => 0);
+    const [floatY, setFloatY] = useState(() => 0);
+    const [floatW, setFloatW] = useState(() => 0);
+    const [floatMaxH, setFloatMaxH] = useState(() => 0);
+    const [listMaxH, setListMaxH] = useState(() => 0);
     const [searchTerm, setSearchTerm] = useState(() => "");
     const [internalSelected, setInternalSelected] = useState(() => Array.isArray(props.defaultValue)
         ? props.defaultValue
         : props.defaultValue !== undefined && props.defaultValue !== null
             ? [props.defaultValue]
             : Array());
+    const [opensUp, setOpensUp] = useState(() => false);
     const [shouldFocusSearch, setShouldFocusSearch] = useState(() => false);
     const [shouldFocusTrigger, setShouldFocusTrigger] = useState(() => false);
     const [activeIndex, setActiveIndex] = useState(() => -1);
     const [uid, setUid] = useState(() => "");
+    function opened() {
+        if (props.open !== undefined)
+            return props.open === "" ? true : !!props.open;
+        return isOpen;
+    }
+    function isFilter() {
+        return (props.variant === "filter" ||
+            props.variant === "search" ||
+            props.variant === "combo");
+    }
+    function setOpen(next) {
+        if (next === opened())
+            return;
+        if (props.open === undefined)
+            setIsOpen(next);
+        if (props.onOpenChange)
+            props.onOpenChange(next);
+    }
     function baseId() {
         return props.id || uid;
     }
@@ -47,6 +79,9 @@ function Select(props) {
     function isInvalid() {
         return !!props.invalid || !!props.errorMessage;
     }
+    function ariaRequiredText() {
+        return props.required ? "true" : undefined;
+    }
     function ariaInvalidText() {
         return isInvalid() ? "true" : undefined;
     }
@@ -92,6 +127,12 @@ function Select(props) {
             : internalSelected || [];
         if (currentVal.length === 0)
             return props.placeholder || "Selecione...";
+        // Opção "sem filtro" escolhida: volta a mostrar o nome do filtro.
+        if (props.emptyOptionLabel &&
+            !props.multiple &&
+            currentVal.length === 1 &&
+            currentVal[0] === "")
+            return props.placeholder || "Selecione...";
         if (props.multiple) {
             if (props.selectionDisplay === "tags")
                 return "";
@@ -109,6 +150,14 @@ function Select(props) {
         }
         return String(currentVal[0]);
     }
+    function triggerSwatchColor() {
+        if (props.triggerSwatch)
+            return props.triggerSwatch;
+        if (props.multiple || isPlaceholder())
+            return undefined;
+        const escolhida = selectedOptionsList()[0];
+        return escolhida ? escolhida.color : undefined;
+    }
     function isPlaceholder() {
         const currentVal = props.value !== undefined
             ? Array.isArray(props.value)
@@ -117,6 +166,11 @@ function Select(props) {
                     ? []
                     : [props.value]
             : internalSelected || [];
+        if (props.emptyOptionLabel &&
+            !props.multiple &&
+            currentVal.length === 1 &&
+            currentVal[0] === "")
+            return true;
         return currentVal.length === 0;
     }
     function formValue() {
@@ -132,22 +186,40 @@ function Select(props) {
     function filteredOptionsList() {
         if (!props.options)
             return [];
+        // Opção "sem filtro" no topo (seleção única), sempre visível sem busca.
+        const vazia = props.emptyOptionLabel && !props.multiple && !searchTerm
+            ? [
+                {
+                    label: props.emptyOptionLabel,
+                    value: "",
+                },
+            ]
+            : [];
         // If it's remote search (onSearchChange provided), we don't filter locally
         if (!props.searchable || !searchTerm || props.onSearchChange)
-            return props.options;
+            return vazia.concat(props.options);
         const term = searchTerm.toLowerCase();
         return props.options.filter((opt) => opt.label.toLowerCase().includes(term));
     }
     function wrapperClassesList() {
         return [
             "umds-select",
-            `umds-select--${props.size || "md"}`,
+            `umds-select--${props.size || (isFilter() ? "sm" : "md")}`,
+            isFilter() && !isPlaceholder() ? "umds-select--has-value" : "",
             props.fullWidth ? "umds-select--full-width" : "",
             props.disabled ? "umds-select--disabled" : "",
             props.readOnly ? "umds-select--readonly" : "",
             props.invalid ? "umds-select--invalid" : "",
-            isOpen ? "umds-select--open" : "",
+            opened() ? "umds-select--open" : "",
             props.searchVariant === "inline" ? "umds-select--search-inline" : "",
+            isFilter() ? "umds-select--filter" : "",
+            props.variant === "search" ? "umds-select--filter-search" : "",
+            props.variant === "combo" ? "umds-select--filter-combo" : "",
+            opened() && floatMode ? "umds-select--floating" : "",
+            props.triggerIcon ? "umds-select--has-trigger-icon" : "",
+            opensUp && props.searchVariant !== "inline"
+                ? "umds-select--placement-top"
+                : "",
             props.multiple &&
                 props.selectionDisplay === "tags" &&
                 selectedOptionsList().length > 0
@@ -164,8 +236,16 @@ function Select(props) {
     function labelIdText() {
         return baseId() ? baseId() + "-label" : undefined;
     }
+    function comboboxLabelledBy() {
+        return props.label && baseId() ? labelIdText() : undefined;
+    }
+    function comboboxAriaLabel() {
+        if (props.ariaLabel)
+            return props.ariaLabel;
+        return props.label && !baseId() ? props.label : undefined;
+    }
     function activeDescendantText() {
-        if (!isOpen || activeIndex < 0 || !baseId())
+        if (!opened() || activeIndex < 0 || !baseId())
             return undefined;
         return baseId() + "-option-" + activeIndex;
     }
@@ -175,23 +255,133 @@ function Select(props) {
     function removeItemAriaLabelText(label) {
         return (props.removeAriaLabel || "Remover") + " " + label;
     }
+    function insideDialog() {
+        if (typeof document === "undefined" ||
+            !triggerRef.current ||
+            props.searchVariant === "inline")
+            return false;
+        if (typeof triggerRef.current.closest !== "function")
+            return false;
+        return !!triggerRef.current.closest('[role="dialog"], [aria-modal="true"]');
+    }
+    function shouldOpenUp(flutuante) {
+        const pedido = props.placement || "bottom";
+        setListMaxH(0);
+        if (pedido === "top")
+            return true;
+        if (pedido !== "auto")
+            return false;
+        if (typeof window === "undefined" || !triggerRef.current)
+            return false;
+        const caixa = triggerRef.current.getBoundingClientRect();
+        let topo = 0;
+        let base = window.innerHeight;
+        if (!flutuante) {
+            let pai = triggerRef.current.parentElement;
+            while (pai && pai !== document.body) {
+                const corte = window.getComputedStyle(pai).overflowY;
+                if (corte === "auto" ||
+                    corte === "scroll" ||
+                    corte === "hidden" ||
+                    corte === "clip") {
+                    const area = pai.getBoundingClientRect();
+                    topo = Math.max(topo, area.top);
+                    base = Math.min(base, area.bottom);
+                }
+                pai = pai.parentElement;
+            }
+        }
+        const abaixo = base - caixa.bottom;
+        const acima = caixa.top - topo;
+        const opcoes = filteredOptionsList().length;
+        const estimada = Math.min(300, opcoes * 36 + 8 + (props.searchable ? 44 : 0) + (props.footer ? 44 : 0));
+        const sobe = abaixo < estimada && acima > abaixo;
+        const espaco = (sobe ? acima : abaixo) - 8;
+        if (espaco < 300)
+            setListMaxH(Math.max(96, Math.floor(espaco)));
+        return sobe;
+    }
+    function prepareOpen() {
+        setPrepared(true);
+        // Local: no React gerado o setState é assíncrono e o estado leria STALE.
+        const flutuante = insideDialog();
+        setFloatMode(flutuante);
+        setFloatReady(false);
+        setOpensUp(shouldOpenUp(flutuante));
+        // Abre com a opção já selecionada ativa (padrão combobox).
+        setActiveIndex(filteredOptionsList().findIndex((opt) => isOptionSelected(opt.value)));
+        if (props.searchable &&
+            (props.autoFocusSearch || props.searchVariant === "inline" || isFilter())) {
+            setShouldFocusSearch(true);
+        }
+    }
+    function updateFloat() {
+        if (!triggerRef.current || !dropdownRef.current)
+            return;
+        computePosition(triggerRef.current, dropdownRef.current, {
+            strategy: "fixed",
+            placement: opensUp ? "top-start" : "bottom-start",
+            middleware: [
+                offset(4),
+                flip({
+                    fallbackStrategy: "bestFit",
+                }),
+                size({
+                    apply({ availableHeight, rects }) {
+                        setFloatW(rects.reference.width);
+                        setFloatMaxH(Math.max(96, Math.min(300, Math.floor(availableHeight - 8))));
+                    },
+                }),
+            ],
+        }).then((posicao) => {
+            setFloatX(Math.round(posicao.x));
+            setFloatY(Math.round(posicao.y));
+            setFloatReady(true);
+        });
+    }
+    function dropdownStyle() {
+        if (props.searchVariant === "inline")
+            return {
+                top: "0",
+            };
+        if (opened() && floatMode) {
+            const estilo = {
+                position: "fixed",
+                top: "0",
+                left: "0",
+                bottom: "auto",
+                transform: "translate(" + floatX + "px, " + floatY + "px)",
+                visibility: floatReady ? "visible" : "hidden",
+            };
+            if (isFilter()) {
+                estilo.minWidth =
+                    "max(" + floatW + "px, calc(var(--umds-primitive-spacing-xxl) * 3))";
+            }
+            else {
+                estilo.width = floatW + "px";
+            }
+            if (floatMaxH)
+                estilo.maxHeight = floatMaxH + "px";
+            return estilo;
+        }
+        return listMaxH
+            ? {
+                maxHeight: listMaxH + "px",
+            }
+            : {};
+    }
     function toggle() {
         if (props.disabled || props.readOnly)
             return;
-        // NUNCA ler isOpen logo após atribuí-lo: no React gerado o
-        // setState é assíncrono e a leitura vem STALE. Decidir os ramos pela
-        // variável local (mesmo padrão do toggle do Switch).
-        const next = !isOpen;
-        setIsOpen(next);
+        // Decide pela variável local: no React gerado o setState é assíncrono e
+        // ler o estado logo após atribuí-lo vem STALE.
+        const next = !opened();
+        setOpen(next);
         if (next) {
-            // Abre com a opção já selecionada ativa (padrão combobox).
-            setActiveIndex(filteredOptionsList().findIndex((opt) => isOptionSelected(opt.value)));
-            if (props.searchable &&
-                (props.autoFocusSearch || props.searchVariant === "inline")) {
-                setShouldFocusSearch(true);
-            }
+            prepareOpen();
         }
         else {
+            setPrepared(false);
             setActiveIndex(-1);
         }
     }
@@ -224,7 +414,8 @@ function Select(props) {
         }
     }
     function closeSearch() {
-        setIsOpen(false);
+        setOpen(false);
+        setPrepared(false);
         setSearchTerm("");
         setActiveIndex(-1);
         if (props.onSearchChange) {
@@ -247,7 +438,7 @@ function Select(props) {
             return;
         const key = event.key;
         if (key === "Escape") {
-            if (isOpen) {
+            if (opened()) {
                 event.preventDefault();
                 closeSearch();
             }
@@ -260,7 +451,7 @@ function Select(props) {
             return;
         }
         event.preventDefault();
-        if (!isOpen) {
+        if (!opened()) {
             toggle();
             return;
         }
@@ -326,7 +517,8 @@ function Select(props) {
         else {
             newValue = option.value;
             setInternalSelected([newValue]);
-            setIsOpen(false);
+            setOpen(false);
+            setPrepared(false);
             setActiveIndex(-1);
         }
         if (props.onChange) {
@@ -368,17 +560,31 @@ function Select(props) {
                     ? []
                     : [props.value]
             : internalSelected || [];
+        // "Sem filtro" aparece marcada enquanto nada está escolhido.
+        if (props.emptyOptionLabel && !props.multiple && val === "") {
+            return currentVal.length === 0 || currentVal.includes("");
+        }
         return currentVal.includes(val);
     }
     useEffect(() => {
         if (!props.id)
             setUid(gerarId("umds-select"));
+        // No Vue o onUpdate só roda depois de uma atualização: a lista que já nasce
+        // aberta (open controlado) é preparada aqui.
+        latestOpenRef.current = opened();
+        latestOpenChangeRef.current = props.onOpenChange;
+        if (opened() && !prepared)
+            prepareOpen();
         if (typeof document === "undefined")
             return;
         const handleClickOutside = (event) => {
             if (selectRef.current &&
                 !selectRef.current.contains(event.target)) {
+                // Só avisa quando a lista está aberta: o ouvinte vive no document inteiro.
+                if (latestOpenRef.current && latestOpenChangeRef.current)
+                    latestOpenChangeRef.current(false);
                 setIsOpen(false);
+                setPrepared(false);
                 setActiveIndex(-1);
             }
         };
@@ -386,7 +592,27 @@ function Select(props) {
         document.addEventListener("mousedown", handleClickOutside);
     }, []);
     useEffect(() => {
-        if (isOpen && shouldFocusSearch) {
+        // Guarda o estado visto neste render para o ouvinte de clique fora.
+        latestOpenRef.current = opened();
+        latestOpenChangeRef.current = props.onOpenChange;
+        // Aberta de fora (open controlado): aplica os efeitos de abrir uma vez.
+        if (opened() && !prepared)
+            prepareOpen();
+        if (!opened() && prepared)
+            setPrepared(false);
+        // Lista flutuante: segue o gatilho (scroll, resize) enquanto aberta.
+        if (opened() &&
+            floatMode &&
+            triggerRef.current &&
+            dropdownRef.current &&
+            !floatCleanupRef.current) {
+            floatCleanupRef.current = autoUpdate(triggerRef.current, dropdownRef.current, () => updateFloat());
+        }
+        if ((!opened() || !floatMode) && floatCleanupRef.current) {
+            floatCleanupRef.current();
+            floatCleanupRef.current = null;
+        }
+        if (opened() && shouldFocusSearch) {
             // Retry a few times if ref is not yet ready (though onUpdate usually implies rendered)
             // We use a small timeout to ensure browser paints or simply check ref
             if (searchInputRef.current) {
@@ -395,7 +621,7 @@ function Select(props) {
             }
         }
         // Devolve o foco ao trigger após fechar por Esc/seleção via teclado.
-        if (!isOpen && shouldFocusTrigger) {
+        if (!opened() && shouldFocusTrigger) {
             if (triggerRef.current) {
                 triggerRef.current.focus();
                 setShouldFocusTrigger(false);
@@ -404,6 +630,10 @@ function Select(props) {
     });
     useEffect(() => {
         return () => {
+            if (floatCleanupRef.current) {
+                floatCleanupRef.current();
+                floatCleanupRef.current = null;
+            }
             // Cancela o debounce pendente da busca — evita callback após unmount.
             if (searchTimeoutRef.current) {
                 clearTimeout(searchTimeoutRef.current);
@@ -417,13 +647,11 @@ function Select(props) {
             }
         };
     }, []);
-    return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-select__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(isOpen && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-select__trigger", ref: triggerRef, onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": isOpen, "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-labelledby": props.label ? labelIdText() : undefined, "aria-label": props.ariaLabel, "aria-invalid": ariaInvalidText(), "aria-describedby": describedByText(), "aria-disabled": props.disabled ? "true" : undefined, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [displayLabelText() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
+    return (_jsxs("div", { ref: selectRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-select__label", id: labelIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-select__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-select__container", children: [!(opened() && props.searchVariant === "inline") ? (_jsxs("div", { role: "combobox", "aria-haspopup": "listbox", className: "umds-select__trigger", ref: triggerRef, onClick: (event) => toggle(), onKeyDown: (event) => handleTriggerKeyDown(event), "aria-readonly": ariaReadonly(), "aria-expanded": opened(), "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-labelledby": comboboxLabelledBy(), "aria-label": comboboxAriaLabel(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), "aria-describedby": describedByText(), "aria-disabled": props.disabled ? "true" : undefined, tabIndex: props.disabled ? -1 : 0, children: [_jsxs("div", { className: "umds-select__values", children: [props.triggerIcon ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__trigger-icon", children: _jsx(Icon, { variant: "inherit", customSize: "12px", icon: props.triggerIcon }) })) : null, triggerSwatchColor() ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
+                                            background: triggerSwatchColor(),
+                                        } })) : null, displayLabelText() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
                                         props.selectionDisplay === "tags" &&
-                                        selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { size: "sm", icon: isOpen ? faChevronUp : faChevronDown }) })] })] })) : null, isOpen ? (_jsxs("div", { className: "umds-select__dropdown", style: props.searchVariant === "inline"
-                            ? {
-                                top: "0",
-                            }
-                            : {}, onKeyDown: (event) => handleDropdownKeyDown(event), children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { size: "sm", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", className: "umds-select__search-input", ref: searchInputRef, placeholder: props.searchPlaceholder || "Buscar...", "aria-label": props.searchAriaLabel || "Buscar", value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("button", { type: "button", className: "umds-select__search-close", "aria-label": props.closeSearchAriaLabel || "Fechar busca", onClick: (event) => closeSearch(), onKeyDown: (event) => handleSearchCloseKeyDown(event), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null] })) : null, _jsxs("div", { role: "listbox", className: "umds-select__options", id: listboxIdText(), "aria-multiselectable": props.multiple ? "true" : undefined, onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option, index) => (_jsxs("div", { role: "option", id: optionIdText(index), "aria-selected": isOptionSelected(option.value), onClick: (event) => selectOption(option), className: [
+                                        selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { size: "sm", icon: opened() ? faChevronUp : faChevronDown }) })] })] })) : null, opened() ? (_jsxs("div", { className: "umds-select__dropdown", ref: dropdownRef, style: dropdownStyle(), onKeyDown: (event) => handleDropdownKeyDown(event), children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { size: "sm", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", className: "umds-select__search-input", ref: searchInputRef, placeholder: props.searchPlaceholder || "Buscar...", "aria-label": props.searchAriaLabel || "Buscar", value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("button", { type: "button", className: "umds-select__search-close", "aria-label": props.closeSearchAriaLabel || "Fechar busca", onClick: (event) => closeSearch(), onKeyDown: (event) => handleSearchCloseKeyDown(event), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null] })) : null, _jsxs("div", { role: "listbox", className: "umds-select__options", id: listboxIdText(), "aria-multiselectable": props.multiple ? "true" : undefined, onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option, index) => (_jsxs("div", { role: "option", id: optionIdText(index), "aria-selected": isOptionSelected(option.value), onClick: (event) => selectOption(option), className: [
                                             "umds-select__option",
                                             isOptionSelected(option.value)
                                                 ? "umds-select__option--selected"
@@ -431,7 +659,9 @@ function Select(props) {
                                             index === activeIndex ? "umds-select__option--active" : "",
                                         ]
                                             .filter(Boolean)
-                                            .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), decorative: true }) })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] })] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
+                                            .join(" "), children: [props.multiple ? (_jsx("div", { className: "umds-select__option-checkbox", children: _jsx(Checkbox, { checked: isOptionSelected(option.value), decorative: true }) })) : null, option.color ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch", style: {
+                                                    background: option.color,
+                                                } })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: props.item || (_jsx(Text, { variant: "body2", children: option.label })) }) }), !props.multiple && isOptionSelected(option.value) ? (_jsx("div", { className: "umds-select__option-check", children: _jsx(Icon, { size: "sm", icon: faCheck }) })) : null] }, option.value))), props.loading && props.pagination ? (_jsxs("div", { className: "umds-select__loading-more", children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { variant: "caption", children: props.loadingLabel || "Carregando mais..." })] })) : null] }), props.footer ? (_jsx("div", { className: "umds-select__footer", children: _jsx(_Fragment, { children: props.footer }) })) : null] })) : null] }), props.name ? (_jsx("input", { type: "hidden", name: props.name, value: formValue() || "" })) : null, props.errorMessage ? (_jsx(Text, { variant: "caption", color: "negative", className: "umds-select__error-message", id: errorIdText(), children: props.errorMessage })) : null, mostraApoio() ? (_jsx(Text, { variant: "caption", color: "secondary", className: "umds-select__description", id: helperIdText(), children: textoDeApoio() })) : null, props.multiple &&
                 props.selectionDisplay === "list" &&
                 selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__selected-list", children: selectedOptionsList()?.map((opt) => (_jsxs("div", { className: "umds-select__selected-list-item", children: [_jsx(Text, { variant: "body2", children: opt.label }), _jsx("button", { type: "button", className: "umds-select__list-remove", "aria-label": removeItemAriaLabelText(opt.label), onClick: (e) => removeValue(opt.value, e), children: _jsx(Icon, { size: "sm", icon: faTrash }) })] }, opt.value))) })) : null] }));
 }

package/dist/components/Stack/Stack.css

@@ -55,3 +55,52 @@
 .umds-stack--justify-between { justify-content: space-between; }
 .umds-stack--justify-around  { justify-content: space-around; }
 .umds-stack--justify-evenly  { justify-content: space-evenly; }
+
+/* ── Sem espaço ── */
+.umds-stack--gap-none { gap: 0; }
+
+/* ── Lista: ul/ol sem marcador, margem nem recuo do navegador ── */
+ul.umds-stack,
+ol.umds-stack {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Como item de outro Stack/flex ── */
+.umds-stack--grow { flex-grow: 1; }
+.umds-stack--shrink-0 { flex-shrink: 0; }
+.umds-stack--shrink-1 { flex-shrink: 1; }
+
+.umds-stack--basis-auto { flex-basis: auto; }
+.umds-stack--basis-0    { flex-basis: 0; }
+.umds-stack--basis-25   { flex-basis: 25%; }
+.umds-stack--basis-33   { flex-basis: 33.3333%; }
+.umds-stack--basis-50   { flex-basis: 50%; }
+.umds-stack--basis-66   { flex-basis: 66.6667%; }
+.umds-stack--basis-75   { flex-basis: 75%; }
+.umds-stack--basis-100  { flex-basis: 100%; }
+
+/* O padrão do Stack já é min-width: 0; estas duas só tornam a escolha explícita. */
+.umds-stack--min-w-0    { min-width: 0; }
+.umds-stack--min-w-auto { min-width: auto; }
+
+/* ── Overflow: o eixo vem depois do geral, então vence por ordem de cascata ── */
+.umds-stack--overflow-visible { overflow: visible; }
+.umds-stack--overflow-hidden  { overflow: hidden; }
+.umds-stack--overflow-auto    { overflow: auto; }
+.umds-stack--overflow-scroll  { overflow: scroll; }
+
+.umds-stack--overflow-x-visible { overflow-x: visible; }
+.umds-stack--overflow-x-hidden  { overflow-x: hidden; }
+.umds-stack--overflow-x-auto    { overflow-x: auto; }
+.umds-stack--overflow-x-scroll  { overflow-x: scroll; }
+
+.umds-stack--overflow-y-visible { overflow-y: visible; }
+.umds-stack--overflow-y-hidden  { overflow-y: hidden; }
+.umds-stack--overflow-y-auto    { overflow-y: auto; }
+.umds-stack--overflow-y-scroll  { overflow-y: scroll; }
+
+/* ── Dimensão ── */
+.umds-stack--full-height { height: 100%; }
+.umds-stack--full-width  { width: 100%; }

package/dist/components/Stack/Stack.d.ts

@@ -1,27 +1,60 @@
 import './Stack.css';
-/** Degraus da escala oficial de espaçamento do 1DS. */
-export type StackSpacing = "quarck" | "nano" | "micro" | "mini" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+export type StackSpacing = "none" | "quarck" | "nano" | "micro" | "mini" | "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxxl";
+/** Elemento HTML que o Stack renderiza. */
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+/** Elemento HTML que o Stack renderiza. */
+export type StackTag = "div" | "span" | "ul" | "ol" | "li" | "section" | "nav" | "header" | "footer" | "form";
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+/** Elemento HTML que o Stack renderiza. */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
+export type StackOverflow = "visible" | "hidden" | "auto" | "scroll";
 /**
  * Stack — empilha os filhos com espaçamento da escala do DS.
  *
  * Existe para eliminar o `style={{ display: "flex", gap: 16 }}` escrito à mão,
  * que é por onde o design system vaza: o 16 sai da cabeça de quem escreve, não
  * do token. Aqui o `gap` só aceita degraus da escala oficial.
+ *
+ * Também é o item de outro Stack: quem precisa crescer, encolher ou ocupar a
+ * altura toda dentro de um Stack pai aninha um Stack com `grow`, `shrink`,
+ * `basis`, `fullHeight`... (não existe `Stack.Item`: subcomponente por ponto
+ * não sobrevive aos dois geradores, e o Stack aninhado já é um item flex).
+ *
+ * Atributos HTML (`id`, `style`, `title`, `role`, `tabIndex`, `data-*`,
+ * `aria-*`) vão para o elemento raiz. Com `as="nav"`, `section` ou `form`,
+ * passe `aria-label` ou `aria-labelledby`: a região só é anunciada se tiver nome.
+ * @property {string} as - Elemento HTML: 'div' (padrão) | 'span' | 'ul' | 'ol' | 'li' | 'section' | 'nav' | 'header' | 'footer' | 'form'
  * @property {string} direction - Eixo do empilhamento: 'vertical' (padrão) | 'horizontal'
- * @property {string} gap - Espaço entre os filhos, na escala do DS
+ * @property {string} gap - Espaço entre os filhos, na escala do DS ('none' zera)
  * @property {string} align - Alinhamento no eixo transversal
  * @property {string} justify - Distribuição no eixo principal
  * @property {boolean} wrap - Permite quebrar em várias linhas
  * @property {boolean} inline - Usa display inline-flex em vez de flex
+ * @property {boolean} grow - Como item de outro Stack/flex: cresce para ocupar o espaço livre
+ * @property {string} shrink - Como item flex: '0' não encolhe, '1' encolhe
+ * @property {string} basis - Como item flex: tamanho base ('auto', '0', '25', '33', '50', '66', '75', '100'; os números são %)
+ * @property {string} minWidth - '0' (padrão do Stack) deixa o conteúdo longo encolher; 'auto' devolve o mínimo do conteúdo
+ * @property {string} overflow - Overflow nos dois eixos
+ * @property {string} overflowX - Overflow horizontal
+ * @property {string} overflowY - Overflow vertical
+ * @property {boolean} fullHeight - Ocupa 100% da altura do pai
+ * @property {boolean} fullWidth - Ocupa 100% da largura do pai
  * @property {string} className - Classes CSS adicionais
- * @quandoUsar Empilhar elementos com espaçamento consistente: campos de um formulário, botões de uma barra de ações, itens de uma lista. É o jeito certo de dar respiro sem escrever CSS.
- * @quandoNaoUsar Para layout em COLUNAS que se alinham entre si — use `Grid`. Para uma caixa com padding e fundo, use `Box`. Stack só distribui no eixo, não desenha nada.
+ * @property {function} onSubmit - Só com as="form": callback do envio
+ * @quandoUsar Empilhar elementos com espaçamento consistente: campos de um formulário, botões de uma barra de ações, itens de uma lista (`as="ul"` com filhos `as="li"`). É o jeito certo de dar respiro sem escrever CSS, e de fazer uma região crescer ou rolar dentro de outra.
+ * @quandoNaoUsar Para layout em COLUNAS que se alinham entre si — use `Grid`. Para uma caixa com padding e fundo, use `Box` (que também aceita direction e gap quando a superfície é a própria linha ou região). Stack só distribui no eixo, não desenha nada.
  */
-/** Degraus da escala oficial de espaçamento do 1DS. */
+/** Degraus da escala oficial de espaçamento do 1DS. `none` zera o espaço. */
+/** Elemento HTML que o Stack renderiza. */
+/** Valores de `overflow` aceitos (por eixo ou nos dois). */
 export interface StackProps {
+    /** Elemento HTML renderizado. @default 'div' */
+    as?: StackTag;
     /** Eixo do empilhamento. @default 'vertical' */
     direction?: "vertical" | "horizontal";
-    /** Espaço entre os filhos, na escala oficial (xxxs = 16px). @default 'xxxs' */
+    /** Espaço entre os filhos, na escala oficial (xxxs = 16px; `none` = 0). @default 'xxxs' */
     gap?: StackSpacing;
     /** Alinhamento no eixo transversal. */
     align?: "start" | "center" | "end" | "stretch" | "baseline";
@@ -31,8 +64,33 @@ export interface StackProps {
     wrap?: boolean;
     /** Usa `inline-flex` em vez de `flex`. */
     inline?: boolean;
+    /** Como item de outro Stack/flex: cresce para ocupar o espaço livre. */
+    grow?: boolean;
+    /** Como item flex: `"0"` não encolhe; `"1"` encolhe. */
+    shrink?: "0" | "1";
+    /** Como item flex: tamanho base. Os números são porcentagem do pai. */
+    basis?: "auto" | "0" | "25" | "33" | "50" | "66" | "75" | "100";
+    /** `"0"` (já é o padrão do Stack) deixa o conteúdo encolher; `"auto"` volta ao mínimo do conteúdo. */
+    minWidth?: "0" | "auto";
+    /** Overflow nos dois eixos. */
+    overflow?: StackOverflow;
+    /** Overflow horizontal (vence `overflow` no eixo X). */
+    overflowX?: StackOverflow;
+    /** Overflow vertical (vence `overflow` no eixo Y). */
+    overflowY?: StackOverflow;
+    /** Ocupa 100% da altura do pai. */
+    fullHeight?: boolean;
+    /** Ocupa 100% da largura do pai. */
+    fullWidth?: boolean;
     /** Classes CSS adicionais. */
     className?: string;
+    /** Só com `as="form"`: chamado no envio do formulário. */
+    onSubmit?: (event: any) => void;
+    /** ID HTML do elemento raiz. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento raiz (style, data-*, aria-*…). */
+    style?: any;
+    [key: string]: any;
     /** Conteúdo empilhado. */
     children?: any;
 }