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