@tcn/ui 0.12.1 → 0.12.3

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 (99) hide show
  1. package/dist/inputs/phone_number_input/phone_number_input_adapter.d.ts.map +1 -1
  2. package/dist/inputs/phone_number_input/phone_number_input_adapter.js +39 -34
  3. package/dist/inputs/phone_number_input/phone_number_input_adapter.js.map +1 -1
  4. package/dist/inputs/phone_number_input/sip_input.d.ts.map +1 -1
  5. package/dist/inputs/phone_number_input/sip_input.js +57 -52
  6. package/dist/inputs/phone_number_input/sip_input.js.map +1 -1
  7. package/dist/inputs/suggestions/suggestion_list.d.ts +8 -1
  8. package/dist/inputs/suggestions/suggestion_list.d.ts.map +1 -1
  9. package/dist/inputs/suggestions/suggestion_list.js +121 -111
  10. package/dist/inputs/suggestions/suggestion_list.js.map +1 -1
  11. package/dist/overlay/popper/base/dismissal_decorator.js +6 -6
  12. package/dist/overlay/popper/base/dismissal_decorator.js.map +1 -1
  13. package/dist/overlay/popper/context_popper.d.ts.map +1 -1
  14. package/dist/overlay/popper/context_popper.js +34 -26
  15. package/dist/overlay/popper/context_popper.js.map +1 -1
  16. package/dist/overlay/popper/element_popper.d.ts.map +1 -1
  17. package/dist/overlay/popper/element_popper.js +43 -25
  18. package/dist/overlay/popper/element_popper.js.map +1 -1
  19. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts +3 -0
  20. package/dist/overlay/tethered/hooks/use_ref_dimensions.d.ts.map +1 -0
  21. package/dist/overlay/tethered/hooks/use_ref_dimensions.js +26 -0
  22. package/dist/overlay/tethered/hooks/use_ref_dimensions.js.map +1 -0
  23. package/dist/overlay/tethered/hooks/{useTether.d.ts → use_tether.d.ts} +7 -4
  24. package/dist/overlay/tethered/hooks/use_tether.d.ts.map +1 -0
  25. package/dist/overlay/tethered/hooks/{useTether.js → use_tether.js} +19 -15
  26. package/dist/overlay/tethered/hooks/use_tether.js.map +1 -0
  27. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts +10 -0
  28. package/dist/overlay/tethered/hooks/use_tether_origin.d.ts.map +1 -0
  29. package/dist/overlay/tethered/hooks/use_tether_origin.js +22 -0
  30. package/dist/overlay/tethered/hooks/use_tether_origin.js.map +1 -0
  31. package/dist/overlay/tethered/hooks/{calculate_origin.d.ts → utils/calculate_origin.d.ts} +4 -10
  32. package/dist/overlay/tethered/hooks/utils/calculate_origin.d.ts.map +1 -0
  33. package/dist/overlay/tethered/hooks/utils/calculate_origin.js +41 -0
  34. package/dist/overlay/tethered/hooks/utils/calculate_origin.js.map +1 -0
  35. package/dist/overlay/tethered/hooks/{calculate_position.d.ts → utils/calculate_position.d.ts} +2 -2
  36. package/dist/overlay/tethered/hooks/utils/calculate_position.d.ts.map +1 -0
  37. package/dist/overlay/tethered/hooks/utils/calculate_position.js.map +1 -0
  38. package/dist/overlay/tethered/tethered.d.ts.map +1 -1
  39. package/dist/overlay/tethered/tethered.js +63 -62
  40. package/dist/overlay/tethered/tethered.js.map +1 -1
  41. package/dist/surfaces/pop_confirm/pop_confirm.js +7 -7
  42. package/dist/surfaces/pop_confirm/pop_confirm.js.map +1 -1
  43. package/dist/surfaces/tooltip/tooltip.d.ts.map +1 -1
  44. package/dist/surfaces/tooltip/tooltip.js +27 -28
  45. package/dist/surfaces/tooltip/tooltip.js.map +1 -1
  46. package/dist/themes/themes/ergo/ergo_theme.css +1 -1
  47. package/dist/themes/themes/ergo/ergo_theme.js +98 -8
  48. package/dist/themes/themes/ergo/ergo_theme.js.map +1 -1
  49. package/package.json +1 -1
  50. package/src/inputs/phone_number_input/phone_number_input.stories.tsx +7 -0
  51. package/src/inputs/phone_number_input/phone_number_input_adapter.tsx +5 -0
  52. package/src/inputs/phone_number_input/sip_input.tsx +5 -0
  53. package/src/inputs/select/select.stories.tsx +34 -11
  54. package/src/inputs/suggestions/suggestion_list.tsx +23 -6
  55. package/src/overlay/popper/base/dismissal_decorator.tsx +1 -1
  56. package/src/overlay/popper/context_popper.tsx +7 -3
  57. package/src/overlay/popper/element_popper.tsx +14 -4
  58. package/src/overlay/tethered/__stories__/shared/base_story_config.ts +1 -1
  59. package/src/overlay/tethered/hooks/use_ref_dimensions.ts +32 -0
  60. package/src/overlay/tethered/hooks/{useTether.ts → use_tether.ts} +7 -2
  61. package/src/overlay/tethered/hooks/use_tether_origin.ts +46 -0
  62. package/src/overlay/tethered/hooks/{calculate_origin.ts → utils/calculate_origin.ts} +12 -12
  63. package/src/overlay/tethered/hooks/{calculate_position.ts → utils/calculate_position.ts} +3 -3
  64. package/src/overlay/tethered/tethered.tsx +22 -26
  65. package/src/surfaces/pop_confirm/pop_confirm.stories.tsx +206 -6
  66. package/src/surfaces/pop_confirm/pop_confirm.tsx +1 -1
  67. package/src/surfaces/tooltip/__stories__/tooltip.stories.tsx +136 -0
  68. package/src/surfaces/tooltip/__stories__/tooltip_stories.module.css +14 -0
  69. package/src/surfaces/tooltip/tooltip.tsx +6 -2
  70. package/src/themes/themes/ergo/ergo_theme.css +98 -8
  71. package/dist/overlay/tethered/hooks/calculate_origin.d.ts.map +0 -1
  72. package/dist/overlay/tethered/hooks/calculate_origin.js +0 -41
  73. package/dist/overlay/tethered/hooks/calculate_origin.js.map +0 -1
  74. package/dist/overlay/tethered/hooks/calculate_position.d.ts.map +0 -1
  75. package/dist/overlay/tethered/hooks/calculate_position.js.map +0 -1
  76. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts +0 -9
  77. package/dist/overlay/tethered/hooks/useCaretRefDimensions.d.ts.map +0 -1
  78. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js +0 -14
  79. package/dist/overlay/tethered/hooks/useCaretRefDimensions.js.map +0 -1
  80. package/dist/overlay/tethered/hooks/useTether.d.ts.map +0 -1
  81. package/dist/overlay/tethered/hooks/useTether.js.map +0 -1
  82. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts +0 -3
  83. package/dist/overlay/tethered/hooks/useTetherContentRect.d.ts.map +0 -1
  84. package/dist/overlay/tethered/hooks/useTetherContentRect.js +0 -36
  85. package/dist/overlay/tethered/hooks/useTetherContentRect.js.map +0 -1
  86. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts +0 -14
  87. package/dist/overlay/tethered/hooks/useTetherOrigin.d.ts.map +0 -1
  88. package/dist/overlay/tethered/hooks/useTetherOrigin.js +0 -24
  89. package/dist/overlay/tethered/hooks/useTetherOrigin.js.map +0 -1
  90. package/dist/surfaces/popconfirm/pop_confirm.d.ts +0 -5
  91. package/dist/surfaces/popconfirm/pop_confirm.d.ts.map +0 -1
  92. package/dist/surfaces/popconfirm/pop_confirm.js +0 -13
  93. package/dist/surfaces/popconfirm/pop_confirm.js.map +0 -1
  94. package/src/overlay/tethered/hooks/useCaretRefDimensions.ts +0 -22
  95. package/src/overlay/tethered/hooks/useTetherContentRect.ts +0 -49
  96. package/src/overlay/tethered/hooks/useTetherOrigin.ts +0 -49
  97. package/src/surfaces/popconfirm/pop_confirm.tsx +0 -18
  98. package/src/surfaces/tooltip/tooltip.stories.tsx +0 -54
  99. /package/dist/overlay/tethered/hooks/{calculate_position.js → utils/calculate_position.js} +0 -0
@@ -1,5 +1,5 @@
1
- import { jsx as r, jsxs as j, Fragment as de } from "react/jsx-runtime";
2
- import { BodyText as ge } from "../../typography/body_text/body_text.js";
1
+ import { jsx as r, jsxs as j, Fragment as ke } from "react/jsx-runtime";
2
+ import { BodyText as Le } from "../../typography/body_text/body_text.js";
3
3
  import "../../typography/callout/callout.js";
4
4
  import "../../typography/caption/caption.js";
5
5
  import "../../typography/footnote/footnote.js";
@@ -7,89 +7,96 @@ import "../../typography/headline/headline.js";
7
7
  import "../../typography/subheadline/subheadline.js";
8
8
  import "../../typography/title/title.js";
9
9
  import { VStack as q } from "../../stacks/v_stack.js";
10
- import { ZStack as he } from "../../stacks/z_stack.js";
11
- import { clsx as H } from "clsx";
12
- import Z, { Children as me, isValidElement as we, useState as a, useRef as B, useLayoutEffect as h } from "react";
10
+ import { ZStack as ye } from "../../stacks/z_stack.js";
11
+ import { clsx as F } from "clsx";
12
+ import O, { Children as Se, isValidElement as Me, useState as a, useRef as H, useLayoutEffect as m } from "react";
13
13
  import "../../utils/click_away_listener.js";
