@oneplatformdev/ui 0.1.99-beta.197 → 0.1.99-beta.199

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 (159) hide show
  1. package/.storybook/Wrappers.js.map +1 -1
  2. package/Accordion/Accordion.js.map +1 -1
  3. package/Alert/Alert.js.map +1 -1
  4. package/Alert/alertVariants.js.map +1 -1
  5. package/AlertDialog/AlertDialog.js.map +1 -1
  6. package/AlertDialog/AlertDialog.stories.js +4 -2
  7. package/AlertDialog/AlertDialog.stories.js.map +1 -1
  8. package/AlertDialog/AlertDialogRoot.js +20 -18
  9. package/AlertDialog/AlertDialogRoot.js.map +1 -1
  10. package/AreaChart/AreaChart.js.map +1 -1
  11. package/Aside/Aside.js.map +1 -1
  12. package/Aside/AsideSidebar.js.map +1 -1
  13. package/AspectRatio/AspectRatio.js.map +1 -1
  14. package/Avatar/Avatar.js.map +1 -1
  15. package/Badge/Badge.js.map +1 -1
  16. package/Badge/badgeVariants.js.map +1 -1
  17. package/Breadcrumb/Breadcrumb.js.map +1 -1
  18. package/Button/Button.js +11 -10
  19. package/Button/Button.js.map +1 -1
  20. package/Button/Button.stories.js.map +1 -1
  21. package/Button/Button.utils.js.map +1 -1
  22. package/Button/ButtonCounterBadge.js.map +1 -1
  23. package/Button/buttonVariants.js.map +1 -1
  24. package/ButtonIcon/ButtonIcon.js +22 -19
  25. package/ButtonIcon/ButtonIcon.js.map +1 -1
  26. package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
  27. package/ButtonIcon/buttonIconVariants.js.map +1 -1
  28. package/CHANGELOG.md +2666 -2649
  29. package/Calendar/Calendar.js +6 -4
  30. package/Calendar/Calendar.js.map +1 -1
  31. package/Card/Card.js.map +1 -1
  32. package/Carousel/Carousel.js +7 -6
  33. package/Carousel/Carousel.js.map +1 -1
  34. package/Chart/Chart.js.map +1 -1
  35. package/Checkbox/Checkbox.js +5 -4
  36. package/Checkbox/Checkbox.js.map +1 -1
  37. package/Checkbox/Checkbox.stories.js.map +1 -1
  38. package/Collapsible/Collapsible.js.map +1 -1
  39. package/Combobox/Combobox.js +99 -97
  40. package/Combobox/Combobox.js.map +1 -1
  41. package/Combobox/Combobox.stories.js.map +1 -1
  42. package/Combobox/ComboboxOptionItem.js +4 -4
  43. package/Combobox/ComboboxOptionItem.js.map +1 -1
  44. package/Combobox/ComboboxOptions.js +15 -14
  45. package/Combobox/ComboboxOptions.js.map +1 -1
  46. package/Command/Command.js +23 -22
  47. package/Command/Command.js.map +1 -1
  48. package/DataTable/DataTable.js +24 -22
  49. package/DataTable/DataTable.js.map +1 -1
  50. package/DataTable/DataTableColumnFilter.js +7 -6
  51. package/DataTable/DataTableColumnFilter.js.map +1 -1
  52. package/DataTable/useDataTable.js.map +1 -1
  53. package/DatePicker/DatePicker.js +13 -12
  54. package/DatePicker/DatePicker.js.map +1 -1
  55. package/Dialog/Dialog.d.ts.map +1 -1
  56. package/Dialog/Dialog.js +21 -19
  57. package/Dialog/Dialog.js.map +1 -1
  58. package/Dialog/Dialog.stories.js +15 -14
  59. package/Dialog/Dialog.stories.js.map +1 -1
  60. package/Dialog/DialogOverlayScope.js.map +1 -1
  61. package/Drawer/Drawer.js.map +1 -1
  62. package/DropdownMenu/DropdownMenu.js.map +1 -1
  63. package/Dropzone/Dropzone.js.map +1 -1
  64. package/Dropzone/Dropzone.types.js.map +1 -1
  65. package/Dropzone/DropzoneFilePreview.js.map +1 -1
  66. package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
  67. package/Dropzone/DropzoneUtils.js.map +1 -1
  68. package/Form/Form.js +15 -14
  69. package/Form/Form.js.map +1 -1
  70. package/Form/FormRenderControl.js +7 -6
  71. package/Form/FormRenderControl.js.map +1 -1
  72. package/Form/Form_old.js +5 -4
  73. package/Form/Form_old.js.map +1 -1
  74. package/FormCheckbox/FormCheckbox.js +4 -4
  75. package/FormCheckbox/FormCheckbox.js.map +1 -1
  76. package/FormCombobox/FormCombobox.js +4 -4
  77. package/FormCombobox/FormCombobox.js.map +1 -1
  78. package/FormDatePicker/FormDatePicker.js +4 -4
  79. package/FormDatePicker/FormDatePicker.js.map +1 -1
  80. package/FormDropzone/FormDropzone.js +3 -3
  81. package/FormDropzone/FormDropzone.js.map +1 -1
  82. package/FormInput/FormInput.js +6 -6
  83. package/FormInput/FormInput.js.map +1 -1
  84. package/FormInput/FormInput.stories.js.map +1 -1
  85. package/FormRadio/FormRadio.js.map +1 -1
  86. package/FormSelect/FormSelect.js +9 -6
  87. package/FormSelect/FormSelect.js.map +1 -1
  88. package/FormTextarea/FormTextarea.js +4 -4
  89. package/FormTextarea/FormTextarea.js.map +1 -1
  90. package/Header/Header.js.map +1 -1
  91. package/HoverCard/HoverCard.js.map +1 -1
  92. package/InfoBlock/InfoBlock.js.map +1 -1
  93. package/InfoBlock/InfoBlock.stories.js.map +1 -1
  94. package/InfoBlock/infoBlockVariants.js.map +1 -1
  95. package/Input/Input.js.map +1 -1
  96. package/Input/inputVariants.js.map +1 -1
  97. package/InputOTP/InputOTP.d.ts.map +1 -1
  98. package/InputOTP/InputOTP.js.map +1 -1
  99. package/LICENSE +21 -21
  100. package/Label/Label.js.map +1 -1
  101. package/Label/labelVariants.js.map +1 -1
  102. package/LazyLoader/LazyLoader.js +5 -4
  103. package/LazyLoader/LazyLoader.js.map +1 -1
  104. package/LoadedIcon/LoadedIcon.js.map +1 -1
  105. package/LoadingMask/LoadingMask.js.map +1 -1
  106. package/LoadingMask/RenderLoadingMask.js.map +1 -1
  107. package/LoadingProgress/LoadingProgress.js.map +1 -1
  108. package/LoadingProgress/loadingProgressVariants.js.map +1 -1
  109. package/Menubar/Menubar.js.map +1 -1
  110. package/NavigationMenu/NavigationMenu.js.map +1 -1
  111. package/NavigationMenu/navigationMenuVariants.js.map +1 -1
  112. package/Pagination/Pagination.js +1 -0
  113. package/Pagination/Pagination.js.map +1 -1
  114. package/Popover/Popover.js.map +1 -1
  115. package/Progress/Progress.js.map +1 -1
  116. package/README.md +7 -7
  117. package/Radio/Radio.js.map +1 -1
  118. package/RadioGroup/RadioGroup.js.map +1 -1
  119. package/Resizable/Resizable.js.map +1 -1
  120. package/Resizable/Resizable.stories.js.map +1 -1
  121. package/ScrollArea/ScrollArea.js.map +1 -1
  122. package/Search/Search.js +9 -9
  123. package/Search/Search.js.map +1 -1
  124. package/Search/Search.stories.js.map +1 -1
  125. package/Select/Select.js +7 -6
  126. package/Select/Select.js.map +1 -1
  127. package/Select/Select.stories.js.map +1 -1
  128. package/Select/SelectRoot.js.map +1 -1
  129. package/Separator/Separator.js.map +1 -1
  130. package/Sheet/Sheet.js.map +1 -1
  131. package/Sidebar/Sidebar.js +21 -20
  132. package/Sidebar/Sidebar.js.map +1 -1
  133. package/Skeleton/Skeleton.js.map +1 -1
  134. package/Slider/Slider.js.map +1 -1
  135. package/Sonner/Sonner.js.map +1 -1
  136. package/Switch/Switch.js.map +1 -1
  137. package/Table/Table.js.map +1 -1
  138. package/TablePagination/TablePagination.js +26 -21
  139. package/TablePagination/TablePagination.js.map +1 -1
  140. package/Tabs/Tabs.js.map +1 -1
  141. package/Tabs/TabsRoot.js.map +1 -1
  142. package/Textarea/Textarea.js.map +1 -1
  143. package/Textarea/Textarea.stories.js.map +1 -1
  144. package/Textarea/useAutosizeTextArea.js.map +1 -1
  145. package/Theme/ThemeModeToggle.js +4 -3
  146. package/Theme/ThemeModeToggle.js.map +1 -1
  147. package/Theme/ThemeProvider.js.map +1 -1
  148. package/Toast/Toast.js.map +1 -1
  149. package/Toast/toast.constants.js.map +1 -1
  150. package/Toast/toastVariants.js.map +1 -1
  151. package/Toast/useToast.js.map +1 -1
  152. package/Toaster/Toaster.js.map +1 -1
  153. package/Toggle/Toggle.js.map +1 -1
  154. package/ToggleGroup/ToggleGroup.js.map +1 -1
  155. package/Tooltip/Tooltip.js.map +1 -1
  156. package/Tooltip/TooltipRoot.js.map +1 -1
  157. package/Tooltip/tooltipVariants.js.map +1 -1
  158. package/index.js +280 -280
  159. package/package.json +4 -4
