@1doc/1ds-react 2.9.0 → 2.11.0

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -49,6 +49,7 @@ function SegmentedControl(props) {
         return [
             "umds-segmented",
             `umds-segmented--${props.size || "md"}`,
+            props.variant === "surface" ? "umds-segmented--surface" : "",
             props.fullWidth ? "umds-segmented--full-width" : "",
             props.disabled ? "umds-segmented--disabled" : "",
             isInvalid() ? "umds-segmented--invalid" : "",
@@ -63,6 +64,9 @@ function SegmentedControl(props) {
     function estaEscolhido(option) {
         return option.value === currentValue();
     }
+    function temContador(option) {
+        return (option.count !== undefined && option.count !== null && option.count !== "");
+    }
     function estaDesabilitado(option) {
         return !!props.disabled || !!option.disabled;
     }
@@ -88,6 +92,6 @@ function SegmentedControl(props) {
         if (!props.id)
             setUid(gerarId("umds-segmented"));
     }, []);
-    return (_jsxs("div", { className: groupClasses(), children: [props.label ? (_jsxs("span", { className: "umds-segmented__group-label", id: labelId(), children: [props.label, props.required ? (_jsx("span", { className: "umds-segmented__required", children: " *" })) : null] })) : null, _jsx("div", { role: "radiogroup", className: "umds-segmented__track", "aria-labelledby": labelledByText(), "aria-label": groupAriaLabel(), "aria-describedby": describedByText(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), children: optionList()?.map((option, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", className: "umds-segmented__input", id: inputId(index), name: groupName(), value: option.value, checked: estaEscolhido(option), disabled: estaDesabilitado(option), "aria-label": rotuloDoSegmento(option), onChange: (event) => handleChange(option) }), _jsx("label", { className: "umds-segmented__item", htmlFor: inputId(index), children: _jsxs("span", { className: "umds-segmented__conteudo", children: [option.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: option.icon })) : null, option.label ? (_jsx("span", { className: "umds-segmented__texto", children: option.label })) : null] }) })] }, option.value))) }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", className: "umds-segmented__error-message", id: errorId(), children: props.errorMessage })) : null] }));
+    return (_jsxs("div", { className: groupClasses(), children: [props.label ? (_jsxs("span", { className: "umds-segmented__group-label", id: labelId(), children: [props.label, props.required ? (_jsx("span", { className: "umds-segmented__required", children: " *" })) : null] })) : null, _jsx("div", { role: "radiogroup", className: "umds-segmented__track", "aria-labelledby": labelledByText(), "aria-label": groupAriaLabel(), "aria-describedby": describedByText(), "aria-invalid": ariaInvalidText(), "aria-required": ariaRequiredText(), children: optionList()?.map((option, index) => (_jsxs(React.Fragment, { children: [_jsx("input", { type: "radio", className: "umds-segmented__input", id: inputId(index), name: groupName(), value: option.value, checked: estaEscolhido(option), disabled: estaDesabilitado(option), "aria-label": rotuloDoSegmento(option), onChange: (event) => handleChange(option) }), _jsx("label", { className: "umds-segmented__item", htmlFor: inputId(index), children: _jsxs("span", { className: "umds-segmented__conteudo", children: [option.icon ? (_jsx(Icon, { size: "sm", variant: "inherit", icon: option.icon })) : null, option.label ? (_jsx("span", { className: "umds-segmented__texto", children: option.label })) : null, temContador(option) ? (_jsx("span", { className: "umds-segmented__count", children: option.count })) : null] }) })] }, option.value))) }), props.errorMessage ? (_jsx(Text, { as: "span", variant: "caption", color: "negative", className: "umds-segmented__error-message", id: errorId(), children: props.errorMessage })) : null] }));
 }
 export default SegmentedControl;

package/dist/components/Select/Select.css

@@ -175,8 +175,10 @@
 
 /* ── Variante filter: botão de filtro de barra de ferramentas ──
    Contornado em azul, largura do conteúdo, lista mais larga que o botão. */
+/* fit-content e não auto: o wrapper é flex (bloco), e `auto` o estica até a largura do pai. Com ele esticado,
+   o `100%` da lista passava a ser o do pai (556px numa barra) e não o do gatilho. */
 .umds-select--filter {
-  width: auto;
+  width: fit-content;
 }
 
 .umds-select--filter.umds-select--full-width {
@@ -191,10 +193,16 @@
   width: 100%;
 }
 
+/* Fundo branco: o azul-claro do gatilho só vem depois de escolhido um valor (`--has-value`,
+   abaixo), que é quando o filtro está recortando a lista. O tamanho padrão é o sm (32px). */
 .umds-select--filter .umds-select__trigger {
   width: auto;
   gap: var(--umds-primitive-spacing-nano);
   border-color: var(--umds-semantic-color-primary-pure);
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter.umds-select--has-value .umds-select__trigger {
   background-color: var(--umds-semantic-color-primary-light);
 }
 
@@ -212,13 +220,114 @@
   font-weight: var(--umds-primitive-font-weight-semibold);
 }
 
+/* Fonte de 12px no filtro pequeno (o tamanho do CrisDoc); no md segue 14px. */
+.umds-select--filter.umds-select--sm .umds-select__trigger .umds-text {
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
 .umds-select--filter .umds-select__dropdown {
-  /* 240px: três vezes o degrau xxl (80px). Sem token de largura de menu. */
+  /* 240px: três vezes o degrau xxl (80px). Sem token de largura de menu. `listMinWidth` troca este mínimo
+     (estilo inline). A lista nunca é mais estreita que o gatilho (100%). */
   width: max-content;
   min-width: max(100%, calc(var(--umds-primitive-spacing-xxl) * 3));
   max-width: calc(100vw - var(--umds-primitive-spacing-xxxs) * 2);
 }
 
+/* Perto da borda direita da janela: a lista se alinha ao fim do gatilho (`alignEnd`, medido ao abrir). */
+.umds-select--filter.umds-select--list-end .umds-select__dropdown {
+  left: auto;
+  right: 0;
+}
+
+/* A busca da lista de filtro acompanha a largura da lista e não a dita: `contain: inline-size` tira a
+   largura natural do campo da conta do `max-content`. */
+.umds-select--filter .umds-select__search-container {
+  contain: inline-size;
+}
+
+/* ── Variante search: o filtro dentro de uma barra de busca ──
+   Altura de campo e contorno neutro, para ficar ao lado do campo de busca. */
+.umds-select--filter-search .umds-select__trigger {
+  border-color: var(--umds-semantic-field-border-default);
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter-search.umds-select--has-value .umds-select__trigger {
+  background-color: var(--umds-semantic-color-background-white);
+}
+
+.umds-select--filter-search .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: var(--umds-semantic-field-border-hover);
+}
+
+.umds-select--filter-search .umds-select__trigger .umds-text,
+.umds-select--filter-search .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-pure);
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+.umds-select--filter-search .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+/* ── Variante combo: o filtro colado a outro controle ──
+   Sem contorno nem raio próprios: quem desenha a borda é o contêiner do combo. */
+.umds-select--filter-combo .umds-select__trigger {
+  border-color: transparent;
+  border-radius: var(--umds-primitive-border-radius-none);
+  background-color: transparent;
+}
+
+.umds-select--filter-combo.umds-select--has-value .umds-select__trigger {
+  background-color: transparent;
+}
+
+.umds-select--filter-combo .umds-select__trigger:hover:not(.umds-select--disabled .umds-select__trigger) {
+  border-color: transparent;
+  background-color: var(--umds-semantic-color-background-light);
+}
+
+.umds-select--filter-combo .umds-select__trigger .umds-text,
+.umds-select--filter-combo .umds-select__actions {
+  color: var(--umds-semantic-color-neutral-dark-down);
+  font-weight: var(--umds-primitive-font-weight-regular);
+}
+
+/* O foco do combo é o anel do próprio gatilho, por dentro (o contêiner pode cortar o de fora). */
+.umds-select--filter-combo .umds-select__trigger:focus-visible,
+.umds-select--filter-combo.umds-select--open .umds-select__trigger {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 var(--umds-primitive-border-width-thin) var(--umds-semantic-color-primary-pure);
+}
+
+/* ── Ícone e amostra de cor no gatilho (triggerIcon, triggerSwatch) ── */
+.umds-select__trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--umds-semantic-color-neutral-dark-medium);
+}
+
+.umds-select--filter .umds-select__trigger-icon {
+  color: inherit;
+}
+
+.umds-select__swatch {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--umds-primitive-spacing-mini);
+  height: var(--umds-primitive-spacing-mini);
+  border-radius: var(--umds-primitive-border-radius-xs);
+  /* Anel de 1px: amostra clara não some no fundo branco, nem escura no escuro. */
+  border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
+}
+
+/* ── Lista flutuante (dentro de diálogo) ──
+   O estilo inline (fixed, translate, largura e altura medidas) vem do componente. */
+.umds-select--floating .umds-select__dropdown {
+  box-sizing: border-box;
+}
+
 /* ── Busca no dropdown ── */
 .umds-select__search-container {
   display: flex;
@@ -239,6 +348,7 @@
 
 .umds-select__search-input {
   flex: 1;
+  min-width: 0;
   border: none;
   outline: none;
   font-size: var(--umds-primitive-font-size-xxs);
@@ -463,3 +573,13 @@
   border-bottom-color: var(--umds-semantic-color-primary-pure);
   box-shadow: inset 0 -1px 0 var(--umds-semantic-color-primary-pure);
 }
+
+/* ── item no gatilho: o conteúdo do slot/função `item` da opção escolhida ── */
+.umds-select__trigger-item {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  font-size: var(--umds-semantic-field-text-size);
+  color: var(--umds-semantic-field-text-color);
+}

package/dist/components/Select/Select.d.ts

@@ -3,10 +3,13 @@ import './Select.css';
  * Opção exibida na lista do Select.
  * @property {string} label - Texto visível da opção.
  * @property {any} value - Valor associado à opção.
+ * @property {string} color - Cor da opção, um token (`var(--umds-semantic-color-...)` ou `var(--umds-primitive-...)`): uma amostra de 12px antes do texto na lista e, com a opção escolhida (seleção única), no gatilho. Decorativa: o texto diz a opção. Sem a prop, nada muda.
  */
 export interface SelectOption {
     label: string;
     value: string | number;
+    /** Cor da opção (token): amostra antes do texto, e no gatilho quando escolhida. */
+    color?: string;
     [key: string]: any;
 }
 /**
@@ -40,10 +43,18 @@ export interface SelectOption {
  * @property {string} ariaLabel - Nome acessível quando não há label visível.
  * @property {string} id - ID base dos elementos internos. Gerado automaticamente se omitido.
  * @property {function} onChange - Callback com o(s) valor(es) selecionado(s).
- * @property {string} placement - Onde a lista abre: 'bottom' (padrão) | 'top' | 'auto'. O `auto` abre para cima quando falta espaço embaixo da tela e há mais em cima (lista dentro do rodapé de um modal).
- * @property {string} variant - 'default' | 'filter'. O `filter` é o botão de filtro de barra de ferramentas: contornado em azul, largura do conteúdo, lista mais larga que o botão, busca focada ao abrir. Combine com `searchable`, `emptyOptionLabel` e o slot `footer`.
+ * @property {string} placement - Onde a lista abre: 'bottom' (padrão) | 'top' | 'auto'. O `auto` mede o espaço da janela E do ancestral que rola ou corta (um corpo de modal, um painel com overflow): abre para cima quando falta espaço embaixo e há mais em cima, e limita a altura da lista ao espaço que sobra.
+ *
+ * Dentro de um diálogo (`role="dialog"` ou `aria-modal`), a lista abre por cima dele: ela passa a `position: fixed`, ancorada no gatilho pelo `@floating-ui/dom`, e não é cortada pelo `overflow` do corpo do modal.
+ * @property {string} variant - 'default' | 'filter' | 'search' | 'combo'. O `filter` é o botão de filtro de barra de ferramentas: 32px (`size="sm"` é o padrão das variantes de filtro) e fonte de 12px, fundo branco com contorno azul (azul-claro só depois de escolhido um valor), largura do conteúdo, lista mais larga que o botão, busca focada ao abrir. `search` é o mesmo filtro dentro de uma barra de busca (altura de campo, contorno neutro). `combo` é o filtro colado a outro controle (sem contorno nem raio próprios: quem desenha a borda é o contêiner). Combine com `searchable`, `emptyOptionLabel` e o slot `footer`.
+ * @property {boolean} open - Abre/fecha a lista de fora (modo controlado). Sem ela, o Select controla o próprio estado. Use com `onOpenChange`: o filtro com ação no rodapé fecha a lista antes de abrir um modal.
+ * @property {function} onOpenChange - Chamado quando a lista pede para abrir ou fechar (clique, teclado, clique fora, Esc, escolha de opção). No modo controlado, é quem decide o novo `open`.
+ * @property {IconProp} triggerIcon - Ícone à esquerda do texto do gatilho (objeto Font Awesome importado). Decorativo.
+ * @property {string} triggerSwatch - Amostra de cor à esquerda do texto do gatilho: um token (`var(--umds-semantic-color-...)`) ou `var(--umds-primitive-...)`. Decorativa; o texto diz a opção.
  * @property {string} emptyOptionLabel - Opção "sem filtro" no topo da lista (seleção única): marcada quando nada está escolhido; ao escolher, `onChange` recebe `""` e o campo volta a mostrar o `placeholder` (o nome do filtro).
  * @property {any} footer - Rodapé fixo da lista, com ações ("Gerenciar marcadores"). Passe o elemento correspondente (React node ou Vue slot `footer`).
+ * @property {any} item - Conteúdo de cada opção na lista, e do gatilho com a opção escolhida (seleção única). No React, uma função `({ optionData }) => nó` (`optionData` é a opção: `label`, `value` e os campos seus). No Vue, o slot com escopo `#item="{ optionData }"` (o mesmo `optionData`; `option` é um apelido). Sem ela, a opção é o `label` em texto. Na lista de seleção múltipla e na do `emptyOptionLabel` o gatilho segue mostrando o texto.
+ * @property {string|number} listMinWidth - Largura mínima da lista das variantes de filtro: um número (px) ou uma medida CSS ("220px"). Padrão: 240px. A lista tem a largura do gatilho (nunca menor), cresce até o conteúdo e nunca passa da borda da janela: perto da borda direita ela se alinha ao fim do gatilho. A busca interna acompanha a largura da lista, sem alargá-la.
  * @quandoUsar Escolher UM valor de uma lista fechada. O valor selecionado fica visível no campo.
  * @quandoNaoUsar Para escolher VÁRIOS valores — use `MultiSelect`. Para um menu de AÇÕES (editar, excluir, duplicar) em vez de valores, use `Dropdown`. Para 2 a 4 opções mutuamente exclusivas sempre visíveis, use `Radio`.
  */
@@ -83,12 +94,29 @@ export interface SelectProps {
     size?: "sm" | "md" | "lg";
     /** Onde a lista abre. @default 'bottom' */
     placement?: "bottom" | "top" | "auto";
-    /** Variante visual. @default 'default' */
-    variant?: "default" | "filter";
+    /** Variante visual. `filter`, `search` e `combo` são o filtro de barra. @default 'default' */
+    variant?: "default" | "filter" | "search" | "combo";
+    /**
+     * Abre/fecha a lista de fora (modo controlado). `any` de propósito: no Vue uma
+     * prop `boolean` sem valor chega como `false`, e `props.open !== undefined`
+     * ficaria sempre verdadeiro (o Select se acharia controlado e nunca abriria).
+     */
+    open?: any;
+    /** Pede para abrir ou fechar a lista. No modo controlado, o pai decide o novo `open`. */
+    onOpenChange?: (open: boolean) => void;
+    /** Ícone à esquerda do texto do gatilho. */
+    triggerIcon?: IconProp;
+    /** Amostra de cor à esquerda do texto do gatilho (token de cor). */
+    triggerSwatch?: string;
     /** Opção "sem filtro" no topo da lista (seleção única). Escolhê-la chama `onChange("")`. */
     emptyOptionLabel?: string;
     /** Rodapé fixo da lista (ações). React node ou slot `footer` no Vue. */
     footer?: any;
+    /**
+     * Largura mínima da lista das variantes de filtro: número (px) ou medida CSS ("220px"). A lista nunca
+     * fica mais estreita que o gatilho. @default 240 (o `filter` do DS)
+     */
+    listMinWidth?: string | number;
     pagination?: boolean;
     hasMore?: boolean;
     onLoadMore?: () => void;
@@ -105,5 +133,6 @@ export interface SelectProps {
     ariaLabel?: string;
     className?: string;
 }
+import { IconProp } from "../Icon/Icon";
 declare function Select(props: SelectProps): import("react/jsx-runtime").JSX.Element;
 export default Select;