@stackone/malachite 2.47.2 → 2.48.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 +1 -0
- package/dist/components/Button.js +64 -87
- package/dist/components/Button.js.map +1 -1
- package/dist/components/Dropdown.js +283 -282
- package/dist/components/Dropdown.js.map +1 -1
- package/dist/components/IconIndicator.js +27 -0
- package/dist/components/IconIndicator.js.map +1 -0
- package/dist/components/buttonSizing.js +30 -0
- package/dist/components/buttonSizing.js.map +1 -0
- package/dist/index.d.ts +16 -1
- package/dist/index.js +351 -349
- package/dist/index.js.map +1 -1
- package/dist/tailwind.css.js +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import Dt, { useState as F, useRef as
|
|
1
|
+
import { jsx as e, jsxs as v, Fragment as yt } from "react/jsx-runtime";
|
|
2
|
+
import Dt, { useState as F, useRef as m, useEffect as Ft, useCallback as Mt, useLayoutEffect as oe, useInsertionEffect as le, useId as se } from "react";
|
|
3
3
|
import { createPortal as ce } from "react-dom";
|
|
4
4
|
import de, { useFormFieldIds as ue } from "./BaseFormComponent.js";
|
|
5
5
|
import Zt from "./CustomIcons/CaretDownIcon.js";
|
|
@@ -11,26 +11,26 @@ import { Tag as he } from "./Tag.js";
|
|
|
11
11
|
import $t from "./Tooltip.js";
|
|
12
12
|
import ge from "./Typography/MarkdownBlock.js";
|
|
13
13
|
import { inlineMarkdownText as xe } from "./Typography/inlineMarkdown.js";
|
|
14
|
-
import { getDeepActiveElement as
|
|
15
|
-
import { CONTROL_TEXT_SIZE_CLASS as
|
|
14
|
+
import { getDeepActiveElement as Rt } from "./activeElement.js";
|
|
15
|
+
import { CONTROL_TEXT_SIZE_CLASS as it, CONTROL_TEXT_SIZE as me } from "./controlTextSize.js";
|
|
16
16
|
import { controlWidthStyle as Ut } from "./controlWidth.js";
|
|
17
17
|
import { getTriggerVisual as ve, DROPDOWN_TRIGGER_ATTR as Vt } from "./dropdownTriggerStyle.js";
|
|
18
18
|
import { pushEscapeLayer as be } from "./escapeLayers.js";
|
|
19
|
-
import { measureMenuGeometry as ye, isTriggerOffscreen as we, rectSignature as Se, MENU_MAX_HEIGHT_PX as Te, MENU_SPECS as
|
|
19
|
+
import { measureMenuGeometry as ye, isTriggerOffscreen as we, rectSignature as Se, MENU_MAX_HEIGHT_PX as Te, MENU_SPECS as xt } from "./floatingMenuGeometry.js";
|
|
20
20
|
import { FOCUS_RING as Ee } from "./focusRing.js";
|
|
21
|
-
import { hasBadge as
|
|
21
|
+
import { hasBadge as _t } from "./hasBadge.js";
|
|
22
22
|
import { ensureDropdownPanelStyles as Ne } from "./optionRowStyles.js";
|
|
23
23
|
import { usePopupLayer as Ce } from "./overlayLayers.js";
|
|
24
24
|
import { useTopLayer as ke } from "./topLayer.js";
|
|
25
|
-
import { tooltipLines as It, isCut as
|
|
26
|
-
const
|
|
25
|
+
import { tooltipLines as It, isCut as mt } from "./truncatedLines.js";
|
|
26
|
+
const Le = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text: a, disabled: r }) => /* @__PURE__ */ e(
|
|
27
27
|
"span",
|
|
28
28
|
{
|
|
29
29
|
id: t,
|
|
30
30
|
className: `flex min-w-0 max-w-[40%] [flex-shrink:3] ${r ? "opacity-60" : ""}`,
|
|
31
31
|
children: /* @__PURE__ */ e(he, { value: a, paddingSize: "compact", fontSize: "xsmall", textTransform: "none" })
|
|
32
32
|
}
|
|
33
|
-
), te = /[*`[<&\\]/,
|
|
33
|
+
), te = /[*`[<&\\]/, vt = ({ text: t }) => te.test(t) ? /* @__PURE__ */ e(
|
|
34
34
|
ge,
|
|
35
35
|
{
|
|
36
36
|
text: t,
|
|
@@ -47,21 +47,21 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
47
47
|
gap: 8,
|
|
48
48
|
padding: "24px 16px",
|
|
49
49
|
color: "var(--malachite-text-dimmed, rgb(161, 161, 161))"
|
|
50
|
-
},
|
|
51
|
-
const r = a.toLowerCase(), u = t.label.toLowerCase().includes(r), d = t.subtitle ?
|
|
50
|
+
}, Pt = "var(--malachite-font-size-xsmall, 11px)", Re = "[data-dropdown-option]", Wt = (t) => Array.from((t == null ? void 0 : t.querySelectorAll(Re)) ?? []), _e = (t) => te.test(t) ? xe(t) : t.replace(/\s+/g, " "), $e = (t, a) => {
|
|
51
|
+
const r = a.toLowerCase(), u = t.label.toLowerCase().includes(r), d = t.subtitle ? _e(t.subtitle).toLowerCase().includes(r) : !1, S = t.rightSideText ? t.rightSideText.toLowerCase().includes(r) : !1;
|
|
52
52
|
return u || d || S;
|
|
53
|
-
},
|
|
53
|
+
}, bt = {
|
|
54
54
|
small: "h-[var(--malachite-control-height-small,28px)]",
|
|
55
55
|
medium: "h-[var(--malachite-control-height-medium,32px)]",
|
|
56
56
|
large: "h-[var(--malachite-control-height-large,42px)]"
|
|
57
57
|
}, De = {
|
|
58
|
-
small: `${
|
|
59
|
-
medium: `${
|
|
60
|
-
large: `${
|
|
58
|
+
small: `${bt.small} px-2.5 py-1.5 ${it.small}`,
|
|
59
|
+
medium: `${bt.medium} px-3 py-1.5 ${it.medium}`,
|
|
60
|
+
large: `${bt.large} px-4 py-2.5 ${it.large}`
|
|
61
61
|
}, Oe = {
|
|
62
|
-
small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${
|
|
63
|
-
medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${
|
|
64
|
-
large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${
|
|
62
|
+
small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${it.small}`,
|
|
63
|
+
medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${it.medium}`,
|
|
64
|
+
large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${it.large}`
|
|
65
65
|
}, ze = {
|
|
66
66
|
small: "right-[26px] size-4",
|
|
67
67
|
medium: "right-[30px] size-4",
|
|
@@ -74,11 +74,11 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
74
74
|
small: "rounded-[var(--malachite-radius-10,10px)]",
|
|
75
75
|
medium: "rounded-xl",
|
|
76
76
|
large: "rounded-[var(--malachite-radius-xxl,14px)]"
|
|
77
|
-
}, Qt = () => !1,
|
|
77
|
+
}, Qt = () => !1, Pe = ({
|
|
78
78
|
wrap: t,
|
|
79
79
|
id: a,
|
|
80
80
|
children: r
|
|
81
|
-
}) => t ? /* @__PURE__ */ e("span", { id: a, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(
|
|
81
|
+
}) => t ? /* @__PURE__ */ e("span", { id: a, className: "min-w-0 flex items-center gap-2", children: r }) : /* @__PURE__ */ e(yt, { children: r }), Fe = ({ row: t, children: a }) => t ? /* @__PURE__ */ e("span", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: a }) : /* @__PURE__ */ e(yt, { children: a }), ee = Dt.forwardRef(
|
|
82
82
|
({
|
|
83
83
|
isOpen: t,
|
|
84
84
|
onClick: a,
|
|
@@ -86,55 +86,55 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
86
86
|
disabled: u = !1,
|
|
87
87
|
error: d = !1,
|
|
88
88
|
tone: S,
|
|
89
|
-
placeholder:
|
|
89
|
+
placeholder: k,
|
|
90
90
|
search: p = !1,
|
|
91
91
|
showSubtitleInTrigger: T = !1,
|
|
92
|
-
searchQuery:
|
|
93
|
-
onSearchChange:
|
|
94
|
-
onFocusOpen:
|
|
95
|
-
onArrowDown:
|
|
92
|
+
searchQuery: $ = "",
|
|
93
|
+
onSearchChange: L,
|
|
94
|
+
onFocusOpen: E,
|
|
95
|
+
onArrowDown: w,
|
|
96
96
|
onTabAway: R,
|
|
97
|
-
size:
|
|
98
|
-
hasClear:
|
|
99
|
-
onClear:
|
|
97
|
+
size: N = "large",
|
|
98
|
+
hasClear: h = !1,
|
|
99
|
+
onClear: D,
|
|
100
100
|
clearLabel: W,
|
|
101
101
|
controlId: i,
|
|
102
102
|
labelId: c,
|
|
103
103
|
describedBy: o,
|
|
104
|
-
required:
|
|
105
|
-
ariaLabel:
|
|
106
|
-
ariaLabelledBy:
|
|
107
|
-
hasCallerId:
|
|
104
|
+
required: g = !1,
|
|
105
|
+
ariaLabel: x,
|
|
106
|
+
ariaLabelledBy: G,
|
|
107
|
+
hasCallerId: C = !1
|
|
108
108
|
}, wt) => {
|
|
109
|
-
const
|
|
109
|
+
const O = T && !p && !!(r != null && r.subtitle), at = O ? Oe[N] : De[N], ot = Me[N], j = `${i}-value`, St = `${i}-subtitle`, z = `${i}-tag`, lt = !p || u, H = lt && !!(r != null && r.triggerTag), st = !lt && !t && !!(r != null && r.triggerTag), ct = H ? `${j} ${z}` : j, dt = !c && !x && !C && (O || H), b = G ?? (c && !x ? `${c} ${ct}` : void 0) ?? (dt ? ct : void 0), _ = H && !(b != null && b.split(" ").includes(z)), Tt = (l) => {
|
|
110
110
|
if (l.key === "Tab") {
|
|
111
111
|
R == null || R();
|
|
112
112
|
return;
|
|
113
113
|
}
|
|
114
|
-
l.key === "ArrowDown" && (l.preventDefault(),
|
|
115
|
-
},
|
|
116
|
-
const l =
|
|
117
|
-
return !l && !
|
|
114
|
+
l.key === "ArrowDown" && (l.preventDefault(), w == null || w());
|
|
115
|
+
}, K = m(null), I = m(null), A = ve({ disabled: u, error: d, tone: S, open: t }), ut = !t && !!r, B = (r == null ? void 0 : r.triggerLabel) ?? (r == null ? void 0 : r.label), y = O ? r == null ? void 0 : r.subtitle : void 0, tt = () => mt(K.current), [et, M] = F({ value: !1, subtitle: !0 }), Ot = () => {
|
|
116
|
+
const l = tt(), rt = mt(I.current);
|
|
117
|
+
return !l && !rt ? !1 : (M({ value: l, subtitle: rt }), !0);
|
|
118
118
|
};
|
|
119
119
|
if (p && !u)
|
|
120
|
-
return /* @__PURE__ */
|
|
120
|
+
return /* @__PURE__ */ v(
|
|
121
121
|
"div",
|
|
122
122
|
{
|
|
123
123
|
ref: wt,
|
|
124
124
|
className: `
|
|
125
|
-
relative w-full ${
|
|
125
|
+
relative w-full ${at} ${ot}
|
|
126
126
|
border border-solid
|
|
127
127
|
transition-all duration-200
|
|
128
128
|
flex items-center
|
|
129
129
|
`,
|
|
130
|
-
style:
|
|
130
|
+
style: A,
|
|
131
131
|
[Vt]: "",
|
|
132
132
|
"data-open": t || void 0,
|
|
133
133
|
onClick: (l) => l.stopPropagation(),
|
|
134
134
|
children: [
|
|
135
135
|
(r == null ? void 0 : r.icon) && /* @__PURE__ */ e("span", { className: "flex shrink-0 items-center justify-center pr-2", children: r.icon }),
|
|
136
|
-
/* @__PURE__ */ e($t, { text:
|
|
137
|
-
|
|
136
|
+
/* @__PURE__ */ e($t, { text: B, shouldShow: tt, isShrinkable: !0, fill: !0, children: /* @__PURE__ */ v("div", { className: "relative flex-1 flex items-center min-w-0", children: [
|
|
137
|
+
ut && /* @__PURE__ */ e(
|
|
138
138
|
"span",
|
|
139
139
|
{
|
|
140
140
|
"aria-hidden": "true",
|
|
@@ -142,10 +142,10 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
142
142
|
children: /* @__PURE__ */ e(
|
|
143
143
|
"span",
|
|
144
144
|
{
|
|
145
|
-
ref:
|
|
145
|
+
ref: K,
|
|
146
146
|
className: `min-w-0 block truncate text-[length:inherit]
|
|
147
147
|
text-[var(--malachite-text-primary)]`,
|
|
148
|
-
children:
|
|
148
|
+
children: B
|
|
149
149
|
}
|
|
150
150
|
)
|
|
151
151
|
}
|
|
@@ -155,36 +155,36 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
155
155
|
{
|
|
156
156
|
id: i,
|
|
157
157
|
type: "text",
|
|
158
|
-
"aria-label":
|
|
159
|
-
"aria-labelledby":
|
|
158
|
+
"aria-label": x,
|
|
159
|
+
"aria-labelledby": G,
|
|
160
160
|
"aria-invalid": d || void 0,
|
|
161
|
-
"aria-required":
|
|
162
|
-
"aria-describedby": [o,
|
|
163
|
-
value: t ?
|
|
161
|
+
"aria-required": g || void 0,
|
|
162
|
+
"aria-describedby": [o, st ? z : void 0].filter(Boolean).join(" ") || void 0,
|
|
163
|
+
value: t ? $ : (r == null ? void 0 : r.label) ?? "",
|
|
164
164
|
onChange: (l) => {
|
|
165
|
-
l.stopPropagation(),
|
|
165
|
+
l.stopPropagation(), L == null || L(l.target.value), t || a();
|
|
166
166
|
},
|
|
167
167
|
onFocus: () => {
|
|
168
|
-
|
|
168
|
+
E == null || E();
|
|
169
169
|
},
|
|
170
170
|
onKeyDown: Tt,
|
|
171
|
-
placeholder:
|
|
171
|
+
placeholder: k ?? "Select Field",
|
|
172
172
|
className: `flex-1 min-w-0 bg-transparent outline-none
|
|
173
173
|
text-[length:inherit] font-normal
|
|
174
|
-
placeholder:text-[var(--malachite-text-dimmed)] ${
|
|
174
|
+
placeholder:text-[var(--malachite-text-dimmed)] ${ut ? "text-transparent" : "text-[var(--malachite-text-primary)]"}`
|
|
175
175
|
}
|
|
176
176
|
)
|
|
177
177
|
] }) }),
|
|
178
|
-
|
|
178
|
+
st && (r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ v(yt, { children: [
|
|
179
179
|
/* @__PURE__ */ e("span", { "aria-hidden": "true", className: "w-2 shrink-0" }),
|
|
180
|
-
/* @__PURE__ */ e(Xt, { id:
|
|
180
|
+
/* @__PURE__ */ e(Xt, { id: z, text: r.triggerTag })
|
|
181
181
|
] }),
|
|
182
|
-
|
|
182
|
+
h && /* @__PURE__ */ e(
|
|
183
183
|
"button",
|
|
184
184
|
{
|
|
185
185
|
type: "button",
|
|
186
186
|
"aria-label": W,
|
|
187
|
-
onClick:
|
|
187
|
+
onClick: D,
|
|
188
188
|
className: `flex shrink-0 items-center justify-center pl-2 cursor-pointer
|
|
189
189
|
bg-transparent border-none p-0 text-[var(--malachite-text-placeholder)]
|
|
190
190
|
hover:text-[var(--malachite-text-primary)] transition-colors
|
|
@@ -218,33 +218,33 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
218
218
|
]
|
|
219
219
|
}
|
|
220
220
|
);
|
|
221
|
-
const
|
|
221
|
+
const pt = /* @__PURE__ */ v(
|
|
222
222
|
"button",
|
|
223
223
|
{
|
|
224
224
|
ref: wt,
|
|
225
225
|
id: i,
|
|
226
226
|
type: "button",
|
|
227
|
-
"aria-label":
|
|
228
|
-
"aria-labelledby":
|
|
227
|
+
"aria-label": x,
|
|
228
|
+
"aria-labelledby": b,
|
|
229
229
|
"aria-invalid": d || void 0,
|
|
230
|
-
"aria-required":
|
|
230
|
+
"aria-required": g || void 0,
|
|
231
231
|
"aria-describedby": [
|
|
232
232
|
o,
|
|
233
|
-
|
|
234
|
-
_ ?
|
|
233
|
+
y ? St : void 0,
|
|
234
|
+
_ ? z : void 0
|
|
235
235
|
].filter(Boolean).join(" ") || void 0,
|
|
236
236
|
onClick: (l) => {
|
|
237
237
|
l.stopPropagation(), a(l.detail === 0);
|
|
238
238
|
},
|
|
239
239
|
onKeyDown: Tt,
|
|
240
240
|
disabled: u,
|
|
241
|
-
style:
|
|
241
|
+
style: A,
|
|
242
242
|
[Vt]: "",
|
|
243
243
|
className: `
|
|
244
|
-
relative w-full ${
|
|
244
|
+
relative w-full ${at} ${ot}
|
|
245
245
|
border border-solid
|
|
246
246
|
transition-all duration-200
|
|
247
|
-
flex ${
|
|
247
|
+
flex ${O ? "items-start" : "items-center"} gap-3
|
|
248
248
|
cursor-pointer
|
|
249
249
|
disabled:cursor-not-allowed ${Ee}
|
|
250
250
|
`,
|
|
@@ -252,49 +252,49 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
252
252
|
/* @__PURE__ */ e(
|
|
253
253
|
"span",
|
|
254
254
|
{
|
|
255
|
-
id:
|
|
256
|
-
className: `text-left ${
|
|
257
|
-
children: r ? /* @__PURE__ */
|
|
258
|
-
/* @__PURE__ */
|
|
255
|
+
id: y ? void 0 : j,
|
|
256
|
+
className: `text-left ${H ? "flex-[1_1_auto]" : "flex-1"} min-w-0 flex ${y ? "flex-col gap-1" : "items-center gap-2"}`,
|
|
257
|
+
children: r ? /* @__PURE__ */ v(yt, { children: [
|
|
258
|
+
/* @__PURE__ */ v(Pe, { wrap: !!y, id: j, children: [
|
|
259
259
|
r.icon && /* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: r.icon }),
|
|
260
260
|
/* @__PURE__ */ e(
|
|
261
261
|
$t,
|
|
262
262
|
{
|
|
263
|
-
text:
|
|
264
|
-
shouldShow:
|
|
263
|
+
text: B,
|
|
264
|
+
shouldShow: y ? Qt : tt,
|
|
265
265
|
triggerAs: "span",
|
|
266
266
|
isShrinkable: !0,
|
|
267
267
|
children: /* @__PURE__ */ e(
|
|
268
268
|
"span",
|
|
269
269
|
{
|
|
270
|
-
ref:
|
|
270
|
+
ref: K,
|
|
271
271
|
className: `min-w-0 block truncate text-[length:inherit] ${u ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-primary)]"}`,
|
|
272
|
-
children:
|
|
272
|
+
children: B
|
|
273
273
|
}
|
|
274
274
|
)
|
|
275
275
|
}
|
|
276
276
|
)
|
|
277
277
|
] }),
|
|
278
|
-
|
|
278
|
+
y && /* @__PURE__ */ e(
|
|
279
279
|
"span",
|
|
280
280
|
{
|
|
281
281
|
id: St,
|
|
282
|
-
ref:
|
|
282
|
+
ref: I,
|
|
283
283
|
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",
|
|
284
|
-
children: /* @__PURE__ */ e(
|
|
284
|
+
children: /* @__PURE__ */ e(vt, { text: y })
|
|
285
285
|
}
|
|
286
286
|
)
|
|
287
287
|
] }) : /* @__PURE__ */ e(
|
|
288
288
|
"span",
|
|
289
289
|
{
|
|
290
290
|
className: `flex-1 min-w-0 truncate text-[length:inherit] ${u ? "text-[var(--malachite-text-placeholder)]" : "text-[var(--malachite-text-dimmed)]"}`,
|
|
291
|
-
children:
|
|
291
|
+
children: k ?? "Select Field"
|
|
292
292
|
}
|
|
293
293
|
)
|
|
294
294
|
}
|
|
295
295
|
),
|
|
296
|
-
(r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ e(Xt, { id:
|
|
297
|
-
|
|
296
|
+
(r == null ? void 0 : r.triggerTag) && /* @__PURE__ */ e(Xt, { id: z, text: r.triggerTag, disabled: u }),
|
|
297
|
+
h && /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "shrink-0 w-4" }),
|
|
298
298
|
/* @__PURE__ */ e("span", { className: "flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(
|
|
299
299
|
Zt,
|
|
300
300
|
{
|
|
@@ -313,18 +313,18 @@ const Re = Dt.lazy(() => import("./ActionMenuTagHost.js")), Xt = ({ id: t, text:
|
|
|
313
313
|
$t,
|
|
314
314
|
{
|
|
315
315
|
text: It([
|
|
316
|
-
["value",
|
|
316
|
+
["value", et.value && B],
|
|
317
317
|
[
|
|
318
318
|
"subtitle",
|
|
319
|
-
|
|
319
|
+
et.subtitle && y && /* @__PURE__ */ e(vt, { text: y })
|
|
320
320
|
]
|
|
321
321
|
]),
|
|
322
|
-
shouldShow:
|
|
322
|
+
shouldShow: y ? Ot : Qt,
|
|
323
323
|
fill: !0,
|
|
324
324
|
describesTrigger: !1,
|
|
325
|
-
children:
|
|
325
|
+
children: pt
|
|
326
326
|
}
|
|
327
|
-
) :
|
|
327
|
+
) : pt;
|
|
328
328
|
}
|
|
329
329
|
);
|
|
330
330
|
ee.displayName = "DropdownTrigger";
|
|
@@ -335,10 +335,10 @@ const We = ({
|
|
|
335
335
|
subtitleLayout: u,
|
|
336
336
|
onItemSelected: d
|
|
337
337
|
}) => {
|
|
338
|
-
const S = a ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))",
|
|
339
|
-
const
|
|
340
|
-
return !
|
|
341
|
-
},
|
|
338
|
+
const S = a ? "var(--malachite-accent-foreground, rgb(2, 122, 66))" : "var(--malachite-text-primary, rgb(10, 10, 10))", k = u === "stacked" && !!t.subtitle, p = `mal-${se().replace(/[^a-zA-Z0-9_-]/g, "")}`, T = `${p}-label`, $ = `${p}-subtitle`, L = `${p}-badge`, E = t.badgePlacement === "label", w = _t(t.badge) ? /* @__PURE__ */ e("span", { id: L, style: { flexShrink: 0, display: "flex" }, children: /* @__PURE__ */ e(Dt.Suspense, { fallback: null, children: /* @__PURE__ */ e(Le, { children: t.badge }) }) }) : null, R = m(null), N = m(null), h = m(null), [D, W] = F({ label: !0, subtitle: !0, rightSide: !0 }), i = () => {
|
|
339
|
+
const x = mt(R.current), G = mt(N.current), C = mt(h.current);
|
|
340
|
+
return !x && !G && !C ? !1 : (W({ label: x, subtitle: G, rightSide: C }), !0);
|
|
341
|
+
}, c = 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))", o = t.rightSideTextAlignment === "left" ? "flex-start" : "flex-end", g = (
|
|
342
342
|
// `role="option"` would be invalid — nothing here declares a `listbox`, and an
|
|
343
343
|
// orphaned option is dropped from the a11y tree. `aria-current`, not
|
|
344
344
|
// `aria-pressed`: these are one-of-many choices, not toggles. tabIndex={-1}
|
|
@@ -351,14 +351,14 @@ const We = ({
|
|
|
351
351
|
"data-dropdown-option": "",
|
|
352
352
|
"data-selected": a,
|
|
353
353
|
"aria-current": a || void 0,
|
|
354
|
-
"aria-labelledby": t.subtitle ||
|
|
354
|
+
"aria-labelledby": t.subtitle || _t(t.badge) ? T : void 0,
|
|
355
355
|
"aria-describedby": [
|
|
356
|
-
t.subtitle ?
|
|
357
|
-
|
|
356
|
+
t.subtitle ? $ : void 0,
|
|
357
|
+
_t(t.badge) ? L : void 0
|
|
358
358
|
].filter(Boolean).join(" ") || void 0,
|
|
359
359
|
tabIndex: -1,
|
|
360
|
-
onClick: (
|
|
361
|
-
|
|
360
|
+
onClick: (x) => {
|
|
361
|
+
x.stopPropagation(), d(t);
|
|
362
362
|
},
|
|
363
363
|
className: "malachite-dropdown-option",
|
|
364
364
|
style: {
|
|
@@ -377,7 +377,7 @@ const We = ({
|
|
|
377
377
|
font: "inherit",
|
|
378
378
|
color: "inherit"
|
|
379
379
|
},
|
|
380
|
-
children: /* @__PURE__ */
|
|
380
|
+
children: /* @__PURE__ */ v(
|
|
381
381
|
"span",
|
|
382
382
|
{
|
|
383
383
|
style: {
|
|
@@ -388,12 +388,12 @@ const We = ({
|
|
|
388
388
|
minWidth: 0
|
|
389
389
|
},
|
|
390
390
|
children: [
|
|
391
|
-
/* @__PURE__ */ e("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */
|
|
391
|
+
/* @__PURE__ */ e("span", { style: { flex: "1 1 auto", display: "block", minWidth: 0 }, children: /* @__PURE__ */ v(
|
|
392
392
|
"span",
|
|
393
393
|
{
|
|
394
|
-
style:
|
|
394
|
+
style: k ? { display: "flex", flexDirection: "column", gap: 2 } : { display: "flex", alignItems: "center", gap: 8 },
|
|
395
395
|
children: [
|
|
396
|
-
/* @__PURE__ */
|
|
396
|
+
/* @__PURE__ */ v(Fe, { row: k && (!!t.icon || E && !!w), children: [
|
|
397
397
|
t.icon && /* @__PURE__ */ e(
|
|
398
398
|
"span",
|
|
399
399
|
{
|
|
@@ -409,8 +409,8 @@ const We = ({
|
|
|
409
409
|
/* @__PURE__ */ e(
|
|
410
410
|
"span",
|
|
411
411
|
{
|
|
412
|
-
id: t.subtitle ||
|
|
413
|
-
ref:
|
|
412
|
+
id: t.subtitle || _t(t.badge) ? T : void 0,
|
|
413
|
+
ref: R,
|
|
414
414
|
style: {
|
|
415
415
|
fontWeight: 400,
|
|
416
416
|
color: S,
|
|
@@ -421,15 +421,16 @@ const We = ({
|
|
|
421
421
|
},
|
|
422
422
|
children: t.label
|
|
423
423
|
}
|
|
424
|
-
)
|
|
424
|
+
),
|
|
425
|
+
E && w
|
|
425
426
|
] }),
|
|
426
|
-
t.subtitle && (
|
|
427
|
+
t.subtitle && (k ? /* @__PURE__ */ e(
|
|
427
428
|
"span",
|
|
428
429
|
{
|
|
429
|
-
id:
|
|
430
|
-
ref:
|
|
430
|
+
id: $,
|
|
431
|
+
ref: N,
|
|
431
432
|
style: {
|
|
432
|
-
fontSize:
|
|
433
|
+
fontSize: Pt,
|
|
433
434
|
fontWeight: 400,
|
|
434
435
|
lineHeight: 1.4,
|
|
435
436
|
color: a ? S : "var(--malachite-text-dimmed, rgb(161, 161, 161))",
|
|
@@ -437,9 +438,9 @@ const We = ({
|
|
|
437
438
|
overflow: "hidden",
|
|
438
439
|
textOverflow: "ellipsis"
|
|
439
440
|
},
|
|
440
|
-
children: /* @__PURE__ */ e(
|
|
441
|
+
children: /* @__PURE__ */ e(vt, { text: t.subtitle })
|
|
441
442
|
}
|
|
442
|
-
) : /* @__PURE__ */
|
|
443
|
+
) : /* @__PURE__ */ v(
|
|
443
444
|
"span",
|
|
444
445
|
{
|
|
445
446
|
style: {
|
|
@@ -457,7 +458,7 @@ const We = ({
|
|
|
457
458
|
"span",
|
|
458
459
|
{
|
|
459
460
|
style: {
|
|
460
|
-
fontSize:
|
|
461
|
+
fontSize: Pt,
|
|
461
462
|
fontWeight: 400,
|
|
462
463
|
color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
|
|
463
464
|
flexShrink: 0
|
|
@@ -468,10 +469,10 @@ const We = ({
|
|
|
468
469
|
/* @__PURE__ */ e(
|
|
469
470
|
"span",
|
|
470
471
|
{
|
|
471
|
-
id:
|
|
472
|
-
ref:
|
|
472
|
+
id: $,
|
|
473
|
+
ref: N,
|
|
473
474
|
style: {
|
|
474
|
-
fontSize:
|
|
475
|
+
fontSize: Pt,
|
|
475
476
|
fontWeight: 400,
|
|
476
477
|
color: "var(--malachite-text-secondary, rgb(123, 123, 123))",
|
|
477
478
|
whiteSpace: "nowrap",
|
|
@@ -479,7 +480,7 @@ const We = ({
|
|
|
479
480
|
textOverflow: "ellipsis",
|
|
480
481
|
minWidth: 0
|
|
481
482
|
},
|
|
482
|
-
children: /* @__PURE__ */ e(
|
|
483
|
+
children: /* @__PURE__ */ e(vt, { text: t.subtitle })
|
|
483
484
|
}
|
|
484
485
|
)
|
|
485
486
|
]
|
|
@@ -497,16 +498,16 @@ const We = ({
|
|
|
497
498
|
minWidth: t.rightSideText ? "var(--malachite-text-right-side-text-min-width, 80px)" : 0,
|
|
498
499
|
flexShrink: 1,
|
|
499
500
|
display: "flex",
|
|
500
|
-
justifyContent:
|
|
501
|
+
justifyContent: o
|
|
501
502
|
},
|
|
502
503
|
children: t.rightSideText && /* @__PURE__ */ e(
|
|
503
504
|
"span",
|
|
504
505
|
{
|
|
505
|
-
ref:
|
|
506
|
+
ref: h,
|
|
506
507
|
style: {
|
|
507
508
|
fontSize: "var(--malachite-text-right-side-text-font-size, 12px)",
|
|
508
509
|
fontWeight: 400,
|
|
509
|
-
color:
|
|
510
|
+
color: c,
|
|
510
511
|
whiteSpace: "nowrap",
|
|
511
512
|
overflow: "hidden",
|
|
512
513
|
textOverflow: "ellipsis",
|
|
@@ -517,7 +518,7 @@ const We = ({
|
|
|
517
518
|
)
|
|
518
519
|
}
|
|
519
520
|
),
|
|
520
|
-
|
|
521
|
+
!E && w
|
|
521
522
|
]
|
|
522
523
|
}
|
|
523
524
|
)
|
|
@@ -528,18 +529,18 @@ const We = ({
|
|
|
528
529
|
$t,
|
|
529
530
|
{
|
|
530
531
|
text: It([
|
|
531
|
-
["label",
|
|
532
|
+
["label", D.label && t.label],
|
|
532
533
|
[
|
|
533
534
|
"subtitle",
|
|
534
|
-
|
|
535
|
+
D.subtitle && t.subtitle && /* @__PURE__ */ e(vt, { text: t.subtitle })
|
|
535
536
|
],
|
|
536
|
-
["rightSide",
|
|
537
|
+
["rightSide", D.rightSide && t.rightSideText]
|
|
537
538
|
]),
|
|
538
|
-
shouldShow:
|
|
539
|
+
shouldShow: i,
|
|
539
540
|
showOnFocus: r,
|
|
540
541
|
isShrinkable: !0,
|
|
541
542
|
describesTrigger: !1,
|
|
542
|
-
children:
|
|
543
|
+
children: g
|
|
543
544
|
}
|
|
544
545
|
);
|
|
545
546
|
}, re = Dt.forwardRef((t, a) => {
|
|
@@ -548,80 +549,80 @@ const We = ({
|
|
|
548
549
|
onItemSelected: u,
|
|
549
550
|
selectedItem: d,
|
|
550
551
|
menuLoading: S,
|
|
551
|
-
emptyMessage:
|
|
552
|
+
emptyMessage: k,
|
|
552
553
|
autoFocus: p,
|
|
553
554
|
positioned: T,
|
|
554
|
-
onDismiss:
|
|
555
|
-
keyboardNavigation:
|
|
556
|
-
onKeyboardNavigation:
|
|
557
|
-
subtitleLayout:
|
|
555
|
+
onDismiss: $,
|
|
556
|
+
keyboardNavigation: L,
|
|
557
|
+
onKeyboardNavigation: E,
|
|
558
|
+
subtitleLayout: w,
|
|
558
559
|
size: R,
|
|
559
|
-
style:
|
|
560
|
-
} = t,
|
|
560
|
+
style: N
|
|
561
|
+
} = t, h = m(null), D = Ce("dropdown", !0, h);
|
|
561
562
|
return le(() => {
|
|
562
563
|
Ne();
|
|
563
|
-
}, []), ke(
|
|
564
|
+
}, []), ke(h, !0), Ft(() => {
|
|
564
565
|
var o;
|
|
565
566
|
if (!p || !T)
|
|
566
567
|
return;
|
|
567
|
-
const i = Wt(
|
|
568
|
-
(o = i.find((
|
|
568
|
+
const i = Wt(h.current);
|
|
569
|
+
(o = i.find((g) => g.dataset.selected === "true") ?? i[0] ?? h.current) == null || o.focus();
|
|
569
570
|
}, [p, T]), /* @__PURE__ */ e(
|
|
570
571
|
"div",
|
|
571
572
|
{
|
|
572
573
|
ref: (i) => {
|
|
573
|
-
|
|
574
|
+
h.current = i, typeof a == "function" ? a(i) : a && (a.current = i);
|
|
574
575
|
},
|
|
575
|
-
...
|
|
576
|
+
...D,
|
|
576
577
|
tabIndex: -1,
|
|
577
578
|
onKeyDown: (i) => {
|
|
578
|
-
var
|
|
579
|
+
var x;
|
|
579
580
|
if (i.key === "Tab") {
|
|
580
|
-
|
|
581
|
+
$();
|
|
581
582
|
return;
|
|
582
583
|
}
|
|
583
|
-
const c = Wt(
|
|
584
|
+
const c = Wt(h.current);
|
|
584
585
|
if (c.length === 0)
|
|
585
586
|
return;
|
|
586
|
-
const o = c.indexOf(document.activeElement),
|
|
587
|
+
const o = c.indexOf(document.activeElement), g = {
|
|
587
588
|
ArrowDown: o + 1,
|
|
588
589
|
ArrowUp: o - 1,
|
|
589
590
|
Home: 0,
|
|
590
591
|
End: c.length - 1
|
|
591
592
|
}[i.key];
|
|
592
|
-
|
|
593
|
+
g !== void 0 && (i.preventDefault(), E(), (x = c[Math.min(Math.max(g, 0), c.length - 1)]) == null || x.focus());
|
|
593
594
|
},
|
|
594
595
|
style: {
|
|
595
|
-
background:
|
|
596
|
-
border:
|
|
597
|
-
borderRadius:
|
|
598
|
-
boxShadow:
|
|
596
|
+
background: xt.standard.background,
|
|
597
|
+
border: xt.standard.border,
|
|
598
|
+
borderRadius: xt.standard.radius,
|
|
599
|
+
boxShadow: xt.standard.shadow,
|
|
599
600
|
maxHeight: Te,
|
|
600
601
|
overflow: "hidden",
|
|
601
602
|
display: "flex",
|
|
602
603
|
flexDirection: "column",
|
|
603
604
|
fontSize: me[R],
|
|
604
|
-
...
|
|
605
|
+
...N
|
|
605
606
|
},
|
|
606
|
-
children: S ? /* @__PURE__ */
|
|
607
|
+
children: S ? /* @__PURE__ */ v("div", { style: Yt, children: [
|
|
607
608
|
/* @__PURE__ */ e(fe, { size: "xxxsmall" }),
|
|
608
609
|
/* @__PURE__ */ e("span", { children: "Loading…" })
|
|
609
|
-
] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Yt, children:
|
|
610
|
+
] }) : r.length === 0 ? /* @__PURE__ */ e("div", { style: Yt, children: k }) : /* @__PURE__ */ e(
|
|
610
611
|
"div",
|
|
611
612
|
{
|
|
612
613
|
style: {
|
|
613
614
|
display: "flex",
|
|
614
615
|
flexDirection: "column",
|
|
615
616
|
gap: 4,
|
|
616
|
-
padding:
|
|
617
|
+
padding: xt.standard.padding,
|
|
617
618
|
overflowY: "auto",
|
|
618
619
|
scrollbarWidth: "thin",
|
|
619
620
|
scrollbarColor: "var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent"
|
|
620
621
|
},
|
|
621
622
|
children: r.map((i, c) => {
|
|
622
|
-
const o = r[c - 1],
|
|
623
|
-
return /* @__PURE__ */
|
|
624
|
-
|
|
623
|
+
const o = r[c - 1], g = !!i.group && (!o || o.group !== i.group);
|
|
624
|
+
return /* @__PURE__ */ v("div", { style: { flexShrink: 0 }, children: [
|
|
625
|
+
g && /* @__PURE__ */ e(
|
|
625
626
|
"div",
|
|
626
627
|
{
|
|
627
628
|
style: {
|
|
@@ -640,9 +641,9 @@ const We = ({
|
|
|
640
641
|
{
|
|
641
642
|
item: i,
|
|
642
643
|
onItemSelected: u,
|
|
643
|
-
subtitleLayout:
|
|
644
|
+
subtitleLayout: w,
|
|
644
645
|
selected: i.id === (d == null ? void 0 : d.id) || !1,
|
|
645
|
-
showTooltipOnFocus:
|
|
646
|
+
showTooltipOnFocus: L
|
|
646
647
|
}
|
|
647
648
|
)
|
|
648
649
|
] }, i.id);
|
|
@@ -660,212 +661,212 @@ const ur = ({
|
|
|
660
661
|
value: u,
|
|
661
662
|
disabled: d = !1,
|
|
662
663
|
error: S,
|
|
663
|
-
tone:
|
|
664
|
+
tone: k,
|
|
664
665
|
label: p,
|
|
665
666
|
hint: T,
|
|
666
|
-
rightSideContent:
|
|
667
|
-
tooltip:
|
|
668
|
-
name:
|
|
669
|
-
required:
|
|
667
|
+
rightSideContent: $,
|
|
668
|
+
tooltip: L,
|
|
669
|
+
name: E,
|
|
670
|
+
required: w = !1,
|
|
670
671
|
requiredIndicator: R,
|
|
671
|
-
loading:
|
|
672
|
-
menuLoading:
|
|
673
|
-
formControl:
|
|
672
|
+
loading: N,
|
|
673
|
+
menuLoading: h,
|
|
674
|
+
formControl: D,
|
|
674
675
|
description: W,
|
|
675
676
|
helperText: i,
|
|
676
677
|
placeholder: c,
|
|
677
678
|
search: o = !1,
|
|
678
|
-
showSubtitleInTrigger:
|
|
679
|
-
subtitleLayout:
|
|
680
|
-
clearable:
|
|
681
|
-
size:
|
|
679
|
+
showSubtitleInTrigger: g = !1,
|
|
680
|
+
subtitleLayout: x = "inline",
|
|
681
|
+
clearable: G = !1,
|
|
682
|
+
size: C = "large",
|
|
682
683
|
fullWidth: wt = !1,
|
|
683
|
-
width:
|
|
684
|
-
minWidth:
|
|
685
|
-
menuAlign:
|
|
686
|
-
id:
|
|
684
|
+
width: O,
|
|
685
|
+
minWidth: at,
|
|
686
|
+
menuAlign: ot = "start",
|
|
687
|
+
id: j,
|
|
687
688
|
"aria-label": St,
|
|
688
|
-
"aria-labelledby":
|
|
689
|
+
"aria-labelledby": z
|
|
689
690
|
}) => {
|
|
690
|
-
const { controlId:
|
|
691
|
-
id:
|
|
691
|
+
const { controlId: lt, labelId: H, descriptionId: st, hintId: ct, helperTextId: dt } = ue({
|
|
692
|
+
id: j,
|
|
692
693
|
label: p,
|
|
693
694
|
description: W,
|
|
694
695
|
hint: T,
|
|
695
696
|
helperText: !0
|
|
696
|
-
}), [
|
|
697
|
-
|
|
698
|
-
|
|
697
|
+
}), [b, _] = F(!1), [Tt, K] = F(r), I = u ?? Tt, A = t.find((n) => n.id === I), ut = G && I !== void 0 && I !== "" && !d, B = g && !o && !!(A != null && A.subtitle), y = `Clear ${p ?? c ?? "selection"}`, tt = m(r);
|
|
698
|
+
Ft(() => {
|
|
699
|
+
tt.current !== r && (tt.current = r, K(r));
|
|
699
700
|
}, [r]);
|
|
700
|
-
const [
|
|
701
|
+
const [et, M] = F(""), [Ot, pt] = F(!1), [l, rt] = F(!1), zt = m(null), Et = m(null), Z = m(null), [f, Gt] = F(null), Nt = m(!0), q = Mt(() => {
|
|
701
702
|
const n = Et.current, s = n instanceof HTMLButtonElement ? n : (n == null ? void 0 : n.querySelector("input")) ?? null;
|
|
702
|
-
if (!(!s || s ===
|
|
703
|
+
if (!(!s || s === Rt())) {
|
|
703
704
|
if (!o) {
|
|
704
705
|
s.focus();
|
|
705
706
|
return;
|
|
706
707
|
}
|
|
707
|
-
Nt.current = !1, s.focus(),
|
|
708
|
+
Nt.current = !1, s.focus(), Rt() !== s && (Nt.current = !0);
|
|
708
709
|
}
|
|
709
710
|
}, [o]), jt = Mt(
|
|
710
711
|
(n) => {
|
|
711
712
|
var s;
|
|
712
|
-
n.stopPropagation(),
|
|
713
|
+
n.stopPropagation(), K(void 0), (s = V.current) == null || s.call(V, At.current), a == null || a(void 0), q();
|
|
713
714
|
},
|
|
714
|
-
[a,
|
|
715
|
-
),
|
|
715
|
+
[a, q]
|
|
716
|
+
), U = Mt(() => {
|
|
716
717
|
const n = Et.current;
|
|
717
718
|
n && Gt(
|
|
718
|
-
ye(
|
|
719
|
+
ye(Z.current, {
|
|
719
720
|
triggerRect: n.getBoundingClientRect(),
|
|
720
721
|
preset: "standard",
|
|
721
|
-
minWidth:
|
|
722
|
-
align:
|
|
722
|
+
minWidth: at,
|
|
723
|
+
align: ot === "end" ? "right" : "left",
|
|
723
724
|
viewportWidth: window.innerWidth,
|
|
724
725
|
viewportHeight: window.innerHeight
|
|
725
726
|
})
|
|
726
727
|
);
|
|
727
|
-
}, [
|
|
728
|
-
|
|
729
|
-
if (!
|
|
730
|
-
Gt(null),
|
|
728
|
+
}, [at, ot]);
|
|
729
|
+
Ft(() => {
|
|
730
|
+
if (!b) {
|
|
731
|
+
Gt(null), pt(!1);
|
|
731
732
|
return;
|
|
732
733
|
}
|
|
733
|
-
|
|
734
|
-
const n = (
|
|
735
|
-
var
|
|
736
|
-
const
|
|
737
|
-
!
|
|
734
|
+
U();
|
|
735
|
+
const n = (Y) => {
|
|
736
|
+
var ht, gt, Bt;
|
|
737
|
+
const P = Y.composedPath(), Q = zt.current, J = Z.current, Lt = !!Q && P.includes(Q), Kt = !!J && P.includes(J);
|
|
738
|
+
!Lt && !Kt && (_(!1), o && M(""), (ht = Z.current) != null && ht.contains(Rt()) && q(), (gt = zt.current) != null && gt.contains(Rt()) || (Bt = X.current) == null || Bt.call(X));
|
|
738
739
|
}, s = be(() => {
|
|
739
|
-
_(!1), o &&
|
|
740
|
-
}),
|
|
741
|
-
let
|
|
740
|
+
_(!1), o && M(""), q();
|
|
741
|
+
}), nt = () => U();
|
|
742
|
+
let ft = 0, Ct = "";
|
|
742
743
|
const kt = () => {
|
|
743
|
-
const
|
|
744
|
-
if (
|
|
745
|
-
const
|
|
746
|
-
if (we(
|
|
747
|
-
_(!1), o &&
|
|
744
|
+
const Y = Et.current;
|
|
745
|
+
if (Y) {
|
|
746
|
+
const P = Y.getBoundingClientRect();
|
|
747
|
+
if (we(P, window.innerWidth, window.innerHeight)) {
|
|
748
|
+
_(!1), o && M("");
|
|
748
749
|
return;
|
|
749
750
|
}
|
|
750
|
-
const
|
|
751
|
-
|
|
751
|
+
const Q = Se(P);
|
|
752
|
+
Q !== Ct && (Ct = Q, U());
|
|
752
753
|
}
|
|
753
|
-
|
|
754
|
+
ft = requestAnimationFrame(kt);
|
|
754
755
|
};
|
|
755
|
-
return
|
|
756
|
-
cancelAnimationFrame(
|
|
756
|
+
return ft = requestAnimationFrame(kt), document.addEventListener("mousedown", n), window.addEventListener("scroll", nt, !0), window.addEventListener("resize", nt), () => {
|
|
757
|
+
cancelAnimationFrame(ft), document.removeEventListener("mousedown", n), s(), window.removeEventListener("scroll", nt, !0), window.removeEventListener("resize", nt);
|
|
757
758
|
};
|
|
758
|
-
}, [
|
|
759
|
-
if (!
|
|
759
|
+
}, [b, o, U, q]), oe(() => {
|
|
760
|
+
if (!b)
|
|
760
761
|
return;
|
|
761
|
-
|
|
762
|
-
const n =
|
|
762
|
+
U();
|
|
763
|
+
const n = Z.current;
|
|
763
764
|
if (!n || typeof ResizeObserver > "u")
|
|
764
765
|
return;
|
|
765
|
-
const s = new ResizeObserver(() =>
|
|
766
|
+
const s = new ResizeObserver(() => U());
|
|
766
767
|
return s.observe(n), () => s.disconnect();
|
|
767
|
-
}, [
|
|
768
|
-
const
|
|
768
|
+
}, [b, U]);
|
|
769
|
+
const V = m(void 0), X = m(void 0), At = m(""), ne = (n) => {
|
|
769
770
|
var s;
|
|
770
|
-
|
|
771
|
+
K(n == null ? void 0 : n.id), (s = V.current) == null || s.call(V, (n == null ? void 0 : n.id) ?? At.current), _(!1), o && M(""), a == null || a(n == null ? void 0 : n.id), q();
|
|
771
772
|
}, Ht = () => {
|
|
772
|
-
_(!1), o &&
|
|
773
|
+
_(!1), o && M(""), q();
|
|
773
774
|
}, ie = () => {
|
|
774
|
-
|
|
775
|
-
const n = Wt(
|
|
775
|
+
rt(!0);
|
|
776
|
+
const n = Wt(Z.current)[0];
|
|
776
777
|
if (n) {
|
|
777
778
|
n.focus();
|
|
778
779
|
return;
|
|
779
780
|
}
|
|
780
|
-
|
|
781
|
-
}, ae = o &&
|
|
781
|
+
pt(!0), _(!0);
|
|
782
|
+
}, ae = o && et ? t.filter((n) => $e(n, et)) : t;
|
|
782
783
|
return /* @__PURE__ */ e(
|
|
783
784
|
de,
|
|
784
785
|
{
|
|
785
786
|
fullWidth: wt,
|
|
786
787
|
label: p,
|
|
787
788
|
hint: T,
|
|
788
|
-
rightSideContent:
|
|
789
|
-
tooltip:
|
|
790
|
-
name:
|
|
791
|
-
required:
|
|
789
|
+
rightSideContent: $,
|
|
790
|
+
tooltip: L,
|
|
791
|
+
name: E,
|
|
792
|
+
required: w,
|
|
792
793
|
requiredIndicator: R,
|
|
793
|
-
loading:
|
|
794
|
-
formControl:
|
|
794
|
+
loading: N,
|
|
795
|
+
formControl: D,
|
|
795
796
|
description: W,
|
|
796
|
-
controlId:
|
|
797
|
-
labelId:
|
|
798
|
-
descriptionId:
|
|
799
|
-
hintId:
|
|
800
|
-
loadingComponent:
|
|
797
|
+
controlId: lt,
|
|
798
|
+
labelId: H,
|
|
799
|
+
descriptionId: st,
|
|
800
|
+
hintId: ct,
|
|
801
|
+
loadingComponent: O === void 0 ? /* @__PURE__ */ e(
|
|
801
802
|
qt,
|
|
802
803
|
{
|
|
803
|
-
heightClass:
|
|
804
|
+
heightClass: bt[C],
|
|
804
805
|
helperText: !!i,
|
|
805
806
|
helperTextMarginTop: !0
|
|
806
807
|
}
|
|
807
|
-
) : /* @__PURE__ */ e("div", { style: Ut(
|
|
808
|
+
) : /* @__PURE__ */ e("div", { style: Ut(O), children: /* @__PURE__ */ e(
|
|
808
809
|
qt,
|
|
809
810
|
{
|
|
810
|
-
heightClass:
|
|
811
|
+
heightClass: bt[C],
|
|
811
812
|
helperText: !!i,
|
|
812
813
|
helperTextMarginTop: !0
|
|
813
814
|
}
|
|
814
815
|
) }),
|
|
815
|
-
children: ({ error: n, message: s, onFieldChange:
|
|
816
|
-
|
|
817
|
-
const kt = S ?? n,
|
|
818
|
-
lt,
|
|
816
|
+
children: ({ error: n, message: s, onFieldChange: nt, onFieldBlur: ft, emptyValue: Ct }) => {
|
|
817
|
+
V.current = nt, X.current = ft, At.current = Ct;
|
|
818
|
+
const kt = S ?? n, Y = S === !1 ? void 0 : s, P = `${dt}-error`, Q = [
|
|
819
819
|
st,
|
|
820
|
-
|
|
821
|
-
|
|
820
|
+
ct,
|
|
821
|
+
i ? dt : void 0,
|
|
822
|
+
Y ? P : void 0
|
|
822
823
|
].filter(Boolean).join(" ") || void 0;
|
|
823
|
-
return /* @__PURE__ */
|
|
824
|
-
/* @__PURE__ */
|
|
824
|
+
return /* @__PURE__ */ v(yt, { children: [
|
|
825
|
+
/* @__PURE__ */ v(
|
|
825
826
|
"div",
|
|
826
827
|
{
|
|
827
828
|
ref: zt,
|
|
828
829
|
className: "relative w-full",
|
|
829
|
-
style: Ut(
|
|
830
|
-
onBlur: (
|
|
831
|
-
var
|
|
832
|
-
const
|
|
833
|
-
|
|
830
|
+
style: Ut(O),
|
|
831
|
+
onBlur: (J) => {
|
|
832
|
+
var ht, gt;
|
|
833
|
+
const Lt = J.relatedTarget;
|
|
834
|
+
J.currentTarget.contains(Lt) || ((ht = Z.current) == null ? void 0 : ht.contains(Lt)) === !0 || (gt = X.current) == null || gt.call(X);
|
|
834
835
|
},
|
|
835
836
|
children: [
|
|
836
|
-
|
|
837
|
+
ut && !o && /* @__PURE__ */ e(
|
|
837
838
|
"button",
|
|
838
839
|
{
|
|
839
840
|
type: "button",
|
|
840
841
|
onClick: jt,
|
|
841
|
-
"aria-label":
|
|
842
|
-
className: `absolute ${
|
|
842
|
+
"aria-label": y,
|
|
843
|
+
className: `absolute ${B ? Ae[C] : "top-1/2 -translate-y-1/2"} z-10 flex items-center
|
|
843
844
|
justify-center rounded-full text-[var(--malachite-text-placeholder)]
|
|
844
845
|
hover:text-[var(--malachite-text-primary)] transition-colors
|
|
845
|
-
focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${ze[
|
|
846
|
+
focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${ze[C]}`,
|
|
846
847
|
children: /* @__PURE__ */ e(Jt, { size: 13 })
|
|
847
848
|
}
|
|
848
849
|
),
|
|
849
850
|
/* @__PURE__ */ e(
|
|
850
851
|
ee,
|
|
851
852
|
{
|
|
852
|
-
hasClear:
|
|
853
|
+
hasClear: ut,
|
|
853
854
|
onClear: jt,
|
|
854
|
-
clearLabel:
|
|
855
|
+
clearLabel: y,
|
|
855
856
|
ref: Et,
|
|
856
|
-
isOpen:
|
|
857
|
-
onClick: (
|
|
858
|
-
d || (
|
|
857
|
+
isOpen: b,
|
|
858
|
+
onClick: (J) => {
|
|
859
|
+
d || (rt(!!J), _(!b));
|
|
859
860
|
},
|
|
860
|
-
selectedItem:
|
|
861
|
+
selectedItem: A,
|
|
861
862
|
disabled: d,
|
|
862
863
|
error: kt,
|
|
863
|
-
tone:
|
|
864
|
+
tone: k,
|
|
864
865
|
placeholder: c,
|
|
865
866
|
search: o,
|
|
866
|
-
showSubtitleInTrigger:
|
|
867
|
-
searchQuery:
|
|
868
|
-
onSearchChange:
|
|
867
|
+
showSubtitleInTrigger: g,
|
|
868
|
+
searchQuery: et,
|
|
869
|
+
onSearchChange: M,
|
|
869
870
|
onFocusOpen: () => {
|
|
870
871
|
if (!Nt.current) {
|
|
871
872
|
Nt.current = !0;
|
|
@@ -877,44 +878,44 @@ const ur = ({
|
|
|
877
878
|
d || ie();
|
|
878
879
|
},
|
|
879
880
|
onTabAway: () => {
|
|
880
|
-
|
|
881
|
+
b && Ht();
|
|
881
882
|
},
|
|
882
|
-
size:
|
|
883
|
-
controlId:
|
|
884
|
-
hasCallerId: !!
|
|
885
|
-
labelId:
|
|
886
|
-
describedBy:
|
|
887
|
-
required:
|
|
883
|
+
size: C,
|
|
884
|
+
controlId: lt,
|
|
885
|
+
hasCallerId: !!j,
|
|
886
|
+
labelId: H,
|
|
887
|
+
describedBy: Q,
|
|
888
|
+
required: w,
|
|
888
889
|
ariaLabel: St,
|
|
889
|
-
ariaLabelledBy:
|
|
890
|
+
ariaLabelledBy: z
|
|
890
891
|
}
|
|
891
892
|
),
|
|
892
|
-
|
|
893
|
+
b && ce(
|
|
893
894
|
/* @__PURE__ */ e(
|
|
894
895
|
re,
|
|
895
896
|
{
|
|
896
|
-
ref:
|
|
897
|
+
ref: Z,
|
|
897
898
|
style: {
|
|
898
899
|
position: "fixed",
|
|
899
|
-
top: (
|
|
900
|
-
left: (
|
|
901
|
-
width:
|
|
902
|
-
maxHeight:
|
|
903
|
-
visibility:
|
|
904
|
-
opacity:
|
|
900
|
+
top: (f == null ? void 0 : f.top) ?? 0,
|
|
901
|
+
left: (f == null ? void 0 : f.left) ?? 0,
|
|
902
|
+
width: f == null ? void 0 : f.width,
|
|
903
|
+
maxHeight: f == null ? void 0 : f.maxHeight,
|
|
904
|
+
visibility: f ? "visible" : "hidden",
|
|
905
|
+
opacity: f ? 1 : 0
|
|
905
906
|
},
|
|
906
907
|
items: ae,
|
|
907
908
|
onItemSelected: ne,
|
|
908
|
-
selectedItem:
|
|
909
|
-
menuLoading:
|
|
909
|
+
selectedItem: A,
|
|
910
|
+
menuLoading: h,
|
|
910
911
|
emptyMessage: t.length === 0 ? "No options available" : "No results found",
|
|
911
|
-
subtitleLayout:
|
|
912
|
-
size:
|
|
912
|
+
subtitleLayout: x,
|
|
913
|
+
size: C,
|
|
913
914
|
autoFocus: !o || Ot,
|
|
914
|
-
positioned:
|
|
915
|
+
positioned: f !== null,
|
|
915
916
|
onDismiss: Ht,
|
|
916
917
|
keyboardNavigation: l,
|
|
917
|
-
onKeyboardNavigation: () =>
|
|
918
|
+
onKeyboardNavigation: () => rt(!0)
|
|
918
919
|
}
|
|
919
920
|
),
|
|
920
921
|
document.body
|
|
@@ -925,12 +926,12 @@ const ur = ({
|
|
|
925
926
|
i && /* @__PURE__ */ e(
|
|
926
927
|
"div",
|
|
927
928
|
{
|
|
928
|
-
id:
|
|
929
|
+
id: dt,
|
|
929
930
|
className: "mt-1 text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
|
|
930
931
|
children: i
|
|
931
932
|
}
|
|
932
933
|
),
|
|
933
|
-
/* @__PURE__ */ e(pe, { id:
|
|
934
|
+
/* @__PURE__ */ e(pe, { id: P, message: Y, spaced: !0 })
|
|
934
935
|
] });
|
|
935
936
|
}
|
|
936
937
|
}
|