@stackone/malachite 2.25.0 → 2.26.0
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/COMPONENTS.md +3 -1
- package/dist/components/Dropdown.js +434 -414
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/Surface.js +137 -86
- package/dist/components/Surface.js.map +1 -1
- package/dist/index.d.ts +64 -0
- package/dist/index.js +410 -406
- package/dist/index.js.map +1 -1
- package/dist/tailwind.css.js +1 -1
- package/package.json +1 -1
|
@@ -1,131 +1,126 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import
|
|
3
|
-
import { createPortal as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import { FieldMessage as
|
|
1
|
+
import { jsx as t, jsxs as b, Fragment as ye } from "react/jsx-runtime";
|
|
2
|
+
import He, { useState as j, useRef as m, useEffect as Re, useCallback as Ce, useLayoutEffect as Ye, useInsertionEffect as Qe, useId as Je } from "react";
|
|
3
|
+
import { createPortal as et } from "react-dom";
|
|
4
|
+
import tt, { useFormFieldIds as rt } from "./BaseFormComponent.js";
|
|
5
|
+
import ze from "./CustomIcons/CaretDownIcon.js";
|
|
6
|
+
import je from "./CustomIcons/CloseIcon.js";
|
|
7
|
+
import { FieldMessage as nt } from "./FieldMessage.js";
|
|
8
8
|
import We from "./LoadingInput.js";
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { CONTROL_TEXT_SIZE_CLASS as Q, CONTROL_TEXT_SIZE as
|
|
12
|
-
import { controlWidthStyle as
|
|
13
|
-
import { getTriggerVisual as
|
|
14
|
-
import { pushEscapeLayer as
|
|
15
|
-
import { measureMenuGeometry as
|
|
16
|
-
import { ensureDropdownPanelStyles as
|
|
17
|
-
import { overlayIdentity as
|
|
18
|
-
import { useTopLayer as
|
|
19
|
-
const
|
|
9
|
+
import it from "./Spinner.js";
|
|
10
|
+
import be from "./Tooltip.js";
|
|
11
|
+
import { CONTROL_TEXT_SIZE_CLASS as Q, CONTROL_TEXT_SIZE as at } from "./controlTextSize.js";
|
|
12
|
+
import { controlWidthStyle as Pe } from "./controlWidth.js";
|
|
13
|
+
import { getTriggerVisual as ot, DROPDOWN_TRIGGER_ATTR as Me } from "./dropdownTriggerStyle.js";
|
|
14
|
+
import { pushEscapeLayer as lt } from "./escapeLayers.js";
|
|
15
|
+
import { measureMenuGeometry as st, isTriggerOffscreen as ct, rectSignature as dt, MENU_MAX_HEIGHT_PX as ut, MENU_SPECS as oe } from "./floatingMenuGeometry.js";
|
|
16
|
+
import { ensureDropdownPanelStyles as pt } from "./optionRowStyles.js";
|
|
17
|
+
import { overlayIdentity as ft } from "./portalOverlay.js";
|
|
18
|
+
import { useTopLayer as ht } from "./topLayer.js";
|
|
19
|
+
const Fe = {
|
|
20
20
|
display: "flex",
|
|
21
21
|
alignItems: "center",
|
|
22
22
|
justifyContent: "center",
|
|
23
23
|
gap: 8,
|
|
24
24
|
padding: "24px 16px",
|
|
25
25
|
color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
|
|
26
|
-
},
|
|
27
|
-
const r = i.toLowerCase(),
|
|
28
|
-
return
|
|
29
|
-
},
|
|
26
|
+
}, Le = "var(--malachite-font-size-xsmall, 11px)", gt = "[data-dropdown-option]", Ne = (e) => Array.from((e == null ? void 0 : e.querySelectorAll(gt)) ?? []), mt = (e, i) => {
|
|
27
|
+
const r = i.toLowerCase(), d = e.label.toLowerCase().includes(r), l = e.subtitle ? e.subtitle.toLowerCase().includes(r) : !1, y = e.rightSideText ? e.rightSideText.toLowerCase().includes(r) : !1;
|
|
28
|
+
return d || l || y;
|
|
29
|
+
}, le = {
|
|
30
30
|
small: "h-[var(--malachite-control-height-small,28px)]",
|
|
31
31
|
medium: "h-[var(--malachite-control-height-medium,32px)]",
|
|
32
32
|
large: "h-[var(--malachite-control-height-large,42px)]"
|
|
33
|
-
},
|
|
34
|
-
small: `${
|
|
35
|
-
medium: `${
|
|
36
|
-
large: `${
|
|
37
|
-
},
|
|
33
|
+
}, xt = {
|
|
34
|
+
small: `${le.small} px-2.5 py-1.5 ${Q.small}`,
|
|
35
|
+
medium: `${le.medium} px-3 py-1.5 ${Q.medium}`,
|
|
36
|
+
large: `${le.large} px-4 py-2.5 ${Q.large}`
|
|
37
|
+
}, vt = {
|
|
38
38
|
small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${Q.small}`,
|
|
39
39
|
medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${Q.medium}`,
|
|
40
40
|
large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${Q.large}`
|
|
41
|
-
},
|
|
41
|
+
}, bt = {
|
|
42
42
|
small: "right-[26px] size-4",
|
|
43
43
|
medium: "right-[30px] size-4",
|
|
44
44
|
large: "right-[38px] size-4"
|
|
45
|
-
},
|
|
45
|
+
}, yt = {
|
|
46
46
|
small: "top-[calc(var(--malachite-control-height-small,28px)/2)] -translate-y-1/2",
|
|
47
47
|
medium: "top-[calc(var(--malachite-control-height-medium,32px)/2)] -translate-y-1/2",
|
|
48
48
|
large: "top-[calc(var(--malachite-control-height-large,42px)/2)] -translate-y-1/2"
|
|
49
|
-
},
|
|
49
|
+
}, wt = {
|
|
50
50
|
small: "rounded-[var(--malachite-radius-10,10px)]",
|
|
51
51
|
medium: "rounded-xl",
|
|
52
52
|
large: "rounded-[var(--malachite-radius-xxl,14px)]"
|
|
53
|
-
},
|
|
53
|
+
}, Ge = () => !1, se = (e) => !!e && e.scrollWidth > e.clientWidth, St = {
|
|
54
54
|
display: "flex",
|
|
55
55
|
flexDirection: "column",
|
|
56
56
|
gap: 4
|
|
57
|
-
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
]
|
|
61
|
-
|
|
57
|
+
}, Ze = (e) => {
|
|
58
|
+
var r;
|
|
59
|
+
const i = e.filter(([, d]) => !!d);
|
|
60
|
+
return i.length < 2 ? (r = i[0]) == null ? void 0 : r[1] : /* @__PURE__ */ t("span", { style: St, children: i.map(([d, l]) => /* @__PURE__ */ t("span", { children: l }, d)) });
|
|
61
|
+
}, Tt = ({
|
|
62
|
+
wrap: e,
|
|
62
63
|
id: i,
|
|
63
64
|
children: r
|
|
64
|
-
}) =>
|
|
65
|
+
}) => e ? /* @__PURE__ */ t("span", { id: i, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ t(ye, { children: r }), Et = ({ row: e, children: i }) => e ? /* @__PURE__ */ t("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: i }) : /* @__PURE__ */ t(ye, { children: i }), Be = He.forwardRef(
|
|
65
66
|
({
|
|
66
|
-
isOpen:
|
|
67
|
+
isOpen: e,
|
|
67
68
|
onClick: i,
|
|
68
69
|
selectedItem: r,
|
|
69
|
-
disabled:
|
|
70
|
+
disabled: d = !1,
|
|
70
71
|
error: l = !1,
|
|
71
|
-
tone:
|
|
72
|
+
tone: y,
|
|
72
73
|
placeholder: N,
|
|
73
|
-
search:
|
|
74
|
-
showSubtitleInTrigger:
|
|
74
|
+
search: x = !1,
|
|
75
|
+
showSubtitleInTrigger: w = !1,
|
|
75
76
|
searchQuery: k = "",
|
|
76
|
-
onSearchChange:
|
|
77
|
+
onSearchChange: E,
|
|
77
78
|
onFocusOpen: L,
|
|
78
|
-
onArrowDown:
|
|
79
|
-
size:
|
|
80
|
-
hasClear:
|
|
81
|
-
onClear:
|
|
82
|
-
clearLabel:
|
|
83
|
-
controlId:
|
|
84
|
-
labelId:
|
|
85
|
-
describedBy:
|
|
86
|
-
required:
|
|
79
|
+
onArrowDown: S,
|
|
80
|
+
size: v = "large",
|
|
81
|
+
hasClear: $ = !1,
|
|
82
|
+
onClear: a,
|
|
83
|
+
clearLabel: h,
|
|
84
|
+
controlId: c,
|
|
85
|
+
labelId: o,
|
|
86
|
+
describedBy: C,
|
|
87
|
+
required: s = !1,
|
|
87
88
|
ariaLabel: D,
|
|
88
|
-
ariaLabelledBy:
|
|
89
|
-
hasCallerId:
|
|
90
|
-
},
|
|
91
|
-
const
|
|
92
|
-
|
|
93
|
-
},
|
|
94
|
-
const
|
|
95
|
-
return
|
|
96
|
-
}, re = () => {
|
|
97
|
-
const a = te.current;
|
|
98
|
-
return !!a && a.scrollWidth > a.clientWidth;
|
|
99
|
-
}, [z, he] = Y("subtitle"), Se = () => {
|
|
100
|
-
const a = W(), I = re();
|
|
101
|
-
return !a && !I ? !1 : (he(a && I ? "both" : a ? "value" : "subtitle"), !0);
|
|
89
|
+
ariaLabelledBy: ce,
|
|
90
|
+
hasCallerId: we = !1
|
|
91
|
+
}, _) => {
|
|
92
|
+
const Z = w && !x && !!(r != null && r.subtitle), B = Z ? vt[v] : xt[v], J = wt[v], O = `${c}-value`, de = `${c}-subtitle`, Se = !o && !D && !we && Z, ue = ce ?? (o && !D ? `${o} ${O}` : void 0) ?? (Se ? O : void 0), ee = (u) => {
|
|
93
|
+
u.key === "ArrowDown" && (u.preventDefault(), S == null || S());
|
|
94
|
+
}, I = m(null), te = m(null), K = ot({ disabled: d, error: l, tone: y, open: e }), R = !e && !!r, g = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), T = Z ? r == null ? void 0 : r.subtitle : void 0, z = () => se(I.current), [q, W] = j({ value: !1, subtitle: !0 }), pe = () => {
|
|
95
|
+
const u = z(), re = se(te.current);
|
|
96
|
+
return !u && !re ? !1 : (W({ value: u, subtitle: re }), !0);
|
|
102
97
|
};
|
|
103
|
-
if (
|
|
104
|
-
return /* @__PURE__ */
|
|
98
|
+
if (x && !d)
|
|
99
|
+
return /* @__PURE__ */ b(
|
|
105
100
|
"div",
|
|
106
101
|
{
|
|
107
|
-
ref:
|
|
102
|
+
ref: _,
|
|
108
103
|
className: `
|
|
109
|
-
relative w-full ${
|
|
104
|
+
relative w-full ${B} ${J}
|
|
110
105
|
border border-solid
|
|
111
106
|
transition-all duration-200
|
|
112
107
|
flex items-center
|
|
113
108
|
`,
|
|
114
|
-
style:
|
|
115
|
-
[
|
|
116
|
-
onClick: (
|
|
109
|
+
style: K,
|
|
110
|
+
[Me]: "",
|
|
111
|
+
onClick: (u) => u.stopPropagation(),
|
|
117
112
|
children: [
|
|
118
|
-
(r == null ? void 0 : r.icon) && /* @__PURE__ */
|
|
119
|
-
/* @__PURE__ */
|
|
120
|
-
|
|
113
|
+
(r == null ? void 0 : r.icon) && /* @__PURE__ */ t("span", { className: "flex shrink-0 items-center justify-center pr-2", children: r.icon }),
|
|
114
|
+
/* @__PURE__ */ t(be, { text: g, shouldShow: z, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ b("div", { className: "relative flex-1 flex items-center min-w-0", children: [
|
|
115
|
+
R && /* @__PURE__ */ t(
|
|
121
116
|
"span",
|
|
122
117
|
{
|
|
123
118
|
"aria-hidden": "true",
|
|
124
119
|
className: "absolute inset-0 flex items-center pointer-events-none",
|
|
125
|
-
children: /* @__PURE__ */
|
|
120
|
+
children: /* @__PURE__ */ t(
|
|
126
121
|
"span",
|
|
127
122
|
{
|
|
128
|
-
ref:
|
|
123
|
+
ref: I,
|
|
129
124
|
className: `min-w-0 block truncate text-[length:inherit]
|
|
130
125
|
text-[var(--malachite-text-primary)]`,
|
|
131
126
|
children: g
|
|
@@ -133,19 +128,19 @@ const Me = {
|
|
|
133
128
|
)
|
|
134
129
|
}
|
|
135
130
|
),
|
|
136
|
-
/* @__PURE__ */
|
|
131
|
+
/* @__PURE__ */ t(
|
|
137
132
|
"input",
|
|
138
133
|
{
|
|
139
|
-
id:
|
|
134
|
+
id: c,
|
|
140
135
|
type: "text",
|
|
141
136
|
"aria-label": D,
|
|
142
|
-
"aria-labelledby":
|
|
137
|
+
"aria-labelledby": ce,
|
|
143
138
|
"aria-invalid": l || void 0,
|
|
144
|
-
"aria-required":
|
|
145
|
-
"aria-describedby":
|
|
146
|
-
value:
|
|
147
|
-
onChange: (
|
|
148
|
-
|
|
139
|
+
"aria-required": s || void 0,
|
|
140
|
+
"aria-describedby": C,
|
|
141
|
+
value: e ? k : (r == null ? void 0 : r.label) ?? "",
|
|
142
|
+
onChange: (u) => {
|
|
143
|
+
u.stopPropagation(), E == null || E(u.target.value), e || i();
|
|
149
144
|
},
|
|
150
145
|
onFocus: () => {
|
|
151
146
|
L == null || L();
|
|
@@ -154,41 +149,41 @@ const Me = {
|
|
|
154
149
|
placeholder: N ?? "Select Field",
|
|
155
150
|
className: `flex-1 min-w-0 bg-transparent outline-none
|
|
156
151
|
text-[length:inherit] font-normal
|
|
157
|
-
placeholder:text-[var(--malachite-text-dimmed)] ${
|
|
152
|
+
placeholder:text-[var(--malachite-text-dimmed)] ${R ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
|
|
158
153
|
}
|
|
159
154
|
)
|
|
160
155
|
] }) }),
|
|
161
|
-
|
|
156
|
+
$ && /* @__PURE__ */ t(
|
|
162
157
|
"button",
|
|
163
158
|
{
|
|
164
159
|
type: "button",
|
|
165
|
-
"aria-label":
|
|
166
|
-
onClick:
|
|
160
|
+
"aria-label": h,
|
|
161
|
+
onClick: a,
|
|
167
162
|
className: `flex shrink-0 items-center justify-center pl-2 cursor-pointer
|
|
168
163
|
bg-transparent border-none p-0 text-[var(--malachite-text-placeholder)]
|
|
169
164
|
hover:text-[var(--malachite-text-primary)] transition-colors
|
|
170
165
|
rounded-full focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2`,
|
|
171
|
-
children: /* @__PURE__ */
|
|
166
|
+
children: /* @__PURE__ */ t(je, { size: 13 })
|
|
172
167
|
}
|
|
173
168
|
),
|
|
174
|
-
/* @__PURE__ */
|
|
169
|
+
/* @__PURE__ */ t("div", { className: "flex items-center justify-center pl-2", children: /* @__PURE__ */ t(
|
|
175
170
|
"button",
|
|
176
171
|
{
|
|
177
172
|
type: "button",
|
|
178
173
|
tabIndex: -1,
|
|
179
|
-
"aria-label":
|
|
180
|
-
onClick: (
|
|
181
|
-
|
|
174
|
+
"aria-label": e ? "Close options" : "Open options",
|
|
175
|
+
onClick: (u) => {
|
|
176
|
+
u.stopPropagation(), i();
|
|
182
177
|
},
|
|
183
178
|
className: "flex items-center justify-center cursor-pointer bg-transparent border-none p-0",
|
|
184
|
-
children: /* @__PURE__ */
|
|
185
|
-
|
|
179
|
+
children: /* @__PURE__ */ t(
|
|
180
|
+
ze,
|
|
186
181
|
{
|
|
187
182
|
size: 13,
|
|
188
183
|
style: {
|
|
189
|
-
color:
|
|
184
|
+
color: e ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
|
|
190
185
|
transition: "transform 0.2s ease, color 0.2s ease",
|
|
191
|
-
transform:
|
|
186
|
+
transform: e ? "rotate(180deg)" : "rotate(0deg)"
|
|
192
187
|
}
|
|
193
188
|
}
|
|
194
189
|
)
|
|
@@ -197,132 +192,135 @@ const Me = {
|
|
|
197
192
|
]
|
|
198
193
|
}
|
|
199
194
|
);
|
|
200
|
-
const
|
|
195
|
+
const fe = /* @__PURE__ */ b(
|
|
201
196
|
"button",
|
|
202
197
|
{
|
|
203
|
-
ref:
|
|
204
|
-
id:
|
|
198
|
+
ref: _,
|
|
199
|
+
id: c,
|
|
205
200
|
type: "button",
|
|
206
201
|
"aria-label": D,
|
|
207
|
-
"aria-labelledby":
|
|
202
|
+
"aria-labelledby": ue,
|
|
208
203
|
"aria-invalid": l || void 0,
|
|
209
|
-
"aria-required":
|
|
210
|
-
"aria-describedby": [
|
|
211
|
-
onClick: (
|
|
212
|
-
|
|
204
|
+
"aria-required": s || void 0,
|
|
205
|
+
"aria-describedby": [C, T ? de : void 0].filter(Boolean).join(" ") || void 0,
|
|
206
|
+
onClick: (u) => {
|
|
207
|
+
u.stopPropagation(), i();
|
|
213
208
|
},
|
|
214
209
|
onKeyDown: ee,
|
|
215
|
-
disabled:
|
|
216
|
-
style:
|
|
217
|
-
[
|
|
210
|
+
disabled: d,
|
|
211
|
+
style: K,
|
|
212
|
+
[Me]: "",
|
|
218
213
|
className: `
|
|
219
|
-
relative w-full ${
|
|
214
|
+
relative w-full ${B} ${J}
|
|
220
215
|
border border-solid
|
|
221
216
|
transition-all duration-200
|
|
222
|
-
flex ${
|
|
217
|
+
flex ${Z ? "items-start" : "items-center"} gap-3
|
|
223
218
|
cursor-pointer
|
|
224
219
|
disabled:cursor-not-allowed
|
|
225
220
|
`,
|
|
226
221
|
children: [
|
|
227
|
-
/* @__PURE__ */
|
|
222
|
+
/* @__PURE__ */ t(
|
|
228
223
|
"span",
|
|
229
224
|
{
|
|
230
|
-
id:
|
|
231
|
-
className: `text-left flex-1 min-w-0 flex ${
|
|
232
|
-
children: r ? /* @__PURE__ */
|
|
233
|
-
/* @__PURE__ */
|
|
234
|
-
r.icon && /* @__PURE__ */
|
|
235
|
-
/* @__PURE__ */
|
|
236
|
-
|
|
225
|
+
id: T ? void 0 : O,
|
|
226
|
+
className: `text-left flex-1 min-w-0 flex ${T ? "flex-col gap-1" : "items-center gap-2"}`,
|
|
227
|
+
children: r ? /* @__PURE__ */ b(ye, { children: [
|
|
228
|
+
/* @__PURE__ */ b(Tt, { wrap: !!T, id: O, children: [
|
|
229
|
+
r.icon && /* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
|
|
230
|
+
/* @__PURE__ */ t(
|
|
231
|
+
be,
|
|
237
232
|
{
|
|
238
233
|
text: g,
|
|
239
|
-
shouldShow:
|
|
240
|
-
triggerAs:
|
|
234
|
+
shouldShow: T ? Ge : z,
|
|
235
|
+
triggerAs: T ? "span" : "div",
|
|
241
236
|
isShrinkable: !0,
|
|
242
|
-
children: /* @__PURE__ */
|
|
237
|
+
children: /* @__PURE__ */ t(
|
|
243
238
|
"span",
|
|
244
239
|
{
|
|
245
|
-
ref:
|
|
246
|
-
className: `min-w-0 block truncate text-[length:inherit] ${
|
|
240
|
+
ref: I,
|
|
241
|
+
className: `min-w-0 block truncate text-[length:inherit] ${d ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
|
|
247
242
|
children: g
|
|
248
243
|
}
|
|
249
244
|
)
|
|
250
245
|
}
|
|
251
246
|
)
|
|
252
247
|
] }),
|
|
253
|
-
|
|
248
|
+
T && /* @__PURE__ */ t(
|
|
254
249
|
"span",
|
|
255
250
|
{
|
|
256
|
-
id:
|
|
251
|
+
id: de,
|
|
257
252
|
ref: te,
|
|
258
253
|
className: "min-w-0 block truncate text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-text-secondary,rgb(123,123,123))] leading-normal",
|
|
259
|
-
children:
|
|
254
|
+
children: T
|
|
260
255
|
}
|
|
261
256
|
)
|
|
262
|
-
] }) : /* @__PURE__ */
|
|
257
|
+
] }) : /* @__PURE__ */ t(
|
|
263
258
|
"span",
|
|
264
259
|
{
|
|
265
|
-
className: `flex-1 min-w-0 truncate text-[length:inherit] ${
|
|
260
|
+
className: `flex-1 min-w-0 truncate text-[length:inherit] ${d ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
|
|
266
261
|
children: N ?? "Select Field"
|
|
267
262
|
}
|
|
268
263
|
)
|
|
269
264
|
}
|
|
270
265
|
),
|
|
271
|
-
|
|
272
|
-
/* @__PURE__ */
|
|
273
|
-
|
|
266
|
+
$ && /* @__PURE__ */ t("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
|
|
267
|
+
/* @__PURE__ */ t("span", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ t(
|
|
268
|
+
ze,
|
|
274
269
|
{
|
|
275
270
|
size: 13,
|
|
276
271
|
style: {
|
|
277
|
-
color:
|
|
272
|
+
color: e ? "var(--malachite-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-placeholder, rgb(187, 187, 187))",
|
|
278
273
|
transition: "transform 0.2s ease, color 0.2s ease",
|
|
279
|
-
transform:
|
|
274
|
+
transform: e ? "rotate(180deg)" : "rotate(0deg)"
|
|
280
275
|
}
|
|
281
276
|
}
|
|
282
277
|
) })
|
|
283
278
|
]
|
|
284
279
|
}
|
|
285
280
|
);
|
|
286
|
-
return
|
|
287
|
-
|
|
281
|
+
return w && !x ? /* @__PURE__ */ t(
|
|
282
|
+
be,
|
|
288
283
|
{
|
|
289
|
-
text:
|
|
290
|
-
|
|
284
|
+
text: Ze([
|
|
285
|
+
["value", q.value && g],
|
|
286
|
+
["subtitle", q.subtitle && T]
|
|
287
|
+
]),
|
|
288
|
+
shouldShow: T ? pe : Ge,
|
|
291
289
|
fill: !0,
|
|
292
290
|
describesTrigger: !1,
|
|
293
|
-
children:
|
|
291
|
+
children: fe
|
|
294
292
|
}
|
|
295
|
-
) :
|
|
293
|
+
) : fe;
|
|
296
294
|
}
|
|
297
295
|
);
|
|
298
|
-
|
|
299
|
-
const
|
|
300
|
-
item:
|
|
296
|
+
Be.displayName = "DropdownTrigger";
|
|
297
|
+
const Ct = ({
|
|
298
|
+
item: e,
|
|
301
299
|
selected: i,
|
|
302
300
|
subtitleLayout: r,
|
|
303
|
-
onItemSelected:
|
|
301
|
+
onItemSelected: d
|
|
304
302
|
}) => {
|
|
305
|
-
const l = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))",
|
|
306
|
-
const
|
|
307
|
-
return
|
|
308
|
-
},
|
|
303
|
+
const l = i ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", y = r === "stacked" && !!e.subtitle, N = `mal-${Je().replace(/[^a-zA-Z0-9_-]/g, "")}`, x = `${N}-label`, w = `${N}-subtitle`, k = m(null), E = m(null), L = m(null), [S, v] = j({ label: !0, subtitle: !0, rightSide: !0 }), $ = () => {
|
|
304
|
+
const o = se(k.current), C = se(E.current), s = se(L.current);
|
|
305
|
+
return !o && !C && !s ? !1 : (v({ label: o, subtitle: C, rightSide: s }), !0);
|
|
306
|
+
}, a = e.rightSideTextVariant === "primary" ? "var(--malachite-text-right-side-text-primary, rgb(10, 10, 10))" : "var(--malachite-text-right-side-text-muted, rgb(123, 123, 123))", h = e.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", c = (
|
|
309
307
|
// `role="option"` would be invalid — nothing here declares a `listbox`, and an
|
|
310
308
|
// orphaned option is dropped from the a11y tree. `aria-current`, not
|
|
311
309
|
// `aria-pressed`: these are one-of-many choices, not toggles. tabIndex={-1}
|
|
312
310
|
// because the portaled panel is outside the trigger's tab order; DropdownPanel
|
|
313
311
|
// focuses an option on open and arrow keys move between them.
|
|
314
|
-
/* @__PURE__ */
|
|
312
|
+
/* @__PURE__ */ t(
|
|
315
313
|
"button",
|
|
316
314
|
{
|
|
317
315
|
type: "button",
|
|
318
316
|
"data-dropdown-option": "",
|
|
319
317
|
"data-selected": i,
|
|
320
318
|
"aria-current": i || void 0,
|
|
321
|
-
"aria-labelledby":
|
|
322
|
-
"aria-describedby":
|
|
319
|
+
"aria-labelledby": e.subtitle ? x : void 0,
|
|
320
|
+
"aria-describedby": e.subtitle ? w : void 0,
|
|
323
321
|
tabIndex: -1,
|
|
324
|
-
onClick: (
|
|
325
|
-
|
|
322
|
+
onClick: (o) => {
|
|
323
|
+
o.stopPropagation(), d(e);
|
|
326
324
|
},
|
|
327
325
|
className: "malachite-dropdown-option",
|
|
328
326
|
style: {
|
|
@@ -341,7 +339,7 @@ const Et = ({
|
|
|
341
339
|
font: "inherit",
|
|
342
340
|
color: "inherit"
|
|
343
341
|
},
|
|
344
|
-
children: /* @__PURE__ */
|
|
342
|
+
children: /* @__PURE__ */ b(
|
|
345
343
|
"span",
|
|
346
344
|
{
|
|
347
345
|
style: {
|
|
@@ -349,16 +347,16 @@ const Et = ({
|
|
|
349
347
|
display: "flex",
|
|
350
348
|
alignItems: "center",
|
|
351
349
|
gap: 12,
|
|
352
|
-
|
|
350
|
+
minWidth: 0
|
|
353
351
|
},
|
|
354
352
|
children: [
|
|
355
|
-
/* @__PURE__ */
|
|
353
|
+
/* @__PURE__ */ t("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ b(
|
|
356
354
|
"span",
|
|
357
355
|
{
|
|
358
|
-
style:
|
|
356
|
+
style: y ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
|
|
359
357
|
children: [
|
|
360
|
-
/* @__PURE__ */
|
|
361
|
-
|
|
358
|
+
/* @__PURE__ */ b(Et, { row: y && !!e.icon, children: [
|
|
359
|
+
e.icon && /* @__PURE__ */ t(
|
|
362
360
|
"span",
|
|
363
361
|
{
|
|
364
362
|
style: {
|
|
@@ -367,13 +365,14 @@ const Et = ({
|
|
|
367
365
|
justifyContent: "center",
|
|
368
366
|
flexShrink: 0
|
|
369
367
|
},
|
|
370
|
-
children:
|
|
368
|
+
children: e.icon
|
|
371
369
|
}
|
|
372
370
|
),
|
|
373
|
-
/* @__PURE__ */
|
|
371
|
+
/* @__PURE__ */ t(
|
|
374
372
|
"span",
|
|
375
373
|
{
|
|
376
|
-
id:
|
|
374
|
+
id: e.subtitle ? x : void 0,
|
|
375
|
+
ref: k,
|
|
377
376
|
style: {
|
|
378
377
|
fontWeight: 400,
|
|
379
378
|
color: l,
|
|
@@ -382,17 +381,17 @@ const Et = ({
|
|
|
382
381
|
textOverflow: "ellipsis",
|
|
383
382
|
minWidth: 0
|
|
384
383
|
},
|
|
385
|
-
children:
|
|
384
|
+
children: e.label
|
|
386
385
|
}
|
|
387
386
|
)
|
|
388
387
|
] }),
|
|
389
|
-
|
|
388
|
+
e.subtitle && (y ? /* @__PURE__ */ t(
|
|
390
389
|
"span",
|
|
391
390
|
{
|
|
392
|
-
id:
|
|
393
|
-
ref:
|
|
391
|
+
id: w,
|
|
392
|
+
ref: E,
|
|
394
393
|
style: {
|
|
395
|
-
fontSize:
|
|
394
|
+
fontSize: Le,
|
|
396
395
|
fontWeight: 400,
|
|
397
396
|
lineHeight: 1.4,
|
|
398
397
|
color: i ? l : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
|
|
@@ -400,65 +399,82 @@ const Et = ({
|
|
|
400
399
|
overflow: "hidden",
|
|
401
400
|
textOverflow: "ellipsis"
|
|
402
401
|
},
|
|
403
|
-
children:
|
|
402
|
+
children: e.subtitle
|
|
404
403
|
}
|
|
405
|
-
) : /* @__PURE__ */
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
{
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
404
|
+
) : /* @__PURE__ */ b(
|
|
405
|
+
"span",
|
|
406
|
+
{
|
|
407
|
+
style: {
|
|
408
|
+
// Zero basis: the subtitle gives way before the label.
|
|
409
|
+
flexGrow: 1,
|
|
410
|
+
flexBasis: 0,
|
|
411
|
+
display: "flex",
|
|
412
|
+
alignItems: "center",
|
|
413
|
+
gap: 8,
|
|
414
|
+
minWidth: 0,
|
|
415
|
+
overflow: "hidden"
|
|
416
|
+
},
|
|
417
|
+
children: [
|
|
418
|
+
/* @__PURE__ */ t(
|
|
419
|
+
"span",
|
|
420
|
+
{
|
|
421
|
+
style: {
|
|
422
|
+
fontSize: Le,
|
|
423
|
+
fontWeight: 400,
|
|
424
|
+
color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
|
|
425
|
+
flexShrink: 0
|
|
426
|
+
},
|
|
427
|
+
children: "|"
|
|
428
|
+
}
|
|
429
|
+
),
|
|
430
|
+
/* @__PURE__ */ t(
|
|
431
|
+
"span",
|
|
432
|
+
{
|
|
433
|
+
id: w,
|
|
434
|
+
ref: E,
|
|
435
|
+
style: {
|
|
436
|
+
fontSize: Le,
|
|
437
|
+
fontWeight: 400,
|
|
438
|
+
color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
|
|
439
|
+
whiteSpace: "nowrap",
|
|
440
|
+
overflow: "hidden",
|
|
441
|
+
textOverflow: "ellipsis",
|
|
442
|
+
minWidth: 0
|
|
443
|
+
},
|
|
444
|
+
children: e.subtitle
|
|
445
|
+
}
|
|
446
|
+
)
|
|
447
|
+
]
|
|
448
|
+
}
|
|
449
|
+
))
|
|
435
450
|
]
|
|
436
451
|
}
|
|
437
452
|
) }),
|
|
438
|
-
/* @__PURE__ */
|
|
453
|
+
/* @__PURE__ */ t(
|
|
439
454
|
"span",
|
|
440
455
|
{
|
|
441
456
|
style: {
|
|
442
457
|
// Reserved only when there is something to put there: an empty slot
|
|
443
458
|
// still holding its width truncates the label and subtitle early.
|
|
444
|
-
minWidth:
|
|
459
|
+
minWidth: e.rightSideText ? "var(--malachite-text-right-side-text-min-width, 80px)" : 0,
|
|
445
460
|
flexShrink: 1,
|
|
446
461
|
display: "flex",
|
|
447
|
-
justifyContent:
|
|
462
|
+
justifyContent: h
|
|
448
463
|
},
|
|
449
|
-
children:
|
|
464
|
+
children: e.rightSideText && /* @__PURE__ */ t(
|
|
450
465
|
"span",
|
|
451
466
|
{
|
|
467
|
+
ref: L,
|
|
452
468
|
style: {
|
|
453
469
|
fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
|
|
454
470
|
fontWeight: 400,
|
|
455
|
-
color:
|
|
471
|
+
color: a,
|
|
456
472
|
whiteSpace: "nowrap",
|
|
457
473
|
overflow: "hidden",
|
|
458
474
|
textOverflow: "ellipsis",
|
|
459
475
|
minWidth: 0
|
|
460
476
|
},
|
|
461
|
-
children:
|
|
477
|
+
children: e.rightSideText
|
|
462
478
|
}
|
|
463
479
|
)
|
|
464
480
|
}
|
|
@@ -469,96 +485,100 @@ const Et = ({
|
|
|
469
485
|
}
|
|
470
486
|
)
|
|
471
487
|
);
|
|
472
|
-
return
|
|
473
|
-
|
|
488
|
+
return /* @__PURE__ */ t(
|
|
489
|
+
be,
|
|
474
490
|
{
|
|
475
|
-
text:
|
|
476
|
-
|
|
491
|
+
text: Ze([
|
|
492
|
+
["label", S.label && e.label],
|
|
493
|
+
["subtitle", S.subtitle && e.subtitle],
|
|
494
|
+
["rightSide", S.rightSide && e.rightSideText]
|
|
495
|
+
]),
|
|
496
|
+
shouldShow: $,
|
|
477
497
|
isShrinkable: !0,
|
|
478
498
|
describesTrigger: !1,
|
|
479
|
-
children:
|
|
499
|
+
children: c
|
|
480
500
|
}
|
|
481
|
-
)
|
|
482
|
-
},
|
|
501
|
+
);
|
|
502
|
+
}, Ie = He.forwardRef((e, i) => {
|
|
483
503
|
const {
|
|
484
504
|
items: r,
|
|
485
|
-
onItemSelected:
|
|
505
|
+
onItemSelected: d,
|
|
486
506
|
selectedItem: l,
|
|
487
|
-
menuLoading:
|
|
507
|
+
menuLoading: y,
|
|
488
508
|
emptyMessage: N,
|
|
489
|
-
autoFocus:
|
|
490
|
-
positioned:
|
|
509
|
+
autoFocus: x,
|
|
510
|
+
positioned: w,
|
|
491
511
|
onDismiss: k,
|
|
492
|
-
subtitleLayout:
|
|
512
|
+
subtitleLayout: E,
|
|
493
513
|
size: L,
|
|
494
|
-
style:
|
|
495
|
-
} =
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
}, []),
|
|
499
|
-
var
|
|
500
|
-
if (!
|
|
514
|
+
style: S
|
|
515
|
+
} = e, v = m(null);
|
|
516
|
+
Qe(() => {
|
|
517
|
+
pt();
|
|
518
|
+
}, []), ht(v, !0), Re(() => {
|
|
519
|
+
var c;
|
|
520
|
+
if (!x || !w)
|
|
501
521
|
return;
|
|
502
|
-
const
|
|
503
|
-
(
|
|
504
|
-
}, [
|
|
505
|
-
const
|
|
506
|
-
var
|
|
507
|
-
if (
|
|
522
|
+
const a = Ne(v.current);
|
|
523
|
+
(c = a.find((o) => o.dataset.selected === "true") ?? a[0] ?? v.current) == null || c.focus();
|
|
524
|
+
}, [x, w]);
|
|
525
|
+
const $ = (a) => {
|
|
526
|
+
var C;
|
|
527
|
+
if (a.key === "Tab") {
|
|
508
528
|
k();
|
|
509
529
|
return;
|
|
510
530
|
}
|
|
511
|
-
const
|
|
512
|
-
if (
|
|
531
|
+
const h = Ne(v.current);
|
|
532
|
+
if (h.length === 0)
|
|
513
533
|
return;
|
|
514
|
-
const
|
|
515
|
-
ArrowDown:
|
|
516
|
-
ArrowUp:
|
|
534
|
+
const c = h.indexOf(document.activeElement), o = {
|
|
535
|
+
ArrowDown: c + 1,
|
|
536
|
+
ArrowUp: c - 1,
|
|
517
537
|
Home: 0,
|
|
518
|
-
End:
|
|
519
|
-
}[
|
|
520
|
-
|
|
538
|
+
End: h.length - 1
|
|
539
|
+
}[a.key];
|
|
540
|
+
o !== void 0 && (a.preventDefault(), (C = h[Math.min(Math.max(o, 0), h.length - 1)]) == null || C.focus());
|
|
521
541
|
};
|
|
522
|
-
return /* @__PURE__ */
|
|
542
|
+
return /* @__PURE__ */ t(
|
|
523
543
|
"div",
|
|
524
544
|
{
|
|
525
|
-
ref: (
|
|
526
|
-
|
|
545
|
+
ref: (a) => {
|
|
546
|
+
v.current = a, typeof i == "function" ? i(a) : i && (i.current = a);
|
|
527
547
|
},
|
|
528
|
-
...
|
|
548
|
+
...ft("dropdown"),
|
|
529
549
|
tabIndex: -1,
|
|
530
|
-
onKeyDown:
|
|
550
|
+
onKeyDown: $,
|
|
531
551
|
style: {
|
|
532
|
-
background:
|
|
533
|
-
border:
|
|
534
|
-
borderRadius:
|
|
535
|
-
boxShadow:
|
|
536
|
-
maxHeight:
|
|
552
|
+
background: oe.standard.background,
|
|
553
|
+
border: oe.standard.border,
|
|
554
|
+
borderRadius: oe.standard.radius,
|
|
555
|
+
boxShadow: oe.standard.shadow,
|
|
556
|
+
maxHeight: ut,
|
|
537
557
|
overflow: "hidden",
|
|
538
558
|
display: "flex",
|
|
539
559
|
flexDirection: "column",
|
|
540
|
-
fontSize:
|
|
541
|
-
...
|
|
560
|
+
fontSize: at[L],
|
|
561
|
+
...S
|
|
542
562
|
},
|
|
543
|
-
children:
|
|
544
|
-
/* @__PURE__ */
|
|
545
|
-
/* @__PURE__ */
|
|
546
|
-
] }) : r.length === 0 ? /* @__PURE__ */
|
|
563
|
+
children: y ? /* @__PURE__ */ b("div", { style: Fe, children: [
|
|
564
|
+
/* @__PURE__ */ t(it, { size: "xxxsmall" }),
|
|
565
|
+
/* @__PURE__ */ t("span", { children: "Loading…" })
|
|
566
|
+
] }) : r.length === 0 ? /* @__PURE__ */ t("div", { style: Fe, children: N }) : /* @__PURE__ */ t(
|
|
547
567
|
"div",
|
|
548
568
|
{
|
|
549
569
|
style: {
|
|
550
570
|
display: "flex",
|
|
551
571
|
flexDirection: "column",
|
|
552
572
|
gap: 4,
|
|
553
|
-
padding:
|
|
573
|
+
padding: oe.standard.padding,
|
|
554
574
|
overflowY: "auto",
|
|
555
575
|
scrollbarWidth: "thin",
|
|
556
576
|
scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
|
|
557
577
|
},
|
|
558
|
-
children: r.map((
|
|
559
|
-
const
|
|
560
|
-
return /* @__PURE__ */
|
|
561
|
-
|
|
578
|
+
children: r.map((a, h) => {
|
|
579
|
+
const c = r[h - 1], o = !!a.group && (!c || c.group !== a.group);
|
|
580
|
+
return /* @__PURE__ */ b("div", { style: { flexShrink: 0 }, children: [
|
|
581
|
+
o && /* @__PURE__ */ t(
|
|
562
582
|
"div",
|
|
563
583
|
{
|
|
564
584
|
style: {
|
|
@@ -569,83 +589,83 @@ const Et = ({
|
|
|
569
589
|
textTransform: "none",
|
|
570
590
|
userSelect: "none"
|
|
571
591
|
},
|
|
572
|
-
children:
|
|
592
|
+
children: a.group
|
|
573
593
|
}
|
|
574
594
|
),
|
|
575
|
-
/* @__PURE__ */
|
|
576
|
-
|
|
595
|
+
/* @__PURE__ */ t(
|
|
596
|
+
Ct,
|
|
577
597
|
{
|
|
578
|
-
item:
|
|
579
|
-
onItemSelected:
|
|
580
|
-
subtitleLayout:
|
|
581
|
-
selected:
|
|
598
|
+
item: a,
|
|
599
|
+
onItemSelected: d,
|
|
600
|
+
subtitleLayout: E,
|
|
601
|
+
selected: a.id === (l == null ? void 0 : l.id) || !1
|
|
582
602
|
}
|
|
583
603
|
)
|
|
584
|
-
] },
|
|
604
|
+
] }, a.id);
|
|
585
605
|
})
|
|
586
606
|
}
|
|
587
607
|
)
|
|
588
608
|
}
|
|
589
609
|
);
|
|
590
610
|
});
|
|
591
|
-
|
|
592
|
-
const
|
|
593
|
-
items:
|
|
611
|
+
Ie.displayName = "DropdownPanel";
|
|
612
|
+
const Bt = ({
|
|
613
|
+
items: e,
|
|
594
614
|
onItemSelected: i,
|
|
595
615
|
defaultValue: r,
|
|
596
|
-
value:
|
|
616
|
+
value: d,
|
|
597
617
|
disabled: l = !1,
|
|
598
|
-
error:
|
|
618
|
+
error: y,
|
|
599
619
|
tone: N,
|
|
600
|
-
label:
|
|
601
|
-
hint:
|
|
620
|
+
label: x,
|
|
621
|
+
hint: w,
|
|
602
622
|
rightSideContent: k,
|
|
603
|
-
tooltip:
|
|
623
|
+
tooltip: E,
|
|
604
624
|
name: L,
|
|
605
|
-
required:
|
|
606
|
-
requiredIndicator:
|
|
607
|
-
loading:
|
|
608
|
-
menuLoading:
|
|
609
|
-
formControl:
|
|
610
|
-
description:
|
|
611
|
-
helperText:
|
|
612
|
-
placeholder:
|
|
613
|
-
search:
|
|
625
|
+
required: S = !1,
|
|
626
|
+
requiredIndicator: v,
|
|
627
|
+
loading: $,
|
|
628
|
+
menuLoading: a,
|
|
629
|
+
formControl: h,
|
|
630
|
+
description: c,
|
|
631
|
+
helperText: o,
|
|
632
|
+
placeholder: C,
|
|
633
|
+
search: s = !1,
|
|
614
634
|
showSubtitleInTrigger: D = !1,
|
|
615
|
-
subtitleLayout:
|
|
616
|
-
clearable:
|
|
617
|
-
size:
|
|
618
|
-
fullWidth:
|
|
619
|
-
width:
|
|
635
|
+
subtitleLayout: ce = "inline",
|
|
636
|
+
clearable: we = !1,
|
|
637
|
+
size: _ = "large",
|
|
638
|
+
fullWidth: Z = !1,
|
|
639
|
+
width: B,
|
|
620
640
|
minWidth: J,
|
|
621
641
|
id: O,
|
|
622
|
-
"aria-label":
|
|
623
|
-
"aria-labelledby":
|
|
642
|
+
"aria-label": de,
|
|
643
|
+
"aria-labelledby": Se
|
|
624
644
|
}) => {
|
|
625
|
-
const { controlId:
|
|
645
|
+
const { controlId: ue, labelId: ee, descriptionId: I, hintId: te, helperTextId: K } = rt({
|
|
626
646
|
id: O,
|
|
627
|
-
label:
|
|
628
|
-
description:
|
|
629
|
-
hint:
|
|
647
|
+
label: x,
|
|
648
|
+
description: c,
|
|
649
|
+
hint: w,
|
|
630
650
|
helperText: !0
|
|
631
|
-
}), [
|
|
632
|
-
|
|
633
|
-
|
|
651
|
+
}), [R, g] = j(!1), [T, z] = j(r), q = d ?? T, W = e.find((n) => n.id === q), pe = we && q !== void 0 && q !== "" && !l, fe = D && !s && !!(W != null && W.subtitle), u = `Clear ${x ?? C ?? "selection"}`, re = m(r);
|
|
652
|
+
Re(() => {
|
|
653
|
+
re.current !== r && (re.current = r, z(r));
|
|
634
654
|
}, [r]);
|
|
635
|
-
const [
|
|
636
|
-
var
|
|
637
|
-
const n =
|
|
638
|
-
n && ((
|
|
639
|
-
}, []),
|
|
655
|
+
const [Te, V] = j(""), [Ke, _e] = j(!1), ke = m(null), he = m(null), U = m(null), [p, $e] = j(null), ge = m(!0), X = Ce(() => {
|
|
656
|
+
var f;
|
|
657
|
+
const n = he.current;
|
|
658
|
+
n && ((f = n instanceof HTMLButtonElement ? n : n.querySelector("input")) == null || f.focus());
|
|
659
|
+
}, []), Ae = Ce(
|
|
640
660
|
(n) => {
|
|
641
|
-
var
|
|
642
|
-
n.stopPropagation(),
|
|
661
|
+
var f;
|
|
662
|
+
n.stopPropagation(), z(void 0), (f = M.current) == null || f.call(M, Ee.current), i == null || i(void 0), s && (ge.current = !1), X();
|
|
643
663
|
},
|
|
644
|
-
[i,
|
|
645
|
-
), P =
|
|
646
|
-
const n =
|
|
647
|
-
n &&
|
|
648
|
-
|
|
664
|
+
[i, s, X]
|
|
665
|
+
), P = Ce(() => {
|
|
666
|
+
const n = he.current;
|
|
667
|
+
n && $e(
|
|
668
|
+
st(U.current, {
|
|
649
669
|
triggerRect: n.getBoundingClientRect(),
|
|
650
670
|
preset: "standard",
|
|
651
671
|
minWidth: J,
|
|
@@ -654,143 +674,143 @@ const Zt = ({
|
|
|
654
674
|
})
|
|
655
675
|
);
|
|
656
676
|
}, [J]);
|
|
657
|
-
|
|
658
|
-
if (!
|
|
659
|
-
|
|
677
|
+
Re(() => {
|
|
678
|
+
if (!R) {
|
|
679
|
+
$e(null), _e(!1);
|
|
660
680
|
return;
|
|
661
681
|
}
|
|
662
682
|
P();
|
|
663
683
|
const n = (G) => {
|
|
664
|
-
var
|
|
665
|
-
const A = G.composedPath(), H =
|
|
666
|
-
!ve && !
|
|
667
|
-
},
|
|
668
|
-
g(!1),
|
|
669
|
-
}),
|
|
670
|
-
let
|
|
684
|
+
var ae;
|
|
685
|
+
const A = G.composedPath(), H = ke.current, ie = U.current, ve = !!H && A.includes(H), De = !!ie && A.includes(ie);
|
|
686
|
+
!ve && !De && (g(!1), s && V(""), (ae = F.current) == null || ae.call(F));
|
|
687
|
+
}, f = lt(() => {
|
|
688
|
+
g(!1), s && V(""), X();
|
|
689
|
+
}), Y = () => P();
|
|
690
|
+
let ne = 0, me = "";
|
|
671
691
|
const xe = () => {
|
|
672
|
-
const G =
|
|
692
|
+
const G = he.current;
|
|
673
693
|
if (G) {
|
|
674
694
|
const A = G.getBoundingClientRect();
|
|
675
|
-
if (
|
|
676
|
-
g(!1),
|
|
695
|
+
if (ct(A, window.innerWidth, window.innerHeight)) {
|
|
696
|
+
g(!1), s && V("");
|
|
677
697
|
return;
|
|
678
698
|
}
|
|
679
|
-
const H =
|
|
699
|
+
const H = dt(A);
|
|
680
700
|
H !== me && (me = H, P());
|
|
681
701
|
}
|
|
682
|
-
|
|
702
|
+
ne = requestAnimationFrame(xe);
|
|
683
703
|
};
|
|
684
|
-
return
|
|
685
|
-
cancelAnimationFrame(
|
|
704
|
+
return ne = requestAnimationFrame(xe), document.addEventListener("mousedown", n), window.addEventListener("scroll", Y, !0), window.addEventListener("resize", Y), () => {
|
|
705
|
+
cancelAnimationFrame(ne), document.removeEventListener("mousedown", n), f(), window.removeEventListener("scroll", Y, !0), window.removeEventListener("resize", Y);
|
|
686
706
|
};
|
|
687
|
-
}, [
|
|
688
|
-
if (!
|
|
707
|
+
}, [R, s, P, X]), Ye(() => {
|
|
708
|
+
if (!R)
|
|
689
709
|
return;
|
|
690
710
|
P();
|
|
691
|
-
const n =
|
|
711
|
+
const n = U.current;
|
|
692
712
|
if (!n || typeof ResizeObserver > "u")
|
|
693
713
|
return;
|
|
694
|
-
const
|
|
695
|
-
return
|
|
696
|
-
}, [
|
|
697
|
-
const M =
|
|
698
|
-
var
|
|
699
|
-
|
|
700
|
-
}, Ie = () => {
|
|
701
|
-
g(!1), d && V(""), U();
|
|
714
|
+
const f = new ResizeObserver(() => P());
|
|
715
|
+
return f.observe(n), () => f.disconnect();
|
|
716
|
+
}, [R, P]);
|
|
717
|
+
const M = m(void 0), F = m(void 0), Ee = m(""), qe = (n) => {
|
|
718
|
+
var f;
|
|
719
|
+
z(n == null ? void 0 : n.id), (f = M.current) == null || f.call(M, (n == null ? void 0 : n.id) ?? Ee.current), g(!1), s && (V(""), ge.current = !1), i == null || i(n == null ? void 0 : n.id), X();
|
|
702
720
|
}, Ve = () => {
|
|
703
|
-
|
|
721
|
+
g(!1), s && V(""), X();
|
|
722
|
+
}, Ue = () => {
|
|
723
|
+
const n = Ne(U.current)[0];
|
|
704
724
|
if (n) {
|
|
705
725
|
n.focus();
|
|
706
726
|
return;
|
|
707
727
|
}
|
|
708
|
-
|
|
709
|
-
},
|
|
710
|
-
return /* @__PURE__ */
|
|
711
|
-
|
|
728
|
+
_e(!0), g(!0);
|
|
729
|
+
}, Xe = s && Te ? e.filter((n) => mt(n, Te)) : e;
|
|
730
|
+
return /* @__PURE__ */ t(
|
|
731
|
+
tt,
|
|
712
732
|
{
|
|
713
|
-
fullWidth:
|
|
714
|
-
label:
|
|
715
|
-
hint:
|
|
733
|
+
fullWidth: Z,
|
|
734
|
+
label: x,
|
|
735
|
+
hint: w,
|
|
716
736
|
rightSideContent: k,
|
|
717
|
-
tooltip:
|
|
737
|
+
tooltip: E,
|
|
718
738
|
name: L,
|
|
719
|
-
required:
|
|
720
|
-
requiredIndicator:
|
|
721
|
-
loading:
|
|
722
|
-
formControl:
|
|
723
|
-
description:
|
|
724
|
-
controlId:
|
|
739
|
+
required: S,
|
|
740
|
+
requiredIndicator: v,
|
|
741
|
+
loading: $,
|
|
742
|
+
formControl: h,
|
|
743
|
+
description: c,
|
|
744
|
+
controlId: ue,
|
|
725
745
|
labelId: ee,
|
|
726
|
-
descriptionId:
|
|
746
|
+
descriptionId: I,
|
|
727
747
|
hintId: te,
|
|
728
|
-
loadingComponent:
|
|
748
|
+
loadingComponent: B === void 0 ? /* @__PURE__ */ t(
|
|
729
749
|
We,
|
|
730
750
|
{
|
|
731
|
-
heightClass:
|
|
732
|
-
helperText: !!
|
|
751
|
+
heightClass: le[_],
|
|
752
|
+
helperText: !!o,
|
|
733
753
|
helperTextMarginTop: !0
|
|
734
754
|
}
|
|
735
|
-
) : /* @__PURE__ */
|
|
755
|
+
) : /* @__PURE__ */ t("div", { style: Pe(B), children: /* @__PURE__ */ t(
|
|
736
756
|
We,
|
|
737
757
|
{
|
|
738
|
-
heightClass:
|
|
739
|
-
helperText: !!
|
|
758
|
+
heightClass: le[_],
|
|
759
|
+
helperText: !!o,
|
|
740
760
|
helperTextMarginTop: !0
|
|
741
761
|
}
|
|
742
762
|
) }),
|
|
743
|
-
children: ({ error: n, message:
|
|
744
|
-
M.current =
|
|
745
|
-
const xe =
|
|
746
|
-
|
|
763
|
+
children: ({ error: n, message: f, onFieldChange: Y, onFieldBlur: ne, emptyValue: me }) => {
|
|
764
|
+
M.current = Y, F.current = ne, Ee.current = me;
|
|
765
|
+
const xe = y ?? n, G = y === !1 ? void 0 : f, A = `${K}-error`, H = [
|
|
766
|
+
I,
|
|
747
767
|
te,
|
|
748
|
-
|
|
768
|
+
o ? K : void 0,
|
|
749
769
|
G ? A : void 0
|
|
750
770
|
].filter(Boolean).join(" ") || void 0;
|
|
751
|
-
return /* @__PURE__ */
|
|
752
|
-
/* @__PURE__ */
|
|
771
|
+
return /* @__PURE__ */ b(ye, { children: [
|
|
772
|
+
/* @__PURE__ */ b(
|
|
753
773
|
"div",
|
|
754
774
|
{
|
|
755
|
-
ref:
|
|
775
|
+
ref: ke,
|
|
756
776
|
className: "relative w-full",
|
|
757
|
-
style:
|
|
758
|
-
onBlur: (
|
|
759
|
-
var
|
|
760
|
-
const ve =
|
|
761
|
-
|
|
777
|
+
style: Pe(B),
|
|
778
|
+
onBlur: (ie) => {
|
|
779
|
+
var ae, Oe;
|
|
780
|
+
const ve = ie.relatedTarget;
|
|
781
|
+
ie.currentTarget.contains(ve) || ((ae = U.current) == null ? void 0 : ae.contains(ve)) === !0 || (Oe = F.current) == null || Oe.call(F);
|
|
762
782
|
},
|
|
763
783
|
children: [
|
|
764
|
-
|
|
784
|
+
pe && !s && /* @__PURE__ */ t(
|
|
765
785
|
"button",
|
|
766
786
|
{
|
|
767
787
|
type: "button",
|
|
768
|
-
onClick:
|
|
769
|
-
"aria-label":
|
|
770
|
-
className: `absolute ${
|
|
788
|
+
onClick: Ae,
|
|
789
|
+
"aria-label": u,
|
|
790
|
+
className: `absolute ${fe ? yt[_] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
|
|
771
791
|
justify-center rounded-full text-[var(--malachite-text-placeholder)]
|
|
772
792
|
hover:text-[var(--malachite-text-primary)] transition-colors
|
|
773
|
-
focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${
|
|
774
|
-
children: /* @__PURE__ */
|
|
793
|
+
focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${bt[_]}`,
|
|
794
|
+
children: /* @__PURE__ */ t(je, { size: 13 })
|
|
775
795
|
}
|
|
776
796
|
),
|
|
777
|
-
/* @__PURE__ */
|
|
778
|
-
|
|
797
|
+
/* @__PURE__ */ t(
|
|
798
|
+
Be,
|
|
779
799
|
{
|
|
780
|
-
hasClear:
|
|
781
|
-
onClear:
|
|
782
|
-
clearLabel:
|
|
783
|
-
ref:
|
|
784
|
-
isOpen:
|
|
785
|
-
onClick: () => !l && g(!
|
|
786
|
-
selectedItem:
|
|
800
|
+
hasClear: pe,
|
|
801
|
+
onClear: Ae,
|
|
802
|
+
clearLabel: u,
|
|
803
|
+
ref: he,
|
|
804
|
+
isOpen: R,
|
|
805
|
+
onClick: () => !l && g(!R),
|
|
806
|
+
selectedItem: W,
|
|
787
807
|
disabled: l,
|
|
788
808
|
error: xe,
|
|
789
809
|
tone: N,
|
|
790
|
-
placeholder:
|
|
791
|
-
search:
|
|
810
|
+
placeholder: C,
|
|
811
|
+
search: s,
|
|
792
812
|
showSubtitleInTrigger: D,
|
|
793
|
-
searchQuery:
|
|
813
|
+
searchQuery: Te,
|
|
794
814
|
onSearchChange: V,
|
|
795
815
|
onFocusOpen: () => {
|
|
796
816
|
if (!ge.current) {
|
|
@@ -800,23 +820,23 @@ const Zt = ({
|
|
|
800
820
|
g(!0);
|
|
801
821
|
},
|
|
802
822
|
onArrowDown: () => {
|
|
803
|
-
l ||
|
|
823
|
+
l || Ue();
|
|
804
824
|
},
|
|
805
|
-
size:
|
|
806
|
-
controlId:
|
|
825
|
+
size: _,
|
|
826
|
+
controlId: ue,
|
|
807
827
|
hasCallerId: !!O,
|
|
808
828
|
labelId: ee,
|
|
809
829
|
describedBy: H,
|
|
810
|
-
required:
|
|
811
|
-
ariaLabel:
|
|
812
|
-
ariaLabelledBy:
|
|
830
|
+
required: S,
|
|
831
|
+
ariaLabel: de,
|
|
832
|
+
ariaLabelledBy: Se
|
|
813
833
|
}
|
|
814
834
|
),
|
|
815
|
-
|
|
816
|
-
/* @__PURE__ */
|
|
817
|
-
|
|
835
|
+
R && et(
|
|
836
|
+
/* @__PURE__ */ t(
|
|
837
|
+
Ie,
|
|
818
838
|
{
|
|
819
|
-
ref:
|
|
839
|
+
ref: U,
|
|
820
840
|
style: {
|
|
821
841
|
position: "fixed",
|
|
822
842
|
top: (p == null ? void 0 : p.top) ?? 0,
|
|
@@ -826,16 +846,16 @@ const Zt = ({
|
|
|
826
846
|
visibility: p ? "visible" : "hidden",
|
|
827
847
|
opacity: p ? 1 : 0
|
|
828
848
|
},
|
|
829
|
-
items:
|
|
849
|
+
items: Xe,
|
|
830
850
|
onItemSelected: qe,
|
|
831
|
-
selectedItem:
|
|
832
|
-
menuLoading:
|
|
833
|
-
emptyMessage:
|
|
834
|
-
subtitleLayout:
|
|
835
|
-
size:
|
|
836
|
-
autoFocus: !
|
|
851
|
+
selectedItem: W,
|
|
852
|
+
menuLoading: a,
|
|
853
|
+
emptyMessage: e.length === 0 ? "No options available" : "No results found",
|
|
854
|
+
subtitleLayout: ce,
|
|
855
|
+
size: _,
|
|
856
|
+
autoFocus: !s || Ke,
|
|
837
857
|
positioned: p !== null,
|
|
838
|
-
onDismiss:
|
|
858
|
+
onDismiss: Ve
|
|
839
859
|
}
|
|
840
860
|
),
|
|
841
861
|
document.body
|
|
@@ -843,21 +863,21 @@ const Zt = ({
|
|
|
843
863
|
]
|
|
844
864
|
}
|
|
845
865
|
),
|
|
846
|
-
|
|
866
|
+
o && /* @__PURE__ */ t(
|
|
847
867
|
"div",
|
|
848
868
|
{
|
|
849
|
-
id:
|
|
869
|
+
id: K,
|
|
850
870
|
className: "mt-1 text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
|
|
851
|
-
children:
|
|
871
|
+
children: o
|
|
852
872
|
}
|
|
853
873
|
),
|
|
854
|
-
/* @__PURE__ */
|
|
874
|
+
/* @__PURE__ */ t(nt, { id: A, message: G, spaced: !0 })
|
|
855
875
|
] });
|
|
856
876
|
}
|
|
857
877
|
}
|
|
858
878
|
);
|
|
859
879
|
};
|
|
860
880
|
export {
|
|
861
|
-
|
|
881
|
+
Bt as Dropdown
|
|
862
882
|
};
|
|
863
883
|
//# sourceMappingURL=Dropdown.js.map
|