@1doc/1ds-react 2.8.0 → 2.10.0

package/dist/components/List/ListItem.d.ts

@@ -0,0 +1,97 @@
+/** Elemento interativo (ou não) que ocupa a linha inteira. */
+export type ListItemTag = "button" | "a" | "div";
+/**
+ * ListItem — linha de lista inteira clicável, com conteúdo livre.
+ *
+ * Renderiza um `<li>` que contém UM elemento (`button`, `a` ou `div`) do tamanho
+ * da linha: o alvo de clique e de foco é a linha toda, não só o título. Por isso
+ * o ListItem vive dentro de um `List` (ou de um `ul`/`ol`, como `Stack as="ul"`).
+ *
+ * O conteúdo se encaixa por slots, todos opcionais: `start` (avatar, ícone,
+ * checkbox decorativo), `title`, `subtitle`, `meta` (data, contexto), `end`
+ * (badge, seta, valor) e o conteúdo padrão, que entra abaixo de `meta`. `title`,
+ * `subtitle` e `meta` também aceitam texto direto por prop.
+ *
+ * Elemento: sem `as`, vira `a` quando há `href` e `button` nos outros casos.
+ * `as="div"` é a linha que não navega nem age (só mostra), e vira acionável
+ * (role="button", Enter e Espaço) se receber `onClick`. Controles dentro de uma
+ * linha clicável (botão, checkbox) quebram o HTML: se a linha precisa deles,
+ * use `as="div"` sem `onClick` e ponha a ação num deles.
+ *
+ * `selected` marca o item atual (fundo azul-claro e `aria-current`). `disabled`
+ * tira a linha da ordem de tabulação e bloqueia o clique.
+ *
+ * Atributos HTML (`id`, `style`, `role`, `tabIndex`, `data-*`, `aria-*`) vão
+ * SÓ para o elemento interativo (nunca para o `li`), que é quem recebe
+ * `aria-label` quando a linha não tem texto visível. `title` NÃO é o atributo
+ * HTML: é o título da linha. O atributo `title` (a dica nativa do navegador) é a
+ * prop `tooltip`.
+ *
+ * `standalone` tira o `li`: o ListItem vira só o elemento interativo, para uso
+ * fora de um `List` (botão de número de página, item de carrossel, linha dentro
+ * de um `div`). Fora de `ul`/`ol`, o `li` é HTML inválido.
+ * @property {string} as - Elemento da linha: 'button' | 'a' | 'div'. Padrão: 'a' com href, senão 'button'
+ * @property {string} href - Destino do link (vira as="a")
+ * @property {string} target - Destino do link: '_blank' ganha rel="noopener noreferrer"
+ * @property {string} rel - Relação do link (sobrescreve o padrão do target)
+ * @property {boolean} selected - Item atual: fundo de seleção e aria-current
+ * @property {boolean} disabled - Bloqueia clique e foco
+ * @property {string} tooltip - Dica nativa do navegador: vira o atributo HTML `title` do elemento interativo
+ * @property {boolean} standalone - Renderiza sem o `li`, só o elemento interativo (uso fora de `List`)
+ * @property {any} title - Título da linha: texto, ou slot `title` (nó)
+ * @property {any} subtitle - Segunda linha: texto, ou slot `subtitle` (nó)
+ * @property {any} meta - Terceira linha, menor (data, contexto): texto, ou slot `meta` (nó)
+ * @property {any} start - Slot `start`: conteúdo antes do texto (avatar, ícone)
+ * @property {any} end - Slot `end`: conteúdo no fim da linha (badge, seta, valor)
+ * @property {function} onClick - Callback do clique (ou de Enter/Espaço no as="div")
+ * @property {string} className - Classes CSS adicionais, no elemento interativo
+ * @slot start - Conteúdo antes do texto.
+ * @slot title - Título (substitui a prop `title`).
+ * @slot subtitle - Segunda linha (substitui a prop `subtitle`).
+ * @slot meta - Terceira linha (substitui a prop `meta`).
+ * @slot end - Conteúdo no fim da linha.
+ * @quandoUsar Itens de uma lista em que a linha toda é a ação: documentos não lidos, notificações, resultados de busca, opções de menu de filtro, itens de navegação secundária. Hover, foco visível e seleção já vêm resolvidos.
+ * @quandoNaoUsar Para dados comparados coluna a coluna, use `DataTable`. Para um cartão com título, ações e elevação própria, use `Card`. Para um botão solto fora de lista, use `Button`. Para a navegação principal do produto, use `SidePanelItem` ou `AppNavItem`.
+ */
+/** Elemento interativo (ou não) que ocupa a linha inteira. */
+export interface ListItemProps {
+    /** Elemento da linha. Sem `as`: `a` quando há `href`, senão `button`. */
+    as?: ListItemTag;
+    /** Destino do link (liga `as="a"`). */
+    href?: string;
+    /** Destino do link. `_blank` ganha `rel="noopener noreferrer"`. */
+    target?: string;
+    /** Relação do link. Sobrescreve o padrão do `target`. */
+    rel?: string;
+    /** Item atual: fundo de seleção e `aria-current`. @default false */
+    selected?: boolean;
+    /** Bloqueia clique e foco. @default false */
+    disabled?: boolean;
+    /** Dica nativa do navegador: vira o atributo HTML `title` do elemento interativo. */
+    tooltip?: string;
+    /** Sem o `li`: só o elemento interativo, para usar fora de um `List`. @default false */
+    standalone?: boolean;
+    /** Título da linha. Texto, ou slot `title` para um nó. */
+    title?: any;
+    /** Segunda linha. Texto, ou slot `subtitle` para um nó. */
+    subtitle?: any;
+    /** Terceira linha, menor (data, contexto). Texto, ou slot `meta` para um nó. */
+    meta?: any;
+    /** Conteúdo antes do texto (avatar, ícone). No Vue, slot `start`. */
+    start?: any;
+    /** Conteúdo no fim da linha (badge, seta, valor). No Vue, slot `end`. */
+    end?: any;
+    /** Chamado no clique da linha (ou em Enter/Espaço no `as="div"`). */
+    onClick?: (event: any) => void;
+    /** Classes CSS adicionais, no elemento interativo. */
+    className?: string;
+    /** ID HTML do elemento interativo. */
+    id?: string;
+    /** Atributos HTML repassados ao elemento interativo (style, data-*, aria-*…). */
+    style?: any;
+    [key: string]: any;
+    /** Conteúdo livre, abaixo de `meta`. */
+    children?: any;
+}
+declare function ListItem(props: ListItemProps): import("react/jsx-runtime").JSX.Element;
+export default ListItem;