@@ -1,192 +1,194 @@
1
- import { jsx as e, jsxs as p, Fragment as j } from "react/jsx-runtime";
2
- import { useState as s, useCallback as f, useEffect as se, useMemo as A, useLayoutEffect as le } from "react";
3
- import { cn as F } from "@oneplatformdev/utils";
4
- import { useDebounceCallback as ce } from "@oneplatformdev/hooks";
5
- import { X as de, ChevronDown as pe } from "lucide-react";
6
- import { ComboboxOptions as fe } from "./ComboboxOptions.js";
7
- import { Popover as me, PopoverTrigger as ue, PopoverContent as he } from "../Popover/Popover.js";
8
- import { Button as ge } from "../Button/Button.js";
1
+ import { jsx as e, jsxs as p, Fragment as B } from "react/jsx-runtime";
2
+ import { useState as s, useCallback as f, useEffect as se, useMemo as F, useLayoutEffect as le } from "react";
9
3
  import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
10
- import { Command as be, CommandInput as ye, CommandList as ve, CommandGroup as Ce, CommandEmpty as _, CommandItem as we } from "../Command/Command.js";
11
- const xe = (O) => {
12
- const { value: n, flattenOptions: S = [], selectedOption: L } = O;
4
+ import "../LoadingMask/RenderLoadingMask.js";
5
+ import { Popover as ce, PopoverTrigger as de, PopoverContent as pe } from "../Popover/Popover.js";
6
+ import { Button as fe } from "../Button/Button.js";
7
+ import "../Button/buttonVariants.js";
8
+ import { Command as me, CommandInput as ue, CommandList as he, CommandGroup as ge, CommandEmpty as _, CommandItem as be } from "../Command/Command.js";
9
+ import { cn as T } from "@oneplatformdev/utils";
10
+ import { useDebounceCallback as ye } from "@oneplatformdev/hooks";
11
+ import { X as ve, ChevronDown as Ce } from "lucide-react";
12
+ import { ComboboxOptions as we } from "./ComboboxOptions.js";
13
+ const xe = (S) => {
14
+ const { value: n, flattenOptions: L = [], selectedOption: I } = S;
13
15
  if (!n) return "No value for render label";
14
- const y = [S.find((m) => String(m.value).toLowerCase() === String(n).toLowerCase()), L].filter(Boolean).map((m) => m.label).find(Boolean);
15
- return y || n;
16
- }, Ee = (O) => {
16
+ const v = [L.find((m) => String(m.value).toLowerCase() === String(n).toLowerCase()), I].filter(Boolean).map((m) => m.label).find(Boolean);
17
+ return v || n;
18
+ }, Be = (S) => {
17
19
  const {
18
20
  value: n,
19
- onChange: S,
20
- placeholder: L,
21
- disabled: T,
22
- searchLabel: y = "Type to search...",
21
+ onChange: L,
22
+ placeholder: I,
23
+ disabled: R,
24
+ searchLabel: v = "Type to search...",
23
25
  fetchOptions: m,
24
- options: I,
25
- emptyLabel: R = "No options",
26
- emptyAction: v,
27
- commandInputAction: k,
28
- listHeadAction: C,
29
- listFooterAction: w,
30
- onMount: D,
26
+ options: k,
27
+ emptyLabel: G = "No options",
28
+ emptyAction: C,
29
+ commandInputAction: D,
30
+ listHeadAction: w,
31
+ listFooterAction: x,
32
+ onMount: M,
31
33
  defaultNodeDisabled: J,
32
34
  defaultNodeMatched: K,
33
35
  defaultNodeMuted: Q,
34
36
  defaultNodeInteractive: Y
35
- } = O, [G, W] = s(!1), [l, M] = s(!1), [a, P] = s(""), [u, B] = s(), [o, c] = s(!1), [r, Z] = s([]), [$, ee] = s([]), h = f((t) => {
36
- const g = (E) => {
37
- const i = [], V = (x) => {
38
- if (x)
39
- for (const b of x)
40
- i.push(b), b.items && b.items.length && V(b.items);
37
+ } = S, [W, q] = s(!1), [l, P] = s(!1), [a, E] = s(""), [u, j] = s(), [o, c] = s(!1), [r, Z] = s([]), [$, ee] = s([]), h = f((t) => {
38
+ const b = (A) => {
39
+ const i = [], V = (N) => {
40
+ if (N)
41
+ for (const y of N)
42
+ i.push(y), y.items && y.items.length && V(y.items);
41
43
  };
42
- V(E), ee((x) => {
43
- if (!i.find((N) => !!n && String(N.value) === String(n))) {
44
- const N = u || x.find((ie) => !!n && String(ie.value) === String(n));
45
- if (N) return [N, ...i];
44
+ V(A), ee((N) => {
45
+ if (!i.find((O) => !!n && String(O.value) === String(n))) {
46
+ const O = u || N.find((ie) => !!n && String(ie.value) === String(n));
47
+ if (O) return [O, ...i];
46
48
  }
47
49
  return i;
48
50
  });
49
51
  };
50
- Z((E) => {
51
- const i = typeof t == "function" ? t(E) : t;
52
- return g(i), i;
52
+ Z((A) => {
53
+ const i = typeof t == "function" ? t(A) : t;
54
+ return b(i), i;
53
55
  });
54
56
  }, [u, n]);
55
57
  se(() => {
56
- I?.length && h(I);
57
- }, [I]);
58
+ k?.length && h(k);
59
+ }, [k]);
58
60
  const te = async () => {
59
- l || (q(), P(""));
60
- }, q = f(async (t) => {
61
+ l || (z(), E(""));
62
+ }, z = f(async (t) => {
61
63
  c(!0);
62
64
  try {
63
- const g = await m(t);
64
- h(g);
65
- } catch (g) {
66
- console.error("Unexpected error while get option:", g);
65
+ const b = await m(t);
66
+ h(b);
67
+ } catch (b) {
68
+ console.error("Unexpected error while get option:", b);
67
69
  } finally {
68
70
  c(!1);
69
71
  }
70
- }, [h]), ne = ce(q, 1e3, {
72
+ }, [h]), ne = ye(z, 1e3, {
71
73
  leading: !1,
72
74
  trailing: !0
73
75
  }), oe = f((t) => {
74
- c(!0), P(t), ne(t);
75
- }, []), z = f((t) => {
76
- S(t.value), B(t), c(!1);
77
- }, []), ae = f(() => {
78
- z({ value: "", label: "" }), B(void 0), c(!1);
79
- }, []), H = A(() => !!a && !r.length && !o, [o, r.length, a]), U = A(() => !r.length && !o, [o, r.length, a]), d = A(() => ({
76
+ c(!0), E(t), ne(t);
77
+ }, []), H = f((t) => {
78
+ L(t.value), j(t), c(!1);
79
+ }, []), re = f(() => {
80
+ H({ value: "", label: "" }), j(void 0), c(!1);
81
+ }, []), U = F(() => !!a && !r.length && !o, [o, r.length, a]), g = F(() => !r.length && !o, [o, r.length, a]), d = F(() => ({
80
82
  options: r,
81
83
  setOptions: h,
82
84
  selectedOption: u,
83
- setSelectedOption: B,
85
+ setSelectedOption: j,
84
86
  search: a || "",
85
- setSearch: P,
87
+ setSearch: E,
86
88
  open: l,
87
- setOpen: M,
89
+ setOpen: P,
88
90
  loading: o,
89
91
  setLoading: c,
90
- isEmptyList: U,
91
- isSearchedEmptyList: H
92
- }), [o, l, r, a, u, U, H, h]), re = f(async () => {
93
- if (D) {
94
- W(!0);
92
+ isEmptyList: g,
93
+ isSearchedEmptyList: U
94
+ }), [o, l, r, a, u, g, U, h]), ae = f(async () => {
95
+ if (M) {
96
+ q(!0);
95
97
  try {
96
- await D(d);
98
+ await M(d);
97
99
  } finally {
98
- W(!1);
100
+ q(!1);
99
101
  }
100
102
  }
101
- }, [D, d]);
103
+ }, [M, d]);
102
104
  return le(() => {
103
- re();
105
+ ae();
104
106
  }, []), /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ p(
105
- me,
107
+ ce,
106
108
  {
107
109
  open: l,
108
110
  onOpenChange: (t) => {
109
- M(t), t && te();
111
+ P(t), t && te();
110
112
  },
111
113
  children: [
112
- /* @__PURE__ */ e(ue, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
113
- ge,
114
+ /* @__PURE__ */ e(de, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
115
+ fe,
114
116
  {
115
117
  color: "secondary",
116
118
  role: "combobox",
117
119
  "aria-expanded": l,
118
- className: F(
120
+ className: T(
119
121
  "relative w-full justify-between font-normal text-sm bg-transparent",
120
122
  "border border-border",
121
123
  l && "border-2 outline-hidden ring-1 ring-ring",
122
124
  "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
123
125
  ),
124
- disabled: T || G,
125
- children: G ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(j, { children: [
126
+ disabled: R || W,
127
+ children: W ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(B, { children: [
126
128
  /* @__PURE__ */ e(
127
129
  "span",
128
130
  {
129
131
  className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap",
130
- children: n ? xe({ value: n, flattenOptions: $, selectedOption: u }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: L })
132
+ children: n ? xe({ value: n, flattenOptions: $, selectedOption: u }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: I })
131
133
  }
132
134
  ),
133
135
  n ? /* @__PURE__ */ e(
134
136
  "div",
135
137
  {
136
- className: F(
138
+ className: T(
137
139
  "absolute top-0 right-1",
138
140
  "flex items-center justify-center",
139
141
  "w-9 aspect-square [&_svg]:size-5",
140
142
  "opacity-50 cursor-pointer hover:opacity-100"
141
143
  ),
142
144
  onClick: (t) => {
143
- t.stopPropagation(), ae();
145
+ t.stopPropagation(), re();
144
146
  },
145
- children: /* @__PURE__ */ e(de, {})
147
+ children: /* @__PURE__ */ e(ve, {})
146
148
  }
147
- ) : /* @__PURE__ */ e(pe, { className: "opacity-50 w-4 h-4" })
149
+ ) : /* @__PURE__ */ e(Ce, { className: "opacity-50 w-4 h-4" })
148
150
  ] })
149
151
  }
150
152
  ) }),
151
153
  /* @__PURE__ */ e(
152
- he,
154
+ pe,
153
155
  {
154
156
  className: "w-(--radix-popper-anchor-width) max-w-none p-0",
155
157
  align: "start",
156
- children: /* @__PURE__ */ p(be, { shouldFilter: !1, children: [
158
+ children: /* @__PURE__ */ p(me, { shouldFilter: !1, children: [
157
159
  /* @__PURE__ */ e(
158
- ye,
160
+ ue,
159
161
  {
160
- placeholder: y,
162
+ placeholder: v,
161
163
  value: a,
162
164
  onValueChange: oe
163
165
  }
164
166
  ),
165
- typeof k == "function" ? k(d) : k,
166
- /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ p(Ce, { className: F(!r.length && "p-0 shadow-none"), children: [
167
+ typeof D == "function" ? D(d) : D,
168
+ /* @__PURE__ */ e(he, { children: /* @__PURE__ */ p(ge, { className: T(!r.length && "p-0 shadow-none"), children: [
167
169
  o && /* @__PURE__ */ e(X, { fullWidth: !0 }),
168
- !o && !!a && /* @__PURE__ */ e(j, { children: v ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
169
- /* @__PURE__ */ e("span", { children: R }),
170
- typeof v == "function" ? v(d) : v
171
- ] }) : /* @__PURE__ */ e(_, { children: R }) }),
172
- !o && /* @__PURE__ */ p(j, { children: [
173
- C && /* @__PURE__ */ e(
174
- we,
170
+ !o && g && /* @__PURE__ */ e(B, { children: C ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
171
+ /* @__PURE__ */ e("span", { children: G }),
172
+ typeof C == "function" ? C(d) : C
173
+ ] }) : /* @__PURE__ */ e(_, { children: G }) }),
174
+ !o && !g && /* @__PURE__ */ p(B, { children: [
175
+ w && /* @__PURE__ */ e(
176
+ be,
175
177
  {
176
178
  asChild: !0,
177
179
  className: "w-full",
178
- children: typeof C == "function" ? C(d) : C
180
+ children: typeof w == "function" ? w(d) : w
179
181
  },
180
182
  "combobox-list-head-action"
181
183
  ),
182
184
  /* @__PURE__ */ e(
183
- fe,
185
+ we,
184
186
  {
185
187
  searchTerm: a,
186
188
  value: n,
187
189
  options: r,
188
- onChangeOption: z,
189
- setOpen: M,
190
+ onChangeOption: H,
191
+ setOpen: P,
190
192
  defaultNodeDisabled: J,
191
193
  defaultNodeMatched: K,
192
194
  defaultNodeMuted: Q,
@@ -195,12 +197,12 @@ const xe = (O) => {
195
197
  )
196
198
  ] })
197
199
  ] }) }),
198
- w && /* @__PURE__ */ e(
200
+ !o && x && !g && /* @__PURE__ */ e(
199
201
  "div",
200
202
  {
201
203
  "data-slot": "command-footer-wrapper",
202
204
  className: "flex w-full min-h-9 items-center gap-2 border-t px-3",
203
- children: typeof w == "function" ? w(d) : w
205
+ children: typeof x == "function" ? x(d) : x
204
206
  }
205
207
  )
206
208
  ] })
@@ -211,6 +213,6 @@ const xe = (O) => {
211
213
  ) });
212
214
  };
213
215
  export {
214
- Ee as Combobox
216
+ Be as Combobox
215
217
  };
216
218
  //# sourceMappingURL=Combobox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\r\n Dispatch,\r\n SetStateAction,\r\n useCallback,\r\n useEffect,\r\n useLayoutEffect,\r\n useMemo,\r\n useState,\r\n} from 'react';\r\nimport { LoadingMask } from '../LoadingMask';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\r\nimport { Button } from '../Button';\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '../Command';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\r\nimport { ChevronDown, X } from 'lucide-react';\r\nimport {\r\n ComboboxCallbackStateParams,\r\n ComboboxOption,\r\n ComboboxProps,\r\n} from './Combobox.types';\r\nimport { ComboboxOptions } from './ComboboxOptions';\r\n\r\n// TODO: refactor next component | nlt code\r\nconst getSelectRenderLabel = <Data extends object>(params: {\r\n value: ComboboxProps<Data>['value'];\r\n flattenOptions: ComboboxOption<Data>[];\r\n selectedOption?: ComboboxOption<Data>;\r\n}): string => {\r\n const { value, flattenOptions = [], selectedOption } = params;\r\n if (!value) return 'No value for render label';\r\n const flattenedOption = flattenOptions.find(o => String(o.value).toLowerCase() === String(value).toLowerCase());\r\n const label = [ flattenedOption, selectedOption ]\r\n .filter(Boolean)\r\n .map(o => o!.label)\r\n .find(Boolean);\r\n if (!label) return value;\r\n return label;\r\n}\r\n\r\n// TODO: refactor next component | nlt code\r\nexport const Combobox = <Data extends object, >(props: ComboboxProps<Data>) => {\r\n const {\r\n value,\r\n onChange,\r\n placeholder,\r\n disabled,\r\n searchLabel = 'Type to search...',\r\n fetchOptions,\r\n options: itemOptions,\r\n emptyLabel = 'No options',\r\n emptyAction,\r\n commandInputAction,\r\n listHeadAction,\r\n listFooterAction,\r\n onMount,\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n } = props;\r\n const [ initialLoading, setInitialLoading ] = useState(false);\r\n const [ open, setOpen ] = useState(false);\r\n const [ searchTerm, setSearchTerm ] = useState('');\r\n const [ selectedOption, setSelectedOption ] = useState<ComboboxOption<Data>>();\r\n const [ loading, setLoading ] = useState(false);\r\n\r\n const [ options, setOptionsDispatch ] = useState<ComboboxOption<Data>[]>([]);\r\n const [ flattenOptions, setFlattenOptions ] = useState<ComboboxOption<Data>[]>([]);\r\n const setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>> = useCallback((stater) => {\r\n const flatten = (next: ComboboxOption<Data>[]) => {\r\n const res: ComboboxOption<Data>[] = [];\r\n const walk = (nodes?: ComboboxOption<Data>[]) => {\r\n if (!nodes) return;\r\n for (const node of nodes) {\r\n res.push(node);\r\n if (node.items && node.items.length) walk(node.items);\r\n }\r\n };\r\n walk(next);\r\n setFlattenOptions((prev) => {\r\n const isIncludedInRes = res.find(o => !!value && String(o.value) === String(value));\r\n\r\n if (!isIncludedInRes) {\r\n const current = selectedOption || prev.find(o => !!value && String(o.value) === String(value))\r\n if (current) return [ current, ...res ];\r\n }\r\n\r\n return res;\r\n });\r\n }\r\n setOptionsDispatch((prev) => {\r\n const next: ComboboxOption<Data>[] = typeof stater === 'function' ? stater(prev) : stater;\r\n flatten(next);\r\n return next;\r\n });\r\n }, [ selectedOption, value ])\r\n\r\n useEffect(() => {\r\n itemOptions?.length && setOptions(itemOptions);\r\n }, [ itemOptions ]);\r\n\r\n const handlePopoverOpen = async () => {\r\n if (!open) {\r\n void getData();\r\n setSearchTerm('');\r\n }\r\n };\r\n\r\n const getData = useCallback(async (search?: string) => {\r\n setLoading(true);\r\n try {\r\n const fetchedOptions = await fetchOptions(search);\r\n setOptions(fetchedOptions);\r\n } catch (error) {\r\n console.error('Unexpected error while get option:', error);\r\n } finally {\r\n setLoading(false);\r\n }\r\n }, [ setOptions ]);\r\n\r\n const debouncedGetData = useDebounceCallback(getData, 1000, {\r\n leading: false,\r\n trailing: true,\r\n });\r\n\r\n const handleSearchChange = useCallback((value: string) => {\r\n setLoading(true);\r\n setSearchTerm(value);\r\n debouncedGetData(value);\r\n }, []);\r\n\r\n const onChangeOption = useCallback((option: ComboboxOption<Data>) => {\r\n onChange(option.value);\r\n setSelectedOption(option);\r\n setLoading(false);\r\n }, []);\r\n\r\n const handleClearSelection = useCallback(() => {\r\n onChangeOption({ value: '', label: '' });\r\n setSelectedOption(undefined);\r\n setLoading(false);\r\n }, []);\r\n\r\n const isSearchedEmptyList = useMemo(() => {\r\n return Boolean(searchTerm) && !options.length && !loading;\r\n }, [ loading, options.length, searchTerm ])\r\n\r\n const isEmptyList = useMemo(() => {\r\n return !options.length && !loading;\r\n }, [ loading, options.length, searchTerm ])\r\n\r\n const comboboxCallbackStateParams =\r\n useMemo((): ComboboxCallbackStateParams<Data> => {\r\n return {\r\n options,\r\n setOptions,\r\n selectedOption,\r\n setSelectedOption,\r\n search: searchTerm || '',\r\n setSearch: setSearchTerm,\r\n open,\r\n setOpen,\r\n loading,\r\n setLoading,\r\n isEmptyList,\r\n isSearchedEmptyList,\r\n };\r\n }, [ loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions ]);\r\n\r\n const runOnMount = useCallback(async () => {\r\n if (!onMount) return;\r\n setInitialLoading(true);\r\n try {\r\n await onMount(comboboxCallbackStateParams);\r\n } finally {\r\n setInitialLoading(false);\r\n }\r\n }, [ onMount, comboboxCallbackStateParams ]);\r\n\r\n useLayoutEffect(() => {\r\n runOnMount();\r\n }, []);\r\n\r\n return (\r\n <div className=\"w-full\">\r\n <Popover\r\n open={open}\r\n onOpenChange={(newOpen) => {\r\n setOpen(newOpen);\r\n if (newOpen) handlePopoverOpen();\r\n }}\r\n >\r\n <PopoverTrigger asChild className=\"border-input\">\r\n <Button\r\n color='secondary'\r\n role=\"combobox\"\r\n aria-expanded={open}\r\n className={cn(\r\n 'relative w-full justify-between font-normal text-sm bg-transparent',\r\n 'border border-border',\r\n open && 'border-2 outline-hidden ring-1 ring-ring',\r\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring'\r\n )}\r\n disabled={disabled || initialLoading}\r\n >\r\n {initialLoading ? (\r\n <LoadingMask fullWidth/>\r\n ) : (\r\n <>\r\n <span\r\n className=\"truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap\">\r\n {value\r\n ? getSelectRenderLabel({ value, flattenOptions, selectedOption })\r\n : <span className=\"text-gray-400\">{placeholder}</span>\r\n }\r\n </span>\r\n {value ? (\r\n <div\r\n className={cn(\r\n 'absolute top-0 right-1',\r\n 'flex items-center justify-center',\r\n 'w-9 aspect-square [&_svg]:size-5',\r\n 'opacity-50 cursor-pointer hover:opacity-100'\r\n )}\r\n onClick={(e) => {\r\n e.stopPropagation();\r\n handleClearSelection();\r\n }}\r\n >\r\n <X/>\r\n </div>\r\n ) : (\r\n <ChevronDown className=\"opacity-50 w-4 h-4\"/>\r\n )}\r\n </>\r\n )}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent\r\n className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\r\n align=\"start\"\r\n >\r\n <Command shouldFilter={false}>\r\n <CommandInput\r\n placeholder={searchLabel}\r\n value={searchTerm}\r\n onValueChange={handleSearchChange}\r\n />\r\n {typeof commandInputAction === 'function'\r\n ? commandInputAction(comboboxCallbackStateParams)\r\n : commandInputAction}\r\n <CommandList>\r\n <CommandGroup className={cn(!options.length && 'p-0 shadow-none')}>\r\n {loading && <LoadingMask fullWidth/>}\r\n {!loading && Boolean(searchTerm) && (\r\n <>\r\n {emptyAction ? (\r\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\r\n <span>{emptyLabel}</span>\r\n {typeof emptyAction === 'function'\r\n ? emptyAction(comboboxCallbackStateParams)\r\n : emptyAction}\r\n </CommandEmpty>\r\n ) : (\r\n <CommandEmpty>{emptyLabel}</CommandEmpty>\r\n )}\r\n </>\r\n )}\r\n {!loading && (\r\n <>\r\n {listHeadAction && (\r\n <CommandItem\r\n key='combobox-list-head-action'\r\n asChild\r\n className='w-full'\r\n >\r\n {typeof listHeadAction === 'function'\r\n ? listHeadAction(comboboxCallbackStateParams)\r\n : listHeadAction}\r\n </CommandItem>\r\n )}\r\n <ComboboxOptions\r\n searchTerm={searchTerm}\r\n value={value}\r\n options={options}\r\n onChangeOption={onChangeOption}\r\n setOpen={setOpen}\r\n defaultNodeDisabled={defaultNodeDisabled}\r\n defaultNodeMatched={defaultNodeMatched}\r\n defaultNodeMuted={defaultNodeMuted}\r\n defaultNodeInteractive={defaultNodeInteractive}\r\n />\r\n </>\r\n )}\r\n </CommandGroup>\r\n </CommandList>\r\n\r\n {/*LIST FOOTER ACTION*/}\r\n { listFooterAction && (\r\n <div\r\n data-slot=\"command-footer-wrapper\"\r\n className=\"flex w-full min-h-9 items-center gap-2 border-t px-3\"\r\n >\r\n {typeof listFooterAction === 'function'\r\n ? listFooterAction(comboboxCallbackStateParams)\r\n : listFooterAction}\r\n </div>\r\n )}\r\n </Command>\r\n </PopoverContent>\r\n </Popover>\r\n </div>\r\n );\r\n}\r\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","props","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","onMount","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","initialLoading","setInitialLoading","useState","open","setOpen","searchTerm","setSearchTerm","setSelectedOption","loading","setLoading","options","setOptionsDispatch","setFlattenOptions","setOptions","useCallback","stater","flatten","next","res","walk","nodes","node","prev","current","useEffect","handlePopoverOpen","getData","search","fetchedOptions","error","debouncedGetData","useDebounceCallback","handleSearchChange","onChangeOption","option","handleClearSelection","isSearchedEmptyList","useMemo","isEmptyList","comboboxCallbackStateParams","runOnMount","useLayoutEffect","jsx","jsxs","Popover","newOpen","PopoverTrigger","Button","cn","LoadingMask","Fragment","e","X","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":"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"}
1
+ {"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport { LoadingMask } from '../LoadingMask';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { Button } from '../Button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { ChevronDown, X } from 'lucide-react';\nimport {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions';\n\n// TODO: refactor next component | nlt code\nconst getSelectRenderLabel = <Data extends object>(params: {\n value: ComboboxProps<Data>['value'];\n flattenOptions: ComboboxOption<Data>[];\n selectedOption?: ComboboxOption<Data>;\n}): string => {\n const { value, flattenOptions = [], selectedOption } = params;\n if (!value) return 'No value for render label';\n const flattenedOption = flattenOptions.find(o => String(o.value).toLowerCase() === String(value).toLowerCase());\n const label = [ flattenedOption, selectedOption ]\n .filter(Boolean)\n .map(o => o!.label)\n .find(Boolean);\n if (!label) return value;\n return label;\n}\n\n// TODO: refactor next component | nlt code\nexport const Combobox = <Data extends object, >(props: ComboboxProps<Data>) => {\n const {\n value,\n onChange,\n placeholder,\n disabled,\n searchLabel = 'Type to search...',\n fetchOptions,\n options: itemOptions,\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n onMount,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n } = props;\n const [ initialLoading, setInitialLoading ] = useState(false);\n const [ open, setOpen ] = useState(false);\n const [ searchTerm, setSearchTerm ] = useState('');\n const [ selectedOption, setSelectedOption ] = useState<ComboboxOption<Data>>();\n const [ loading, setLoading ] = useState(false);\n\n const [ options, setOptionsDispatch ] = useState<ComboboxOption<Data>[]>([]);\n const [ flattenOptions, setFlattenOptions ] = useState<ComboboxOption<Data>[]>([]);\n const setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>> = useCallback((stater) => {\n const flatten = (next: ComboboxOption<Data>[]) => {\n const res: ComboboxOption<Data>[] = [];\n const walk = (nodes?: ComboboxOption<Data>[]) => {\n if (!nodes) return;\n for (const node of nodes) {\n res.push(node);\n if (node.items && node.items.length) walk(node.items);\n }\n };\n walk(next);\n setFlattenOptions((prev) => {\n const isIncludedInRes = res.find(o => !!value && String(o.value) === String(value));\n\n if (!isIncludedInRes) {\n const current = selectedOption || prev.find(o => !!value && String(o.value) === String(value))\n if (current) return [ current, ...res ];\n }\n\n return res;\n });\n }\n setOptionsDispatch((prev) => {\n const next: ComboboxOption<Data>[] = typeof stater === 'function' ? stater(prev) : stater;\n flatten(next);\n return next;\n });\n }, [ selectedOption, value ])\n\n useEffect(() => {\n itemOptions?.length && setOptions(itemOptions);\n }, [ itemOptions ]);\n\n const handlePopoverOpen = async () => {\n if (!open) {\n void getData();\n setSearchTerm('');\n }\n };\n\n const getData = useCallback(async (search?: string) => {\n setLoading(true);\n try {\n const fetchedOptions = await fetchOptions(search);\n setOptions(fetchedOptions);\n } catch (error) {\n console.error('Unexpected error while get option:', error);\n } finally {\n setLoading(false);\n }\n }, [ setOptions ]);\n\n const debouncedGetData = useDebounceCallback(getData, 1000, {\n leading: false,\n trailing: true,\n });\n\n const handleSearchChange = useCallback((value: string) => {\n setLoading(true);\n setSearchTerm(value);\n debouncedGetData(value);\n }, []);\n\n const onChangeOption = useCallback((option: ComboboxOption<Data>) => {\n onChange(option.value);\n setSelectedOption(option);\n setLoading(false);\n }, []);\n\n const handleClearSelection = useCallback(() => {\n onChangeOption({ value: '', label: '' });\n setSelectedOption(undefined);\n setLoading(false);\n }, []);\n\n const isSearchedEmptyList = useMemo(() => {\n return Boolean(searchTerm) && !options.length && !loading;\n }, [ loading, options.length, searchTerm ])\n\n const isEmptyList = useMemo(() => {\n return !options.length && !loading;\n }, [ loading, options.length, searchTerm ])\n\n const comboboxCallbackStateParams =\n useMemo((): ComboboxCallbackStateParams<Data> => {\n return {\n options,\n setOptions,\n selectedOption,\n setSelectedOption,\n search: searchTerm || '',\n setSearch: setSearchTerm,\n open,\n setOpen,\n loading,\n setLoading,\n isEmptyList,\n isSearchedEmptyList,\n };\n }, [ loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions ]);\n\n const runOnMount = useCallback(async () => {\n if (!onMount) return;\n setInitialLoading(true);\n try {\n await onMount(comboboxCallbackStateParams);\n } finally {\n setInitialLoading(false);\n }\n }, [ onMount, comboboxCallbackStateParams ]);\n\n useLayoutEffect(() => {\n runOnMount();\n }, []);\n\n return (\n <div className=\"w-full\">\n <Popover\n open={open}\n onOpenChange={(newOpen) => {\n setOpen(newOpen);\n if (newOpen) handlePopoverOpen();\n }}\n >\n <PopoverTrigger asChild className=\"border-input\">\n <Button\n color='secondary'\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between font-normal text-sm bg-transparent',\n 'border border-border',\n open && 'border-2 outline-hidden ring-1 ring-ring',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring'\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading ? (\n <LoadingMask fullWidth/>\n ) : (\n <>\n <span\n className=\"truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap\">\n {value\n ? getSelectRenderLabel({ value, flattenOptions, selectedOption })\n : <span className=\"text-gray-400\">{placeholder}</span>\n }\n </span>\n {value ? (\n <div\n className={cn(\n 'absolute top-0 right-1',\n 'flex items-center justify-center',\n 'w-9 aspect-square [&_svg]:size-5',\n 'opacity-50 cursor-pointer hover:opacity-100'\n )}\n onClick={(e) => {\n e.stopPropagation();\n handleClearSelection();\n }}\n >\n <X/>\n </div>\n ) : (\n <ChevronDown className=\"opacity-50 w-4 h-4\"/>\n )}\n </>\n )}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={searchTerm}\n onValueChange={handleSearchChange}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(comboboxCallbackStateParams)\n : commandInputAction}\n <CommandList>\n <CommandGroup className={cn(!options.length && 'p-0 shadow-none')}>\n {loading && <LoadingMask fullWidth/>}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(comboboxCallbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(comboboxCallbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n <ComboboxOptions\n searchTerm={searchTerm}\n value={value}\n options={options}\n onChangeOption={onChangeOption}\n setOpen={setOpen}\n defaultNodeDisabled={defaultNodeDisabled}\n defaultNodeMatched={defaultNodeMatched}\n defaultNodeMuted={defaultNodeMuted}\n defaultNodeInteractive={defaultNodeInteractive}\n />\n </>\n )}\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n { !loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n className=\"flex w-full min-h-9 items-center gap-2 border-t px-3\"\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(comboboxCallbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n );\n}\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","props","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","onMount","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","initialLoading","setInitialLoading","useState","open","setOpen","searchTerm","setSearchTerm","setSelectedOption","loading","setLoading","options","setOptionsDispatch","setFlattenOptions","setOptions","useCallback","stater","flatten","next","res","walk","nodes","node","prev","current","useEffect","handlePopoverOpen","getData","search","fetchedOptions","error","debouncedGetData","useDebounceCallback","handleSearchChange","onChangeOption","option","handleClearSelection","isSearchedEmptyList","useMemo","isEmptyList","comboboxCallbackStateParams","runOnMount","useLayoutEffect","jsx","jsxs","Popover","newOpen","PopoverTrigger","Button","cn","LoadingMask","Fragment","e","X","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Combobox } from './Combobox';\r\nimport type {\r\n ComboboxCallbackStateParams,\r\n ComboboxOption,\r\n ComboboxProps,\r\n} from './Combobox.types';\r\n\r\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\r\n\r\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\r\n const res: ComboboxOption[] = [];\r\n const walk = (list?: ComboboxOption[]) => {\r\n if (!list?.length) return;\r\n for (const n of list) {\r\n res.push(n);\r\n if (n.items?.length) walk(n.items);\r\n }\r\n };\r\n walk(nodes);\r\n return res;\r\n};\r\n\r\nconst createFetchOptions =\r\n (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\r\n async (search?: string) => {\r\n await sleep(delayMs);\r\n\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n // simple \"contains\" search across flattened options; then return top-level filtered\r\n // (enough for Storybook demos; your real API can do better)\r\n const allFlat = flatten(all);\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n };\r\n\r\nconst BASE_OPTIONS: ComboboxOption[] = [\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n { value: 'fr', label: 'France' },\r\n { value: 'es', label: 'Spain' },\r\n { value: 'it', label: 'Italy' },\r\n];\r\n\r\nconst NESTED_OPTIONS: ComboboxOption[] = [\r\n {\r\n value: 'europe',\r\n label: 'Europe',\r\n items: [\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n { value: 'fr', label: 'France' },\r\n ],\r\n },\r\n {\r\n value: 'north-america',\r\n label: 'North America',\r\n items: [\r\n { value: 'us', label: 'United States' },\r\n { value: 'ca', label: 'Canada' },\r\n { value: 'mx', label: 'Mexico' },\r\n ],\r\n },\r\n];\r\n\r\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\r\n initialValue?: ComboboxProps['value'];\r\n};\r\n\r\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\r\n const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\r\n\r\n // keep stable reference if someone passes inline fetchOptions\r\n const fetchOptions = useMemo(\r\n () => args.fetchOptions,\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [],\r\n );\r\n\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{String(value || '')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Combobox',\r\n component: Combobox,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n disabled: false,\r\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\r\n },\r\n argTypes: {\r\n fetchOptions: { control: false },\r\n onChange: { control: false },\r\n onMount: { control: false },\r\n emptyAction: { control: false },\r\n commandInputAction: { control: false },\r\n listHeadAction: { control: false },\r\n options: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Combobox>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\n/** 1) Default (async options) */\r\nexport const Default: Story = {\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 2) With initial selected value */\r\nexport const WithValueSelected: Story = {\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\r\n};\r\n\r\n/** 3) Disabled */\r\nexport const Disabled: Story = {\r\n args: { disabled: true },\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\r\n};\r\n\r\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\r\nexport const WithStaticOptionsProp: Story = {\r\n args: {\r\n options: BASE_OPTIONS,\r\n fetchOptions: async () => BASE_OPTIONS,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5) Slow fetch to show loading state on open/search */\r\nexport const SlowFetchLoading: Story = {\r\n args: {\r\n fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 6) Empty state with action (search something like \"zzz\") */\r\nexport const EmptyStateWithAction: Story = {\r\n args: {\r\n emptyLabel: 'Nothing found',\r\n emptyAction: (st: ComboboxCallbackStateParams) => {\r\n const canCreate = Boolean(st.search?.trim());\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\r\n disabled={!canCreate}\r\n onClick={() => {\r\n const v = st.search.trim();\r\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\r\n st.setOptions([next]);\r\n st.setLoading(false);\r\n }}\r\n >\r\n Create option\r\n </button>\r\n );\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 7) commandInputAction (helper row under input) */\r\nexport const WithCommandInputAction: Story = {\r\n args: {\r\n commandInputAction: (st: ComboboxCallbackStateParams) => (\r\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\r\n <span>\r\n results: <span className=\"font-mono\">{st.options.length}</span>\r\n </span>\r\n <button\r\n type=\"button\"\r\n className=\"underline\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setLoading(false);\r\n }}\r\n >\r\n Clear search\r\n </button>\r\n </div>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 8) listHeadAction (top action inside list) */\r\nexport const WithListHeadAction: Story = {\r\n args: {\r\n listHeadAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left px-3 py-2 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n Close list\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 9) listHeadAction (footer action outside of list) */\r\nexport const WithListFooterAction: Story = {\r\n args: {\r\n listFooterAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left px-3 py-2 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n Add new option\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 10) Nested options tree */\r\nexport const NestedOptions: Story = {\r\n args: {\r\n fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\r\n defaultNodeDisabled: false,\r\n defaultNodeMatched: false,\r\n defaultNodeMuted: true,\r\n defaultNodeInteractive: false,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 11) onMount initial loading (simulate prefetch on mount) */\r\nexport const OnMountPrefetch: Story = {\r\n args: {\r\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams) => {\r\n await sleep(900);\r\n st.setOptions(BASE_OPTIONS);\r\n st.setLoading(false);\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}
1
+ {"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Combobox } from './Combobox';\nimport type {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\n const res: ComboboxOption[] = [];\n const walk = (list?: ComboboxOption[]) => {\n if (!list?.length) return;\n for (const n of list) {\n res.push(n);\n if (n.items?.length) walk(n.items);\n }\n };\n walk(nodes);\n return res;\n};\n\nconst createFetchOptions =\n (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\n async (search?: string) => {\n await sleep(delayMs);\n\n const q = (search ?? '').trim().toLowerCase();\n if (!q) return all;\n\n // simple \"contains\" search across flattened options; then return top-level filtered\n // (enough for Storybook demos; your real API can do better)\n const allFlat = flatten(all);\n const matchedValues = new Set(\n allFlat\n .filter((o) => String(o.label).toLowerCase().includes(q))\n .map((o) => String(o.value)),\n );\n\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\n return list\n .map((n) => {\n const items = n.items?.length ? filterTree(n.items) : undefined;\n const selfMatch =\n matchedValues.has(String(n.value)) ||\n String(n.label).toLowerCase().includes(q);\n\n if (!selfMatch && !items?.length) return null;\n return { ...n, items };\n })\n .filter(Boolean) as ComboboxOption[];\n };\n\n return filterTree(all);\n };\n\nconst BASE_OPTIONS: ComboboxOption[] = [\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n { value: 'fr', label: 'France' },\n { value: 'es', label: 'Spain' },\n { value: 'it', label: 'Italy' },\n];\n\nconst NESTED_OPTIONS: ComboboxOption[] = [\n {\n value: 'europe',\n label: 'Europe',\n items: [\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n { value: 'fr', label: 'France' },\n ],\n },\n {\n value: 'north-america',\n label: 'North America',\n items: [\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n { value: 'mx', label: 'Mexico' },\n ],\n },\n];\n\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\n initialValue?: ComboboxProps['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\n const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\n\n // keep stable reference if someone passes inline fetchOptions\n const fetchOptions = useMemo(\n () => args.fetchOptions,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n\n return (\n <div className=\"max-w-sm\">\n <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\n <div className=\"mt-3 text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{String(value || '')}</span>\n </div>\n </div>\n );\n}\n\nconst meta = {\n title: 'Combobox',\n component: Combobox,\n parameters: {\n layout: 'centered',\n },\n args: {\n placeholder: 'Select option...',\n searchLabel: 'Type to search...',\n emptyLabel: 'No options',\n disabled: false,\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n },\n argTypes: {\n fetchOptions: { control: false },\n onChange: { control: false },\n onMount: { control: false },\n emptyAction: { control: false },\n commandInputAction: { control: false },\n listHeadAction: { control: false },\n options: { control: false },\n value: { control: false },\n },\n decorators: [\n (Story) => (\n <div className=\"p-6 w-[420px]\">\n <Story />\n </div>\n ),\n ],\n} satisfies Meta<typeof Combobox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/** 1) Default (async options) */\nexport const Default: Story = {\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 2) With initial selected value */\nexport const WithValueSelected: Story = {\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\n};\n\n/** 3) Disabled */\nexport const Disabled: Story = {\n args: { disabled: true },\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\n};\n\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\nexport const WithStaticOptionsProp: Story = {\n args: {\n options: BASE_OPTIONS,\n fetchOptions: async () => BASE_OPTIONS,\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 5) Slow fetch to show loading state on open/search */\nexport const SlowFetchLoading: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 6) Empty state with action (search something like \"zzz\") */\nexport const EmptyStateWithAction: Story = {\n args: {\n emptyLabel: 'Nothing found',\n emptyAction: (st: ComboboxCallbackStateParams) => {\n const canCreate = Boolean(st.search?.trim());\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\n disabled={!canCreate}\n onClick={() => {\n const v = st.search.trim();\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\n st.setOptions([next]);\n st.setLoading(false);\n }}\n >\n Create option\n </button>\n );\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 7) commandInputAction (helper row under input) */\nexport const WithCommandInputAction: Story = {\n args: {\n commandInputAction: (st: ComboboxCallbackStateParams) => (\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\n <span>\n results: <span className=\"font-mono\">{st.options.length}</span>\n </span>\n <button\n type=\"button\"\n className=\"underline\"\n onClick={() => {\n st.setSearch('');\n st.setLoading(false);\n }}\n >\n Clear search\n </button>\n </div>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 8) listHeadAction (top action inside list) */\nexport const WithListHeadAction: Story = {\n args: {\n listHeadAction: (st: ComboboxCallbackStateParams) => (\n <button\n type=\"button\"\n className=\"w-full text-left px-3 py-2 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n Close list\n </button>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 9) listHeadAction (footer action outside of list) */\nexport const WithListFooterAction: Story = {\n args: {\n listFooterAction: (st: ComboboxCallbackStateParams) => (\n <button\n type=\"button\"\n className=\"w-full text-left px-3 py-2 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n Add new option\n </button>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) Nested options tree */\nexport const NestedOptions: Story = {\n args: {\n fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n defaultNodeDisabled: false,\n defaultNodeMatched: false,\n defaultNodeMuted: true,\n defaultNodeInteractive: false,\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 11) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n onMount: async (st: ComboboxCallbackStateParams) => {\n await sleep(900);\n st.setOptions(BASE_OPTIONS);\n st.setLoading(false);\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { jsxs as v, jsx as r } from "react/jsx-runtime";
2
- import { Check as y } from "lucide-react";
2
+ import { CommandItem as y } from "../Command/Command.js";
3
+ import { Check as h } from "lucide-react";
3
4
  import { cn as p } from "@oneplatformdev/utils";
4
- import { CommandItem as h } from "../Command/Command.js";
5
5
  const N = 24, O = (f) => {
6
6
  const {
7
7
  children: u,
@@ -17,7 +17,7 @@ const N = 24, O = (f) => {
17
17
  defaultNodeInteractive: t
18
18
  } = f;
19
19
  return /* @__PURE__ */ v(
20
- h,
20
+ y,
21
21
  {
22
22
  value: e.value,
23
23
  "data-matched": e.matched ?? !0,
@@ -55,7 +55,7 @@ const N = 24, O = (f) => {
55
55
  }
56
56
  ),
57
57
  /* @__PURE__ */ r(
58
- y,
58
+ h,
59
59
  {
60
60
  className: p(
61
61
  "ml-auto",
@@ -1 +1 @@
1
- {"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\r\nimport { CommandItem } from '../Command';\r\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\r\nimport { Check } from 'lucide-react';\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nconst DEEP_OFFSET = 24;\r\nexport const ComboboxOptionItem = <Data extends object>(\r\n props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\r\n onCollapseToggle?: () => void;\r\n }\r\n) => {\r\n const {\r\n children,\r\n setOpen,\r\n option,\r\n onChangeOption,\r\n value = '',\r\n deep = 0,\r\n onCollapseToggle,\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n } = props;\r\n return (\r\n <CommandItem\r\n key={option.value}\r\n value={option.value}\r\n data-matched={option.matched ?? true}\r\n onSelect={() => {\r\n const interactive = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n if(!interactive) return onCollapseToggle?.();\r\n\r\n if (value === option.value) onChangeOption?.({ value: '', label: '' });\r\n else onChangeOption?.(option);\r\n\r\n setOpen(false);\r\n }}\r\n onClick={(e) => {\r\n const interactive = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n\r\n if(!interactive) {\r\n e?.preventDefault();\r\n e?.stopPropagation();\r\n }\r\n }}\r\n className='py-0'\r\n style={{\r\n '--deep-space': `${deep * DEEP_OFFSET}px`,\r\n } as CSSProperties}\r\n disabled={typeof defaultNodeDisabled === \"function\"\r\n ? defaultNodeDisabled(option, deep)\r\n : defaultNodeDisabled ?? false}\r\n >\r\n <div\r\n style={{ paddingLeft: 'var(--deep-space)' }}\r\n className='relative min-w-10 h-10 aspect-square'\r\n >\r\n {children}\r\n </div>\r\n <span\r\n className={cn(\r\n 'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2',\r\n (() => {\r\n return typeof defaultNodeMatched === \"function\"\r\n ? defaultNodeMatched(option, deep)\r\n : defaultNodeMatched ?? false\r\n })() && 'font-bold',\r\n (() => {\r\n return typeof defaultNodeMuted === \"function\"\r\n ? defaultNodeMuted(option, deep)\r\n : defaultNodeMuted ?? false\r\n })() && 'opacity-60',\r\n (() => {\r\n const res = typeof defaultNodeInteractive === \"function\"\r\n ? defaultNodeInteractive(option, deep)\r\n : defaultNodeInteractive ?? true\r\n return !res;\r\n })() && 'pointer-events-none',\r\n )}\r\n >\r\n {option.label}\r\n </span>\r\n <Check\r\n className={cn(\r\n 'ml-auto',\r\n value === option.value ? 'opacity-100' : 'opacity-0'\r\n )}\r\n />\r\n </CommandItem>\r\n );\r\n}\r\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","props","children","setOpen","option","onChangeOption","value","deep","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","jsxs","CommandItem","e","jsx","cn","Check"],"mappings":";;;;AAMA,MAAMA,IAAc,IACPC,IAAqB,CAChCC,MAGG;AACH,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEX;AACJ,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOV,EAAO;AAAA,MACd,gBAAcA,EAAO,WAAW;AAAA,MAChC,UAAU,MAAM;AAId,YAAG,EAHiB,OAAOQ,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,IACb,QAAOJ,IAAA;AAExB,QAAIF,MAAUF,EAAO,QAAOC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,QAC/CD,CAAM,GAE5BD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,SAAS,CAACY,MAAM;AAKd,SAJoB,OAAOH,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,QAG5BG,GAAG,eAAA,GACHA,GAAG,gBAAA;AAAA,MAEP;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB,GAAGR,IAAOR,CAAW;AAAA,MAAA;AAAA,MAEvC,UAAU,OAAOU,KAAwB,aACrCA,EAAoBL,GAAQG,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,aAAa,oBAAA;AAAA,YACtB,WAAU;AAAA,YAET,UAAAd;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,eAEO,OAAOP,KAAuB,aACjCA,EAAmBN,GAAQG,CAAI,IAC/BG,KAAsB,OAClB;AAAA,eAEC,OAAOC,KAAqB,aAC/BA,EAAiBP,GAAQG,CAAI,IAC7BI,KAAoB,OAClB;AAAA,cAKC,EAHK,OAAOC,KAA2B,aAC1CA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,OAExB;AAAA,YAAA;AAAA,YAGT,UAAAR,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAY;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAX,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAlEKA,EAAO;AAAA,EAAA;AAqElB;"}
1
+ {"version":3,"file":"ComboboxOptionItem.js","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"sourcesContent":["import { CSSProperties, PropsWithChildren } from 'react';\nimport { CommandItem } from '../Command';\nimport { IComboboxOptionsNodeProps } from './Combobox.types';\nimport { Check } from 'lucide-react';\nimport { cn } from '@oneplatformdev/utils';\n\nconst DEEP_OFFSET = 24;\nexport const ComboboxOptionItem = <Data extends object>(\n props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {\n onCollapseToggle?: () => void;\n }\n) => {\n const {\n children,\n setOpen,\n option,\n onChangeOption,\n value = '',\n deep = 0,\n onCollapseToggle,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n } = props;\n return (\n <CommandItem\n key={option.value}\n value={option.value}\n data-matched={option.matched ?? true}\n onSelect={() => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n if(!interactive) return onCollapseToggle?.();\n\n if (value === option.value) onChangeOption?.({ value: '', label: '' });\n else onChangeOption?.(option);\n\n setOpen(false);\n }}\n onClick={(e) => {\n const interactive = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n\n if(!interactive) {\n e?.preventDefault();\n e?.stopPropagation();\n }\n }}\n className='py-0'\n style={{\n '--deep-space': `${deep * DEEP_OFFSET}px`,\n } as CSSProperties}\n disabled={typeof defaultNodeDisabled === \"function\"\n ? defaultNodeDisabled(option, deep)\n : defaultNodeDisabled ?? false}\n >\n <div\n style={{ paddingLeft: 'var(--deep-space)' }}\n className='relative min-w-10 h-10 aspect-square'\n >\n {children}\n </div>\n <span\n className={cn(\n 'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2',\n (() => {\n return typeof defaultNodeMatched === \"function\"\n ? defaultNodeMatched(option, deep)\n : defaultNodeMatched ?? false\n })() && 'font-bold',\n (() => {\n return typeof defaultNodeMuted === \"function\"\n ? defaultNodeMuted(option, deep)\n : defaultNodeMuted ?? false\n })() && 'opacity-60',\n (() => {\n const res = typeof defaultNodeInteractive === \"function\"\n ? defaultNodeInteractive(option, deep)\n : defaultNodeInteractive ?? true\n return !res;\n })() && 'pointer-events-none',\n )}\n >\n {option.label}\n </span>\n <Check\n className={cn(\n 'ml-auto',\n value === option.value ? 'opacity-100' : 'opacity-0'\n )}\n />\n </CommandItem>\n );\n}\n"],"names":["DEEP_OFFSET","ComboboxOptionItem","props","children","setOpen","option","onChangeOption","value","deep","onCollapseToggle","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","jsxs","CommandItem","e","jsx","cn","Check"],"mappings":";;;;AAMA,MAAMA,IAAc,IACPC,IAAqB,CAChCC,MAGG;AACH,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,QAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,kBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEX;AACJ,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,OAAOV,EAAO;AAAA,MACd,gBAAcA,EAAO,WAAW;AAAA,MAChC,UAAU,MAAM;AAId,YAAG,EAHiB,OAAOQ,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,IACb,QAAOJ,IAAA;AAExB,QAAIF,MAAUF,EAAO,QAAOC,IAAiB,EAAE,OAAO,IAAI,OAAO,IAAI,QAC/CD,CAAM,GAE5BD,EAAQ,EAAK;AAAA,MACf;AAAA,MACA,SAAS,CAACY,MAAM;AAKd,SAJoB,OAAOH,KAA2B,aAClDA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,QAG5BG,GAAG,eAAA,GACHA,GAAG,gBAAA;AAAA,MAEP;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,QACL,gBAAgB,GAAGR,IAAOR,CAAW;AAAA,MAAA;AAAA,MAEvC,UAAU,OAAOU,KAAwB,aACrCA,EAAoBL,GAAQG,CAAI,IAChCE,KAAuB;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO,EAAE,aAAa,oBAAA;AAAA,YACtB,WAAU;AAAA,YAET,UAAAd;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,eAEO,OAAOP,KAAuB,aACjCA,EAAmBN,GAAQG,CAAI,IAC/BG,KAAsB,OAClB;AAAA,eAEC,OAAOC,KAAqB,aAC/BA,EAAiBP,GAAQG,CAAI,IAC7BI,KAAoB,OAClB;AAAA,cAKC,EAHK,OAAOC,KAA2B,aAC1CA,EAAuBR,GAAQG,CAAI,IACnCK,KAA0B,OAExB;AAAA,YAAA;AAAA,YAGT,UAAAR,EAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEV,gBAAAY;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,WAAWD;AAAA,cACT;AAAA,cACAX,MAAUF,EAAO,QAAQ,gBAAgB;AAAA,YAAA;AAAA,UAC3C;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,IAlEKA,EAAO;AAAA,EAAA;AAqElB;"}
@@ -1,26 +1,27 @@
1
1
  import { jsx as e, jsxs as u } from "react/jsx-runtime";
2
2
  import { useState as b } from "react";
3
+ import { Collapsible as g, CollapsibleTrigger as h, CollapsibleContent as C } from "../Collapsible/Collapsible.js";
3
4
  import { ComboboxOptionItem as p } from "./ComboboxOptionItem.js";
4
- import { ChevronRightIcon as g } from "lucide-react";
5
+ import { ChevronRightIcon as x } from "lucide-react";
5
6
  import { cn as c } from "@oneplatformdev/utils";
6
- import { Collapsible as h, CollapsibleTrigger as C, CollapsibleContent as x } from "../Collapsible/Collapsible.js";
7
7
  import { ButtonIcon as v } from "../ButtonIcon/ButtonIcon.js";
8
+ import "../ButtonIcon/buttonIconVariants.js";
8
9
  const m = (t) => {
9
- const { option: n, deep: r = 0, defaultNodeOpen: a, defaultNodeDisabled: s, searchTerm: d } = t, [l, i] = b(() => typeof a == "function" ? a(n, r) : a ?? (!!d || !r));
10
+ const { option: n, deep: r = 0, defaultNodeOpen: a, defaultNodeDisabled: s, searchTerm: d } = t, [i, l] = b(() => typeof a == "function" ? a(n, r) : a ?? (!!d || !r));
10
11
  return n?.items?.length ? /* @__PURE__ */ u(
11
- h,
12
+ g,
12
13
  {
13
- open: l,
14
- onOpenChange: i,
15
- "data-opened": l,
14
+ open: i,
15
+ onOpenChange: l,
16
+ "data-opened": i,
16
17
  className: c("group/collapsible"),
17
18
  disabled: typeof s == "function" ? s(n, r) : s ?? !1,
18
19
  children: [
19
- /* @__PURE__ */ e(p, { ...t, onCollapseToggle: () => i((o) => !o), children: /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "inset-0 absolute top-0 right-2", children: /* @__PURE__ */ e(
20
+ /* @__PURE__ */ e(p, { ...t, onCollapseToggle: () => l((o) => !o), children: /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "inset-0 absolute top-0 right-2", children: /* @__PURE__ */ e(
20
21
  v,
21
22
  {
22
23
  onClick: (o) => {
23
- o?.preventDefault(), o?.stopPropagation(), i((f) => !f);
24
+ o?.preventDefault(), o?.stopPropagation(), l((f) => !f);
24
25
  },
25
26
  type: "button",
26
27
  variant: "ghost",
@@ -29,19 +30,19 @@ const m = (t) => {
29
30
  "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
30
31
  ),
31
32
  icon: /* @__PURE__ */ e(
32
- g,
33
+ x,
33
34
  {
34
35
  strokeWidth: 2,
35
36
  className: c(
36
37
  "text-[#06080D]",
37
38
  "transition-transform",
38
- l && "rotate-90"
39
+ i && "rotate-90"
39
40
  )
40
41
  }
41
42
  )
42
43
  }
43
44
  ) }) }) }),
44
- /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((o) => /* @__PURE__ */ e(
45
+ /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((o) => /* @__PURE__ */ e(
45
46
  m,
46
47
  {
47
48
  ...t,
@@ -53,12 +54,12 @@ const m = (t) => {
53
54
  ]
54
55
  }
55
56
  ) : /* @__PURE__ */ e(p, { ...t });
56
- }, k = (t) => {
57
+ }, B = (t) => {
57
58
  const { options: n = [], ...r } = t;
58
59
  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n.map((a) => /* @__PURE__ */ e(m, { ...r, option: a }, a.value)) });
59
60
  };
60
61
  export {
61
- k as ComboboxOptions,
62
+ B as ComboboxOptions,
62
63
  m as ComboboxOptionsNode
63
64
  };
64
65
  //# sourceMappingURL=ComboboxOptions.js.map