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