@selectwin/kit 0.1.207 → 0.1.208
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/SelectCombobox.d.ts +5 -0
- package/dist/SelectCombobox.js +40 -36
- package/dist/SelectTable.d.ts +5 -0
- package/dist/SelectTable.js +8 -4
- package/dist/style.css +1 -1
- package/package.json +67 -67
package/dist/SelectCombobox.d.ts
CHANGED
|
@@ -35,6 +35,11 @@ type SelectComboboxOwnProps = {
|
|
|
35
35
|
allowCustom?: boolean;
|
|
36
36
|
/** Rótulo da linha do valor livre. Padrão: `Usar "…"`. */
|
|
37
37
|
customLabel?: (query: string) => ReactNode;
|
|
38
|
+
/**
|
|
39
|
+
* 0.1.208: a largura mínima do campo. O combobox mede pelo valor escolhido; numa barra de filtros ele pularia a cada
|
|
40
|
+
* troca e empurraria o resto da barra. Um comprimento CSS (`'16rem'`).
|
|
41
|
+
*/
|
|
42
|
+
minWidth?: string;
|
|
38
43
|
};
|
|
39
44
|
export type SelectComboboxProps = SelectComboboxOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectComboboxOwnProps>;
|
|
40
45
|
export declare const SelectCombobox: import('react').ForwardRefExoticComponent<SelectComboboxOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectComboboxOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
|
package/dist/SelectCombobox.js
CHANGED
|
@@ -19,26 +19,30 @@ function f({ count: e, children: t }) {
|
|
|
19
19
|
children: t
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
|
-
var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h, searchPlaceholder: g, labelAction: _, help: v, hint: y, error: b, emptyText: x, disabled: S, required: C, size: w = "md", searchable: T = !0, allowCustom: E = !1, customLabel: D,
|
|
23
|
-
let
|
|
24
|
-
let e =
|
|
22
|
+
var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h, searchPlaceholder: g, labelAction: _, help: v, hint: y, error: b, emptyText: x, disabled: S, required: C, size: w = "md", searchable: T = !0, allowCustom: E = !1, customLabel: D, minWidth: O, className: k, style: A, ...j }, M) {
|
|
23
|
+
let N = n(), P = h ?? N.common.selectPlaceholder, F = g ?? N.common.searchPlaceholder, I = x ?? N.common.noResults, L = s(), [R, z] = l(!1), [B, V] = l(""), H = m.find((e) => e.value === o), U = H ? H.label : E && o ? o : null, W = c(() => {
|
|
24
|
+
let e = B.trim().toLowerCase();
|
|
25
25
|
return !T || !e ? m : m.filter((t) => {
|
|
26
26
|
var n;
|
|
27
27
|
return t.label.toLowerCase().includes(e) || ((n = t.secondary) == null ? void 0 : n.toLowerCase().includes(e));
|
|
28
28
|
});
|
|
29
29
|
}, [
|
|
30
30
|
m,
|
|
31
|
-
|
|
31
|
+
B,
|
|
32
32
|
T
|
|
33
|
-
]),
|
|
34
|
-
|
|
35
|
-
},
|
|
36
|
-
p(e),
|
|
37
|
-
},
|
|
33
|
+
]), G = B.trim(), K = G ? m.find((e) => e.label.toLowerCase() === G.toLowerCase()) : void 0, q = E && T && G !== "" && !K, J = () => {
|
|
34
|
+
z(!1), V("");
|
|
35
|
+
}, Y = (e) => {
|
|
36
|
+
p(e), J();
|
|
37
|
+
}, X = b ? `${L}-err` : y ? `${L}-hint` : void 0;
|
|
38
38
|
return /* @__PURE__ */ d("div", {
|
|
39
|
-
ref:
|
|
40
|
-
...
|
|
41
|
-
|
|
39
|
+
ref: M,
|
|
40
|
+
...j,
|
|
41
|
+
style: O ? {
|
|
42
|
+
minWidth: O,
|
|
43
|
+
...A
|
|
44
|
+
} : A,
|
|
45
|
+
className: `select-field${w === "sm" ? " select-field--sm" : ""}${k ? " " + k : ""}`,
|
|
42
46
|
children: [
|
|
43
47
|
(i || v || _) && /* @__PURE__ */ d("div", {
|
|
44
48
|
className: "select-field__labelrow",
|
|
@@ -46,7 +50,7 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
|
|
|
46
50
|
className: "select-field__labelwrap",
|
|
47
51
|
children: [i && /* @__PURE__ */ u("label", {
|
|
48
52
|
className: "select-field__label",
|
|
49
|
-
htmlFor:
|
|
53
|
+
htmlFor: L,
|
|
50
54
|
children: i
|
|
51
55
|
}), v != null && v !== "" && /* @__PURE__ */ u(r, { content: v })]
|
|
52
56
|
}), _]
|
|
@@ -54,24 +58,24 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
|
|
|
54
58
|
/* @__PURE__ */ u("div", {
|
|
55
59
|
className: "select-combobox",
|
|
56
60
|
children: /* @__PURE__ */ u(a, {
|
|
57
|
-
active:
|
|
58
|
-
onClose:
|
|
61
|
+
active: R,
|
|
62
|
+
onClose: J,
|
|
59
63
|
placement: "bottom-start",
|
|
60
64
|
role: "listbox",
|
|
61
65
|
matchWidth: !0,
|
|
62
66
|
activator: /* @__PURE__ */ d("button", {
|
|
63
|
-
id:
|
|
67
|
+
id: L,
|
|
64
68
|
type: "button",
|
|
65
|
-
className: `select-combobox__trigger${b ? " select-input--error" : ""}${
|
|
66
|
-
onClick: () =>
|
|
69
|
+
className: `select-combobox__trigger${b ? " select-input--error" : ""}${R ? " is-open" : ""}`,
|
|
70
|
+
onClick: () => R ? J() : z(!0),
|
|
67
71
|
disabled: S,
|
|
68
72
|
"aria-haspopup": "listbox",
|
|
69
|
-
"aria-expanded":
|
|
73
|
+
"aria-expanded": R,
|
|
70
74
|
"aria-required": C || void 0,
|
|
71
|
-
"aria-describedby":
|
|
75
|
+
"aria-describedby": X,
|
|
72
76
|
children: [/* @__PURE__ */ u("span", {
|
|
73
|
-
className: `select-combobox__value${
|
|
74
|
-
children:
|
|
77
|
+
className: `select-combobox__value${U == null ? " is-placeholder" : ""}`,
|
|
78
|
+
children: U ?? P
|
|
75
79
|
}), /* @__PURE__ */ u("span", {
|
|
76
80
|
className: "select-combobox__caret",
|
|
77
81
|
"aria-hidden": "true",
|
|
@@ -85,33 +89,33 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
|
|
|
85
89
|
children: /* @__PURE__ */ u("input", {
|
|
86
90
|
className: "select-combobox__searchinput",
|
|
87
91
|
type: "text",
|
|
88
|
-
value:
|
|
89
|
-
onChange: (e) =>
|
|
92
|
+
value: B,
|
|
93
|
+
onChange: (e) => V(e.target.value),
|
|
90
94
|
onKeyDown: (e) => {
|
|
91
|
-
e.key === "Enter" && E &&
|
|
95
|
+
e.key === "Enter" && E && G !== "" && (e.preventDefault(), Y(K ? K.value : G));
|
|
92
96
|
},
|
|
93
|
-
placeholder:
|
|
97
|
+
placeholder: F,
|
|
94
98
|
autoFocus: !0
|
|
95
99
|
})
|
|
96
100
|
}), /* @__PURE__ */ d(f, {
|
|
97
|
-
count:
|
|
98
|
-
children: [
|
|
101
|
+
count: W.length + +!!q,
|
|
102
|
+
children: [q && /* @__PURE__ */ u("button", {
|
|
99
103
|
type: "button",
|
|
100
104
|
role: "option",
|
|
101
105
|
"aria-selected": !1,
|
|
102
106
|
className: "select-combobox__option select-combobox__option--custom",
|
|
103
|
-
onClick: () =>
|
|
107
|
+
onClick: () => Y(G),
|
|
104
108
|
children: /* @__PURE__ */ u("span", {
|
|
105
109
|
className: "select-combobox__optiontext",
|
|
106
110
|
children: /* @__PURE__ */ u("span", {
|
|
107
111
|
className: "select-combobox__optionlabel",
|
|
108
|
-
children: D ? D(
|
|
112
|
+
children: D ? D(G) : `Usar “${G}”`
|
|
109
113
|
})
|
|
110
114
|
})
|
|
111
|
-
}),
|
|
115
|
+
}), W.length === 0 ? q ? null : /* @__PURE__ */ u("div", {
|
|
112
116
|
className: "select-combobox__empty",
|
|
113
|
-
children:
|
|
114
|
-
}) :
|
|
117
|
+
children: I
|
|
118
|
+
}) : W.map((t) => {
|
|
115
119
|
let n = t.value === o;
|
|
116
120
|
return /* @__PURE__ */ d("button", {
|
|
117
121
|
type: "button",
|
|
@@ -119,7 +123,7 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
|
|
|
119
123
|
"aria-selected": n,
|
|
120
124
|
disabled: t.disabled,
|
|
121
125
|
className: `select-combobox__option${n ? " is-selected" : ""}`,
|
|
122
|
-
onClick: () =>
|
|
126
|
+
onClick: () => Y(t.value),
|
|
123
127
|
children: [/* @__PURE__ */ d("span", {
|
|
124
128
|
className: "select-combobox__optiontext",
|
|
125
129
|
children: [/* @__PURE__ */ u("span", {
|
|
@@ -141,11 +145,11 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
|
|
|
141
145
|
})
|
|
142
146
|
}),
|
|
143
147
|
b ? /* @__PURE__ */ u("p", {
|
|
144
|
-
id: `${
|
|
148
|
+
id: `${L}-err`,
|
|
145
149
|
className: "select-field__error",
|
|
146
150
|
children: b
|
|
147
151
|
}) : y ? /* @__PURE__ */ u("p", {
|
|
148
|
-
id: `${
|
|
152
|
+
id: `${L}-hint`,
|
|
149
153
|
className: "select-field__hint",
|
|
150
154
|
children: y
|
|
151
155
|
}) : null
|
package/dist/SelectTable.d.ts
CHANGED
|
@@ -121,6 +121,11 @@ type SelectTableEmptyOwnProps = {
|
|
|
121
121
|
action?: ReactNode;
|
|
122
122
|
/** 0.1.207: o vazio que é um ERRO (a lista não carregou): o ícone no tom crítico. O `role="alert"` é de quem usa. */
|
|
123
123
|
tone?: 'critical';
|
|
124
|
+
/**
|
|
125
|
+
* 0.1.208: a altura mínima, com o texto centrado nela — o vazio que fica no LUGAR de um gráfico ocupa a altura do
|
|
126
|
+
* gráfico, e o cartão não encolhe quando o período não tem dado. Um comprimento CSS (`'11.25rem'`).
|
|
127
|
+
*/
|
|
128
|
+
minHeight?: string;
|
|
124
129
|
};
|
|
125
130
|
export type SelectTableEmptyProps = SelectTableEmptyOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableEmptyOwnProps>;
|
|
126
131
|
export declare const SelectTableEmpty: import('react').ForwardRefExoticComponent<SelectTableEmptyOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectTableEmptyOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
|
package/dist/SelectTable.js
CHANGED
|
@@ -212,11 +212,15 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
|
|
|
212
212
|
children: r !== "none" && /* @__PURE__ */ g(t, {})
|
|
213
213
|
}) : null, e]
|
|
214
214
|
});
|
|
215
|
-
}), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i,
|
|
215
|
+
}), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i, minHeight: a, className: o, style: s, ...c }, l) {
|
|
216
216
|
return /* @__PURE__ */ _("div", {
|
|
217
|
-
ref:
|
|
218
|
-
...
|
|
219
|
-
|
|
217
|
+
ref: l,
|
|
218
|
+
...c,
|
|
219
|
+
style: a ? {
|
|
220
|
+
minHeight: a,
|
|
221
|
+
...s
|
|
222
|
+
} : s,
|
|
223
|
+
className: `select-table-empty${i === "critical" ? " select-table-empty--critical" : ""}${a ? " select-table-empty--fill" : ""}${o ? " " + o : ""}`,
|
|
220
224
|
children: [
|
|
221
225
|
e && /* @__PURE__ */ g("span", {
|
|
222
226
|
className: "select-table-empty__icon",
|