14
- import { FocusRedirect as be } from "../../utils/focus_redirect.js";
14
+ import { FocusRedirect as Ie } from "../../utils/focus_redirect.js";
15
15
  import "../../utils/scroll_away_listener.js";
16
16
  import "../../utils/hooks/use_resize_observer.js";
17
17
  import "../../utils/dnd/context.js";
18
18
  import "../../draggable.module-BgelQsuJ.js";
19
- import { SuggestionItem as xe } from "./suggestion_item.js";
20
- import { Option as X } from "../options/option.js";
19
+ import { SuggestionItem as Ce } from "./suggestion_item.js";
20
+ import { Option as Z } from "../options/option.js";
21
21
  import "../../actions/button/base_button/base_button.js";
22
22
  import "../../actions/button/button_group/button_group.js";
23
23
  import "../../actions/button/slim_button/slim_button.js";
24
- import { Button as ke } from "../../actions/button/button/button.js";
24
+ import { Button as Re } from "../../actions/button/button/button.js";
25
25
  import "../../actions/button/select_group/select_group.js";
26
26
  import "../../actions/button/select_group/single_select_group.js";
27
27
  import "../../actions/toggle/toggle.js";
28
- import { Popper as Le } from "../../overlay/popper/legacy/popper.js";
29
- import '../../suggestion_list.css';const ye = "_suggestion-list_711fb17", Se = "_input_a0df060", K = { "suggestion-list": ye, input: Se }, C = 50, Me = 50;
30
- function Ye({
31
- value: R = "",
32
- initialSearchValue: E,
33
- scrollToValue: m,
28
+ import { Popper as ve } from "../../overlay/popper/legacy/popper.js";
29
+ import '../../suggestion_list.css';const _e = "_suggestion-list_711fb17", Ae = "_input_a0df060", B = { "suggestion-list": _e, input: Ae }, C = 50, De = 50;
30
+ function rt({
31
+ value: X = "",
32
+ initialSearchValue: K,
33
+ scrollToValue: w,
34
34
  anchorElement: l,
35
- open: v = !1,
36
- children: N,
37
- onOptionSelect: w,
38
- noSuggestionMessage: z = "-- No Matches --",
35
+ open: R = !1,
36
+ width: z = "auto",
37
+ children: E,
38
+ onOptionSelect: b,
39
+ noSuggestionMessage: G = "-- No Matches --",
39
40
  onClose: L,
40
- onChange: O,
41
+ onChange: N,
41
42
  onKeyUp: T,
42
43
  onKeyDown: U,
43
- trimCustomInput: G = !1,
44
+ trimCustomInput: J = !1,
44
45
  haveValueAsOption: P = !1,
45
- restoreFocus: J = !0,
46
- ...Q
46
+ restoreFocus: Q = !0,
47
+ verticalAnchor: Y = "top",
48
+ verticalOrigin: ee = "top",
49
+ verticalOffset: te = -4,
50
+ horizontalAnchor: se = "start",
51
+ horizontalOrigin: ne = "start",
52
+ horizontalOffset: oe = 0,
53
+ ...ie
47
54
  }) {
48
- const b = Z.useMemo(
49
- () => me.toArray(N).filter(
50
- (e) => we(e) && e.type === X
55
+ const x = O.useMemo(
56
+ () => Se.toArray(E).filter(
57
+ (e) => Me(e) && e.type === Z
51
58
  ),
52
- [N]
53
- ), [y, Y] = a(() => {
54
- if (m != null) {
55
- const e = b.findIndex((o) => o.props.value === m);
59
+ [E]
60
+ ), [y, re] = a(() => {
61
+ if (w != null) {
62
+ const e = x.findIndex((o) => o.props.value === w);
56
63
  if (e !== -1)
57
64
  return e;
58
65
  }
59
66
  return -1;
60
- }), A = B(""), _ = B(!1), [ee, V] = a(C), [d, S] = a(y), [x, W] = a(R), c = B(null), [te, se] = a(b.length), [n, D] = a(
67
+ }), v = H(""), _ = H(!1), [le, V] = a(C), [g, S] = a(y), [u, W] = a(X), c = H(null), [ce, ae] = a(x.length), [n, A] = a(
61
68
  () => []
62
- ), [ne, oe] = a(), [ie, re] = a();
63
- function le(e) {
69
+ ), [ue, pe] = a(), [de, fe] = a();
70
+ function ge(e) {
64
71
  if (!_.current)
65
72
  return;
66
73
  _.current = !1;
67
- const o = e.key, t = e.currentTarget, s = A.current = o;
68
- if (A.current = "", s)
74
+ const o = e.key, t = e.currentTarget, s = v.current = o;
75
+ if (v.current = "", s)
69
76
  switch (o) {
70
77
  case "Enter": {
71
- if (n[d] == null) {
72
- const u = G ? t.value.trim() : t.value;
73
- if (u === "")
78
+ if (n[g] == null) {
79
+ const p = J ? t.value.trim() : t.value;
80
+ if (p === "")
74
81
  return;
75
- const k = u.toLocaleLowerCase(), g = b.find(
76
- (F) => F.props.value.toLocaleLowerCase() === k || F.props.label != null && F.props.label.toLocaleLowerCase() === k
77
- ), p = g != null, $ = g?.props.label || u, f = g?.props.value || u;
82
+ const k = p.toLocaleLowerCase(), h = x.find(
83
+ (D) => D.props.value.toLocaleLowerCase() === k || D.props.label != null && D.props.label.toLocaleLowerCase() === k
84
+ ), d = h != null, $ = h?.props.label || p, f = h?.props.value || p;
78
85
  requestAnimationFrame(() => {
79
- w && w(
86
+ b && b(
80
87
  f,
81
88
  $,
82
- p,
83
- g?.props.obfuscate ?? !1
89
+ d,
90
+ h?.props.obfuscate ?? !1
84
91
  );
85
92
  });
86
93
  break;
87
94
  }
88
- const i = n[d].props;
95
+ const i = n[g].props;
89
96
  if (i.disabled)
90
97
  break;
91
98
  requestAnimationFrame(() => {
92
- w && w(
99
+ b && b(
93
100
  i.value,
94
101
  i.label,
95
102
  !0,
@@ -105,11 +112,11 @@ function Ye({
105
112
  }
106
113
  T && T(e);
107
114
  }
108
- function ce(e) {
115
+ function he(e) {
109
116
  const o = e.key;
110
- switch (A.current = o, _.current = !0, o) {
117
+ switch (v.current = o, _.current = !0, o) {
111
118
  case "ArrowDown": {
112
- let t = d + 1;
119
+ let t = g + 1;
113
120
  for (; t < n.length && n[t]?.props.disabled; )
114
121
  t++;
115
122
  if (t === n.length) {
@@ -123,7 +130,7 @@ function Ye({
123
130
  case "Tab": {
124
131
  let t = 1;
125
132
  e.shiftKey && (t = -1);
126
- let s = d + t;
133
+ let s = g + t;
127
134
  if (t > 0)
128
135
  for (; s < n.length && n[s]?.props.disabled; )
129
136
  s++;
@@ -143,7 +150,7 @@ function Ye({
143
150
  break;
144
151
  }
145
152
  case "ArrowUp": {
146
- let t = d - 1;
153
+ let t = g - 1;
147
154
  for (; t >= 0 && n[t]?.props.disabled; )
148
155
  t--;
149
156
  if (t === -1) {
@@ -157,124 +164,127 @@ function Ye({
157
164
  }
158
165
  U && U(e);
159
166
  }
160
- const M = Z.useCallback(
167
+ const M = O.useCallback(
161
168
  function(o, t) {
162
- const s = b.filter((I) => {
163
- const i = I.props, u = String(i.label).toLocaleLowerCase(), k = i.keywords?.map((f) => f.toLocaleLowerCase()) || [], g = String(i.value).toLocaleLowerCase(), p = o.toLocaleLowerCase();
164
- return i.obfuscate ?? !1 ? u.includes(p) || k.some((f) => f.includes(p)) : u.includes(p) || k.some((f) => f.includes(p)) || g.includes(p);
169
+ const s = x.filter((I) => {
170
+ const i = I.props, p = String(i.label).toLocaleLowerCase(), k = i.keywords?.map((f) => f.toLocaleLowerCase()) || [], h = String(i.value).toLocaleLowerCase(), d = o.toLocaleLowerCase();
171
+ return i.obfuscate ?? !1 ? p.includes(d) || k.some((f) => f.includes(d)) : p.includes(d) || k.some((f) => f.includes(d)) || h.includes(d);
165
172
  });
166
173
  return P && o.trim().length > 0 && !s.some((I) => I.props.value === o) && s.unshift(
167
- /* @__PURE__ */ r(X, { value: o, label: o, keywords: [o], children: o }, "value")
168
- ), se(s.length), s.slice(0, t);
174
+ /* @__PURE__ */ r(Z, { value: o, label: o, keywords: [o], children: o }, "value")
175
+ ), ae(s.length), s.slice(0, t);
169
176
  },
170
- [b, P]
177
+ [x, P]
171
178
  );
172
- function ae() {
179
+ function me() {
173
180
  const e = c.current;
174
181
  e?.focus();
175
182
  }
176
- function ue() {
183
+ function we() {
177
184
  const e = c.current;
178
185
  e != null && L && L(e.value, e.selectionStart, e.selectionEnd);
179
186
  }
180
- function pe(e) {
187
+ function be(e) {
181
188
  const o = e.currentTarget;
182
189
  V(C), W(e.target.value);
183
190
  const t = M(o.value, C);
184
- D(t), O && O(e.target.value);
191
+ A(t), N && N(e.target.value);
185
192
  }
186
- function fe() {
187
- const e = ee + Me;
193
+ function xe() {
194
+ const e = le + De;
188
195
  V(e);
189
- const o = M(x, e);
190
- D(o);
196
+ const o = M(u, e);
197
+ A(o);
191
198
  }
192
- return h(() => {
199
+ return m(() => {
193
200
  const e = c.current;
194
- v && (e != null && e.value.length > 0 ? e.select() : e?.focus());
195
- }, [v]), h(() => {
201
+ R && (e != null && e.value.length > 0 ? e.select() : e?.focus());
202
+ }, [R]), m(() => {
196
203
  if (l != null) {
197
204
  const e = l.getBoundingClientRect();
198
- oe(`${e.width}px`), re(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
205
+ pe(`${e.width}px`), fe(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
199
206
  }
200
- }, [l]), h(() => {
201
- if (m != null) {
207
+ }, [l]), m(() => {
208
+ if (w != null) {
202
209
  const e = n.findIndex(
203
- (o) => o.props.value === m
210
+ (o) => o.props.value === w
204
211
  );
205
- Y(e);
212
+ re(e);
206
213
  }
207
- }, [n, m]), h(() => {
208
- S(x === "" ? y : -1);
209
- }, [x, y]), h(() => {
210
- W(E ?? "");
211
- }, [E]), h(() => {
212
- const e = M(R, C);
213
- D(e);
214
- }, [R, M]), /* @__PURE__ */ r(
215
- Le,
214
+ }, [n, w]), m(() => {
215
+ S(u === "" ? y : -1);
216
+ }, [u, y]), m(() => {
217
+ W(K ?? "");
218
+ }, [K]), m(() => {
219
+ const e = M(u, C);
220
+ A(e);
221
+ }, [M, u]), /* @__PURE__ */ r(
222
+ ve,
216
223
  {
217
- open: v,
224
+ open: R,
218
225
  anchorElement: l,
219
- onClose: ue,
220
- verticalAnchor: "top",
221
- verticalOrigin: "top",
222
- verticalOffset: -4,
223
- restoreFocus: J,
226
+ onClose: we,
227
+ verticalAnchor: Y,
228
+ verticalOrigin: ee,
229
+ verticalOffset: te,
230
+ horizontalAnchor: se,
231
+ horizontalOrigin: ne,
232
+ horizontalOffset: oe,
233
+ restoreFocus: Q,
224
234
  children: /* @__PURE__ */ j(
225
235
  q,
226
236
  {
227
- minHeight: `calc(${ie}, 8px)`,
237
+ minHeight: `calc(${de}, 8px)`,
228
238
  maxHeight: "300px",
229
- minWidth: ne,
230
- width: "auto",
239
+ minWidth: ue,
240
+ width: z,
231
241
  hAlign: "start",
232
- className: H(K["suggestion-list"], "tcn-suggestion-list"),
242
+ className: F(B["suggestion-list"], "tcn-suggestion-list"),
233
243
  children: [
234
244
  /* @__PURE__ */ r(
235
245
  "input",
236
246
  {
237
247
  ref: c,
238
- value: x,
239
- onKeyUp: le,
240
- onKeyDown: ce,
241
- onChange: pe,
242
- className: H(K.input, "tcn-suggestion-list-search-input"),
243
- ...Q
248
+ value: u,
249
+ onKeyUp: ge,
250
+ onKeyDown: he,
251
+ onChange: be,
252
+ className: F(B.input, "tcn-suggestion-list-search-input"),
253
+ ...ie
244
254
  },
245
255
  -1
246
256
  ),
247
257
  /* @__PURE__ */ j(q, { children: [
248
258
  n.map((e, o) => /* @__PURE__ */ r(
249
- xe,
259
+ Ce,
250
260
  {
251
261
  option: e,
252
- isSelected: o === y && x !== "",
253
- isFocused: o === d,
254
- onClick: w
262
+ isSelected: o === y && u !== "",
263
+ isFocused: o === g,
264
+ onClick: b
255
265
  },
256
266
  o
257
267
  )),
258
- te > n.length && /* @__PURE__ */ r(de, { children: /* @__PURE__ */ r(
259
- ke,
268
+ ce > n.length && /* @__PURE__ */ r(ke, { children: /* @__PURE__ */ r(
269
+ Re,
260
270
  {
261
271
  marginBlock: "8px",
262
272
  hierarchy: "tertiary",
263
- onClick: fe,
273
+ onClick: xe,
264
274
  children: "Show More"
265
275
  },
266
276
  "show-more"
267
277
  ) })
268
278
  ] }),
269
279
  n.length === 0 && /* @__PURE__ */ r(
270
- he,
280
+ ye,
271
281
  {
272
282
  padding: "8px",
273
- className: H(K["no-results"], "tcn-suggestion-list-no-results"),
274
- children: /* @__PURE__ */ r(ge, { children: z })
283
+ className: F(B["no-results"], "tcn-suggestion-list-no-results"),
284
+ children: /* @__PURE__ */ r(Le, { children: G })
275
285
  }
276
286
  ),
277
- /* @__PURE__ */ r(be, { onRedirect: ae }, n.length + 1)
287
+ /* @__PURE__ */ r(Ie, { onRedirect: me }, n.length + 1)
278
288
  ]
279
289
  }
280
290
  )
@@ -282,6 +292,6 @@ function Ye({
282
292
  );
283
293
  }
284
294
  export {
285
- Ye as SuggestionList
295
+ rt as SuggestionList
286
296
  };
287
297
  //# sourceMappingURL=suggestion_list.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n value?: string;\n initialSearchValue?: string;\n scrollToValue?: string;\n anchorElement: HTMLElement | null;\n open?: boolean;\n children?: React.ReactNode;\n onChange?: (value: string) => void;\n onOptionSelect?: (\n value: string,\n label: string | undefined,\n isSuggestion: boolean,\n obfuscate: boolean\n ) => void;\n noSuggestionMessage?: React.ReactNode;\n trimCustomInput?: boolean;\n haveValueAsOption?: boolean;\n restoreFocus?: boolean;\n onClose?: (\n inputValue: string,\n cursorStartPosition: number | null,\n cursorEndPosition: number | null\n ) => void;\n}\n\nexport function SuggestionList({\n value = '',\n initialSearchValue: searchValue,\n scrollToValue,\n anchorElement,\n open = false,\n children,\n onOptionSelect,\n noSuggestionMessage = '-- No Matches --',\n onClose,\n onChange,\n onKeyUp,\n onKeyDown,\n trimCustomInput = false,\n haveValueAsOption = false,\n restoreFocus = true,\n ...props\n}: SuggestionListProps) {\n // Extract valid Option components from children\n const suggestions = React.useMemo(\n () =>\n Children.toArray(children).filter(\n (child): child is React.ReactElement<OptionProps> =>\n isValidElement(child) && child.type === Option\n ),\n [children]\n );\n\n const [selectedIndex, setSelectedIndex] = useState(() => {\n if (scrollToValue != null) {\n const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n if (index !== -1) {\n return index;\n }\n }\n return -1;\n });\n\n const keyPressedDownRef = useRef('');\n const KeyDownRegistered = useRef(false);\n const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n const [internalValue, setInternalValue] = useState(value);\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n () => []\n );\n const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n if (!KeyDownRegistered.current) {\n return;\n }\n KeyDownRegistered.current = false;\n\n const key = event.key;\n const input = event.currentTarget;\n\n const isSameKey = (keyPressedDownRef.current = key);\n keyPressedDownRef.current = '';\n\n // Enter and Escape remove the popover, so we want to handle this on keyup.\n // This prevents from another element from getting the key events.\n if (isSameKey) {\n switch (key) {\n case 'Enter': {\n if (matchedOptions[focusedIndex] == null) {\n const value = trimCustomInput ? input.value.trim() : input.value;\n\n if (value === '') {\n return;\n }\n\n const lowercaseValue = value.toLocaleLowerCase();\n const option = suggestions.find(\n option =>\n option.props.value.toLocaleLowerCase() === lowercaseValue ||\n (option.props.label != null &&\n option.props.label.toLocaleLowerCase() === lowercaseValue)\n );\n\n const isSuggestion = option != null;\n const label = option?.props.label || value;\n const optionValue = option?.props.value || value;\n\n requestAnimationFrame(() => {\n onOptionSelect &&\n onOptionSelect(\n optionValue,\n label,\n isSuggestion,\n option?.props.obfuscate ?? false\n );\n });\n\n break;\n }\n const selectedOption = matchedOptions[focusedIndex];\n const optionProps = selectedOption.props;\n\n // Don't select disabled options\n if (optionProps.disabled) {\n break;\n }\n\n requestAnimationFrame(() => {\n onOptionSelect &&\n onOptionSelect(\n optionProps.value,\n optionProps.label,\n true,\n optionProps.obfuscate ?? false\n );\n });\n break;\n }\n case 'Escape': {\n onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n break;\n }\n }\n }\n\n onKeyUp && onKeyUp(event);\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n const key = event.key;\n keyPressedDownRef.current = key;\n KeyDownRegistered.current = true;\n // We handle these key events on keydown to be responsive navigation.\n switch (key) {\n case 'ArrowDown': {\n let newIndex = focusedIndex + 1;\n\n // Skip disabled options\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n\n if (newIndex === matchedOptions.length) {\n // Wrap around to first non-disabled option\n newIndex = 0;\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n // If all options are disabled, stay at -1\n if (newIndex === matchedOptions.length) {\n newIndex = -1;\n }\n }\n\n setFocusedIndex(newIndex);\n event.preventDefault();\n break;\n }\n case 'Tab': {\n let step = 1;\n if (event.shiftKey) {\n step = -1;\n }\n let newIndex = focusedIndex + step;\n // Skip disabled options\n if (step > 0) {\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n } else {\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n }\n\n if (newIndex === matchedOptions.length) {\n // Wrap around to first non-disabled option\n newIndex = 0;\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n // If all options are disabled, stay at -1\n if (newIndex === matchedOptions.length) {\n newIndex = -1;\n }\n } else if (newIndex <= -1) {\n // Wrap around to last non-disabled option\n newIndex = matchedOptions.length - 1;\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n // If all options are disabled, stay at -1\n if (newIndex === -1) {\n newIndex = -1;\n }\n }\n\n setFocusedIndex(newIndex);\n event.preventDefault();\n break;\n }\n case 'ArrowUp': {\n let newIndex = focusedIndex - 1;\n\n // Skip disabled options\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n\n if (newIndex === -1) {\n // Wrap around to last non-disabled option\n newIndex = matchedOptions.length - 1;\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n // If all options are disabled, stay at -1\n if (newIndex === -1) {\n newIndex = -1;\n }\n }\n\n setFocusedIndex(newIndex);\n event.preventDefault();\n break;\n }\n }\n onKeyDown && onKeyDown(event);\n }\n\n const getMatchedOptions = React.useCallback(\n function getMatchedOptions(value: string, maxResults: number) {\n const results = suggestions.filter(option => {\n const props = option.props;\n const label = String(props.label).toLocaleLowerCase();\n const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n const optionValue = String(props.value).toLocaleLowerCase();\n const searchValue = value.toLocaleLowerCase();\n const obfuscate = props.obfuscate ?? false;\n\n // Obfuscated options can only be searched by label or keywords, not by value\n if (obfuscate) {\n return (\n label.includes(searchValue) || keywords.some(k => k.includes(searchValue))\n );\n }\n\n return (\n label.includes(searchValue) ||\n keywords.some(k => k.includes(searchValue)) ||\n optionValue.includes(searchValue)\n );\n });\n\n if (\n haveValueAsOption &&\n value.trim().length > 0 &&\n !results.some(r => r.props.value === value)\n ) {\n results.unshift(\n <Option key=\"value\" value={value} label={value} keywords={[value]}>\n {value}\n </Option>\n );\n }\n\n setTotalMatchedLength(results.length);\n return results.slice(0, maxResults);\n },\n [suggestions, haveValueAsOption]\n );\n\n function focusInput() {\n const input = internalInputRef.current;\n if (input != null) {\n input.focus();\n }\n }\n\n function handleUseClose() {\n const input = internalInputRef.current;\n if (input != null) {\n onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n }\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n const input = event.currentTarget;\n\n setMaxResults(MAX_RESULTS);\n setInternalValue(event.target.value);\n\n const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n setMatchedOptions(newMatches);\n\n onChange && onChange(event.target.value);\n }\n\n function handleShowMore() {\n const newMaxResults = maxResults + BATCH_SIZE;\n setMaxResults(newMaxResults);\n const newMatches = getMatchedOptions(internalValue, newMaxResults);\n setMatchedOptions(newMatches);\n }\n\n useLayoutEffect(() => {\n const input = internalInputRef.current;\n\n if (!open) {\n return;\n }\n\n if (input != null && input.value.length > 0) {\n input.select();\n } else if (input != null) {\n input.focus();\n }\n }, [open]);\n\n useLayoutEffect(() => {\n if (anchorElement != null) {\n const rect = anchorElement.getBoundingClientRect();\n setSuggestionsWidth(`${rect.width}px`);\n setSuggestionsHeight(`${rect.height}px`);\n\n if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n internalInputRef.current.value = anchorElement.value;\n internalInputRef.current.selectionStart = anchorElement.selectionStart;\n internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n }\n }\n }, [anchorElement]);\n\n useLayoutEffect(() => {\n if (scrollToValue != null) {\n const index = matchedOptions.findIndex(\n option => option.props.value === scrollToValue\n );\n setSelectedIndex(index);\n }\n }, [matchedOptions, scrollToValue]);\n\n useLayoutEffect(() => {\n setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n }, [internalValue, selectedIndex]);\n\n useLayoutEffect(() => {\n setInternalValue(searchValue ?? '');\n }, [searchValue]);\n\n useLayoutEffect(() => {\n const newMatches = getMatchedOptions(value, MAX_RESULTS);\n setMatchedOptions(newMatches);\n }, [value, getMatchedOptions]);\n\n return (\n <Popper\n open={open}\n anchorElement={anchorElement}\n onClose={handleUseClose}\n verticalAnchor=\"top\"\n verticalOrigin=\"top\"\n verticalOffset={-4}\n restoreFocus={restoreFocus}\n >\n <VStack\n minHeight={`calc(${suggestionsHeight}, 8px)`}\n maxHeight=\"300px\"\n minWidth={suggestionsWidth}\n width=\"auto\"\n hAlign=\"start\"\n className={clsx(styles['suggestion-list'], 'tcn-suggestion-list')}\n >\n <input\n ref={internalInputRef}\n key={-1}\n value={internalValue}\n onKeyUp={handleKeyUp}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n className={clsx(styles.input, 'tcn-suggestion-list-search-input')}\n {...props}\n />\n <VStack>\n {matchedOptions.map((option, index) => (\n <SuggestionItem\n key={index}\n option={option}\n isSelected={index === selectedIndex && internalValue !== ''}\n isFocused={index === focusedIndex}\n onClick={onOptionSelect}\n />\n ))}\n {totalMatchedLength > matchedOptions.length && (\n <>\n <Button\n key=\"show-more\"\n marginBlock=\"8px\"\n hierarchy=\"tertiary\"\n onClick={handleShowMore}\n >\n Show More\n </Button>\n </>\n )}\n </VStack>\n {matchedOptions.length === 0 && (\n <ZStack\n padding=\"8px\"\n className={clsx(styles['no-results'], 'tcn-suggestion-list-no-results')}\n >\n <BodyText>{noSuggestionMessage}</BodyText>\n </ZStack>\n )}\n <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n </VStack>\n </Popper>\n );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","searchValue","scrollToValue","anchorElement","open","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","restoreFocus","props","suggestions","React","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","KeyDownRegistered","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","getMatchedOptions","results","keywords","k","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","clsx","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;wGAcMA,IAAc,IACdC,KAAa;AA4BZ,SAASC,GAAe;AAAA,EAC7B,OAAAC,IAAQ;AAAA,EACR,oBAAoBC;AAAA,EACpB,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC,IAAoB;AAAA,EACpB,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,GAAwB;AAEtB,QAAMC,IAAcC,EAAM;AAAA,IACxB,MACEC,GAAS,QAAQb,CAAQ,EAAE;AAAA,MACzB,CAACc,MACCC,GAAeD,CAAK,KAAKA,EAAM,SAASE;AAAA,IAAA;AAAA,IAE9C,CAAChB,CAAQ;AAAA,EAAA,GAGL,CAACiB,GAAeC,CAAgB,IAAIC,EAAS,MAAM;AACvD,QAAItB,KAAiB,MAAM;AACzB,YAAMuB,IAAQT,EAAY,UAAU,OAAUU,EAAO,MAAM,UAAUxB,CAAa;AAClF,UAAIuB,MAAU;AACZ,eAAOA;AAAA,IAEX;AACA,WAAO;AAAA,EACT,CAAC,GAEKE,IAAoBC,EAAO,EAAE,GAC7BC,IAAoBD,EAAO,EAAK,GAChC,CAACE,IAAYC,CAAa,IAAIP,EAAS3B,CAAW,GAClD,CAACmC,GAAcC,CAAe,IAAIT,EAASF,CAAa,GACxD,CAACY,GAAeC,CAAgB,IAAIX,EAASxB,CAAK,GAClDoC,IAAmBR,EAAgC,IAAI,GACvD,CAACS,IAAoBC,EAAqB,IAAId,EAASR,EAAY,MAAM,GACzE,CAACuB,GAAgBC,CAAiB,IAAIhB;AAAA,IAC1C,MAAM,CAAA;AAAA,EAAC,GAEH,CAACiB,IAAkBC,EAAmB,IAAIlB,EAAA,GAC1C,CAACmB,IAAmBC,EAAoB,IAAIpB,EAAA;AAElD,WAASqB,GAAYC,GAA8C;AACjE,QAAI,CAACjB,EAAkB;AACrB;AAEF,IAAAA,EAAkB,UAAU;AAE5B,UAAMkB,IAAMD,EAAM,KACZE,IAAQF,EAAM,eAEdG,IAAatB,EAAkB,UAAUoB;AAK/C,QAJApB,EAAkB,UAAU,IAIxBsB;AACF,cAAQF,GAAA;AAAA,QACN,KAAK,SAAS;AACZ,cAAIR,EAAeP,CAAY,KAAK,MAAM;AACxC,kBAAMhC,IAAQY,IAAkBoC,EAAM,MAAM,KAAA,IAASA,EAAM;AAE3D,gBAAIhD,MAAU;AACZ;AAGF,kBAAMkD,IAAiBlD,EAAM,kBAAA,GACvB0B,IAASV,EAAY;AAAA,cACzB,CAAAU,MACEA,EAAO,MAAM,MAAM,wBAAwBwB,KAC1CxB,EAAO,MAAM,SAAS,QACrBA,EAAO,MAAM,MAAM,wBAAwBwB;AAAA,YAAA,GAG3CC,IAAezB,KAAU,MACzB0B,IAAQ1B,GAAQ,MAAM,SAAS1B,GAC/BqD,IAAc3B,GAAQ,MAAM,SAAS1B;AAE3C,kCAAsB,MAAM;AAC1B,cAAAM,KACEA;AAAA,gBACE+C;AAAA,gBACAD;AAAA,gBACAD;AAAA,gBACAzB,GAAQ,MAAM,aAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAED;AAAA,UACF;AAEA,gBAAM4B,IADiBf,EAAeP,CAAY,EACf;AAGnC,cAAIsB,EAAY;AACd;AAGF,gCAAsB,MAAM;AAC1B,YAAAhD,KACEA;AAAA,cACEgD,EAAY;AAAA,cACZA,EAAY;AAAA,cACZ;AAAA,cACAA,EAAY,aAAa;AAAA,YAAA;AAAA,UAE/B,CAAC;AACD;AAAA,QACF;AAAA,QACA,KAAK,UAAU;AACb,UAAA9C,KAAWA,EAAQwC,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AACxE;AAAA,QACF;AAAA,MAAA;AAIJ,IAAAtC,KAAWA,EAAQoC,CAAK;AAAA,EAC1B;AAEA,WAASS,GAAcT,GAA8C;AACnE,UAAMC,IAAMD,EAAM;AAIlB,YAHAnB,EAAkB,UAAUoB,GAC5BlB,EAAkB,UAAU,IAEpBkB,GAAA;AAAA,MACN,KAAK,aAAa;AAChB,YAAIS,IAAWxB,IAAe;AAG9B,eACEwB,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,UAAAA;AAGF,YAAIA,MAAajB,EAAe,QAAQ;AAGtC,eADAiB,IAAW,GAETA,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAajB,EAAe,WAC9BiB,IAAW;AAAA,QAEf;AAEA,QAAAvB,EAAgBuB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,YAAIW,IAAO;AACX,QAAIX,EAAM,aACRW,IAAO;AAET,YAAID,IAAWxB,IAAeyB;AAE9B,YAAIA,IAAO;AACT,iBACED,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAAA;AAGF,iBAAOA,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAIJ,YAAIA,MAAajB,EAAe,QAAQ;AAGtC,eADAiB,IAAW,GAETA,IAAWjB,EAAe,UAC1BA,EAAeiB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAajB,EAAe,WAC9BiB,IAAW;AAAA,QAEf,WAAWA,KAAY,IAAI;AAGzB,eADAA,IAAWjB,EAAe,SAAS,GAC5BiB,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAvB,EAAgBuB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,YAAIU,IAAWxB,IAAe;AAG9B,eAAOwB,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,UAAAA;AAGF,YAAIA,MAAa,IAAI;AAGnB,eADAA,IAAWjB,EAAe,SAAS,GAC5BiB,KAAY,KAAKjB,EAAeiB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAvB,EAAgBuB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IAAA;AAEF,IAAAnC,KAAaA,EAAUmC,CAAK;AAAA,EAC9B;AAEA,QAAMY,IAAoBzC,EAAM;AAAA,IAC9B,SAA2BjB,GAAe8B,GAAoB;AAC5D,YAAM6B,IAAU3C,EAAY,OAAO,CAAAU,MAAU;AAC3C,cAAMX,IAAQW,EAAO,OACf0B,IAAQ,OAAOrC,EAAM,KAAK,EAAE,kBAAA,GAC5B6C,IAAW7C,EAAM,UAAU,IAAI,OAAK8C,EAAE,kBAAA,CAAmB,KAAK,CAAA,GAC9DR,IAAc,OAAOtC,EAAM,KAAK,EAAE,kBAAA,GAClCd,IAAcD,EAAM,kBAAA;AAI1B,eAHkBe,EAAM,aAAa,KAKjCqC,EAAM,SAASnD,CAAW,KAAK2D,EAAS,KAAK,CAAAC,MAAKA,EAAE,SAAS5D,CAAW,CAAC,IAK3EmD,EAAM,SAASnD,CAAW,KAC1B2D,EAAS,KAAK,CAAAC,MAAKA,EAAE,SAAS5D,CAAW,CAAC,KAC1CoD,EAAY,SAASpD,CAAW;AAAA,MAEpC,CAAC;AAED,aACEY,KACAb,EAAM,KAAA,EAAO,SAAS,KACtB,CAAC2D,EAAQ,KAAK,CAAAG,MAAKA,EAAE,MAAM,UAAU9D,CAAK,KAE1C2D,EAAQ;AAAA,QACN,gBAAAI,EAAC1C,GAAA,EAAmB,OAAOrB,GAAO,OAAOA,GAAO,UAAU,CAACA,CAAK,GAC7D,UAAAA,EAAAA,GADS,OAEZ;AAAA,MAAA,GAIJsC,GAAsBqB,EAAQ,MAAM,GAC7BA,EAAQ,MAAM,GAAG7B,CAAU;AAAA,IACpC;AAAA,IACA,CAACd,GAAaH,CAAiB;AAAA,EAAA;AAGjC,WAASmD,KAAa;AACpB,UAAMhB,IAAQZ,EAAiB;AAC/B,IACEY,GAAM,MAAA;AAAA,EAEV;AAEA,WAASiB,KAAiB;AACxB,UAAMjB,IAAQZ,EAAiB;AAC/B,IAAIY,KAAS,QACXxC,KAAWA,EAAQwC,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AAAA,EAE5E;AAEA,WAASkB,GAAapB,GAA4C;AAChE,UAAME,IAAQF,EAAM;AAEpB,IAAAf,EAAclC,CAAW,GACzBsC,EAAiBW,EAAM,OAAO,KAAK;AAEnC,UAAMqB,IAAaT,EAAkBV,EAAM,OAAOnD,CAAW;AAC7D,IAAA2C,EAAkB2B,CAAU,GAE5B1D,KAAYA,EAASqC,EAAM,OAAO,KAAK;AAAA,EACzC;AAEA,WAASsB,KAAiB;AACxB,UAAMC,IAAgBvC,KAAahC;AACnC,IAAAiC,EAAcsC,CAAa;AAC3B,UAAMF,IAAaT,EAAkBxB,GAAemC,CAAa;AACjE,IAAA7B,EAAkB2B,CAAU;AAAA,EAC9B;AAEA,SAAAG,EAAgB,MAAM;AACpB,UAAMtB,IAAQZ,EAAiB;AAE/B,IAAKhC,MAID4C,KAAS,QAAQA,EAAM,MAAM,SAAS,IACxCA,EAAM,OAAA,IAENA,GAAM,MAAA;AAAA,EAEV,GAAG,CAAC5C,CAAI,CAAC,GAETkE,EAAgB,MAAM;AACpB,QAAInE,KAAiB,MAAM;AACzB,YAAMoE,IAAOpE,EAAc,sBAAA;AAC3B,MAAAuC,GAAoB,GAAG6B,EAAK,KAAK,IAAI,GACrC3B,GAAqB,GAAG2B,EAAK,MAAM,IAAI,GAEnCnC,EAAiB,WAAW,QAAQjC,aAAyB,qBAC/DiC,EAAiB,QAAQ,QAAQjC,EAAc,OAC/CiC,EAAiB,QAAQ,iBAAiBjC,EAAc,gBACxDiC,EAAiB,QAAQ,eAAejC,EAAc;AAAA,IAE1D;AAAA,EACF,GAAG,CAACA,CAAa,CAAC,GAElBmE,EAAgB,MAAM;AACpB,QAAIpE,KAAiB,MAAM;AACzB,YAAMuB,IAAQc,EAAe;AAAA,QAC3B,CAAAb,MAAUA,EAAO,MAAM,UAAUxB;AAAA,MAAA;AAEnC,MAAAqB,EAAiBE,CAAK;AAAA,IACxB;AAAA,EACF,GAAG,CAACc,GAAgBrC,CAAa,CAAC,GAElCoE,EAAgB,MAAM;AACpB,IAAArC,EAAgBC,MAAkB,KAAKZ,IAAgB,EAAE;AAAA,EAC3D,GAAG,CAACY,GAAeZ,CAAa,CAAC,GAEjCgD,EAAgB,MAAM;AACpB,IAAAnC,EAAiBlC,KAAe,EAAE;AAAA,EACpC,GAAG,CAACA,CAAW,CAAC,GAEhBqE,EAAgB,MAAM;AACpB,UAAMH,IAAaT,EAAkB1D,GAAOH,CAAW;AACvD,IAAA2C,EAAkB2B,CAAU;AAAA,EAC9B,GAAG,CAACnE,GAAO0D,CAAiB,CAAC,GAG3B,gBAAAK;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,MAAApE;AAAA,MACA,eAAAD;AAAA,MACA,SAAS8D;AAAA,MACT,gBAAe;AAAA,MACf,gBAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,cAAAnD;AAAA,MAEA,UAAA,gBAAA2D;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ/B,EAAiB;AAAA,UACpC,WAAU;AAAA,UACV,UAAUF;AAAA,UACV,OAAM;AAAA,UACN,QAAO;AAAA,UACP,WAAWkC,EAAKC,EAAO,iBAAiB,GAAG,qBAAqB;AAAA,UAEhE,UAAA;AAAA,YAAA,gBAAAb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK3B;AAAA,gBAEL,OAAOF;AAAA,gBACP,SAASW;AAAA,gBACT,WAAWU;AAAA,gBACX,UAAUW;AAAA,gBACV,WAAWS,EAAKC,EAAO,OAAO,kCAAkC;AAAA,gBAC/D,GAAG7D;AAAA,cAAA;AAAA,cANC;AAAA,YAAA;AAAA,8BAQN2D,GAAA,EACE,UAAA;AAAA,cAAAnC,EAAe,IAAI,CAACb,GAAQD,MAC3B,gBAAAsC;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBAEC,QAAAnD;AAAA,kBACA,YAAYD,MAAUH,KAAiBY,MAAkB;AAAA,kBACzD,WAAWT,MAAUO;AAAA,kBACrB,SAAS1B;AAAA,gBAAA;AAAA,gBAJJmB;AAAA,cAAA,CAMR;AAAA,cACAY,KAAqBE,EAAe,UACnC,gBAAAwB,EAAAe,IAAA,EACE,UAAA,gBAAAf;AAAA,gBAACgB;AAAA,gBAAA;AAAA,kBAEC,aAAY;AAAA,kBACZ,WAAU;AAAA,kBACV,SAASX;AAAA,kBACV,UAAA;AAAA,gBAAA;AAAA,gBAJK;AAAA,cAAA,EAMN,CACF;AAAA,YAAA,GAEJ;AAAA,YACC7B,EAAe,WAAW,KACzB,gBAAAwB;AAAA,cAACiB;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAWL,EAAKC,EAAO,YAAY,GAAG,gCAAgC;AAAA,gBAEtE,UAAA,gBAAAb,EAACkB,MAAU,UAAA1E,EAAA,CAAoB;AAAA,cAAA;AAAA,YAAA;AAAA,8BAGlC2E,IAAA,EAA8C,YAAYlB,GAAA,GAAvCzB,EAAe,SAAS,CAA2B;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzE;AAAA,EAAA;AAGN;"}
1
+ {"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/legacy/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n value?: string;\n initialSearchValue?: string;\n scrollToValue?: string;\n anchorElement: HTMLElement | null;\n open?: boolean;\n children?: React.ReactNode;\n onChange?: (value: string) => void;\n width?: string;\n onOptionSelect?: (\n value: string,\n label: string | undefined,\n isSuggestion: boolean,\n obfuscate: boolean\n ) => void;\n noSuggestionMessage?: React.ReactNode;\n trimCustomInput?: boolean;\n haveValueAsOption?: boolean;\n restoreFocus?: boolean;\n onClose?: (\n inputValue: string,\n cursorStartPosition: number | null,\n cursorEndPosition: number | null\n ) => void;\n verticalAnchor?: 'top' | 'center' | 'bottom';\n verticalOrigin?: 'top' | 'center' | 'bottom';\n verticalOffset?: number;\n horizontalAnchor?: 'start' | 'center' | 'end';\n horizontalOrigin?: 'start' | 'center' | 'end';\n horizontalOffset?: number;\n}\n\nexport function SuggestionList({\n value = '',\n initialSearchValue: searchValue,\n scrollToValue,\n anchorElement,\n open = false,\n width = 'auto',\n children,\n onOptionSelect,\n noSuggestionMessage = '-- No Matches --',\n onClose,\n onChange,\n onKeyUp,\n onKeyDown,\n trimCustomInput = false,\n haveValueAsOption = false,\n restoreFocus = true,\n verticalAnchor = 'top',\n verticalOrigin = 'top',\n verticalOffset = -4,\n horizontalAnchor = 'start',\n horizontalOrigin = 'start',\n horizontalOffset = 0,\n ...props\n}: SuggestionListProps) {\n // Extract valid Option components from children\n const suggestions = React.useMemo(\n () =>\n Children.toArray(children).filter(\n (child): child is React.ReactElement<OptionProps> =>\n isValidElement(child) && child.type === Option\n ),\n [children]\n );\n\n const [selectedIndex, setSelectedIndex] = useState(() => {\n if (scrollToValue != null) {\n const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n if (index !== -1) {\n return index;\n }\n }\n return -1;\n });\n\n const keyPressedDownRef = useRef('');\n const KeyDownRegistered = useRef(false);\n const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n const [internalValue, setInternalValue] = useState(value);\n const internalInputRef = useRef<HTMLInputElement | null>(null);\n const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n () => []\n );\n const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n if (!KeyDownRegistered.current) {\n return;\n }\n KeyDownRegistered.current = false;\n\n const key = event.key;\n const input = event.currentTarget;\n\n const isSameKey = (keyPressedDownRef.current = key);\n keyPressedDownRef.current = '';\n\n // Enter and Escape remove the popover, so we want to handle this on keyup.\n // This prevents from another element from getting the key events.\n if (isSameKey) {\n switch (key) {\n case 'Enter': {\n if (matchedOptions[focusedIndex] == null) {\n const value = trimCustomInput ? input.value.trim() : input.value;\n\n if (value === '') {\n return;\n }\n\n const lowercaseValue = value.toLocaleLowerCase();\n const option = suggestions.find(\n option =>\n option.props.value.toLocaleLowerCase() === lowercaseValue ||\n (option.props.label != null &&\n option.props.label.toLocaleLowerCase() === lowercaseValue)\n );\n\n const isSuggestion = option != null;\n const label = option?.props.label || value;\n const optionValue = option?.props.value || value;\n\n requestAnimationFrame(() => {\n onOptionSelect &&\n onOptionSelect(\n optionValue,\n label,\n isSuggestion,\n option?.props.obfuscate ?? false\n );\n });\n\n break;\n }\n const selectedOption = matchedOptions[focusedIndex];\n const optionProps = selectedOption.props;\n\n // Don't select disabled options\n if (optionProps.disabled) {\n break;\n }\n\n requestAnimationFrame(() => {\n onOptionSelect &&\n onOptionSelect(\n optionProps.value,\n optionProps.label,\n true,\n optionProps.obfuscate ?? false\n );\n });\n break;\n }\n case 'Escape': {\n onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n break;\n }\n }\n }\n\n onKeyUp && onKeyUp(event);\n }\n\n function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n const key = event.key;\n keyPressedDownRef.current = key;\n KeyDownRegistered.current = true;\n // We handle these key events on keydown to be responsive navigation.\n switch (key) {\n case 'ArrowDown': {\n let newIndex = focusedIndex + 1;\n\n // Skip disabled options\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n\n if (newIndex === matchedOptions.length) {\n // Wrap around to first non-disabled option\n newIndex = 0;\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n // If all options are disabled, stay at -1\n if (newIndex === matchedOptions.length) {\n newIndex = -1;\n }\n }\n\n setFocusedIndex(newIndex);\n event.preventDefault();\n break;\n }\n case 'Tab': {\n let step = 1;\n if (event.shiftKey) {\n step = -1;\n }\n let newIndex = focusedIndex + step;\n // Skip disabled options\n if (step > 0) {\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n } else {\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n }\n\n if (newIndex === matchedOptions.length) {\n // Wrap around to first non-disabled option\n newIndex = 0;\n while (\n newIndex < matchedOptions.length &&\n matchedOptions[newIndex]?.props.disabled\n ) {\n newIndex++;\n }\n // If all options are disabled, stay at -1\n if (newIndex === matchedOptions.length) {\n newIndex = -1;\n }\n } else if (newIndex <= -1) {\n // Wrap around to last non-disabled option\n newIndex = matchedOptions.length - 1;\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n // If all options are disabled, stay at -1\n if (newIndex === -1) {\n newIndex = -1;\n }\n }\n\n setFocusedIndex(newIndex);\n event.preventDefault();\n break;\n }\n case 'ArrowUp': {\n let newIndex = focusedIndex - 1;\n\n // Skip disabled options\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n\n if (newIndex === -1) {\n // Wrap around to last non-disabled option\n newIndex = matchedOptions.length - 1;\n while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n newIndex--;\n }\n // If all options are disabled, stay at -1\n if (newIndex === -1) {\n newIndex = -1;\n }\n }\n\n setFocusedIndex(newIndex);\n event.preventDefault();\n break;\n }\n }\n onKeyDown && onKeyDown(event);\n }\n\n const getMatchedOptions = React.useCallback(\n function getMatchedOptions(value: string, maxResults: number) {\n const results = suggestions.filter(option => {\n const props = option.props;\n const label = String(props.label).toLocaleLowerCase();\n const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n const optionValue = String(props.value).toLocaleLowerCase();\n const searchValue = value.toLocaleLowerCase();\n const obfuscate = props.obfuscate ?? false;\n\n // Obfuscated options can only be searched by label or keywords, not by value\n if (obfuscate) {\n return (\n label.includes(searchValue) || keywords.some(k => k.includes(searchValue))\n );\n }\n\n return (\n label.includes(searchValue) ||\n keywords.some(k => k.includes(searchValue)) ||\n optionValue.includes(searchValue)\n );\n });\n\n if (\n haveValueAsOption &&\n value.trim().length > 0 &&\n !results.some(r => r.props.value === value)\n ) {\n results.unshift(\n <Option key=\"value\" value={value} label={value} keywords={[value]}>\n {value}\n </Option>\n );\n }\n\n setTotalMatchedLength(results.length);\n return results.slice(0, maxResults);\n },\n [suggestions, haveValueAsOption]\n );\n\n function focusInput() {\n const input = internalInputRef.current;\n if (input != null) {\n input.focus();\n }\n }\n\n function handleUseClose() {\n const input = internalInputRef.current;\n if (input != null) {\n onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n }\n }\n\n function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n const input = event.currentTarget;\n\n setMaxResults(MAX_RESULTS);\n setInternalValue(event.target.value);\n\n const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n setMatchedOptions(newMatches);\n\n onChange && onChange(event.target.value);\n }\n\n function handleShowMore() {\n const newMaxResults = maxResults + BATCH_SIZE;\n setMaxResults(newMaxResults);\n const newMatches = getMatchedOptions(internalValue, newMaxResults);\n setMatchedOptions(newMatches);\n }\n\n useLayoutEffect(() => {\n const input = internalInputRef.current;\n\n if (!open) {\n return;\n }\n\n if (input != null && input.value.length > 0) {\n input.select();\n } else if (input != null) {\n input.focus();\n }\n }, [open]);\n\n useLayoutEffect(() => {\n if (anchorElement != null) {\n const rect = anchorElement.getBoundingClientRect();\n setSuggestionsWidth(`${rect.width}px`);\n setSuggestionsHeight(`${rect.height}px`);\n\n if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n internalInputRef.current.value = anchorElement.value;\n internalInputRef.current.selectionStart = anchorElement.selectionStart;\n internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n }\n }\n }, [anchorElement]);\n\n useLayoutEffect(() => {\n if (scrollToValue != null) {\n const index = matchedOptions.findIndex(\n option => option.props.value === scrollToValue\n );\n setSelectedIndex(index);\n }\n }, [matchedOptions, scrollToValue]);\n\n useLayoutEffect(() => {\n setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n }, [internalValue, selectedIndex]);\n\n useLayoutEffect(() => {\n setInternalValue(searchValue ?? '');\n }, [searchValue]);\n\n useLayoutEffect(() => {\n const newMatches = getMatchedOptions(internalValue, MAX_RESULTS);\n setMatchedOptions(newMatches);\n }, [getMatchedOptions, internalValue]);\n\n return (\n <Popper\n open={open}\n anchorElement={anchorElement}\n onClose={handleUseClose}\n verticalAnchor={verticalAnchor}\n verticalOrigin={verticalOrigin}\n verticalOffset={verticalOffset}\n horizontalAnchor={horizontalAnchor}\n horizontalOrigin={horizontalOrigin}\n horizontalOffset={horizontalOffset}\n restoreFocus={restoreFocus}\n >\n <VStack\n minHeight={`calc(${suggestionsHeight}, 8px)`}\n maxHeight=\"300px\"\n minWidth={suggestionsWidth}\n width={width}\n hAlign=\"start\"\n className={clsx(styles['suggestion-list'], 'tcn-suggestion-list')}\n >\n <input\n ref={internalInputRef}\n key={-1}\n value={internalValue}\n onKeyUp={handleKeyUp}\n onKeyDown={handleKeyDown}\n onChange={handleChange}\n className={clsx(styles.input, 'tcn-suggestion-list-search-input')}\n {...props}\n />\n <VStack>\n {matchedOptions.map((option, index) => (\n <SuggestionItem\n key={index}\n option={option}\n isSelected={index === selectedIndex && internalValue !== ''}\n isFocused={index === focusedIndex}\n onClick={onOptionSelect}\n />\n ))}\n {totalMatchedLength > matchedOptions.length && (\n <>\n <Button\n key=\"show-more\"\n marginBlock=\"8px\"\n hierarchy=\"tertiary\"\n onClick={handleShowMore}\n >\n Show More\n </Button>\n </>\n )}\n </VStack>\n {matchedOptions.length === 0 && (\n <ZStack\n padding=\"8px\"\n className={clsx(styles['no-results'], 'tcn-suggestion-list-no-results')}\n >\n <BodyText>{noSuggestionMessage}</BodyText>\n </ZStack>\n )}\n <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n </VStack>\n </Popper>\n );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","searchValue","scrollToValue","anchorElement","open","width","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","restoreFocus","verticalAnchor","verticalOrigin","verticalOffset","horizontalAnchor","horizontalOrigin","horizontalOffset","props","suggestions","React","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","KeyDownRegistered","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","getMatchedOptions","results","keywords","k","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","clsx","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":"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"}
@@ -1,9 +1,9 @@
1
- import { jsxs as L, Fragment as m, jsx as l } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as L, Fragment as m } from "react/jsx-runtime";
2
2
  import { forwardRef as C } from "react";
3
3
  import { ClickAwayListener as k } from "../../../utils/click_away_listener.js";
4
4
  import { ScrollAwayListener as v } from "../../../utils/scroll_away_listener.js";
5
- import { MouseLeaveRegion as E } from "../../../utils/mouse_leave_region.js";
6
- var d = /* @__PURE__ */ ((e) => (e.CLICK_AWAY = "clickAway", e.SCROLL_AWAY = "scrollAway", e.MOUSE_LEAVE = "mouseLeave", e.VEIL_CLICK = "veilClick", e))(d || {});
5
+ import { MouseLeaveRegion as d } from "../../../utils/mouse_leave_region.js";
6
+ var E = /* @__PURE__ */ ((e) => (e.CLICK_AWAY = "clickAway", e.SCROLL_AWAY = "scrollAway", e.MOUSE_LEAVE = "mouseLeave", e.VEIL_CLICK = "veilClick", e))(E || {});
7
7
  const I = C(function({ onDismissal: a, isException: A, dismissals: r = [], children: s, acceptedRefs: i = [] }, h) {
8
8
  const u = r.includes(
9
9
  "clickAway"
@@ -18,12 +18,12 @@ const I = C(function({ onDismissal: a, isException: A, dismissals: r = [], child
18
18
  a?.(c);
19
19
  };
20
20
  function t(c) {
21
- return c in r ? (y) => A?.(c, y) ?? !1 : () => !1;
21
+ return r.includes(c) ? (y) => A?.(c, y) ?? !1 : () => !1;
22
22
  }
23
23
  let o = /* @__PURE__ */ L(m, { children: [
24
24
  s,
25
25
  w && /* @__PURE__ */ l(
26
- E,
26
+ d,
27
27
  {
28
28
  elementsRefs: i,
29
29
  onMouseLeave: n(
@@ -63,7 +63,7 @@ const I = C(function({ onDismissal: a, isException: A, dismissals: r = [], child
63
63
  )), o;
64
64
  });
65
65
  export {
66
- d as PopperDismissal,
66
+ E as PopperDismissal,
67
67
  I as PopperDismissalDecorator
68
68
  };
69
69
  //# sourceMappingURL=dismissal_decorator.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"dismissal_decorator.js","sources":["../../../../src/overlay/popper/base/dismissal_decorator.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { ClickAwayListener } from '../../../utils/click_away_listener.js';\nimport { ScrollAwayListener } from '../../../utils/scroll_away_listener.js';\nimport { MouseLeaveRegion } from '../../../utils/mouse_leave_region.js';\n\nexport enum PopperDismissal {\n CLICK_AWAY = 'clickAway',\n SCROLL_AWAY = 'scrollAway',\n MOUSE_LEAVE = 'mouseLeave',\n VEIL_CLICK = 'veilClick',\n}\n\nexport interface PopperDismissalDecoratorProps {\n dismissals?: PopperDismissal[];\n onDismissal?: (dismissal: PopperDismissal) => void;\n isException?: (dismissal: PopperDismissal, target: HTMLElement) => boolean;\n acceptedRefs?: React.RefObject<HTMLElement>[];\n}\n\nexport const PopperDismissalDecorator = forwardRef<\n HTMLElement,\n PropsWithChildren<PopperDismissalDecoratorProps>\n>(function DismissalDecorator(\n { onDismissal, isException, dismissals = [], children, acceptedRefs = [] },\n ref\n) {\n const hasClickAway = dismissals.includes(PopperDismissal.CLICK_AWAY);\n const hasScrollAway = dismissals.includes(PopperDismissal.SCROLL_AWAY);\n const hasMouseLeave = dismissals.includes(PopperDismissal.MOUSE_LEAVE);\n // TODO:\n // const hasVeilClick = dismissals.includes(PopperDismissal.VEIL_CLICK);\n\n const buildHandleDismissal = (dismissal: PopperDismissal) => () => {\n onDismissal?.(dismissal);\n };\n\n function buildExceptionHandler(dismissal: PopperDismissal) {\n if (dismissal in dismissals) {\n return (target: HTMLElement) => isException?.(dismissal, target) ?? false;\n }\n return () => false;\n }\n\n let content: React.ReactNode = (\n <>\n {children}\n {hasMouseLeave && (\n <MouseLeaveRegion\n elementsRefs={acceptedRefs}\n onMouseLeave={buildHandleDismissal(PopperDismissal.MOUSE_LEAVE)}\n />\n )}\n </>\n );\n\n if (hasScrollAway) {\n content = (\n <ScrollAwayListener\n onScrollAway={buildHandleDismissal(PopperDismissal.SCROLL_AWAY)}\n isException={buildExceptionHandler(PopperDismissal.SCROLL_AWAY)}\n >\n {content}\n </ScrollAwayListener>\n );\n }\n\n if (hasClickAway) {\n content = (\n <ClickAwayListener\n onClickAway={buildHandleDismissal(PopperDismissal.CLICK_AWAY)}\n refs={acceptedRefs}\n isException={buildExceptionHandler(PopperDismissal.CLICK_AWAY)}\n >\n {content}\n </ClickAwayListener>\n );\n }\n\n return content;\n});\n"],"names":["PopperDismissal","PopperDismissalDecorator","forwardRef","onDismissal","isException","dismissals","children","acceptedRefs","ref","hasClickAway","hasScrollAway","hasMouseLeave","buildHandleDismissal","dismissal","buildExceptionHandler","target","content","jsxs","Fragment","jsx","MouseLeaveRegion","ScrollAwayListener","ClickAwayListener"],"mappings":";;;;;AAKO,IAAKA,sBAAAA,OACVA,EAAA,aAAa,aACbA,EAAA,cAAc,cACdA,EAAA,cAAc,cACdA,EAAA,aAAa,aAJHA,IAAAA,KAAA,CAAA,CAAA;AAcL,MAAMC,IAA2BC,EAGtC,SACA,EAAE,aAAAC,GAAa,aAAAC,GAAa,YAAAC,IAAa,CAAA,GAAI,UAAAC,GAAU,cAAAC,IAAe,CAAA,EAAC,GACvEC,GACA;AACA,QAAMC,IAAeJ,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACnCK,IAAgBL,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACpCM,IAAgBN,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GAIpCO,IAAuB,CAACC,MAA+B,MAAM;AACjE,IAAAV,IAAcU,CAAS;AAAA,EACzB;AAEA,WAASC,EAAsBD,GAA4B;AACzD,WAAIA,KAAaR,IACR,CAACU,MAAwBX,IAAcS,GAAWE,CAAM,KAAK,KAE/D,MAAM;AAAA,EACf;AAEA,MAAIC,IACF,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAZ;AAAA,IACAK,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,cAAcb;AAAA,QACd,cAAcK;AAAA,UAAqB;AAAA;AAAA,QAAA;AAAA,MAA2B;AAAA,IAAA;AAAA,EAChE,GAEJ;AAGF,SAAIF,MACFM,IACE,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAcT;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MACnC,aAAaE;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKHP,MACFO,IACE,gBAAAG;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAaV;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MAClC,MAAML;AAAA,MACN,aAAaO;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKAA;AACT,CAAC;"}
1
+ {"version":3,"file":"dismissal_decorator.js","sources":["../../../../src/overlay/popper/base/dismissal_decorator.tsx"],"sourcesContent":["import { forwardRef, type PropsWithChildren } from 'react';\nimport { ClickAwayListener } from '../../../utils/click_away_listener.js';\nimport { ScrollAwayListener } from '../../../utils/scroll_away_listener.js';\nimport { MouseLeaveRegion } from '../../../utils/mouse_leave_region.js';\n\nexport enum PopperDismissal {\n CLICK_AWAY = 'clickAway',\n SCROLL_AWAY = 'scrollAway',\n MOUSE_LEAVE = 'mouseLeave',\n VEIL_CLICK = 'veilClick',\n}\n\nexport interface PopperDismissalDecoratorProps {\n dismissals?: PopperDismissal[];\n onDismissal?: (dismissal: PopperDismissal) => void;\n isException?: (dismissal: PopperDismissal, target: HTMLElement) => boolean;\n acceptedRefs?: React.RefObject<HTMLElement>[];\n}\n\nexport const PopperDismissalDecorator = forwardRef<\n HTMLElement,\n PropsWithChildren<PopperDismissalDecoratorProps>\n>(function DismissalDecorator(\n { onDismissal, isException, dismissals = [], children, acceptedRefs = [] },\n ref\n) {\n const hasClickAway = dismissals.includes(PopperDismissal.CLICK_AWAY);\n const hasScrollAway = dismissals.includes(PopperDismissal.SCROLL_AWAY);\n const hasMouseLeave = dismissals.includes(PopperDismissal.MOUSE_LEAVE);\n // TODO:\n // const hasVeilClick = dismissals.includes(PopperDismissal.VEIL_CLICK);\n\n const buildHandleDismissal = (dismissal: PopperDismissal) => () => {\n onDismissal?.(dismissal);\n };\n\n function buildExceptionHandler(dismissal: PopperDismissal) {\n if (dismissals.includes(dismissal)) {\n return (target: HTMLElement) => isException?.(dismissal, target) ?? false;\n }\n return () => false;\n }\n\n let content: React.ReactNode = (\n <>\n {children}\n {hasMouseLeave && (\n <MouseLeaveRegion\n elementsRefs={acceptedRefs}\n onMouseLeave={buildHandleDismissal(PopperDismissal.MOUSE_LEAVE)}\n />\n )}\n </>\n );\n\n if (hasScrollAway) {\n content = (\n <ScrollAwayListener\n onScrollAway={buildHandleDismissal(PopperDismissal.SCROLL_AWAY)}\n isException={buildExceptionHandler(PopperDismissal.SCROLL_AWAY)}\n >\n {content}\n </ScrollAwayListener>\n );\n }\n\n if (hasClickAway) {\n content = (\n <ClickAwayListener\n onClickAway={buildHandleDismissal(PopperDismissal.CLICK_AWAY)}\n refs={acceptedRefs}\n isException={buildExceptionHandler(PopperDismissal.CLICK_AWAY)}\n >\n {content}\n </ClickAwayListener>\n );\n }\n\n return content;\n});\n"],"names":["PopperDismissal","PopperDismissalDecorator","forwardRef","onDismissal","isException","dismissals","children","acceptedRefs","ref","hasClickAway","hasScrollAway","hasMouseLeave","buildHandleDismissal","dismissal","buildExceptionHandler","target","content","jsxs","Fragment","jsx","MouseLeaveRegion","ScrollAwayListener","ClickAwayListener"],"mappings":";;;;;AAKO,IAAKA,sBAAAA,OACVA,EAAA,aAAa,aACbA,EAAA,cAAc,cACdA,EAAA,cAAc,cACdA,EAAA,aAAa,aAJHA,IAAAA,KAAA,CAAA,CAAA;AAcL,MAAMC,IAA2BC,EAGtC,SACA,EAAE,aAAAC,GAAa,aAAAC,GAAa,YAAAC,IAAa,CAAA,GAAI,UAAAC,GAAU,cAAAC,IAAe,CAAA,EAAC,GACvEC,GACA;AACA,QAAMC,IAAeJ,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACnCK,IAAgBL,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GACpCM,IAAgBN,EAAW;AAAA,IAAS;AAAA;AAAA,EAAA,GAIpCO,IAAuB,CAACC,MAA+B,MAAM;AACjE,IAAAV,IAAcU,CAAS;AAAA,EACzB;AAEA,WAASC,EAAsBD,GAA4B;AACzD,WAAIR,EAAW,SAASQ,CAAS,IACxB,CAACE,MAAwBX,IAAcS,GAAWE,CAAM,KAAK,KAE/D,MAAM;AAAA,EACf;AAEA,MAAIC,IACF,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAZ;AAAA,IACAK,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,cAAcb;AAAA,QACd,cAAcK;AAAA,UAAqB;AAAA;AAAA,QAAA;AAAA,MAA2B;AAAA,IAAA;AAAA,EAChE,GAEJ;AAGF,SAAIF,MACFM,IACE,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,cAAcT;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MACnC,aAAaE;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKHP,MACFO,IACE,gBAAAG;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,aAAaV;AAAA,QAAqB;AAAA;AAAA,MAAA;AAAA,MAClC,MAAML;AAAA,MACN,aAAaO;AAAA,QAAsB;AAAA;AAAA,MAAA;AAAA,MAElC,UAAAE;AAAA,IAAA;AAAA,EAAA,IAKAA;AACT,CAAC;"}
@@ -1 +1 @@
1
- {"version":3,"file":"context_popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/context_popper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAIvE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAC5E,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG;IAC9B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC7C,CAAC;AAEJ,eAAO,MAAM,aAAa;mBAHP,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;kDAkC7C,CAAC"}
1
+ {"version":3,"file":"context_popper.d.ts","sourceRoot":"","sources":["../../../src/overlay/popper/context_popper.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKvE,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,aAAa,CAAC,GAC5E,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAC,GAAG;IAC9B,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC7C,CAAC;AAEJ,eAAO,MAAM,aAAa;mBAHP,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;;;kDAqC7C,CAAC"}
@@ -1,33 +1,41 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { forwardRef as C } from "react";
3
- import { BasePopper as x } from "./base/base_popper.js";
4
- import { Tethered as u } from "../tethered/tethered.js";
5
- import { useContextTrigger as A } from "./hooks/use_context_trigger.js";
6
- import { PopperDismissal as e } from "./base/dismissal_decorator.js";
7
- const R = C(function({
8
- anchorElement: t,
9
- restoreFocus: p,
10
- children: n,
11
- acceptedRefs: i = [],
12
- isException: m,
13
- dismissals: s = [e.CLICK_AWAY, e.SCROLL_AWAY],
14
- ...f
15
- }, c) {
16
- const { isOpen: l, close: a, rectangle: o } = A(t);
17
- return /* @__PURE__ */ r(
18
- x,
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { forwardRef as C, useRef as x } from "react";
3
+ import { BasePopper as A } from "./base/base_popper.js";
4
+ import { Tethered as g } from "../tethered/tethered.js";
5
+ import { useContextTrigger as P } from "./hooks/use_context_trigger.js";
6
+ import { PopperDismissal as p } from "./base/dismissal_decorator.js";
7
+ import "../../utils/click_away_listener.js";
8
+ import "../../utils/focus_redirect.js";
9
+ import "../../utils/scroll_away_listener.js";
10
+ import { useForkRef as L } from "../../utils/hooks/use_fork_ref.js";
11
+ import "../../utils/hooks/use_resize_observer.js";
12
+ import "../../utils/dnd/context.js";
13
+ import "clsx";
14
+ import "../../draggable.module-BgelQsuJ.js";
15
+ const S = C(function({
16
+ anchorElement: o,
17
+ restoreFocus: i,
18
+ children: m,
19
+ acceptedRefs: s = [],
20
+ isException: f,
21
+ dismissals: n = [p.CLICK_AWAY, p.SCROLL_AWAY],
22
+ ...c
23
+ }, l) {
24
+ const { isOpen: R, close: u, rectangle: e } = P(o), r = x(null), a = L(l, r), d = [r, o, ...s];
25
+ return /* @__PURE__ */ t(
26
+ A,
19
27
  {
20
- open: l && o != null,
21
- onDismissal: a,
22
- restoreFocus: p,
23
- dismissals: s,
24
- acceptedRefs: i,
25
- isException: m,
26
- children: /* @__PURE__ */ r(u, { ref: c, anchor: o, ...f, children: n })
28
+ open: R && e != null,
29
+ onDismissal: u,
30
+ restoreFocus: i,
31
+ dismissals: n,
32
+ acceptedRefs: d,
33
+ isException: f,
34
+ children: /* @__PURE__ */ t(g, { ref: a, anchor: e, ...c, children: m })
27
35
  }
28
36
  );
29
37
  });
30
38
  export {
31
- R as ContextPopper
39
+ S as ContextPopper
32
40
  };
33
41
  //# sourceMappingURL=context_popper.js.map