@1doc/1ds-react 2.12.1 → 2.12.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @1doc/1ds-react
 
+## 2.12.2
+
+### Patch Changes
+
+- 42a97e7: Select (variantes de filtro): a lista fica como a do CrisDoc. Teto de 300px, com o nome longo cortado por reticências; a opção marcada sem fundo, em azul, com o ✓ de 12px à esquerda; e, aberta pelo mouse, sem o contorno do cursor de teclado nem a régua azul da busca, que voltam assim que a navegação é pelo teclado. Numa lista com cores, a opção sem cor (ex.: "Sem marcadores") ganha uma amostra tracejada, e a opção "sem filtro" (`emptyOptionLabel`) segue sem nenhuma. O Select de formulário não muda.
+- f584230: Tabs: o ícone da aba passa de 20px (`size="md"`) para 14px, a altura do texto da aba. Com 20px ele ficava maior que a palavra ao lado. O texto continua em 14px.
+
 ## 2.12.1
 
 ### Patch Changes

package/dist/components/Select/Select.css

@@ -230,7 +230,62 @@
      (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);
+  /* Teto de 300px, a lista do CrisDoc: o nome longo corta com reticências em vez de esticar a lista.
+     Literal intencional (sem token de largura de menu). Gatilho mais largo que isso ainda vence, porque
+     o min-width (100%) ganha do max-width. */
+  max-width: min(300px, calc(100vw - var(--umds-primitive-spacing-xxxs) * 2));
+}
+
+/* Opção do filtro numa linha só: o que não cabe nos 300px vira reticências. */
+.umds-select--filter .umds-select__option-content .umds-text {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ── Filtro: a opção marcada como no CrisDoc ──
+   Sem fundo, texto azul em semibold e o ✓ de 12px à ESQUERDA (no DOM ele vem depois do texto; o
+   `order` só muda a posição visual, a leitura segue a mesma). O fundo azul-claro do Select de
+   formulário continua lá; no filtro o azul do texto já diz qual está valendo. */
+.umds-select--filter .umds-select__option--selected,
+.umds-select--filter .umds-select__option--selected.umds-select__option--active {
+  background-color: transparent;
+  color: var(--umds-semantic-color-primary-pure);
+}
+
+.umds-select--filter .umds-select__option--selected:hover {
+  background-color: var(--umds-semantic-color-background-light);
+}
+
+.umds-select--filter .umds-select__option--selected .umds-text {
+  color: inherit;
+}
+
+.umds-select--filter .umds-select__option-check {
+  order: -1;
+}
+
+.umds-select--filter .umds-select__option-check .umds-icon {
+  width: var(--umds-primitive-font-size-xxxs);
+  height: var(--umds-primitive-font-size-xxxs);
+  font-size: var(--umds-primitive-font-size-xxxs); /* 12px */
+}
+
+/* ── Filtro aberto pelo mouse: sem cursor de teclado e sem a régua azul da busca ──
+   O Select abre com a opção marcada ativa (padrão combobox) e foca a busca, e as duas marcas de foco
+   apareciam mesmo para quem clicou. Elas voltam assim que a navegação é pelo teclado
+   (`umds-select--teclado`: abriu por tecla ou andou por seta), que é para quem servem. */
+.umds-select--filter:not(.umds-select--teclado) .umds-select__option--active {
+  outline: none;
+}
+
+.umds-select--filter:not(.umds-select--teclado) .umds-select__option--active:not(:hover):not(.umds-select__option--selected) {
+  background-color: transparent;
+}
+
+.umds-select--filter:not(.umds-select--teclado) .umds-select__search-container:focus-within {
+  border-bottom-color: var(--umds-semantic-color-neutral-light-medium);
+  box-shadow: none;
 }
 
 /* Perto da borda direita da janela: a lista se alinha ao fim do gatilho (`alignEnd`, medido ao abrir). */
@@ -322,6 +377,12 @@
   border: var(--umds-primitive-border-width-hairline) solid var(--umds-semantic-color-neutral-light-down);
 }
 
