@oneplatformdev/ui 0.1.99-beta.196 → 0.1.99-beta.198

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 (166) 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 +2 -4
  7. package/AlertDialog/AlertDialog.stories.js.map +1 -1
  8. package/AlertDialog/AlertDialogRoot.js +18 -20
  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 +10 -11
  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 +19 -22
  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 +2649 -2641
  29. package/Calendar/Calendar.js +4 -6
  30. package/Calendar/Calendar.js.map +1 -1
  31. package/Card/Card.js.map +1 -1
  32. package/Carousel/Carousel.js +6 -7
  33. package/Carousel/Carousel.js.map +1 -1
  34. package/Chart/Chart.js.map +1 -1
  35. package/Checkbox/Checkbox.js +4 -5
  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 -101
  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 +14 -15
  45. package/Combobox/ComboboxOptions.js.map +1 -1
  46. package/Command/Command.js +22 -23
  47. package/Command/Command.js.map +1 -1
  48. package/DataTable/DataTable.js +22 -24
  49. package/DataTable/DataTable.js.map +1 -1
  50. package/DataTable/DataTableColumnFilter.js +6 -7
  51. package/DataTable/DataTableColumnFilter.js.map +1 -1
  52. package/DataTable/useDataTable.js.map +1 -1
  53. package/DatePicker/DatePicker.js +12 -13
  54. package/DatePicker/DatePicker.js.map +1 -1
  55. package/Dialog/Dialog.js +16 -17
  56. package/Dialog/Dialog.js.map +1 -1
  57. package/Dialog/Dialog.stories.js +14 -15
  58. package/Dialog/Dialog.stories.js.map +1 -1
  59. package/Dialog/DialogOverlayScope.js.map +1 -1
  60. package/Drawer/Drawer.js.map +1 -1
  61. package/DropdownMenu/DropdownMenu.js.map +1 -1
  62. package/Dropzone/Dropzone.js.map +1 -1
  63. package/Dropzone/Dropzone.types.js.map +1 -1
  64. package/Dropzone/DropzoneFilePreview.js.map +1 -1
  65. package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
  66. package/Dropzone/DropzoneUtils.js.map +1 -1
  67. package/Form/Form.js +14 -15
  68. package/Form/Form.js.map +1 -1
  69. package/Form/FormRenderControl.js +7 -8
  70. package/Form/FormRenderControl.js.map +1 -1
  71. package/Form/Form_old.js +4 -5
  72. package/Form/Form_old.js.map +1 -1
  73. package/FormCheckbox/FormCheckbox.js +4 -4
  74. package/FormCheckbox/FormCheckbox.js.map +1 -1
  75. package/FormCombobox/FormCombobox.js +4 -4
  76. package/FormCombobox/FormCombobox.js.map +1 -1
  77. package/FormDatePicker/FormDatePicker.js +4 -4
  78. package/FormDatePicker/FormDatePicker.js.map +1 -1
  79. package/FormDropzone/FormDropzone.js +3 -3
  80. package/FormDropzone/FormDropzone.js.map +1 -1
  81. package/FormInput/FormInput.d.ts.map +1 -1
  82. package/FormInput/FormInput.js +26 -25
  83. package/FormInput/FormInput.js.map +1 -1
  84. package/FormInput/FormInput.stories.js +21 -17
  85. package/FormInput/FormInput.stories.js.map +1 -1
  86. package/FormInput/FormInput.types.d.ts +1 -0
  87. package/FormInput/FormInput.types.d.ts.map +1 -1
  88. package/FormRadio/FormRadio.js.map +1 -1
  89. package/FormSelect/FormSelect.js +6 -9
  90. package/FormSelect/FormSelect.js.map +1 -1
  91. package/FormTextarea/FormTextarea.js +4 -4
  92. package/FormTextarea/FormTextarea.js.map +1 -1
  93. package/Header/Header.js.map +1 -1
  94. package/HoverCard/HoverCard.js.map +1 -1
  95. package/InfoBlock/InfoBlock.js.map +1 -1
  96. package/InfoBlock/InfoBlock.stories.js.map +1 -1
  97. package/InfoBlock/infoBlockVariants.js.map +1 -1
  98. package/Input/Input.d.ts.map +1 -1
  99. package/Input/Input.js +65 -51
  100. package/Input/Input.js.map +1 -1
  101. package/Input/Input.types.d.ts +1 -0
  102. package/Input/Input.types.d.ts.map +1 -1
  103. package/Input/inputVariants.js.map +1 -1
  104. package/InputOTP/InputOTP.d.ts.map +1 -1
  105. package/InputOTP/InputOTP.js.map +1 -1
  106. package/LICENSE +21 -21
  107. package/Label/Label.js.map +1 -1
  108. package/Label/labelVariants.js.map +1 -1
  109. package/LazyLoader/LazyLoader.js +4 -5
  110. package/LazyLoader/LazyLoader.js.map +1 -1
  111. package/LoadedIcon/LoadedIcon.js.map +1 -1
  112. package/LoadingMask/LoadingMask.js.map +1 -1
  113. package/LoadingMask/RenderLoadingMask.js.map +1 -1
  114. package/LoadingProgress/LoadingProgress.js.map +1 -1
  115. package/LoadingProgress/loadingProgressVariants.js.map +1 -1
  116. package/Menubar/Menubar.js.map +1 -1
  117. package/NavigationMenu/NavigationMenu.js.map +1 -1
  118. package/NavigationMenu/navigationMenuVariants.js.map +1 -1
  119. package/Pagination/Pagination.js +0 -1
  120. package/Pagination/Pagination.js.map +1 -1
  121. package/Popover/Popover.js.map +1 -1
  122. package/Progress/Progress.js.map +1 -1
  123. package/README.md +7 -7
  124. package/Radio/Radio.js.map +1 -1
  125. package/RadioGroup/RadioGroup.js.map +1 -1
  126. package/Resizable/Resizable.js.map +1 -1
  127. package/Resizable/Resizable.stories.js.map +1 -1
  128. package/ScrollArea/ScrollArea.js.map +1 -1
  129. package/Search/Search.js +9 -9
  130. package/Search/Search.js.map +1 -1
  131. package/Search/Search.stories.js.map +1 -1
  132. package/Select/Select.js +6 -7
  133. package/Select/Select.js.map +1 -1
  134. package/Select/Select.stories.js.map +1 -1
  135. package/Select/SelectRoot.js.map +1 -1
  136. package/Separator/Separator.js.map +1 -1
  137. package/Sheet/Sheet.js.map +1 -1
  138. package/Sidebar/Sidebar.js +20 -21
  139. package/Sidebar/Sidebar.js.map +1 -1
  140. package/Skeleton/Skeleton.js.map +1 -1
  141. package/Slider/Slider.js.map +1 -1
  142. package/Sonner/Sonner.js.map +1 -1
  143. package/Switch/Switch.js.map +1 -1
  144. package/Table/Table.js.map +1 -1
  145. package/TablePagination/TablePagination.js +21 -26
  146. package/TablePagination/TablePagination.js.map +1 -1
  147. package/Tabs/Tabs.js.map +1 -1
  148. package/Tabs/TabsRoot.js.map +1 -1
  149. package/Textarea/Textarea.js.map +1 -1
  150. package/Textarea/Textarea.stories.js.map +1 -1
  151. package/Textarea/useAutosizeTextArea.js.map +1 -1
  152. package/Theme/ThemeModeToggle.js +3 -4
  153. package/Theme/ThemeModeToggle.js.map +1 -1
  154. package/Theme/ThemeProvider.js.map +1 -1
  155. package/Toast/Toast.js.map +1 -1
  156. package/Toast/toast.constants.js.map +1 -1
  157. package/Toast/toastVariants.js.map +1 -1
  158. package/Toast/useToast.js.map +1 -1
  159. package/Toaster/Toaster.js.map +1 -1
  160. package/Toggle/Toggle.js.map +1 -1
  161. package/ToggleGroup/ToggleGroup.js.map +1 -1
  162. package/Tooltip/Tooltip.js.map +1 -1
  163. package/Tooltip/TooltipRoot.js.map +1 -1
  164. package/Tooltip/tooltipVariants.js.map +1 -1
  165. package/index.js +280 -280
  166. package/package.json +4 -4
