@telegraph/combobox 0.0.49 → 0.0.51

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 (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/esm/index.mjs +483 -300
  5. package/dist/esm/index.mjs.map +1 -1
  6. package/dist/types/Combobox/Combobox.d.ts +20 -10
  7. package/dist/types/Combobox/Combobox.d.ts.map +1 -1
  8. package/dist/types/Combobox/Combobox.helpers.d.ts +15 -3
  9. package/dist/types/Combobox/Combobox.helpers.d.ts.map +1 -1
  10. package/package.json +6 -5
package/dist/esm/index.mjs CHANGED
@@ -1,24 +1,50 @@
1
- import { jsx as c, jsxs as w, Fragment as V } from "react/jsx-runtime";
2
- import { DismissableLayer as G } from "@radix-ui/react-dismissable-layer";
3
- import { useControllableState as M } from "@radix-ui/react-use-controllable-state";
4
- import * as Y from "@radix-ui/react-visually-hidden";
5
- import { Button as v } from "@telegraph/button";
6
- import { useComposedRefs as K } from "@telegraph/compose-refs";
7
- import { RefToTgphRef as $ } from "@telegraph/helpers";
8
- import { Lucide as R, Icon as F } from "@telegraph/icon";
9
- import { Input as X } from "@telegraph/input";
10
- import { Stack as I, Box as A } from "@telegraph/layout";
11
- import { Menu as D } from "@telegraph/menu";
12
- import { Tag as O } from "@telegraph/tag";
13
- import { Tooltip as q } from "@telegraph/tooltip";
14
- import { Text as L } from "@telegraph/typography";
1
+ import { jsx as l, jsxs as S, Fragment as K } from "react/jsx-runtime";
2
+ import { DismissableLayer as q } from "@radix-ui/react-dismissable-layer";
3
+ import * as U from "@radix-ui/react-portal";
4
+ import { useControllableState as W } from "@radix-ui/react-use-controllable-state";
5
+ import * as J from "@radix-ui/react-visually-hidden";
6
+ import { Button as E } from "@telegraph/button";
7
+ import { useComposedRefs as j } from "@telegraph/compose-refs";
8
+ import { RefToTgphRef as Z } from "@telegraph/helpers";
9
+ import { Lucide as w, Icon as _ } from "@telegraph/icon";
10
+ import { Input as ee } from "@telegraph/input";
11
+ import { Stack as I, Box as $ } from "@telegraph/layout";
12
+ import { Menu as Q } from "@telegraph/menu";
13
+ import { motion as B, AnimatePresence as P } from "@telegraph/motion";
14
+ import { Tag as L } from "@telegraph/tag";
15
+ import { Tooltip as te } from "@telegraph/tooltip";
16
+ import { Text as M } from "@telegraph/typography";
15
17
  import i from "react";
16
- const z = {
18
+ const oe = {
17
19
  0: "5",
18
20
  1: "6",
19
21
  2: "8",
20
22
  3: "10"
21
- }, C = (t) => Array.isArray(t), k = (t) => typeof t == "object" && !Array.isArray(t) || !t, N = ["ArrowDown", "PageUp", "Home"], U = ["ArrowUp", "PageDown", "End"], j = ["Enter", " "], m = i.createContext({
23
+ }, k = (t) => Array.isArray(t), T = (t) => typeof t == "object" && !Array.isArray(t) || typeof t == "string" || !t, re = (t) => {
24
+ const n = (a, u = []) => (i.Children.toArray(a).forEach((r) => {
25
+ i.isValidElement(r) && (r.props.value ? u.push(r) : r.props.children && n(r.props.children, u));
26
+ }), u);
27
+ return n(t).map((a) => {
28
+ var o;
29
+ const u = a;
30
+ return {
31
+ value: u.props.value,
32
+ label: ((o = u.props) == null ? void 0 : o.label) || u.props.children || u.props.value
33
+ };
34
+ });
35
+ }, C = (t, n) => {
36
+ if (t)
37
+ return n === !0 ? t == null ? void 0 : t.value : t;
38
+ }, F = (t, n, e) => {
39
+ if (t && !(!n || n.length === 0))
40
+ return n.find(
41
+ (p) => p.value === C(t, e)
42
+ );
43
+ }, ne = ({
44
+ label: t,
45
+ value: n,
46
+ searchQuery: e
47
+ }) => (n == null ? void 0 : n.toLowerCase().includes(e.toLowerCase())) || (t == null ? void 0 : t.toLowerCase().includes(e.toLowerCase())), ae = ["ArrowDown", "PageUp", "Home"], ie = ["ArrowUp", "PageDown", "End"], z = ["Enter", " "], x = i.createContext({
22
48
  value: void 0,
23
49
  onValueChange: () => {
24
50
  },
@@ -30,168 +56,277 @@ const z = {
30
56
  onOpenToggle: () => {
31
57
  },
32
58
  clearable: !1,
33
- disabled: !1
34
- }), J = ({
59
+ disabled: !1,
60
+ options: [],
61
+ legacyBehavior: !1
62
+ }), ce = ({
35
63
  modal: t = !0,
36
- closeOnSelect: l = !0,
64
+ closeOnSelect: n = !0,
37
65
  clearable: e = !1,
38
- disabled: u = !1,
39
- open: s,
40
- onOpenChange: a,
41
- defaultOpen: o,
42
- value: n,
43
- onValueChange: r,
44
- errored: g,
45
- placeholder: h,
46
- layout: b,
47
- ...p
66
+ disabled: p = !1,
67
+ legacyBehavior: a = !1,
68
+ open: u,
69
+ onOpenChange: o,
70
+ defaultOpen: r,
71
+ value: c,
72
+ onValueChange: g,
73
+ errored: y,
74
+ placeholder: v,
75
+ layout: d,
76
+ children: s,
77
+ ...f
48
78
  }) => {
49
- const d = i.useId(), x = i.useId(), y = i.useRef(null), f = i.useRef(null), S = i.useRef(null), [T, P] = i.useState(""), [E = !1, Q] = M({
50
- prop: s,
51
- defaultProp: o,
52
- onChange: a
53
- }), H = i.useCallback(() => {
54
- Q((_) => !_);
55
- }, [Q]);
79
+ const m = i.useId(), b = i.useId(), h = i.useRef(null), R = i.useRef(null), D = i.useRef(null), V = i.useMemo(() => re(s), [s]), [Y, H] = i.useState(""), [O = !1, A] = W({
80
+ prop: u,
81
+ defaultProp: r,
82
+ onChange: o
83
+ }), N = i.useCallback(() => {
84
+ A((X) => !X);
85
+ }, [A]);
56
86
  return i.useEffect(() => {
57
- E || P("");
58
- }, [E]), /* @__PURE__ */ c(
59
- m.Provider,
87
+ O || H("");
88
+ }, [O]), /* @__PURE__ */ l(
89
+ x.Provider,
60
90
  {
61
91
  value: {
62
- contentId: d,
63
- triggerId: x,
64
- value: n,
92
+ contentId: m,
93
+ triggerId: b,
94
+ value: c,
65
95
  // Need to cast this to avoid type errors
66
96
  // because the type of onValueChange is not
67
97
  // consistent with the value type
68
- onValueChange: r,
69
- placeholder: h,
70
- open: E,
71
- setOpen: Q,
72
- onOpenToggle: H,
73
- closeOnSelect: l,
98
+ onValueChange: g,
99
+ placeholder: v,
100
+ open: O,
101
+ setOpen: A,
102
+ onOpenToggle: N,
103
+ closeOnSelect: n,
74
104
  clearable: e,
75
- disabled: u,
76
- searchQuery: T,
77
- setSearchQuery: P,
78
- triggerRef: y,
79
- searchRef: f,
80
- contentRef: S,
81
- errored: g,
82
- layout: b
105
+ disabled: p,
106
+ searchQuery: Y,
107
+ setSearchQuery: H,
108
+ triggerRef: h,
109
+ searchRef: R,
110
+ contentRef: D,
111
+ errored: y,
112
+ layout: d,
113
+ options: V,
114
+ legacyBehavior: a
83
115
  },
84
- children: /* @__PURE__ */ c(
85
- D.Root,
116
+ children: /* @__PURE__ */ l(
117
+ Q.Root,
86
118
  {
87
- open: E,
88
- onOpenChange: Q,
119
+ open: O,
120
+ onOpenChange: A,
89
121
  modal: t,
90
- ...p
122
+ ...f,
123
+ children: s
91
124
  }
92
125
  )
93
126
  }
94
127
  );
95
- }, W = ({ label: t, value: l, ...e }) => {
96
- const u = i.useContext(m);
97
- return /* @__PURE__ */ w(O.Root, { size: "1", layout: "position", ...e, children: [
98
- /* @__PURE__ */ c(O.Text, { children: t || l }),
99
- /* @__PURE__ */ c(
100
- O.Button,
101
- {
102
- icon: { icon: R.X, alt: `Remove ${l}` },
103
- onClick: (s) => {
104
- if (!u.onValueChange) return;
105
- const a = u.onValueChange, n = u.value.filter((r) => (r == null ? void 0 : r.value) !== l);
106
- a == null || a(n), s.stopPropagation(), s.preventDefault();
107
- }
108
- }
109
- )
110
- ] });
111
- }, Z = () => {
112
- var l, e;
113
- const t = i.useContext(m);
114
- if (t.value && C(t.value)) {
115
- const u = t.layout || "truncate", s = t.value.length - 2, a = s.toString().split("");
116
- return t.value.length === 0 ? /* @__PURE__ */ c(v.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ w(
128
+ }, se = ({ value: t, ...n }) => {
129
+ const e = i.useContext(x), p = i.useMemo(() => {
130
+ const a = e.options.find((r) => r.value === t);
131
+ if (a) return a.label || a.value;
132
+ if (!e.value) return;
133
+ const o = e.value.find(
134
+ (r) => C(r, e.legacyBehavior) === t
135
+ );
136
+ if (o) return o;
137
+ }, [e.options, e.value, t, e.legacyBehavior]);
138
+ return /* @__PURE__ */ S(
139
+ L.Root,
140
+ {
141
+ as: B.span,
142
+ initializeWithAnimation: !1,
143
+ initial: { opacity: 0, scale: 0.5 },
144
+ animate: { opacity: 1, scale: 1 },
145
+ exit: { opacity: 0, scale: 0.5 },
146
+ transition: { duration: 100, type: "spring" },
147
+ "tgph-motion-key": t,
148
+ size: "1",
149
+ layout: "position",
150
+ ...n,
151
+ children: [
152
+ /* @__PURE__ */ l(L.Text, { children: p }),
153
+ /* @__PURE__ */ l(
154
+ L.Button,
155
+ {
156
+ icon: { icon: w.X, alt: `Remove ${t}` },
157
+ onClick: (a) => {
158
+ if (!e.onValueChange) return;
159
+ const u = e.onValueChange, r = e.value.filter((c) => C(c, e.legacyBehavior) !== t);
160
+ u == null || u(r), a.stopPropagation(), a.preventDefault();
161
+ }
162
+ }
163
+ )
164
+ ]
165
+ }
166
+ );
167
+ }, le = () => {
168
+ const t = i.useContext(x);
169
+ if (t.value && k(t.value)) {
170
+ const n = t.layout || "truncate", e = t.value.length - 2, p = e.toString().split("");
171
+ return t.value.length === 0 ? /* @__PURE__ */ l(E.Text, { color: "gray", children: t.placeholder }) : /* @__PURE__ */ S(
117
172
  I,
118
173
  {
119
174
  gap: "1",
120
175
  w: "full",
121
- wrap: u === "wrap" ? "wrap" : "nowrap",
176
+ wrap: n === "wrap" ? "wrap" : "nowrap",
122
177
  align: "center",
123
178
  style: {
124
179
  position: "relative",
125
180
  flexGrow: 1
126
181
  },
127
182
  children: [
128
- t.value.map((o, n) => {
129
- if (o != null && o.value && (u === "truncate" && n <= 1 || u === "wrap"))
130
- return /* @__PURE__ */ c($, { children: /* @__PURE__ */ c(W, { ...o }) }, o.value);
131
- }),
132
- u === "truncate" && t.value.length > 2 && /* @__PURE__ */ c(
133
- I,
183
+ /* @__PURE__ */ l(
184
+ P,
185
+ {
186
+ presenceMap: t.value.map((a) => ({
187
+ "tgph-motion-key": C(a, t.legacyBehavior) || "",
188
+ value: !0
189
+ })),
190
+ children: t.value.map((a, u) => {
191
+ const o = C(a, t.legacyBehavior);
192
+ if (o && (n === "truncate" && u <= 1 || n === "wrap"))
193
+ return /* @__PURE__ */ l(Z, { children: /* @__PURE__ */ l(se, { value: o }) }, o);
194
+ })
195
+ }
196
+ ),
197
+ /* @__PURE__ */ l(
198
+ P,
134
199
  {
135
- h: "full",
136
- pr: "1",
137
- pl: "8",
138
- align: "center",
139
- "aria-label": `${s} more selected`,
140
- position: "absolute",
141
- right: "0",
142
- style: {
143
- backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
144
- },
145
- children: /* @__PURE__ */ w(L, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
146
- "+",
147
- a.map((o) => /* @__PURE__ */ c(A, { as: "span", w: "2", display: "inline-block", children: o }, o)),
148
- " ",
149
- "more"
150
- ] })
200
+ presenceMap: [
201
+ {
202
+ "tgph-motion-key": "combobox-more",
203
+ value: !0
204
+ }
205
+ ],
206
+ children: n === "truncate" && t.value.length > 2 && /* @__PURE__ */ l(
207
+ I,
208
+ {
209
+ as: B.div,
210
+ initial: { opacity: 0 },
211
+ animate: { opacity: 1 },
212
+ exit: { opacity: 0 },
213
+ transition: { duration: 100, type: "spring" },
214
+ h: "full",
215
+ pr: "1",
216
+ pl: "8",
217
+ align: "center",
218
+ "aria-label": `${e} more selected`,
219
+ position: "absolute",
220
+ right: "0",
221
+ style: {
222
+ backgroundImage: "linear-gradient(to left, var(--tgph-surface-1) 0 60%, transparent 90% 100%)"
223
+ },
224
+ children: /* @__PURE__ */ S(M, { as: "span", size: "1", style: { whiteSpace: "nowrap" }, children: [
225
+ "+",
226
+ /* @__PURE__ */ S(
227
+ P,
228
+ {
229
+ presenceMap: p.map((a) => ({
230
+ "tgph-motion-key": a,
231
+ value: !0
232
+ })),
233
+ children: [
234
+ p.map((a) => /* @__PURE__ */ l(
235
+ $,
236
+ {
237
+ as: B.span,
238
+ initial: { opacity: 0 },
239
+ animate: { opacity: 1 },
240
+ exit: { opacity: 0 },
241
+ transition: { duration: 100, type: "spring" },
242
+ w: "2",
243
+ display: "inline-block",
244
+ "tgph-motion-key": a,
245
+ children: a
246
+ },
247
+ a
248
+ )),
249
+ " "
250
+ ]
251
+ }
252
+ ),
253
+ "more"
254
+ ] })
255
+ }
256
+ )
151
257
  }
152
258
  )
153
259
  ]
154
260
  }
155
261
  );
156
262
  }
157
- return /* @__PURE__ */ c(v.Text, { color: t.value ? "default" : "gray", children: ((l = t == null ? void 0 : t.value) == null ? void 0 : l.label) || ((e = t == null ? void 0 : t.value) == null ? void 0 : e.value) || t.placeholder });
158
- }, ee = ({ size: t = "2", ...l }) => {
159
- const e = i.useContext(m), u = i.useCallback(() => {
160
- var o, n, r;
161
- return e.value ? k(e.value) ? ((o = e.value) == null ? void 0 : o.label) || ((n = e.value) == null ? void 0 : n.value) || e.placeholder : ((r = e.value) == null ? void 0 : r.map((g) => g == null ? void 0 : g.label).join(", ")) || e.placeholder : e.placeholder;
162
- }, [e.value, e.placeholder]), s = i.useMemo(() => {
263
+ if (t && T(t.value)) {
264
+ const n = F(
265
+ t.value,
266
+ t.options,
267
+ t.legacyBehavior
268
+ );
269
+ return /* @__PURE__ */ l(E.Text, { color: t.value ? "default" : "gray", children: (n == null ? void 0 : n.label) || t.placeholder });
270
+ }
271
+ }, ue = ({ size: t = "2", ...n }) => {
272
+ const e = i.useContext(x), p = i.useCallback(() => {
163
273
  var o;
164
- if (C(e.value))
165
- return e.clearable && ((o = e.value) == null ? void 0 : o.length) > 0;
274
+ if (!e.value) return e.placeholder;
275
+ if (T(e.value)) {
276
+ const r = F(
277
+ e.value,
278
+ e.options,
279
+ e.legacyBehavior
280
+ );
281
+ return (r == null ? void 0 : r.label) || e.placeholder;
282
+ }
166
283
  if (k(e.value))
284
+ return ((o = e.value) == null ? void 0 : o.map((r) => {
285
+ const c = F(
286
+ r,
287
+ e.options,
288
+ e.legacyBehavior
289
+ );
290
+ return c == null ? void 0 : c.label;
291
+ }).join(", ")) || e.placeholder;
292
+ }, [
293
+ e.value,
294
+ e.placeholder,
295
+ e.options,
296
+ e.legacyBehavior
297
+ ]), a = i.useMemo(() => {
298
+ var o;
299
+ if (T(e.value))
167
300
  return e.clearable && e.value;
168
- }, [e.clearable, e.value]), a = () => {
169
- var o, n;
170
- if (C(e.value)) {
171
- const r = e.onValueChange;
172
- r == null || r([]);
173
- }
301
+ if (k(e.value))
302
+ return e.clearable && ((o = e.value) == null ? void 0 : o.length) > 0;
303
+ }, [e.clearable, e.value]), u = () => {
304
+ var o, r;
174
305
  if (k(e.value)) {
175
- const r = e.onValueChange;
176
- r == null || r(void 0);
306
+ const c = e.onValueChange;
307
+ c == null || c([]);
177
308
  }
178
- (n = (o = e.triggerRef) == null ? void 0 : o.current) == null || n.focus();
309
+ if (T(e.value)) {
310
+ const c = e.onValueChange;
311
+ c == null || c(void 0);
312
+ }
313
+ (r = (o = e.triggerRef) == null ? void 0 : o.current) == null || r.focus();
179
314
  };
180
- return /* @__PURE__ */ c(
181
- D.Trigger,
315
+ return /* @__PURE__ */ l(
316
+ Q.Trigger,
182
317
  {
183
- ...l,
318
+ ...n,
184
319
  asChild: !0,
185
320
  onClick: (o) => {
186
- var n, r;
187
- o.preventDefault(), e.onOpenToggle(), (r = (n = e.triggerRef) == null ? void 0 : n.current) == null || r.focus();
321
+ var r, c;
322
+ o.preventDefault(), e.onOpenToggle(), (c = (r = e.triggerRef) == null ? void 0 : r.current) == null || c.focus();
188
323
  },
189
324
  onKeyDown: (o) => {
190
325
  if (o.key === "Tab") {
191
326
  o.stopPropagation();
192
327
  return;
193
328
  }
194
- if (j.includes(o.key)) {
329
+ if (z.includes(o.key)) {
195
330
  o.preventDefault();
196
331
  return;
197
332
  }
@@ -201,15 +336,15 @@ const z = {
201
336
  }
202
337
  },
203
338
  tgphRef: e.triggerRef,
204
- children: /* @__PURE__ */ w(
205
- v.Root,
339
+ children: /* @__PURE__ */ S(
340
+ E.Root,
206
341
  {
207
342
  id: e.triggerId,
208
343
  type: "button",
209
344
  bg: "surface-1",
210
345
  variant: "outline",
211
346
  align: "center",
212
- minH: z[t],
347
+ minH: oe[t],
213
348
  h: "full",
214
349
  w: "full",
215
350
  py: "1",
@@ -217,7 +352,7 @@ const z = {
217
352
  color: e.errored ? "red" : "gray",
218
353
  justify: "space-between",
219
354
  role: "combobox",
220
- "aria-label": u(),
355
+ "aria-label": p(),
221
356
  "aria-controls": e.contentId,
222
357
  "aria-expanded": e.open,
223
358
  "aria-haspopup": "listbox",
@@ -225,20 +360,20 @@ const z = {
225
360
  "data-tgph-comobox-trigger-open": e.open,
226
361
  disabled: e.disabled,
227
362
  children: [
228
- /* @__PURE__ */ c(Z, {}),
229
- /* @__PURE__ */ w(I, { align: "center", gap: "1", children: [
230
- s && /* @__PURE__ */ c(q, { label: "Clear field", children: /* @__PURE__ */ c(
231
- v,
363
+ /* @__PURE__ */ l(le, {}),
364
+ /* @__PURE__ */ S(I, { align: "center", gap: "1", children: [
365
+ a && /* @__PURE__ */ l(te, { label: "Clear field", children: /* @__PURE__ */ l(
366
+ E,
232
367
  {
233
368
  type: "button",
234
- icon: { icon: R.X, alt: "Clear field" },
369
+ icon: { icon: w.X, alt: "Clear field" },
235
370
  size: "1",
236
371
  variant: "ghost",
237
372
  onClick: (o) => {
238
- e.value && (o.stopPropagation(), a());
373
+ e.value && (o.stopPropagation(), u());
239
374
  },
240
375
  onKeyDown: (o) => {
241
- (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), a());
376
+ (o.key === "Enter" || o.key === " ") && (o.stopPropagation(), u());
242
377
  },
243
378
  "data-tgph-combobox-clear": !0,
244
379
  style: {
@@ -249,73 +384,102 @@ const z = {
249
384
  }
250
385
  }
251
386
  ) }),
252
- /* @__PURE__ */ c(v.Icon, { icon: R.ChevronDown, "aria-hidden": !0 })
387
+ /* @__PURE__ */ l(
388
+ E.Icon,
389
+ {
390
+ as: B.span,
391
+ animate: { rotate: e.open ? 180 : 0 },
392
+ transition: { duration: 150, type: "spring" },
393
+ icon: w.ChevronDown,
394
+ "aria-hidden": !0
395
+ }
396
+ )
253
397
  ] })
254
398
  ]
255
399
  }
256
400
  )
257
401
  }
258
402
  );
259
- }, te = ({
260
- tgphRef: t,
261
- style: l,
262
- children: e,
263
- ...u
403
+ }, pe = ({
404
+ style: t,
405
+ children: n,
406
+ tgphRef: e,
407
+ ...p
264
408
  }) => {
265
- const s = i.useContext(m), a = i.useRef(!1), o = K(t, s.contentRef), n = i.useRef(null);
266
- return (
267
- // We add radix's dismissable layer here so that we can swallow any escape key
268
- // presses to prevent cases like a modal closing when we close the combobox
269
- /* @__PURE__ */ c(
270
- G,
271
- {
272
- onEscapeKeyDown: (r) => {
273
- s.open && (r.stopPropagation(), r.preventDefault(), s.setOpen(!1));
274
- },
275
- children: /* @__PURE__ */ c(A, { tgphRef: o, children: /* @__PURE__ */ c(
276
- D.Content,
277
- {
278
- mt: "1",
279
- onCloseAutoFocus: (r) => {
280
- var g, h;
281
- a.current || (h = (g = s.triggerRef) == null ? void 0 : g.current) == null || h.focus(), a.current = !1, r.preventDefault();
282
- },
283
- bg: "surface-1",
284
- style: {
285
- width: "var(--tgph-comobobox-trigger-width)",
286
- ...l,
287
- "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
288
- "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
289
- "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
290
- "--tgph-comobobox-trigger-width": "var(--radix-popper-anchor-width)",
291
- "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
292
- },
293
- ...u,
294
- tgphRef: o,
295
- "data-tgph-combobox-content": !0,
296
- "data-tgph-combobox-content-open": s.open,
297
- role: void 0,
298
- "aria-orientation": void 0,
299
- onKeyDown: (r) => {
300
- var h, b, p, d;
301
- r.stopPropagation();
302
- const g = (b = (h = s.contentRef) == null ? void 0 : h.current) == null ? void 0 : b.querySelectorAll(
303
- "[data-tgph-combobox-option]"
304
- );
305
- document.activeElement === (g == null ? void 0 : g[0]) && U.includes(r.key) && ((d = (p = s.searchRef) == null ? void 0 : p.current) == null || d.focus());
306
- },
307
- children: /* @__PURE__ */ c(I, { direction: "column", gap: "1", tgphRef: n, children: e })
308
- }
309
- ) })
310
- }
311
- )
409
+ const a = i.useContext(x), u = i.useRef(!1), o = j(e, a.contentRef), r = i.useRef(null), [c, g] = i.useState(0), [y, v] = i.useState(!1), d = i.useCallback(
410
+ (s) => {
411
+ const f = s == null ? void 0 : s.getBoundingClientRect();
412
+ f && g(f.height), y || v(!0);
413
+ },
414
+ [y]
312
415
  );
313
- }, oe = ({ ...t }) => {
314
- const l = i.useContext(m);
315
- return /* @__PURE__ */ c(
416
+ return i.useEffect(() => {
417
+ const s = new ResizeObserver((f) => {
418
+ for (const m of f) {
419
+ const b = m.target;
420
+ d(b);
421
+ }
422
+ });
423
+ return r.current && y && s.observe(r.current), () => s.disconnect();
424
+ }, [y, d]), i.useEffect(() => {
425
+ y === !0 && a.open === !1 && v(!1);
426
+ }, [a.open, y]), i.useEffect(() => {
427
+ let s;
428
+ return a.open && (s = setTimeout(() => {
429
+ d(r.current);
430
+ }, 10)), () => s && clearTimeout(s);
431
+ }, [a.open, d]), /* @__PURE__ */ l(U.Root, { asChild: !0, children: /* @__PURE__ */ l(
432
+ q,
433
+ {
434
+ onEscapeKeyDown: (s) => {
435
+ a.open && (s.stopPropagation(), s.preventDefault(), a.setOpen(!1));
436
+ },
437
+ children: /* @__PURE__ */ l(
438
+ Q.Content,
439
+ {
440
+ className: "tgph",
441
+ mt: "1",
442
+ onCloseAutoFocus: (s) => {
443
+ var f, m;
444
+ u.current || (m = (f = a.triggerRef) == null ? void 0 : f.current) == null || m.focus(), u.current = !1, s.preventDefault();
445
+ },
446
+ bg: "surface-1",
447
+ style: {
448
+ width: "var(--tgph-comobobox-trigger-width)",
449
+ transition: "min-height 200ms ease-in-out",
450
+ minHeight: c ? `${c}px` : "0",
451
+ ...t,
452
+ "--tgph-comobobox-content-transform-origin": "var(--radix-popper-transform-origin)",
453
+ "--tgph-combobox-content-available-width": "var(--radix-popper-available-width)",
454
+ "--tgph-combobox-content-available-height": "calc(var(--radix-popper-available-height) - var(--tgph-spacing-8))",
455
+ "--tgph-comobobox-trigger-width": "var(--radix-popper-anchor-width)",
456
+ "--tgph-combobox-trigger-height": "var(--radix-popper-anchor-height)"
457
+ },
458
+ ...p,
459
+ tgphRef: o,
460
+ "data-tgph-combobox-content": !0,
461
+ "data-tgph-combobox-content-open": a.open,
462
+ role: void 0,
463
+ "aria-orientation": void 0,
464
+ onKeyDown: (s) => {
465
+ var m, b, h, R;
466
+ s.stopPropagation();
467
+ const f = (b = (m = a.contentRef) == null ? void 0 : m.current) == null ? void 0 : b.querySelectorAll(
468
+ "[data-tgph-combobox-option]"
469
+ );
470
+ document.activeElement === (f == null ? void 0 : f[0]) && ie.includes(s.key) && ((R = (h = a.searchRef) == null ? void 0 : h.current) == null || R.focus());
471
+ },
472
+ children: /* @__PURE__ */ l(I, { direction: "column", gap: "1", tgphRef: r, children: n })
473
+ }
474
+ )
475
+ }
476
+ ) });
477
+ }, ge = ({ ...t }) => {
478
+ const n = i.useContext(x);
479
+ return /* @__PURE__ */ l(
316
480
  I,
317
481
  {
318
- id: l.contentId,
482
+ id: n.contentId,
319
483
  direction: "column",
320
484
  gap: "1",
321
485
  style: {
@@ -327,118 +491,131 @@ const z = {
327
491
  ...t
328
492
  }
329
493
  );
330
- }, B = ({
494
+ }, G = ({
331
495
  value: t,
332
- label: l,
496
+ label: n,
333
497
  selected: e,
334
- onSelect: u,
335
- ...s
498
+ onSelect: p,
499
+ children: a,
500
+ ...u
336
501
  }) => {
337
- const a = i.useContext(m), [o, n] = i.useState(!1), r = a.value, g = (C(r), !a.searchQuery || t.toLowerCase().includes(a.searchQuery.toLowerCase())), h = C(r) ? r.some((p) => (p == null ? void 0 : p.value) === t) : (r == null ? void 0 : r.value) === t, b = (p) => {
338
- var x, y;
339
- p.stopPropagation();
340
- const d = p;
341
- if (!(d.key && !j.includes(d.key))) {
342
- if (p.preventDefault(), a.closeOnSelect === !0 && a.setOpen(!1), u)
343
- return u(p);
344
- if (k(r)) {
345
- const f = a.onValueChange;
346
- f == null || f({ value: t, label: l });
347
- } else if (C(r)) {
348
- const f = a.onValueChange, S = h ? r.filter((T) => (T == null ? void 0 : T.value) !== t) : [...r, { value: t, label: l }];
349
- f == null || f(S);
502
+ const o = i.useContext(x), [r, c] = i.useState(!1), g = o.value, y = !o.searchQuery || ne({
503
+ label: (n == null ? void 0 : n.toString()) || (a == null ? void 0 : a.toString()),
504
+ value: t,
505
+ searchQuery: o.searchQuery
506
+ }), v = k(g) ? g.some(
507
+ (s) => C(s, o.legacyBehavior) === t
508
+ ) : C(g, o.legacyBehavior) === t, d = (s) => {
509
+ var m, b;
510
+ s.stopPropagation();
511
+ const f = s;
512
+ if (!(f.key && !z.includes(f.key))) {
513
+ if (s.preventDefault(), o.closeOnSelect === !0 && o.setOpen(!1), p)
514
+ return p(s);
515
+ if (T(g)) {
516
+ const h = o.onValueChange;
517
+ o.legacyBehavior === !0 ? h == null || h({ value: t, label: n }) : h == null || h(t);
518
+ } else if (k(g)) {
519
+ const h = o.onValueChange, R = o.value, D = v ? R.filter(
520
+ (V) => C(V, o.legacyBehavior) !== t
521
+ ) : [
522
+ ...R,
523
+ // TODO: Remove this once { value, label } option is deprecated
524
+ o.legacyBehavior === !0 ? { value: t, label: n } : t
525
+ ];
526
+ h == null || h(D);
350
527
  }
351
- (y = (x = a.triggerRef) == null ? void 0 : x.current) == null || y.focus();
528
+ (b = (m = o.triggerRef) == null ? void 0 : m.current) == null || b.focus();
352
529
  }
353
530
  };
354
- if (g)
355
- return /* @__PURE__ */ c(
356
- D.Button,
531
+ if (y)
532
+ return /* @__PURE__ */ l(
533
+ Q.Button,
357
534
  {
358
535
  type: "button",
359
- onSelect: b,
360
- onKeyDown: b,
361
- selected: e === null ? null : e ?? h,
362
- onFocus: () => n(!0),
363
- onBlur: () => n(!1),
536
+ onSelect: d,
537
+ onKeyDown: d,
538
+ selected: e === null ? null : e ?? v,
539
+ onFocus: () => c(!0),
540
+ onBlur: () => c(!1),
364
541
  role: "option",
365
- "aria-selected": h ? "true" : "false",
542
+ "aria-selected": v ? "true" : "false",
366
543
  "data-tgph-combobox-option": !0,
367
- "data-tgph-combobox-option-focused": o,
544
+ "data-tgph-combobox-option-focused": r,
368
545
  "data-tgph-combobox-option-value": t,
369
- "data-tgph-combobox-option-label": l,
370
- ...s,
371
- children: l || t
546
+ "data-tgph-combobox-option-label": n,
547
+ ...u,
548
+ children: n || a || t
372
549
  }
373
550
  );
374
- }, re = ({
551
+ }, fe = ({
375
552
  label: t = "Search",
376
- placeholder: l = "Search",
553
+ placeholder: n = "Search",
377
554
  tgphRef: e,
378
- value: u,
379
- onValueChange: s,
380
- ...a
555
+ value: p,
556
+ onValueChange: a,
557
+ ...u
381
558
  }) => {
382
- var b;
383
- const o = i.useId(), n = i.useContext(m), r = K(e, n.searchRef), g = u ?? n.searchQuery, h = s ?? n.setSearchQuery;
559
+ var v;
560
+ const o = i.useId(), r = i.useContext(x), c = j(e, r.searchRef), g = p ?? r.searchQuery, y = a ?? r.setSearchQuery;
384
561
  return i.useEffect(() => {
385
- var x;
386
- const p = (y) => {
387
- var f, S;
388
- N.includes(y.key) && ((S = (f = n.contentRef) == null ? void 0 : f.current) == null || S.focus({ preventScroll: !0 })), y.key === "Escape" && n.setOpen(!1), y.stopPropagation();
389
- }, d = (x = n.searchRef) == null ? void 0 : x.current;
390
- if (d)
391
- return d.addEventListener("keydown", p), () => {
392
- d.removeEventListener("keydown", p);
562
+ var f;
563
+ const d = (m) => {
564
+ var b, h;
565
+ ae.includes(m.key) && ((h = (b = r.contentRef) == null ? void 0 : b.current) == null || h.focus({ preventScroll: !0 })), m.key === "Escape" && r.setOpen(!1), m.stopPropagation();
566
+ }, s = (f = r.searchRef) == null ? void 0 : f.current;
567
+ if (s)
568
+ return s.addEventListener("keydown", d), () => {
569
+ s.removeEventListener("keydown", d);
393
570
  };
394
- }, [n]), /* @__PURE__ */ w(A, { borderBottom: "px", px: "1", pb: "1", children: [
395
- /* @__PURE__ */ c(Y.Root, { children: /* @__PURE__ */ c(L, { as: "label", htmlFor: o, children: t }) }),
396
- /* @__PURE__ */ c(
397
- X,
571
+ }, [r]), /* @__PURE__ */ S($, { borderBottom: "px", px: "1", pb: "1", children: [
572
+ /* @__PURE__ */ l(J.Root, { children: /* @__PURE__ */ l(M, { as: "label", htmlFor: o, children: t }) }),
573
+ /* @__PURE__ */ l(
574
+ ee,
398
575
  {
399
576
  id: o,
400
577
  variant: "ghost",
401
- placeholder: l,
578
+ placeholder: n,
402
579
  value: g,
403
- onChange: (p) => {
404
- h(p.target.value);
580
+ onChange: (d) => {
581
+ y(d.target.value);
405
582
  },
406
- LeadingComponent: /* @__PURE__ */ c(F, { icon: R.Search, alt: "Search Icon" }),
407
- TrailingComponent: n != null && n.searchQuery && ((b = n == null ? void 0 : n.searchQuery) == null ? void 0 : b.length) > 0 ? /* @__PURE__ */ c(
408
- v,
583
+ LeadingComponent: /* @__PURE__ */ l(_, { icon: w.Search, alt: "Search Icon" }),
584
+ TrailingComponent: r != null && r.searchQuery && ((v = r == null ? void 0 : r.searchQuery) == null ? void 0 : v.length) > 0 ? /* @__PURE__ */ l(
585
+ E,
409
586
  {
410
587
  variant: "ghost",
411
588
  color: "gray",
412
- icon: { icon: R.X, alt: "Clear Search Query" },
589
+ icon: { icon: w.X, alt: "Clear Search Query" },
413
590
  onClick: () => {
414
- var p;
415
- return (p = n.setSearchQuery) == null ? void 0 : p.call(n, "");
591
+ var d;
592
+ return (d = r.setSearchQuery) == null ? void 0 : d.call(r, "");
416
593
  }
417
594
  }
418
595
  ) : null,
419
596
  autoFocus: !0,
420
597
  "data-tgph-combobox-search": !0,
421
- "aria-controls": n.contentId,
422
- ...a,
423
- tgphRef: r
598
+ "aria-controls": r.contentId,
599
+ ...u,
600
+ tgphRef: c
424
601
  }
425
602
  )
426
603
  ] });
427
- }, ne = ({
428
- icon: t = { icon: R.Search, alt: "Search Icon" },
429
- message: l = "No results found",
604
+ }, he = ({
605
+ icon: t = { icon: w.Search, alt: "Search Icon" },
606
+ message: n = "No results found",
430
607
  children: e,
431
- ...u
608
+ ...p
432
609
  }) => {
433
- const s = i.useContext(m), [a, o] = i.useState(!1);
610
+ const a = i.useContext(x), [u, o] = i.useState(!1);
434
611
  if (i.useEffect(() => {
435
- var r, g;
436
- const n = (g = (r = s.contentRef) == null ? void 0 : r.current) == null ? void 0 : g.querySelectorAll(
612
+ var c, g;
613
+ const r = (g = (c = a.contentRef) == null ? void 0 : c.current) == null ? void 0 : g.querySelectorAll(
437
614
  "[data-tgph-combobox-option]"
438
615
  );
439
- (n == null ? void 0 : n.length) === 0 ? o(!0) : o(!1);
440
- }, [s.searchQuery, s.contentRef, e]), a)
441
- return /* @__PURE__ */ w(
616
+ (r == null ? void 0 : r.length) === 0 ? o(!0) : o(!1);
617
+ }, [a.searchQuery, a.contentRef, e]), u)
618
+ return /* @__PURE__ */ S(
442
619
  I,
443
620
  {
444
621
  gap: "1",
@@ -447,52 +624,58 @@ const z = {
447
624
  w: "full",
448
625
  my: "8",
449
626
  "data-tgph-combobox-empty": !0,
450
- ...u,
627
+ ...p,
451
628
  children: [
452
- t === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(F, { ...t }),
453
- l === null ? /* @__PURE__ */ c(V, {}) : /* @__PURE__ */ c(L, { as: "span", children: l })
629
+ t === null ? /* @__PURE__ */ l(K, {}) : /* @__PURE__ */ l(_, { ...t }),
630
+ n === null ? /* @__PURE__ */ l(K, {}) : /* @__PURE__ */ l(M, { as: "span", children: n })
454
631
  ]
455
632
  }
456
633
  );
457
- }, ae = ({
634
+ }, de = ({
458
635
  leadingText: t = "Create",
459
- values: l,
636
+ values: n,
460
637
  onCreate: e,
461
- selected: u = null,
462
- ...s
638
+ selected: p = null,
639
+ legacyBehavior: a = !1,
640
+ ...u
463
641
  }) => {
464
- const a = i.useContext(m), o = i.useCallback(
465
- (n) => !l || (l == null ? void 0 : l.length) === 0 ? !1 : l.some((r) => (r == null ? void 0 : r.value) === n),
466
- [l]
642
+ const o = i.useContext(x), r = i.useCallback(
643
+ (c) => !n || (n == null ? void 0 : n.length) === 0 ? !1 : n.some(
644
+ (g) => C(g, a) === c
645
+ ),
646
+ [n, a]
467
647
  );
468
- if (a.searchQuery && !o(a.searchQuery))
469
- return /* @__PURE__ */ c(
470
- B,
648
+ if (o.searchQuery && !r(o.searchQuery))
649
+ return /* @__PURE__ */ l(
650
+ G,
471
651
  {
472
- leadingIcon: { icon: R.Plus, "aria-hidden": !0 },
652
+ leadingIcon: { icon: w.Plus, "aria-hidden": !0 },
473
653
  mx: "1",
474
- value: a.searchQuery,
475
- label: `${t} "${a.searchQuery}"`,
476
- selected: u,
654
+ value: o.searchQuery,
655
+ label: `${t} "${o.searchQuery}"`,
656
+ selected: p,
477
657
  onSelect: () => {
478
- var n;
479
- e && a.value && a.searchQuery && (k(a.value) && e({ value: a.searchQuery }), C(a.value) && e({ value: a.searchQuery }), (n = a.setSearchQuery) == null || n.call(a, ""));
658
+ var c;
659
+ if (e && o.value && o.searchQuery) {
660
+ const g = a === !0 ? { value: o.searchQuery } : o.searchQuery;
661
+ e(g), (c = o.setSearchQuery) == null || c.call(o, "");
662
+ }
480
663
  },
481
- ...s
664
+ ...u
482
665
  }
483
666
  );
484
- }, le = {};
485
- Object.assign(le, {
486
- Root: J,
487
- Trigger: ee,
488
- Content: te,
489
- Options: oe,
490
- Option: B,
491
- Search: re,
492
- Empty: ne,
493
- Create: ae
667
+ }, me = {};
668
+ Object.assign(me, {
669
+ Root: ce,
670
+ Trigger: ue,
671
+ Content: pe,
672
+ Options: ge,
673
+ Option: G,
674
+ Search: fe,
675
+ Empty: he,
676
+ Create: de
494
677
  });
495
678
  export {
496
- le as Combobox
679
+ me as Combobox
497
680
  };
498
681
  //# sourceMappingURL=index.mjs.map