+/* Amostra da opção sem cor numa lista com cores: só o contorno, tracejado. */
+.umds-select__swatch--vazio {
+  background: transparent;
+  border-style: dashed;
+}
+
 /* ── Lista flutuante (dentro de diálogo) ──
    O estilo inline (fixed, translate, largura e altura medidas) vem do componente. */
 .umds-select--floating .umds-select__dropdown {

package/dist/components/Select/Select.js

@@ -49,6 +49,7 @@ function Select(props) {
     const [shouldFocusSearch, setShouldFocusSearch] = useState(() => false);
     const [shouldFocusTrigger, setShouldFocusTrigger] = useState(() => false);
     const [activeIndex, setActiveIndex] = useState(() => -1);
+    const [teclado, setTeclado] = useState(() => false);
     const [uid, setUid] = useState(() => "");
     function opened() {
         if (props.open !== undefined)
@@ -60,6 +61,16 @@ function Select(props) {
             props.variant === "search" ||
             props.variant === "combo");
     }
+    function isAmostraVazia(option) {
+        if (!isFilter() || option.color || option.value === "")
+            return false;
+        const lista = props.options || [];
+        return lista.some((o) => !!o.color);
+    }
+    function toggleByPointer() {
+        setTeclado(false);
+        toggle();
+    }
     function setOpen(next) {
         if (next === opened())
             return;
@@ -232,6 +243,7 @@ function Select(props) {
             props.variant === "combo" ? "umds-select--filter-combo" : "",
             opened() && floatMode ? "umds-select--floating" : "",
             opened() && alignEnd ? "umds-select--list-end" : "",
+            opened() && teclado ? "umds-select--teclado" : "",
             props.triggerIcon ? "umds-select--has-trigger-icon" : "",
             opensUp && props.searchVariant !== "inline"
                 ? "umds-select--placement-top"
@@ -474,6 +486,7 @@ function Select(props) {
         if (next >= opts.length)
             next = 0;
         setActiveIndex(next);
+        setTeclado(true);
     }
     function handleTriggerKeyDown(event) {
         if (props.disabled || props.readOnly)
@@ -494,6 +507,7 @@ function Select(props) {
         }
         event.preventDefault();
         if (!opened()) {
+            setTeclado(true);
             toggle();
             return;
         }
@@ -693,7 +707,7 @@ 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: [!(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: {
+    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) => toggleByPointer(), 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, itemNoGatilho() ? (_jsx("span", { className: "umds-select__trigger-item", children: conteudoDoItemNoGatilho() })) : null, displayLabelText() && !itemNoGatilho() ? (_jsx(Text, { as: "span", variant: "body2", className: isPlaceholder() ? "umds-select__placeholder" : "", children: displayLabelText() })) : null, props.multiple &&
                                         props.selectionDisplay === "tags" &&
@@ -707,7 +721,7 @@ function Select(props) {
                                             .filter(Boolean)
                                             .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: typeof props.item === "function" ? props.item({ optionData: option, option }) : 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 &&
+                                                } })) : null, isAmostraVazia(option) ? (_jsx("span", { "aria-hidden": "true", className: "umds-select__swatch umds-select__swatch--vazio" })) : null, _jsx("div", { className: "umds-select__option-content", children: _jsx(_Fragment, { children: typeof props.item === "function" ? props.item({ optionData: option, option }) : 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/Tabs/Tab.js

@@ -110,6 +110,6 @@ function Tab(props) {
         }
     }
     const tabsContext = useContext(TabsContext);
-    return (_jsxs("span", { role: "presentation", className: itemClasses(), children: [_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { size: "md", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label }), temContador() ? (_jsx("span", { className: "umds-tabs__count", children: props.count })) : null] }), props.closable ? (_jsx("button", { type: "button", className: "umds-tabs__close", "aria-label": closeAriaText(), disabled: props.disabled, tabIndex: -1, onClick: (event) => handleClose(event), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }));
+    return (_jsxs("span", { role: "presentation", className: itemClasses(), children: [_jsxs("button", { role: "tab", id: tabId(), "aria-controls": panelId(), "data-tab-index": props.index, "aria-selected": isSelected(), "aria-disabled": props.disabled, tabIndex: isSelected() ? 0 : -1, disabled: props.disabled, onClick: (event) => handleClick(), onKeyDown: (event) => handleKeyDown(event), className: classes(), children: [props.icon ? (_jsx(Icon, { customSize: "14px", variant: "inherit", icon: props.icon })) : null, _jsx("span", { className: labelClasses(), children: props.label }), temContador() ? (_jsx("span", { className: "umds-tabs__count", children: props.count })) : null] }), props.closable ? (_jsx("button", { type: "button", className: "umds-tabs__close", "aria-label": closeAriaText(), disabled: props.disabled, tabIndex: -1, onClick: (event) => handleClose(event), children: _jsx(Icon, { variant: "inherit", customSize: "10px", icon: faXmark }) })) : null] }));
 }
 export default Tab;

package/dist/components/Tabs/Tabs.css

@@ -120,6 +120,9 @@
    Icon
    (o componente Icon não aceita className — o seletor mira a classe raiz
    .umds-icon dentro da tab; a cor já é herdada via variant="inherit")
+   O ícone tem 14px, a altura do texto da aba (customSize no Tab.lite.tsx).
+   Com o size="md" de 20px ele ficava maior que a palavra ao lado (decisão do
+   Cris, 13/10).
    ============================ */
 .umds-tabs__tab .umds-icon {
     flex-shrink: 0;

package/dist/teste/SelectFiltroCorETamanho.test.js

@@ -37,14 +37,15 @@ describe("Select filtro · tamanho e fundo", () => {
     });
 });
 describe("Select · cor por opção", () => {
-    it("a lista mostra uma amostra por opção com color; sem color, não", () => {
+    it("a lista mostra uma amostra por opção com color; sem color, a amostra tracejada (filtro)", () => {
         const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter" }));
         fireEvent.click(screen.getByRole("combobox"));
         const opcoes = [...container.querySelectorAll('[role="option"]')];
         expect(opcoes[0].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
         expect(opcoes[0].querySelector(".umds-select__swatch").style.background).toContain("--umds-semantic-color-feedback-negative-pure");
         expect(opcoes[1].querySelector(".umds-select__swatch")).not.toBeNull();
-        expect(opcoes[2].querySelector(".umds-select__swatch")).toBeNull();
+        expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveClass("umds-select__swatch--vazio");
+        expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
     });
     it("o gatilho ganha a cor da opção escolhida (seleção única)", () => {
         const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", value: "revisao" }));
@@ -75,3 +76,30 @@ describe("Select · cor por opção", () => {
         expect(screen.getByRole("option", { name: "Urgente" })).toBeInTheDocument();
     });
 });
+describe("Select filtro · lista como a do CrisDoc", () => {
+    it("no filtro com cores, a opção sem cor ganha a amostra tracejada e o 'sem filtro' não ganha nenhuma", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores", emptyOptionLabel: "Todos" }));
+        fireEvent.click(screen.getByRole("combobox"));
+        const vazias = container.querySelectorAll('[role="option"] .umds-select__swatch--vazio');
+        expect(vazias).toHaveLength(1);
+        expect(vazias[0].closest('[role="option"]')).toHaveTextContent("Sem marcador");
+        expect(screen.getByRole("option", { name: "Todos" }).querySelector(".umds-select__swatch")).toBeNull();
+    });
+    it("no Select de formulário a opção sem cor segue sem amostra", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES }));
+        fireEvent.click(screen.getByRole("combobox"));
+        expect(container.querySelector(".umds-select__swatch--vazio")).toBeNull();
+    });
+    it("aberto pelo mouse não marca navegação por teclado; tecla e seta marcam", () => {
+        const { container } = render(_jsx(Select, { ariaLabel: "x", options: MARCADORES, variant: "filter", placeholder: "Marcadores" }));
+        const raiz = () => container.firstElementChild;
+        const gatilho = screen.getByRole("combobox");
+        fireEvent.click(gatilho);
+        expect(raiz()).not.toHaveClass("umds-select--teclado");
+        fireEvent.keyDown(gatilho, { key: "ArrowDown" });
+        expect(raiz()).toHaveClass("umds-select--teclado");
+        fireEvent.keyDown(gatilho, { key: "Escape" });
+        fireEvent.keyDown(gatilho, { key: "Enter" });
+        expect(raiz()).toHaveClass("umds-select--teclado");
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1doc/1ds-react",
-  "version": "2.12.1",
+  "version": "2.12.2",
   "main": "dist/index.js",
   "sideEffects": [
     "**/*.css"
@@ -45,7 +45,7 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0",
     "vitest": "^3.2.7",
-    "@1doc/1ds-core": "2.12.1",
+    "@1doc/1ds-core": "2.12.2",
     "@1doc/1ds-tokens": "0.7.0"
   },
   "publishConfig": {

package/src/teste/SelectFiltroCorETamanho.test.tsx

@@ -43,14 +43,15 @@ describe("Select filtro · tamanho e fundo", () => {
 });
 
 describe("Select · cor por opção", () => {
-  it("a lista mostra uma amostra por opção com color; sem color, não", () => {
+  it("a lista mostra uma amostra por opção com color; sem color, a amostra tracejada (filtro)", () => {
     const { container } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" />);
     fireEvent.click(screen.getByRole("combobox"));
     const opcoes = [...container.querySelectorAll('[role="option"]')];
     expect(opcoes[0].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
     expect((opcoes[0].querySelector(".umds-select__swatch") as HTMLElement).style.background).toContain("--umds-semantic-color-feedback-negative-pure");
     expect(opcoes[1].querySelector(".umds-select__swatch")).not.toBeNull();
-    expect(opcoes[2].querySelector(".umds-select__swatch")).toBeNull();
+    expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveClass("umds-select__swatch--vazio");
+    expect(opcoes[2].querySelector(".umds-select__swatch")).toHaveAttribute("aria-hidden", "true");
   });
 
   it("o gatilho ganha a cor da opção escolhida (seleção única)", () => {
@@ -88,3 +89,35 @@ describe("Select · cor por opção", () => {
     expect(screen.getByRole("option", { name: "Urgente" })).toBeInTheDocument();
   });
 });
+
+describe("Select filtro · lista como a do CrisDoc", () => {
+  it("no filtro com cores, a opção sem cor ganha a amostra tracejada e o 'sem filtro' não ganha nenhuma", () => {
+    const { container } = render(
+      <Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" emptyOptionLabel="Todos" />,
+    );
+    fireEvent.click(screen.getByRole("combobox"));
+    const vazias = container.querySelectorAll('[role="option"] .umds-select__swatch--vazio');
+    expect(vazias).toHaveLength(1);
+    expect(vazias[0].closest('[role="option"]')).toHaveTextContent("Sem marcador");
+    expect(screen.getByRole("option", { name: "Todos" }).querySelector(".umds-select__swatch")).toBeNull();
+  });
+
+  it("no Select de formulário a opção sem cor segue sem amostra", () => {
+    const { container } = render(<Select ariaLabel="x" options={MARCADORES} />);
+    fireEvent.click(screen.getByRole("combobox"));
+    expect(container.querySelector(".umds-select__swatch--vazio")).toBeNull();
+  });
+
+  it("aberto pelo mouse não marca navegação por teclado; tecla e seta marcam", () => {
+    const { container } = render(<Select ariaLabel="x" options={MARCADORES} variant="filter" placeholder="Marcadores" />);
+    const raiz = () => container.firstElementChild as HTMLElement;
+    const gatilho = screen.getByRole("combobox");
+    fireEvent.click(gatilho);
+    expect(raiz()).not.toHaveClass("umds-select--teclado");
+    fireEvent.keyDown(gatilho, { key: "ArrowDown" });
+    expect(raiz()).toHaveClass("umds-select--teclado");
+    fireEvent.keyDown(gatilho, { key: "Escape" });
+    fireEvent.keyDown(gatilho, { key: "Enter" });
+    expect(raiz()).toHaveClass("umds-select--teclado");
+  });
+});