@stackone/malachite 2.27.0 → 2.27.1

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