@seedgrid/fe-components 2026.9.2 → 2026.9.4
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/dist/ai/seedgrid-components.manifest.json +4 -4
- package/dist/inputs/SgMultiSelect.js +2 -2
- package/dist/inputs/SgMultiSelect.meta.js +1 -1
- package/dist/inputs/SgMultiSelectChips.d.ts.map +1 -1
- package/dist/inputs/SgMultiSelectChips.js +11 -3
- package/dist/inputs/SgMultiSelectChips.meta.js +1 -1
- package/dist/inputs/useSgMultiSelect.d.ts +6 -0
- package/dist/inputs/useSgMultiSelect.d.ts.map +1 -1
- package/dist/inputs/useSgMultiSelect.js +4 -1
- package/dist/sandbox.cjs +15 -15
- package/package.json +2 -2
|
@@ -1796,9 +1796,9 @@
|
|
|
1796
1796
|
},
|
|
1797
1797
|
{
|
|
1798
1798
|
"name": "options",
|
|
1799
|
-
"type": "{ label: string; value: string | number; disabled?: boolean }[]",
|
|
1799
|
+
"type": "{ label: string; value: string | number; chipLabel?: string; disabled?: boolean }[]",
|
|
1800
1800
|
"required": true,
|
|
1801
|
-
"description": "Lista de opcoes disponiveis.",
|
|
1801
|
+
"description": "Lista de opcoes disponiveis. `label` aparece na lista; `chipLabel` (opcional) e' o texto curto do item ja' selecionado (o resumo do campo), ex.: label \"3 - Filial Centro\" e chipLabel \"3\".",
|
|
1802
1802
|
"semanticRole": "data",
|
|
1803
1803
|
"bindable": false
|
|
1804
1804
|
},
|
|
@@ -2132,9 +2132,9 @@
|
|
|
2132
2132
|
},
|
|
2133
2133
|
{
|
|
2134
2134
|
"name": "options",
|
|
2135
|
-
"type": "{ label: string; value: string | number; disabled?: boolean }[]",
|
|
2135
|
+
"type": "{ label: string; value: string | number; chipLabel?: string; disabled?: boolean }[]",
|
|
2136
2136
|
"required": true,
|
|
2137
|
-
"description": "Lista de opcoes disponiveis.",
|
|
2137
|
+
"description": "Lista de opcoes disponiveis. `label` aparece na lista; `chipLabel` (opcional) e' o texto curto do item ja' selecionado (o chip), ex.: label \"3 - Filial Centro\" e chipLabel \"3\".",
|
|
2138
2138
|
"semanticRole": "data",
|
|
2139
2139
|
"bindable": false
|
|
2140
2140
|
},
|
|
@@ -30,7 +30,7 @@ function SgMultiSelectBase(props) {
|
|
|
30
30
|
return ms.selectedLabels.join(", ");
|
|
31
31
|
return t(i18n, "components.inputs.multiSelect.summary", { count: ms.selectedLabels.length });
|
|
32
32
|
}, [i18n, ms.selectedLabels, summaryThreshold]);
|
|
33
|
-
const triggerIcon = (_jsx("button", { type: "button", className: "text-foreground/60 hover:text-foreground", tabIndex: -1, onMouseDown: (event) => {
|
|
33
|
+
const triggerIcon = (_jsx("button", { type: "button", className: "cursor-pointer text-foreground/60 hover:text-foreground", tabIndex: -1, onMouseDown: (event) => {
|
|
34
34
|
event.preventDefault();
|
|
35
35
|
ms.ignoreBlurRef.current = true;
|
|
36
36
|
}, onClick: () => {
|
|
@@ -42,7 +42,7 @@ function SgMultiSelectBase(props) {
|
|
|
42
42
|
}, "aria-label": t(i18n, "components.actions.openList"), children: ms.open ? _jsx(Check, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) }));
|
|
43
43
|
const iconButtons = [];
|
|
44
44
|
if (clearable && ms.selectedLabels.length > 0 && !isDisabled) {
|
|
45
|
-
iconButtons.push(_jsx("button", { type: "button", className: "text-foreground/60 hover:text-foreground", tabIndex: -1, onMouseDown: (event) => {
|
|
45
|
+
iconButtons.push(_jsx("button", { type: "button", className: "cursor-pointer text-foreground/60 hover:text-foreground", tabIndex: -1, onMouseDown: (event) => {
|
|
46
46
|
event.preventDefault();
|
|
47
47
|
ms.ignoreBlurRef.current = true;
|
|
48
48
|
}, onClick: () => {
|
|
@@ -14,7 +14,7 @@ export const sgMeta = {
|
|
|
14
14
|
props: [
|
|
15
15
|
{ name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
|
|
16
16
|
{ name: "label", type: "string", description: "Rotulo exibido ao usuario.", semanticRole: "label", bindable: true },
|
|
17
|
-
{ name: "options", type: "{ label: string; value: string | number; disabled?: boolean }[]", description: "Lista de opcoes disponiveis.", semanticRole: "data", bindable: false },
|
|
17
|
+
{ name: "options", type: "{ label: string; value: string | number; chipLabel?: string; disabled?: boolean }[]", description: "Lista de opcoes disponiveis. `label` aparece na lista; `chipLabel` (opcional) e' o texto curto do item ja' selecionado (o resumo do campo), ex.: label \"3 - Filial Centro\" e chipLabel \"3\".", semanticRole: "data", bindable: false },
|
|
18
18
|
{ name: "value", type: "(string | number)[]", description: "Array de valores selecionados.", semanticRole: "value", bindable: true },
|
|
19
19
|
{ name: "onChange", type: "(value: (string | number)[]) => void", description: "Callback com o array atualizado de valores.", semanticRole: "event", bindable: false },
|
|
20
20
|
{ name: "searchable", type: "boolean", default: false, description: "Exibe campo de busca no topo do dropdown.", semanticRole: "behavior", bindable: true },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgMultiSelectChips.d.ts","sourceRoot":"","sources":["../../src/inputs/SgMultiSelectChips.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;
|
|
1
|
+
{"version":3,"file":"SgMultiSelectChips.d.ts","sourceRoot":"","sources":["../../src/inputs/SgMultiSelectChips.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAI/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAExF,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG;IACpD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAgRF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,QAAQ,CAAC,uBAAuB,CAAC,2CAsB1E"}
|
|
@@ -100,7 +100,7 @@ function SgMultiSelectChipsBase(props) {
|
|
|
100
100
|
ms.handleListKeyDown(event);
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
-
}, children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: ms.selectedOptions.length === 0 ? (_jsx("span", { className: "px-1 text-[var(--sg-input-placeholder,hsl(var(--muted-foreground)))]", children: resolvedPlaceholder })) : (ms.selectedOptions.map((option) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-muted/60 py-0.5 pl-2 pr-1 text-xs text-foreground", children: [_jsx("span", { className: "truncate", children: option.label }), !isDisabled ? (_jsx("button", { type: "button", "data-sg-chip-remove": "true", tabIndex: -1, className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-foreground/60 hover:bg-foreground/10 hover:text-foreground", onMouseDown: (event) => {
|
|
103
|
+
}, children: [_jsx("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1.5", children: ms.selectedOptions.length === 0 ? (_jsx("span", { className: "px-1 text-[var(--sg-input-placeholder,hsl(var(--muted-foreground)))]", children: resolvedPlaceholder })) : (ms.selectedOptions.map((option) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-muted/60 py-0.5 pl-2 pr-1 text-xs text-foreground", children: [_jsx("span", { className: "truncate", title: option.chipLabel !== undefined ? option.label : undefined, children: option.chipLabel ?? option.label }), !isDisabled ? (_jsx("button", { type: "button", "data-sg-chip-remove": "true", tabIndex: -1, className: "flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-foreground/60 hover:bg-foreground/10 hover:text-foreground", onMouseDown: (event) => {
|
|
104
104
|
event.preventDefault();
|
|
105
105
|
event.stopPropagation();
|
|
106
106
|
ms.ignoreBlurRef.current = true;
|
|
@@ -108,7 +108,7 @@ function SgMultiSelectChipsBase(props) {
|
|
|
108
108
|
event.preventDefault();
|
|
109
109
|
event.stopPropagation();
|
|
110
110
|
ms.removeValue(option.value);
|
|
111
|
-
}, "aria-label": t(i18n, "components.inputs.multiSelect.removeChip", { label: option.label }), children: _jsx(X, { size: 12 }) })) : null] }, String(option.value))))) }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1 self-start pt-0.5", children: [clearable && ms.selectedOptions.length > 0 && !isDisabled ? (_jsx("button", { type: "button", "data-sg-chip-remove": "true", tabIndex: -1, className: "text-foreground/60 hover:text-foreground", onMouseDown: (event) => {
|
|
111
|
+
}, "aria-label": t(i18n, "components.inputs.multiSelect.removeChip", { label: option.label }), children: _jsx(X, { size: 12 }) })) : null] }, String(option.value))))) }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1 self-start pt-0.5", children: [clearable && ms.selectedOptions.length > 0 && !isDisabled ? (_jsx("button", { type: "button", "data-sg-chip-remove": "true", tabIndex: -1, className: "cursor-pointer text-foreground/60 hover:text-foreground", onMouseDown: (event) => {
|
|
112
112
|
event.preventDefault();
|
|
113
113
|
event.stopPropagation();
|
|
114
114
|
ms.ignoreBlurRef.current = true;
|
|
@@ -116,7 +116,15 @@ function SgMultiSelectChipsBase(props) {
|
|
|
116
116
|
event.preventDefault();
|
|
117
117
|
event.stopPropagation();
|
|
118
118
|
ms.clearSelection();
|
|
119
|
-
}, "aria-label": t(i18n, "components.actions.clearSelection"), children: _jsx(X, { size: 16 }) })) : null, _jsx("
|
|
119
|
+
}, "aria-label": t(i18n, "components.actions.clearSelection"), children: _jsx(X, { size: 16 }) })) : null, _jsx("button", { type: "button", tabIndex: -1, className: "cursor-pointer text-foreground/60 hover:text-foreground", "aria-label": t(i18n, "components.actions.openList"), onMouseDown: (event) => {
|
|
120
|
+
if (isDisabled)
|
|
121
|
+
return;
|
|
122
|
+
event.preventDefault();
|
|
123
|
+
event.stopPropagation();
|
|
124
|
+
ms.ignoreBlurRef.current = true;
|
|
125
|
+
openOrClose();
|
|
126
|
+
triggerRef.current?.focus();
|
|
127
|
+
}, children: ms.open ? _jsx(Check, { size: 16 }) : _jsx(ChevronDown, { size: 16 }) })] })] }), error ? _jsx("p", { "data-sg-error": true, className: "mt-1 text-xs text-red-600", children: error }) : null, ms.open && !isDisabled ? (_jsx(SgMultiSelectDropdown, { dropdownRef: ms.dropdownRef, searchRef: ms.searchRef, ignoreBlurRef: ms.ignoreBlurRef, dropdownStyle: ms.dropdownStyle, searchable: searchable, searchPlaceholder: searchPlaceholder, query: ms.query, setQuery: ms.setQuery, setActiveIndex: ms.setActiveIndex, activeIndex: ms.activeIndex, visibleOptions: ms.visibleOptions, emptyText: emptyText, isSelected: ms.isSelected, resolvedValueLength: ms.resolvedValue.length, maxSelected: maxSelected, toggleOption: ms.toggleOption, onKeyDown: ms.handleListKeyDown })) : null] })] }));
|
|
120
128
|
}
|
|
121
129
|
export function SgMultiSelectChips(props) {
|
|
122
130
|
const { control, name, rules, ...rest } = props;
|
|
@@ -14,7 +14,7 @@ export const sgMeta = {
|
|
|
14
14
|
props: [
|
|
15
15
|
{ name: "id", type: "string", required: true, description: "Identificador unico do campo.", semanticRole: "data", bindable: false },
|
|
16
16
|
{ name: "label", type: "string", description: "Rotulo exibido ao usuario.", semanticRole: "label", bindable: true },
|
|
17
|
-
{ name: "options", type: "{ label: string; value: string | number; disabled?: boolean }[]", description: "Lista de opcoes disponiveis.", semanticRole: "data", bindable: false },
|
|
17
|
+
{ name: "options", type: "{ label: string; value: string | number; chipLabel?: string; disabled?: boolean }[]", description: "Lista de opcoes disponiveis. `label` aparece na lista; `chipLabel` (opcional) e' o texto curto do item ja' selecionado (o chip), ex.: label \"3 - Filial Centro\" e chipLabel \"3\".", semanticRole: "data", bindable: false },
|
|
18
18
|
{ name: "value", type: "(string | number)[]", description: "Array de valores selecionados.", semanticRole: "value", bindable: true },
|
|
19
19
|
{ name: "onChange", type: "(value: (string | number)[]) => void", description: "Callback com o array atualizado de valores.", semanticRole: "event", bindable: false },
|
|
20
20
|
{ name: "searchable", type: "boolean", default: false, description: "Exibe campo de busca no topo do dropdown.", semanticRole: "behavior", bindable: true },
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
export type SgMultiSelectOptionValue = string | number;
|
|
3
3
|
export type SgMultiSelectOption = {
|
|
4
|
+
/** Texto da lista (e o que a busca procura). */
|
|
4
5
|
label: string;
|
|
5
6
|
value: SgMultiSelectOptionValue;
|
|
7
|
+
/**
|
|
8
|
+
* Texto curto do item JA selecionado: o chip do SgMultiSelectChips e o resumo do SgMultiSelect.
|
|
9
|
+
* Sem ele, vale o `label`. Ex.: `label: "3 - Filial Centro"`, `chipLabel: "3"`.
|
|
10
|
+
*/
|
|
11
|
+
chipLabel?: string;
|
|
6
12
|
disabled?: boolean;
|
|
7
13
|
};
|
|
8
14
|
export declare function valueEquals(left: SgMultiSelectOptionValue, right: SgMultiSelectOptionValue): boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSgMultiSelect.d.ts","sourceRoot":"","sources":["../../src/inputs/useSgMultiSelect.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,wBAAwB,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,wBAAwB,WAE1F;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,sBAAsB;;;;;;;;;;;;;;;;uCAyB7C,wBAAwB;
|
|
1
|
+
{"version":3,"file":"useSgMultiSelect.d.ts","sourceRoot":"","sources":["../../src/inputs/useSgMultiSelect.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,mBAAmB,GAAG;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,wBAAwB,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,wBAAgB,WAAW,CAAC,IAAI,EAAE,wBAAwB,EAAE,KAAK,EAAE,wBAAwB,WAE1F;AAED,MAAM,MAAM,sBAAsB,GAAG;IACnC,OAAO,EAAE,mBAAmB,EAAE,CAAC;IAC/B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,EAAE,KAAK,IAAI,CAAC;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,sBAAsB;;;;;;;;;;;;;;;;uCAyB7C,wBAAwB;oCAgD7B,mBAAmB;wCAgBd,wBAAwB;;;;wCA4E9B,KAAK,CAAC,aAAa;EAiE9B"}
|
|
@@ -37,7 +37,10 @@ export function useSgMultiSelect(params) {
|
|
|
37
37
|
}, [options, query, searchable]);
|
|
38
38
|
const selectedLabels = React.useMemo(() => {
|
|
39
39
|
return resolvedValue
|
|
40
|
-
.map((entry) =>
|
|
40
|
+
.map((entry) => {
|
|
41
|
+
const option = options.find((candidate) => valueEquals(candidate.value, entry));
|
|
42
|
+
return option ? (option.chipLabel ?? option.label) : undefined;
|
|
43
|
+
})
|
|
41
44
|
.filter((label) => Boolean(label));
|
|
42
45
|
}, [options, resolvedValue]);
|
|
43
46
|
const selectedOptions = React.useMemo(() => {
|