@@ -1,141 +1,139 @@
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";
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";
3
+ import { cn as T } 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";
3
9
  import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
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 F } 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 = (O) => {
14
- const { value: n, flattenOptions: S = [], selectedOption: L } = O;
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 = (S) => {
12
+ const { value: n, flattenOptions: L = [], selectedOption: I } = S;
15
13
  if (!n) return "No value for render label";
16
- const y = [S.find((m) => String(m.value).toLowerCase() === String(n).toLowerCase()), L].filter(Boolean).map((m) => m.label).find(Boolean);
17
- return y || n;
18
- }, Ae = (O) => {
14
+ const v = [L.find((m) => String(m.value).toLowerCase() === String(n).toLowerCase()), I].filter(Boolean).map((m) => m.label).find(Boolean);
15
+ return v || n;
16
+ }, je = (S) => {
19
17
  const {
20
18
  value: n,
21
- onChange: S,
22
- placeholder: L,
23
- disabled: T,
24
- searchLabel: y = "Type to search...",
19
+ onChange: L,
20
+ placeholder: I,
21
+ disabled: R,
22
+ searchLabel: v = "Type to search...",
25
23
  fetchOptions: m,
26
- options: I,
27
- emptyLabel: R = "No options",
28
- emptyAction: v,
29
- commandInputAction: k,
30
- listHeadAction: C,
31
- listFooterAction: w,
32
- onMount: D,
24
+ options: k,
25
+ emptyLabel: G = "No options",
26
+ emptyAction: C,
27
+ commandInputAction: D,
28
+ listHeadAction: w,
29
+ listFooterAction: x,
30
+ onMount: M,
33
31
  defaultNodeDisabled: J,
34
32
  defaultNodeMatched: K,
35
33
  defaultNodeMuted: Q,
36
34
  defaultNodeInteractive: Y
37
- } = O, [G, W] = s(!1), [l, M] = s(!1), [r, P] = s(""), [u, B] = s(), [o, c] = s(!1), [a, Z] = s([]), [$, ee] = s([]), h = f((t) => {
38
- const g = (E) => {
39
- const i = [], V = (x) => {
40
- if (x)
41
- for (const b of x)
42
- i.push(b), b.items && b.items.length && V(b.items);
35
+ } = 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) => {
36
+ const b = (A) => {
37
+ const i = [], V = (N) => {
38
+ if (N)
39
+ for (const y of N)
40
+ i.push(y), y.items && y.items.length && V(y.items);
43
41
  };
44
- V(E), ee((x) => {
45
- if (!i.find((N) => !!n && String(N.value) === String(n))) {
46
- const N = u || x.find((ie) => !!n && String(ie.value) === String(n));
47
- if (N) return [N, ...i];
42
+ V(A), ee((N) => {
43
+ if (!i.find((O) => !!n && String(O.value) === String(n))) {
44
+ const O = u || N.find((ie) => !!n && String(ie.value) === String(n));
45
+ if (O) return [O, ...i];
48
46
  }
49
47
  return i;
50
48
  });
51
49
  };
52
- Z((E) => {
53
- const i = typeof t == "function" ? t(E) : t;
54
- return g(i), i;
50
+ Z((A) => {
51
+ const i = typeof t == "function" ? t(A) : t;
52
+ return b(i), i;
55
53
  });
56
54
  }, [u, n]);
57
55
  se(() => {
58
- I?.length && h(I);
59
- }, [I]);
56
+ k?.length && h(k);
57
+ }, [k]);
60
58
  const te = async () => {
61
- l || (q(), P(""));
62
- }, q = f(async (t) => {
59
+ l || (z(), E(""));
60
+ }, z = f(async (t) => {
63
61
  c(!0);
64
62
  try {
65
- const g = await m(t);
66
- h(g);
67
- } catch (g) {
68
- console.error("Unexpected error while get option:", g);
63
+ const b = await m(t);
64
+ h(b);
65
+ } catch (b) {
66
+ console.error("Unexpected error while get option:", b);
69
67
  } finally {
70
68
  c(!1);
71
69
  }
72
- }, [h]), ne = ye(q, 1e3, {
70
+ }, [h]), ne = ce(z, 1e3, {
73
71
  leading: !1,
74
72
  trailing: !0
75
73
  }), oe = f((t) => {
76
- c(!0), P(t), ne(t);
77
- }, []), z = f((t) => {
78
- S(t.value), B(t), c(!1);
74
+ c(!0), E(t), ne(t);
75
+ }, []), H = f((t) => {
76
+ L(t.value), j(t), c(!1);
79
77
  }, []), re = f(() => {
80
- z({ value: "", label: "" }), B(void 0), c(!1);
81
- }, []), H = A(() => !!r && !a.length && !o, [o, a.length, r]), U = A(() => !a.length && !o, [o, a.length, r]), d = A(() => ({
82
- options: a,
78
+ H({ value: "", label: "" }), j(void 0), c(!1);
79
+ }, []), U = F(() => !!a && !r.length && !o, [o, r.length, a]), g = F(() => !r.length && !o, [o, r.length, a]), d = F(() => ({
80
+ options: r,
83
81
  setOptions: h,
84
82
  selectedOption: u,
85
- setSelectedOption: B,
86
- search: r || "",
87
- setSearch: P,
83
+ setSelectedOption: j,
84
+ search: a || "",
85
+ setSearch: E,
88
86
  open: l,
89
- setOpen: M,
87
+ setOpen: P,
90
88
  loading: o,
91
89
  setLoading: c,
92
- isEmptyList: U,
93
- isSearchedEmptyList: H
94
- }), [o, l, a, r, u, U, H, h]), ae = f(async () => {
95
- if (D) {
96
- W(!0);
90
+ isEmptyList: g,
91
+ isSearchedEmptyList: U
92
+ }), [o, l, r, a, u, g, U, h]), ae = f(async () => {
93
+ if (M) {
94
+ q(!0);
97
95
  try {
98
- await D(d);
96
+ await M(d);
99
97
  } finally {
100
- W(!1);
98
+ q(!1);
101
99
  }
102
100
  }
103
- }, [D, d]);
101
+ }, [M, d]);
104
102
  return le(() => {
105
103
  ae();
106
104
  }, []), /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ p(
107
- ce,
105
+ me,
108
106
  {
109
107
  open: l,
110
108
  onOpenChange: (t) => {
111
- M(t), t && te();
109
+ P(t), t && te();
112
110
  },
113
111
  children: [
114
- /* @__PURE__ */ e(de, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
115
- fe,
112
+ /* @__PURE__ */ e(ue, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
113
+ ge,
116
114
  {
117
115
  color: "secondary",
118
116
  role: "combobox",
119
117
  "aria-expanded": l,
120
- className: F(
118
+ className: T(
121
119
  "relative w-full justify-between font-normal text-sm bg-transparent",
122
120
  "border border-border",
123
121
  l && "border-2 outline-hidden ring-1 ring-ring",
124
122
  "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
125
123
  ),
126
- disabled: T || G,
127
- children: G ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(j, { children: [
124
+ disabled: R || W,
125
+ children: W ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(B, { children: [
128
126
  /* @__PURE__ */ e(
129
127
  "span",
130
128
  {
131
129
  className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap",
132
- children: n ? xe({ value: n, flattenOptions: $, selectedOption: u }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: L })
130
+ children: n ? xe({ value: n, flattenOptions: $, selectedOption: u }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: I })
133
131
  }
134
132
  ),
135
133
  n ? /* @__PURE__ */ e(
136
134
  "div",
137
135
  {
138
- className: F(
136
+ className: T(
139
137
  "absolute top-0 right-1",
140
138
  "flex items-center justify-center",
141
139
  "w-9 aspect-square [&_svg]:size-5",
@@ -144,51 +142,51 @@ const xe = (O) => {
144
142
  onClick: (t) => {
145
143
  t.stopPropagation(), re();
146
144
  },
147
- children: /* @__PURE__ */ e(ve, {})
145
+ children: /* @__PURE__ */ e(de, {})
148
146
  }
149
- ) : /* @__PURE__ */ e(Ce, { className: "opacity-50 w-4 h-4" })
147
+ ) : /* @__PURE__ */ e(pe, { className: "opacity-50 w-4 h-4" })
150
148
  ] })
151
149
  }
152
150
  ) }),
153
151
  /* @__PURE__ */ e(
154
- pe,
152
+ he,
155
153
  {
156
154
  className: "w-(--radix-popper-anchor-width) max-w-none p-0",
157
155
  align: "start",
158
- children: /* @__PURE__ */ p(me, { shouldFilter: !1, children: [
156
+ children: /* @__PURE__ */ p(be, { shouldFilter: !1, children: [
159
157
  /* @__PURE__ */ e(
160
- ue,
158
+ ye,
161
159
  {
162
- placeholder: y,
163
- value: r,
160
+ placeholder: v,
161
+ value: a,
164
162
  onValueChange: oe
165
163
  }
166
164
  ),
167
- typeof k == "function" ? k(d) : k,
168
- /* @__PURE__ */ e(he, { children: /* @__PURE__ */ p(ge, { className: F(!a.length && "p-0 shadow-none"), children: [
165
+ typeof D == "function" ? D(d) : D,
166
+ /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ p(Ce, { className: T(!r.length && "p-0 shadow-none"), children: [
169
167
  o && /* @__PURE__ */ e(X, { fullWidth: !0 }),
170
- !o && !!r && /* @__PURE__ */ e(j, { children: v ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
171
- /* @__PURE__ */ e("span", { children: R }),
172
- typeof v == "function" ? v(d) : v
173
- ] }) : /* @__PURE__ */ e(_, { children: R }) }),
174
- !o && /* @__PURE__ */ p(j, { children: [
175
- C && /* @__PURE__ */ e(
176
- be,
168
+ !o && g && /* @__PURE__ */ e(B, { children: C ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
169
+ /* @__PURE__ */ e("span", { children: G }),
170
+ typeof C == "function" ? C(d) : C
171
+ ] }) : /* @__PURE__ */ e(_, { children: G }) }),
172
+ !o && !g && /* @__PURE__ */ p(B, { children: [
173
+ w && /* @__PURE__ */ e(
174
+ we,
177
175
  {
178
176
  asChild: !0,
179
177
  className: "w-full",
180
- children: typeof C == "function" ? C(d) : C
178
+ children: typeof w == "function" ? w(d) : w
181
179
  },
182
180
  "combobox-list-head-action"
183
181
  ),
184
182
  /* @__PURE__ */ e(
185
- we,
183
+ fe,
186
184
  {
187
- searchTerm: r,
185
+ searchTerm: a,
188
186
  value: n,
189
- options: a,
190
- onChangeOption: z,
191
- setOpen: M,
187
+ options: r,
188
+ onChangeOption: H,
189
+ setOpen: P,
192
190
  defaultNodeDisabled: J,
193
191
  defaultNodeMatched: K,
194
192
  defaultNodeMuted: Q,
@@ -197,12 +195,12 @@ const xe = (O) => {
197
195
  )
198
196
  ] })
199
197
  ] }) }),
200
- w && /* @__PURE__ */ e(
198
+ !o && x && !g && /* @__PURE__ */ e(
201
199
  "div",
202
200
  {
203
201
  "data-slot": "command-footer-wrapper",
204
202
  className: "flex w-full min-h-9 items-center gap-2 border-t px-3",
205
- children: typeof w == "function" ? w(d) : w
203
+ children: typeof x == "function" ? x(d) : x
206
204
  }
207
205
  )
208
206
  ] })
@@ -213,6 +211,6 @@ const xe = (O) => {
213
211
  ) });
214
212
  };
215
213
  export {
216
- Ae as Combobox
214
+ je as Combobox
217
215
  };
218
216
  //# sourceMappingURL=Combobox.js.map
@@ -1 +1 @@
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 && Boolean(searchTerm) && (\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 && (\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 { listFooterAction && (\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
+ {"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 && isEmptyList && (\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 && !isEmptyList && (\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 { !loading && listFooterAction && !isEmptyList && (\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 +1 @@
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
+ {"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,7 +1,7 @@
1
1
  import { jsxs as v, jsx as r } from "react/jsx-runtime";
2
- import { CommandItem as y } from "../Command/Command.js";
3
- import { Check as h } from "lucide-react";
2
+ import { Check as y } from "lucide-react";
4
3
  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
- y,
20
+ h,
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
- h,
58
+ y,
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';\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
+ {"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,27 +1,26 @@
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";
4
3
  import { ComboboxOptionItem as p } from "./ComboboxOptionItem.js";
5
- import { ChevronRightIcon as x } from "lucide-react";
4
+ import { ChevronRightIcon as g } from "lucide-react";
6
5
  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";
9
8
  const m = (t) => {
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));
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));
11
10
  return n?.items?.length ? /* @__PURE__ */ u(
12
- g,
11
+ h,
13
12
  {
14
- open: i,
15
- onOpenChange: l,
16
- "data-opened": i,
13
+ open: l,
14
+ onOpenChange: i,
15
+ "data-opened": l,
17
16
  className: c("group/collapsible"),
18
17
  disabled: typeof s == "function" ? s(n, r) : s ?? !1,
19
18
  children: [
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(
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(
21
20
  v,
22
21
  {
23
22
  onClick: (o) => {
24
- o?.preventDefault(), o?.stopPropagation(), l((f) => !f);
23
+ o?.preventDefault(), o?.stopPropagation(), i((f) => !f);
25
24
  },
26
25
  type: "button",
27
26
  variant: "ghost",
@@ -30,19 +29,19 @@ const m = (t) => {
30
29
  "bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent"
31
30
  ),
32
31
  icon: /* @__PURE__ */ e(
33
- x,
32
+ g,
34
33
  {
35
34
  strokeWidth: 2,
36
35
  className: c(
37
36
  "text-[#06080D]",
38
37
  "transition-transform",
39
- i && "rotate-90"
38
+ l && "rotate-90"
40
39
  )
41
40
  }
42
41
  )
43
42
  }
44
43
  ) }) }) }),
45
- /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((o) => /* @__PURE__ */ e(
44
+ /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n?.items.map((o) => /* @__PURE__ */ e(
46
45
  m,
47
46
  {
48
47
  ...t,
@@ -54,12 +53,12 @@ const m = (t) => {
54
53
  ]
55
54
  }
56
55
  ) : /* @__PURE__ */ e(p, { ...t });
57
- }, B = (t) => {
56
+ }, k = (t) => {
58
57
  const { options: n = [], ...r } = t;
59
58
  return /* @__PURE__ */ e("div", { className: "flex flex-col gap-0", children: n.map((a) => /* @__PURE__ */ e(m, { ...r, option: a }, a.value)) });
60
59
  };
61
60
  export {
62
- B as ComboboxOptions,
61
+ k as ComboboxOptions,
63
62
  m as ComboboxOptionsNode
64
63
  };
65
64
  //# sourceMappingURL=ComboboxOptions.js.map