@1doc/1ds-react 2.12.0 → 2.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/components/Combobox/Combobox.js +1 -1
- package/dist/components/Modal/Modal.css +10 -7
- package/dist/components/Modal/Modal.d.ts +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/Select/Select.js +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @1doc/1ds-react
|
|
2
2
|
|
|
3
|
+
## 2.12.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 470300f: Modal: o cabeçalho do `variant="primary"` passa para o azul escuro (`primary-dark`), no lugar do navy do CrisDoc, que não é token. O hover dos controles de janela inverte o par e sobe para `primary-pure`. A alça do painel no celular acompanha o cabeçalho.
|
|
8
|
+
- 53d35de: Select, Combobox e MultiSelect: a seta do gatilho passa para 10px, o tamanho que AppHeader, AppNavItem e PhoneInput já usavam e o mesmo do CrisDoc. Antes eram 16px no Select e no Combobox e 12px no MultiSelect.
|
|
9
|
+
|
|
3
10
|
## 2.12.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
@@ -317,7 +317,7 @@ function Combobox(props) {
|
|
|
317
317
|
}
|
|
318
318
|
};
|
|
319
319
|
}, []);
|
|
320
|
-
return (_jsxs("div", { ref: comboboxRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-combobox__label", id: labelIdText(), forId: inputIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-combobox__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-combobox__container", children: [_jsxs("div", { className: "umds-combobox__field", children: [_jsx("input", { type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", className: "umds-combobox__control", ref: inputRef, id: inputIdText(), "aria-expanded": ariaExpandedText(), "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-label": props.ariaLabel, "aria-invalid": ariaInvalid(), "aria-describedby": describedByText(), "aria-readonly": ariaReadonly(), "aria-required": props.required, placeholder: props.placeholder, value: inputText, disabled: props.disabled, readOnly: props.readOnly, onInput: (event) => handleInput(event), onFocus: (event) => handleFocus(), onBlur: (event) => handleBlur(), onKeyDown: (event) => handleKeyDown(event) }), _jsxs("div", { className: "umds-combobox__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, temTextoParaLimpar() ? (_jsx("button", { type: "button", className: "umds-combobox__clear", "aria-label": props.clearAriaLabel || "Limpar", onMouseDown: (event) => event.preventDefault(), onClick: (event) => limpar(), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null, _jsx("button", { type: "button", className: "umds-combobox__toggle", "aria-label": props.toggleAriaLabel || "Mostrar opções", tabIndex: -1, disabled: props.disabled, onMouseDown: (event) => event.preventDefault(), onClick: (event) => alternar(), children: _jsx(Icon, {
|
|
320
|
+
return (_jsxs("div", { ref: comboboxRef, className: wrapperClassesList(), children: [props.label ? (_jsxs(Text, { as: "label", variant: "label", className: "umds-combobox__label", id: labelIdText(), forId: inputIdText(), children: [props.label, props.required ? (_jsx("span", { className: "umds-combobox__required", children: " *" })) : null] })) : null, _jsxs("div", { className: "umds-combobox__container", children: [_jsxs("div", { className: "umds-combobox__field", children: [_jsx("input", { type: "text", role: "combobox", autoComplete: "off", "aria-autocomplete": "list", className: "umds-combobox__control", ref: inputRef, id: inputIdText(), "aria-expanded": ariaExpandedText(), "aria-controls": listboxIdText(), "aria-activedescendant": activeDescendantText(), "aria-label": props.ariaLabel, "aria-invalid": ariaInvalid(), "aria-describedby": describedByText(), "aria-readonly": ariaReadonly(), "aria-required": props.required, placeholder: props.placeholder, value: inputText, disabled: props.disabled, readOnly: props.readOnly, onInput: (event) => handleInput(event), onFocus: (event) => handleFocus(), onBlur: (event) => handleBlur(), onKeyDown: (event) => handleKeyDown(event) }), _jsxs("div", { className: "umds-combobox__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, temTextoParaLimpar() ? (_jsx("button", { type: "button", className: "umds-combobox__clear", "aria-label": props.clearAriaLabel || "Limpar", onMouseDown: (event) => event.preventDefault(), onClick: (event) => limpar(), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null, _jsx("button", { type: "button", className: "umds-combobox__toggle", "aria-label": props.toggleAriaLabel || "Mostrar opções", tabIndex: -1, disabled: props.disabled, onMouseDown: (event) => event.preventDefault(), onClick: (event) => alternar(), children: _jsx(Icon, { customSize: "10px", icon: isOpen ? faChevronUp : faChevronDown }) })] })] }), isOpen ? (_jsxs("div", { className: "umds-combobox__dropdown", children: [_jsx("div", { role: "listbox", className: "umds-combobox__options", id: listboxIdText(), "aria-labelledby": props.label ? labelIdText() : undefined, children: filteredOptionsList()?.map((option, index) => (_jsx("div", { role: "option", id: optionIdText(index), "aria-selected": option.value === currentValue(), onMouseDown: (event) => event.preventDefault(), onClick: (event) => selectOption(option), className: [
|
|
321
321
|
"umds-combobox__option",
|
|
322
322
|
option.value === currentValue()
|
|
323
323
|
? "umds-combobox__option--selected"
|
|
@@ -375,12 +375,15 @@
|
|
|
375
375
|
border-radius: 0;
|
|
376
376
|
}
|
|
377
377
|
|
|
378
|
-
/* ── variant="primary": cabeçalho cheio
|
|
379
|
-
|
|
380
|
-
|
|
378
|
+
/* ── variant="primary": cabeçalho cheio no azul escuro ──
|
|
379
|
+
primary-dark, o azul mais fechado da escala, no lugar do navy do CrisDoc, que
|
|
380
|
+
não é token (decisão do Cris, 13/10). Título, subtítulo e controles em
|
|
381
|
+
neutral-light-pure; o hover dos controles inverte o par e sobe para
|
|
382
|
+
primary-pure. Nos temas escuro e de alto contraste o primary-dark é o tom
|
|
383
|
+
claro do par e o neutral-light-pure vira escuro, então o contraste se mantém. */
|
|
381
384
|
.umds-modal--primary .umds-modal__header {
|
|
382
|
-
background-color: var(--umds-semantic-color-primary-
|
|
383
|
-
border-bottom-color: var(--umds-semantic-color-primary-
|
|
385
|
+
background-color: var(--umds-semantic-color-primary-dark);
|
|
386
|
+
border-bottom-color: var(--umds-semantic-color-primary-dark);
|
|
384
387
|
}
|
|
385
388
|
|
|
386
389
|
.umds-modal--primary .umds-modal__title,
|
|
@@ -395,7 +398,7 @@
|
|
|
395
398
|
.umds-modal--primary .umds-modal__ctrl:hover,
|
|
396
399
|
.umds-modal--primary .umds-modal__ctrl--ativo,
|
|
397
400
|
.umds-modal--primary .umds-modal__ctrl--close:hover {
|
|
398
|
-
background: var(--umds-semantic-color-primary-
|
|
401
|
+
background: var(--umds-semantic-color-primary-pure);
|
|
399
402
|
color: var(--umds-semantic-color-neutral-light-pure);
|
|
400
403
|
}
|
|
401
404
|
|
|
@@ -463,7 +466,7 @@
|
|
|
463
466
|
}
|
|
464
467
|
|
|
465
468
|
.umds-modal--primary .umds-modal__grabber {
|
|
466
|
-
background-color: var(--umds-semantic-color-primary-
|
|
469
|
+
background-color: var(--umds-semantic-color-primary-dark);
|
|
467
470
|
}
|
|
468
471
|
|
|
469
472
|
.umds-modal__grabber-bar {
|
|
@@ -27,7 +27,7 @@ export interface ModalProps {
|
|
|
27
27
|
* - "positive": sucesso (verde, ícone circle-check).
|
|
28
28
|
* - "negative": erro/falha (vermelho, ícone circle-exclamation).
|
|
29
29
|
* - "info": atenção (laranja, ícone triangle-exclamation).
|
|
30
|
-
* - "primary": modal base com o cabeçalho cheio
|
|
30
|
+
* - "primary": modal base com o cabeçalho cheio no azul escuro, primary-dark (título e
|
|
31
31
|
* controles em branco). Não é diálogo de feedback: mantém as três faixas.
|
|
32
32
|
* @default 'default'
|
|
33
33
|
*/
|
|
@@ -294,6 +294,6 @@ function MultiSelect(props) {
|
|
|
294
294
|
}
|
|
295
295
|
};
|
|
296
296
|
}, []);
|
|
297
|
-
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: "
|
|
297
|
+
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: "10px", 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] }));
|
|
298
298
|
}
|
|
299
299
|
export default MultiSelect;
|
|
@@ -697,7 +697,7 @@ function Select(props) {
|
|
|
697
697
|
background: triggerSwatchColor(),
|
|
698
698
|
} })) : 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 &&
|
|
699
699
|
props.selectionDisplay === "tags" &&
|
|
700
|
-
selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, {
|
|
700
|
+
selectedOptionsList().length > 0 ? (_jsx("div", { className: "umds-select__tags", children: selectedOptionsList()?.map((opt) => (_jsx(Tag, { size: "sm", label: opt.label, closable: true, disabled: props.disabled, onClose: (e) => removeValue(opt.value, e) }, opt.value))) })) : null] }), _jsxs("div", { className: "umds-select__actions", children: [props.loading ? _jsx(Spinner, { size: "sm", variant: "secondary" }) : null, _jsx("div", { className: "umds-select__arrow", children: _jsx(Icon, { customSize: "10px", icon: opened() ? faChevronUp : faChevronDown }) })] })] })) : null, opened() ? (_jsxs("div", { className: "umds-select__dropdown", ref: dropdownRef, style: dropdownStyle(), onKeyDown: (event) => handleDropdownKeyDown(event), children: [props.searchable ? (_jsxs("div", { className: "umds-select__search-container", children: [_jsx("div", { className: "umds-select__search-icon", children: _jsx(Icon, { size: "sm", icon: faMagnifyingGlass }) }), _jsx("input", { type: "text", className: "umds-select__search-input", ref: searchInputRef, placeholder: props.searchPlaceholder || "Buscar...", "aria-label": props.searchAriaLabel || "Buscar", value: searchTerm, onInput: (e) => handleSearch(e) }), props.searchVariant === "inline" ? (_jsx("button", { type: "button", className: "umds-select__search-close", "aria-label": props.closeSearchAriaLabel || "Fechar busca", onClick: (event) => closeSearch(), onKeyDown: (event) => handleSearchCloseKeyDown(event), children: _jsx(Icon, { size: "sm", icon: faXmark }) })) : null] })) : null, _jsxs("div", { role: "listbox", className: "umds-select__options", id: listboxIdText(), "aria-multiselectable": props.multiple ? "true" : undefined, onScroll: (e) => onScrollList(e), children: [filteredOptionsList().length === 0 && !props.loading ? (_jsx("div", { className: "umds-select__no-options", children: _jsx(Text, { variant: "body2", color: "secondary", children: props.emptyLabel || "Nenhum item encontrado" }) })) : null, filteredOptionsList()?.map((option, index) => (_jsxs("div", { role: "option", id: optionIdText(index), "aria-selected": isOptionSelected(option.value), onClick: (event) => selectOption(option), className: [
|
|
701
701
|
"umds-select__option",
|
|
702
702
|
isOptionSelected(option.value)
|
|
703
703
|
? "umds-select__option--selected"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@1doc/1ds-react",
|
|
3
|
-
"version": "2.12.
|
|
3
|
+
"version": "2.12.1",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"**/*.css"
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react-dom": "^18.0.0",
|
|
46
46
|
"typescript": "^5.0.0",
|
|
47
47
|
"vitest": "^3.2.7",
|
|
48
|
-
"@1doc/1ds-core": "2.12.
|
|
48
|
+
"@1doc/1ds-core": "2.12.1",
|
|
49
49
|
"@1doc/1ds-tokens": "0.7.0"
|
|
50
50
|
},
|
|
51
51
|
"publishConfig": {
|