@stackone/malachite 2.42.1 → 2.42.2

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