package/dist/components/List/ListItem.js

@@ -0,0 +1,82 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Text from "../Text/Text";
+function ListItem(props) {
+    function elementTag() {
+        if (props.as)
+            return props.as;
+        return props.href ? "a" : "button";
+    }
+    function isInteractive() {
+        return elementTag() !== "div" || !!props.onClick;
+    }
+    function classes() {
+        return [
+            "umds-list-item",
+            isInteractive() ? "umds-list-item--interactive" : "",
+            props.selected ? "umds-list-item--selected" : "",
+            props.disabled ? "umds-list-item--disabled" : "",
+            props.className,
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    function ariaCurrent() {
+        return props.selected ? "true" : undefined;
+    }
+    function ariaDisabled() {
+        return props.disabled ? "true" : undefined;
+    }
+    function hrefValue() {
+        return props.disabled ? undefined : props.href;
+    }
+    function relValue() {
+        if (props.rel)
+            return props.rel;
+        return props.target === "_blank" ? "noopener noreferrer" : undefined;
+    }
+    function divRole() {
+        return props.onClick ? "button" : undefined;
+    }
+    function divTabIndex() {
+        if (!props.onClick)
+            return undefined;
+        return props.disabled ? -1 : 0;
+    }
+    function handleClick(event) {
+        if (props.disabled) {
+            if (event && event.preventDefault)
+                event.preventDefault();
+            return;
+        }
+        if (props.onClick)
+            props.onClick(event);
+    }
+    function handleKeyDown(event) {
+        if (!props.onClick || props.disabled || !event)
+            return;
+        // Só a própria linha aciona: Enter/Espaço dentro de um controle interno não.
+        if (event.target !== event.currentTarget)
+            return;
+        if (event.key !== "Enter" && event.key !== " ")
+            return;
+        event.preventDefault();
+        props.onClick(event);
+    }
+    function htmlAttrs() {
+        const out = {};
+        for (const chave in props) {
+            if (chave.indexOf("data-") === 0 ||
+                chave.indexOf("aria-") === 0 ||
+                chave === "style" ||
+                chave === "role" ||
+                chave === "tabIndex" ||
+                (chave === "class" && props.standalone)) {
+                out[chave] = props[chave];
+            }
+        }
+        return out;
+    }
+    return (_jsxs(_Fragment, { children: [!props.standalone ? (_jsxs("li", { className: "umds-list__item", children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null, !!props.standalone ? (_jsxs(_Fragment, { children: [elementTag() === "button" ? (_jsxs("button", { type: "button", id: props.id, title: props.tooltip, disabled: props.disabled, "aria-current": ariaCurrent(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "a" ? (_jsxs("a", { id: props.id, title: props.tooltip, href: hrefValue(), target: props.target, rel: relValue(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null, elementTag() === "div" ? (_jsxs("div", { id: props.id, title: props.tooltip, role: divRole(), tabIndex: divTabIndex(), "aria-current": ariaCurrent(), "aria-disabled": ariaDisabled(), onClick: (event) => handleClick(event), onKeyDown: (event) => handleKeyDown(event), ...htmlAttrs(), className: classes(), children: [props.start ? (_jsx("span", { className: "umds-list-item__start", children: _jsx(_Fragment, { children: props.start }) })) : null, _jsxs("span", { className: "umds-list-item__body", children: [props.title ? (_jsx("span", { className: "umds-list-item__title", children: _jsx(Text, { variant: "body2", as: "span", weight: "semibold", color: "inherit", children: _jsx(_Fragment, { children: props.title }) }) })) : null, props.subtitle ? (_jsx("span", { className: "umds-list-item__subtitle", children: _jsx(Text, { variant: "body2", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.subtitle }) }) })) : null, props.meta ? (_jsx("span", { className: "umds-list-item__meta", children: _jsx(Text, { variant: "caption", as: "span", color: "inherit", children: _jsx(_Fragment, { children: props.meta }) }) })) : null, _jsx(_Fragment, { children: props.children })] }), props.end ? (_jsx("span", { className: "umds-list-item__end", children: _jsx(_Fragment, { children: props.end }) })) : null] })) : null] })) : null] }));
+}
+export default ListItem;

package/dist/components/Modal/Modal.css

@@ -375,6 +375,86 @@
   border-radius: 0;
 }
 
+/* ── variant="primary": cabeçalho cheio na cor primária ──
+   Título, subtítulo e controles em branco (neutral-light-pure, o mesmo par que
+   o Button primary usa sobre primary-pure). */
+.umds-modal--primary .umds-modal__header {
+  background-color: var(--umds-semantic-color-primary-pure);
+  border-bottom-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-modal--primary .umds-modal__title,
+.umds-modal--primary .umds-modal__subtitle {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl {
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl:hover,
+.umds-modal--primary .umds-modal__ctrl--ativo,
+.umds-modal--primary .umds-modal__ctrl--close:hover {
+  background: var(--umds-semantic-color-primary-dark);
+  color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl:focus-visible {
+  outline-color: var(--umds-semantic-color-neutral-light-pure);
+}
+
+.umds-modal--primary .umds-modal__ctrl-divider {
+  background: var(--umds-semantic-color-primary-medium);
+}
+
+/* ── responsive: abaixo do breakpoint vira painel que sobe pela borda de baixo ──
+   Mesma anatomia do BottomSheet (largura total, cantos de cima arredondados,
+   alça, entrada por baixo). Quem decide o breakpoint é o componente (media
+   query em JS, para a prop `responsiveBreakpoint` valer). */
+.umds-modal-root--sheet {
+  align-items: flex-end;
+  padding: 0;
+}
+
+.umds-modal.umds-modal--sheet {
+  width: 100%;
+  max-width: none;
+  max-height: 90vh;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  animation: umds-modal-sheet-in var(--umds-semantic-motion-duration-base)
+    var(--umds-semantic-motion-easing-standard);
+}
+
+@keyframes umds-modal-sheet-in {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.umds-modal__grabber {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--umds-primitive-spacing-nano) 0 0;
+  flex-shrink: 0;
+}
+
+.umds-modal--primary .umds-modal__grabber {
+  background-color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-modal__grabber-bar {
+  display: block;
+  width: var(--umds-primitive-spacing-sm); /* 40px */
+  height: var(--umds-primitive-spacing-quarck); /* 4px */
+  border-radius: var(--umds-primitive-border-radius-pill);
+  background-color: var(--umds-semantic-color-neutral-light-down);
+}
+
 /* ── Alto contraste ──
    No 1doc-high-contrast o painel e a página são pretos e a sombra (preta)
    não aparece: sem traço, o modal não tem borda visível. O traço é um

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

@@ -27,9 +27,30 @@ export interface ModalProps {
      * - "positive": sucesso (verde, ícone circle-check).
      * - "negative": erro/falha (vermelho, ícone circle-exclamation).
      * - "info": atenção (laranja, ícone triangle-exclamation).
+     * - "primary": modal base com o cabeçalho cheio na cor primária (título e
+     *   controles em branco). Não é diálogo de feedback: mantém as três faixas.
      * @default 'default'
      */
-    variant?: "default" | "positive" | "negative" | "info";
+    variant?: "default" | "positive" | "negative" | "info" | "primary";
+    /**
+     * Largura do modal, qualquer valor CSS (`"600px"`, `"60vw"`). Sem
+     * `maxWidth`, o teto passa a ser a própria tela (o 498px do `md` não
+     * segura mais). Vence o `size`. Com `windowControls`, vale só no modo
+     * normal: expandido e tela cheia mandam no tamanho.
+     */
+    width?: string;
+    /** Largura máxima, qualquer valor CSS. Vence o teto do `size`. */
+    maxWidth?: string;
+    /**
+     * Abaixo do breakpoint (`responsiveBreakpoint`), o modal vira um painel que
+     * sobe pela borda de baixo, como o `BottomSheet`: largura total, cantos de
+     * cima arredondados, alça no topo. Acima dele, continua centralizado. É
+     * o mesmo componente reorganizado, então título, corpo e rodapé não mudam.
+     * @default false
+     */
+    responsive?: boolean;
+    /** Largura da tela, em px, abaixo da qual o `responsive` vira painel. Lida na montagem. @default 640 */
+    responsiveBreakpoint?: number;
     /**
      * Título em destaque. Com título, o diálogo é nomeado por ele
      * (`aria-labelledby`) e `ariaLabel` é ignorado.
@@ -79,12 +100,18 @@ export interface ModalProps {
     /** Se verdadeiro, renderiza o modal inline (sem fixed/overlay), útil para documentação */
     inline?: boolean;
     /**
-     * Controles de janela no cabeçalho: restaurar, expandir, tela cheia e
-     * minimizar, antes do ×. É tudo ou nada — ou o modal tem só o ×, ou tem o
-     * conjunto inteiro. Ligado, o modal passa a mudar de tamanho sozinho.
+     * Controles de janela no cabeçalho, antes do ×. Duas formas:
+     * - `true`: o conjunto inteiro (restaurar, expandir, tela cheia e minimizar).
+     *   O modal passa a mudar de tamanho sozinho (normal 780px, expandido, tela
+     *   cheia).
+     * - uma lista com os que quiser, na ordem fixa do cabeçalho:
+     *   `["expand", "fullscreen"]`, `["fullscreen"]`... Os nomes são `normal`,
+     *   `expand`, `fullscreen` e `minimize`. Sem `normal` na lista, clicar de
+     *   novo no modo ativo volta ao normal, e o modo normal usa o tamanho do
+     *   próprio modal (`size`, `width`), não os 780px do conjunto inteiro.
      */
-    windowControls?: boolean;
-    /** Acionado no botão minimizar. Só existe com `windowControls`. */
+    windowControls?: boolean | Array<"normal" | "expand" | "fullscreen" | "minimize">;
+    /** Acionado no botão minimizar. Só existe quando `minimize` está entre os controles. */
     onMinimize?: (event?: any) => void;
     /**
      * Região esquerda do rodapé — conteúdo de apoio que não é botão: a caixa

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;