@oneplatformdev/ui 0.1.99-beta.197 → 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.
@@ -1,6 +1,6 @@
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";
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
4
  import { useDebounceCallback as ce } from "@oneplatformdev/hooks";
5
5
  import { X as de, ChevronDown as pe } from "lucide-react";
6
6
  import { ComboboxOptions as fe } from "./ComboboxOptions.js";
@@ -8,105 +8,105 @@ import { Popover as me, PopoverTrigger as ue, PopoverContent as he } from "../Po
8
8
  import { Button as ge } from "../Button/Button.js";
9
9
  import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
10
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;
11
+ const xe = (S) => {
12
+ const { value: n, flattenOptions: L = [], selectedOption: I } = S;
13
13
  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) => {
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) => {
17
17
  const {
18
18
  value: n,
19
- onChange: S,
20
- placeholder: L,
21
- disabled: T,
22
- searchLabel: y = "Type to search...",
19
+ onChange: L,
20
+ placeholder: I,
21
+ disabled: R,
22
+ searchLabel: v = "Type to search...",
23
23
  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,
24
+ options: k,
25
+ emptyLabel: G = "No options",
26
+ emptyAction: C,
27
+ commandInputAction: D,
28
+ listHeadAction: w,
29
+ listFooterAction: x,
30
+ onMount: M,
31
31
  defaultNodeDisabled: J,
32
32
  defaultNodeMatched: K,
33
33
  defaultNodeMuted: Q,
34
34
  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);
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);
41
41
  };
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];
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];
46
46
  }
47
47
  return i;
48
48
  });
49
49
  };
50
- Z((E) => {
51
- const i = typeof t == "function" ? t(E) : t;
52
- return g(i), i;
50
+ Z((A) => {
51
+ const i = typeof t == "function" ? t(A) : t;
52
+ return b(i), i;
53
53
  });
54
54
  }, [u, n]);
55
55
  se(() => {
56
- I?.length && h(I);
57
- }, [I]);
56
+ k?.length && h(k);
57
+ }, [k]);
58
58
  const te = async () => {
59
- l || (q(), P(""));
60
- }, q = f(async (t) => {
59
+ l || (z(), E(""));
60
+ }, z = f(async (t) => {
61
61
  c(!0);
62
62
  try {
63
- const g = await m(t);
64
- h(g);
65
- } catch (g) {
66
- 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);
67
67
  } finally {
68
68
  c(!1);
69
69
  }
70
- }, [h]), ne = ce(q, 1e3, {
70
+ }, [h]), ne = ce(z, 1e3, {
71
71
  leading: !1,
72
72
  trailing: !0
73
73
  }), 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(() => ({
74
+ c(!0), E(t), ne(t);
75
+ }, []), H = f((t) => {
76
+ L(t.value), j(t), c(!1);
77
+ }, []), re = f(() => {
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
80
  options: r,
81
81
  setOptions: h,
82
82
  selectedOption: u,
83
- setSelectedOption: B,
83
+ setSelectedOption: j,
84
84
  search: a || "",
85
- setSearch: P,
85
+ setSearch: E,
86
86
  open: l,
87
- setOpen: M,
87
+ setOpen: P,
88
88
  loading: o,
89
89
  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);
90
+ isEmptyList: g,
91
+ isSearchedEmptyList: U
92
+ }), [o, l, r, a, u, g, U, h]), ae = f(async () => {
93
+ if (M) {
94
+ q(!0);
95
95
  try {
96
- await D(d);
96
+ await M(d);
97
97
  } finally {
98
- W(!1);
98
+ q(!1);
99
99
  }
100
100
  }
101
- }, [D, d]);
101
+ }, [M, d]);
102
102
  return le(() => {
103
- re();
103
+ ae();
104
104
  }, []), /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ p(
105
105
  me,
106
106
  {
107
107
  open: l,
108
108
  onOpenChange: (t) => {
109
- M(t), t && te();
109
+ P(t), t && te();
110
110
  },
111
111
  children: [
112
112
  /* @__PURE__ */ e(ue, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
@@ -115,32 +115,32 @@ const xe = (O) => {
115
115
  color: "secondary",
116
116
  role: "combobox",
117
117
  "aria-expanded": l,
118
- className: F(
118
+ className: T(
119
119
  "relative w-full justify-between font-normal text-sm bg-transparent",
120
120
  "border border-border",
121
121
  l && "border-2 outline-hidden ring-1 ring-ring",
122
122
  "focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
123
123
  ),
124
- disabled: T || G,
125
- 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: [
126
126
  /* @__PURE__ */ e(
127
127
  "span",
128
128
  {
129
129
  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 })
130
+ children: n ? xe({ value: n, flattenOptions: $, selectedOption: u }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: I })
131
131
  }
132
132
  ),
133
133
  n ? /* @__PURE__ */ e(
134
134
  "div",
135
135
  {
136
- className: F(
136
+ className: T(
137
137
  "absolute top-0 right-1",
138
138
  "flex items-center justify-center",
139
139
  "w-9 aspect-square [&_svg]:size-5",
140
140
  "opacity-50 cursor-pointer hover:opacity-100"
141
141
  ),
142
142
  onClick: (t) => {
143
- t.stopPropagation(), ae();
143
+ t.stopPropagation(), re();
144
144
  },
145
145
  children: /* @__PURE__ */ e(de, {})
146
146
  }
@@ -157,25 +157,25 @@ const xe = (O) => {
157
157
  /* @__PURE__ */ e(
158
158
  ye,
159
159
  {
160
- placeholder: y,
160
+ placeholder: v,
161
161
  value: a,
162
162
  onValueChange: oe
163
163
  }
164
164
  ),
165
- typeof k == "function" ? k(d) : k,
166
- /* @__PURE__ */ e(ve, { children: /* @__PURE__ */ p(Ce, { className: F(!r.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: [
167
167
  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(
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
174
  we,
175
175
  {
176
176
  asChild: !0,
177
177
  className: "w-full",
178
- children: typeof C == "function" ? C(d) : C
178
+ children: typeof w == "function" ? w(d) : w
179
179
  },
180
180
  "combobox-list-head-action"
181
181
  ),
@@ -185,8 +185,8 @@ const xe = (O) => {
185
185
  searchTerm: a,
186
186
  value: n,
187
187
  options: r,
188
- onChangeOption: z,
189
- setOpen: M,
188
+ onChangeOption: H,
189
+ setOpen: P,
190
190
  defaultNodeDisabled: J,
191
191
  defaultNodeMatched: K,
192
192
  defaultNodeMuted: Q,
@@ -195,12 +195,12 @@ const xe = (O) => {
195
195
  )
196
196
  ] })
197
197
  ] }) }),
198
- w && /* @__PURE__ */ e(
198
+ !o && x && !g && /* @__PURE__ */ e(
199
199
  "div",
200
200
  {
201
201
  "data-slot": "command-footer-wrapper",
202
202
  className: "flex w-full min-h-9 items-center gap-2 border-t px-3",
203
- children: typeof w == "function" ? w(d) : w
203
+ children: typeof x == "function" ? x(d) : x
204
204
  }
205
205
  )
206
206
  ] })
@@ -211,6 +211,6 @@ const xe = (O) => {
211
211
  ) });
212
212
  };
213
213
  export {
214
- Ee as Combobox
214
+ je as Combobox
215
215
  };
216
216
  //# 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":";;;;;;;;;;AA+BA,MAAMA,KAAuB,CAAsBC,MAIrC;AACZ,QAAM,EAAE,OAAAC,GAAO,gBAAAC,IAAiB,CAAA,GAAI,gBAAAC,MAAmBH;AACvD,MAAI,CAACC,EAAO,QAAO;AAEnB,QAAMG,IAAQ,CADUF,EAAe,KAAK,CAAAG,MAAK,OAAOA,EAAE,KAAK,EAAE,YAAA,MAAkB,OAAOJ,CAAK,EAAE,aAAa,GAC7EE,CAAe,EAC7C,OAAO,OAAO,EACd,IAAI,CAAAE,MAAKA,EAAG,KAAK,EACjB,KAAK,OAAO;AACf,SAAKD,KAAcH;AAErB,GAGaK,KAAW,CAAwBC,MAA+B;AAC7E,QAAM;AAAA,IACJ,OAAAN;AAAA,IACA,UAAAO;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,cAAAC;AAAA,IACA,SAASC;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,EAAA,IACEhB,GACE,CAAEiB,GAAgBC,CAAkB,IAAIC,EAAS,EAAK,GACtD,CAAEC,GAAMC,CAAQ,IAAIF,EAAS,EAAK,GAClC,CAAEG,GAAYC,CAAc,IAAIJ,EAAS,EAAE,GAC3C,CAAEvB,GAAgB4B,CAAkB,IAAIL,EAAA,GACxC,CAAEM,GAASC,CAAW,IAAIP,EAAS,EAAK,GAExC,CAAEQ,GAASC,CAAmB,IAAIT,EAAiC,CAAA,CAAE,GACrE,CAAExB,GAAgBkC,EAAkB,IAAIV,EAAiC,CAAA,CAAE,GAC3EW,IAA+DC,EAAY,CAACC,MAAW;AAC3F,UAAMC,IAAU,CAACC,MAAiC;AAChD,YAAMC,IAA8B,CAAA,GAC9BC,IAAO,CAACC,MAAmC;AAC/C,YAAKA;AACL,qBAAWC,KAAQD;AACjB,YAAAF,EAAI,KAAKG,CAAI,GACTA,EAAK,SAASA,EAAK,MAAM,UAAQF,EAAKE,EAAK,KAAK;AAAA,MAExD;AACA,MAAAF,EAAKF,CAAI,GACTL,GAAkB,CAACU,MAAS;AAG1B,YAAI,CAFoBJ,EAAI,KAAK,CAAArC,MAAK,CAAC,CAACJ,KAAS,OAAOI,EAAE,KAAK,MAAM,OAAOJ,CAAK,CAAC,GAE5D;AACpB,gBAAM8C,IAAU5C,KAAkB2C,EAAK,KAAK,QAAK,CAAC,CAAC7C,KAAS,OAAOI,GAAE,KAAK,MAAM,OAAOJ,CAAK,CAAC;AAC7F,cAAI8C,EAAS,QAAO,CAAEA,GAAS,GAAGL,CAAI;AAAA,QACxC;AAEA,eAAOA;AAAA,MACT,CAAC;AAAA,IACH;AACA,IAAAP,EAAmB,CAACW,MAAS;AAC3B,YAAML,IAA+B,OAAOF,KAAW,aAAaA,EAAOO,CAAI,IAAIP;AACnF,aAAAC,EAAQC,CAAI,GACLA;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAEtC,GAAgBF,CAAM,CAAC;AAE5B,EAAA+C,GAAU,MAAM;AACd,IAAAnC,GAAa,UAAUwB,EAAWxB,CAAW;AAAA,EAC/C,GAAG,CAAEA,CAAY,CAAC;AAElB,QAAMoC,KAAoB,YAAY;AACpC,IAAKtB,MACEuB,EAAA,GACLpB,EAAc,EAAE;AAAA,EAEpB,GAEMoB,IAAUZ,EAAY,OAAOa,MAAoB;AACrD,IAAAlB,EAAW,EAAI;AACf,QAAI;AACF,YAAMmB,IAAiB,MAAMxC,EAAauC,CAAM;AAChD,MAAAd,EAAWe,CAAc;AAAA,IAC3B,SAASC,GAAO;AACd,cAAQ,MAAM,sCAAsCA,CAAK;AAAA,IAC3D,UAAA;AACE,MAAApB,EAAW,EAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAEI,CAAW,CAAC,GAEXiB,KAAmBC,GAAoBL,GAAS,KAAM;AAAA,IAC1D,SAAS;AAAA,IACT,UAAU;AAAA,EAAA,CACX,GAEKM,KAAqBlB,EAAY,CAACrC,MAAkB;AACxD,IAAAgC,EAAW,EAAI,GACfH,EAAc7B,CAAK,GACnBqD,GAAiBrD,CAAK;AAAA,EACxB,GAAG,CAAA,CAAE,GAECwD,IAAiBnB,EAAY,CAACoB,MAAiC;AACnE,IAAAlD,EAASkD,EAAO,KAAK,GACrB3B,EAAkB2B,CAAM,GACxBzB,EAAW,EAAK;AAAA,EAClB,GAAG,CAAA,CAAE,GAEC0B,KAAuBrB,EAAY,MAAM;AAC7C,IAAAmB,EAAe,EAAE,OAAO,IAAI,OAAO,IAAI,GACvC1B,EAAkB,MAAS,GAC3BE,EAAW,EAAK;AAAA,EAClB,GAAG,CAAA,CAAE,GAEC2B,IAAsBC,EAAQ,MAC3B,EAAQhC,KAAe,CAACK,EAAQ,UAAU,CAACF,GACjD,CAAEA,GAASE,EAAQ,QAAQL,CAAW,CAAC,GAEpCiC,IAAcD,EAAQ,MACnB,CAAC3B,EAAQ,UAAU,CAACF,GAC1B,CAAEA,GAASE,EAAQ,QAAQL,CAAW,CAAC,GAEpCkC,IACJF,EAAQ,OACC;AAAA,IACL,SAAA3B;AAAA,IACA,YAAAG;AAAA,IACA,gBAAAlC;AAAA,IACA,mBAAA4B;AAAA,IACA,QAAQF,KAAc;AAAA,IACtB,WAAWC;AAAA,IACX,MAAAH;AAAA,IACA,SAAAC;AAAA,IACA,SAAAI;AAAA,IACA,YAAAC;AAAA,IACA,aAAA6B;AAAA,IACA,qBAAAF;AAAA,EAAA,IAED,CAAE5B,GAASL,GAAMO,GAASL,GAAY1B,GAAgB2D,GAAaF,GAAqBvB,CAAW,CAAC,GAEnG2B,KAAa1B,EAAY,YAAY;AACzC,QAAKnB,GACL;AAAA,MAAAM,EAAkB,EAAI;AACtB,UAAI;AACF,cAAMN,EAAQ4C,CAA2B;AAAA,MAC3C,UAAA;AACE,QAAAtC,EAAkB,EAAK;AAAA,MACzB;AAAA;AAAA,EACF,GAAG,CAAEN,GAAS4C,CAA4B,CAAC;AAE3C,SAAAE,GAAgB,MAAM;AACpB,IAAAD,GAAA;AAAA,EACF,GAAG,CAAA,CAAE,GAGH,gBAAAE,EAAC,OAAA,EAAI,WAAU,UACb,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAzC;AAAA,MACA,cAAc,CAAC0C,MAAY;AACzB,QAAAzC,EAAQyC,CAAO,GACXA,KAASpB,GAAA;AAAA,MACf;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAiB,EAACI,IAAA,EAAe,SAAO,IAAC,WAAU,gBAChC,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,MAAK;AAAA,YACL,iBAAe5C;AAAA,YACf,WAAW6C;AAAA,cACT;AAAA,cACA;AAAA,cACA7C,KAAQ;AAAA,cACR;AAAA,YAAA;AAAA,YAEF,UAAUjB,KAAYc;AAAA,YAErB,UAAAA,IACC,gBAAA0C,EAACO,GAAA,EAAY,WAAS,QAEtB,gBAAAN,EAAAO,GAAA,EACI,UAAA;AAAA,cAAA,gBAAAR;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACT,UAAAjE,IACGF,GAAqB,EAAE,OAAAE,GAAO,gBAAAC,GAAgB,gBAAAC,EAAA,CAAgB,IAC9D,gBAAA+D,EAAC,QAAA,EAAK,WAAU,iBAAiB,UAAAzD,EAAA,CAAY;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGpDR,IACC,gBAAAiE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWM;AAAA,oBACT;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,kBAAA;AAAA,kBAEF,SAAS,CAACG,MAAM;AACd,oBAAAA,EAAE,gBAAA,GACFhB,GAAA;AAAA,kBACF;AAAA,kBAEA,4BAACiB,IAAA,CAAA,CAAC;AAAA,gBAAA;AAAA,cAAA,IAGJ,gBAAAV,EAACW,IAAA,EAAY,WAAU,qBAAA,CAAoB;AAAA,YAAA,EAAA,CAE/C;AAAA,UAAA;AAAA,QAAA,GAGN;AAAA,QACA,gBAAAX;AAAA,UAACY;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAM;AAAA,YAEN,UAAA,gBAAAX,EAACY,IAAA,EAAQ,cAAc,IACrB,UAAA;AAAA,cAAA,gBAAAb;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBACC,aAAarE;AAAA,kBACb,OAAOkB;AAAA,kBACP,eAAe2B;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEhB,OAAOxC,KAAuB,aAC3BA,EAAmB+C,CAA2B,IAC9C/C;AAAA,cACJ,gBAAAkD,EAACe,IAAA,EACC,UAAA,gBAAAd,EAACe,IAAA,EAAa,WAAWV,EAAG,CAACtC,EAAQ,UAAU,iBAAiB,GAC7D,UAAA;AAAA,gBAAAF,KAAW,gBAAAkC,EAACO,KAAY,WAAS,GAAA,CAAA;AAAA,gBACjC,CAACzC,KAAW,EAAQH,4BAEhB,UAAAd,IACC,gBAAAoD,EAACgB,GAAA,EAAa,WAAU,8CACtB,UAAA;AAAA,kBAAA,gBAAAjB,EAAC,UAAM,UAAApD,EAAA,CAAW;AAAA,kBACjB,OAAOC,KAAgB,aACpBA,EAAYgD,CAA2B,IACvChD;AAAA,gBAAA,EAAA,CACN,IAEA,gBAAAmD,EAACiB,GAAA,EAAc,UAAArE,EAAA,CAAW,GAE9B;AAAA,gBAED,CAACkB,KACA,gBAAAmC,EAAAO,GAAA,EACG,UAAA;AAAA,kBAAAzD,KACC,gBAAAiD;AAAA,oBAACkB;AAAA,oBAAA;AAAA,sBAEC,SAAO;AAAA,sBACP,WAAU;AAAA,sBAET,UAAA,OAAOnE,KAAmB,aACvBA,EAAe8C,CAA2B,IAC1C9C;AAAA,oBAAA;AAAA,oBANA;AAAA,kBAAA;AAAA,kBASR,gBAAAiD;AAAA,oBAACmB;AAAA,oBAAA;AAAA,sBACC,YAAAxD;AAAA,sBACA,OAAA5B;AAAA,sBACA,SAAAiC;AAAA,sBACA,gBAAAuB;AAAA,sBACA,SAAA7B;AAAA,sBACA,qBAAAR;AAAA,sBACA,oBAAAC;AAAA,sBACA,kBAAAC;AAAA,sBACA,wBAAAC;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF,EAAA,CACF;AAAA,cAAA,EAAA,CAEJ,EAAA,CACF;AAAA,cAGEL,KACA,gBAAAgD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,aAAU;AAAA,kBACV,WAAU;AAAA,kBAET,UAAA,OAAOhD,KAAqB,aACzBA,EAAiB6C,CAA2B,IAC5C7C;AAAA,gBAAA;AAAA,cAAA;AAAA,YACN,EAAA,CAEJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.1.99-beta.197",
3
+ "version": "0.1.99-beta.198",
4
4
  "description": "UI component library for OnePlatform",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -106,9 +106,9 @@
106
106
  "recharts": "^3.2.0",
107
107
  "sonner": "^2.0.7",
108
108
  "vaul": "^1.1.2",
109
- "@oneplatformdev/tokens": "^0.1.99-beta.197",
110
- "@oneplatformdev/hooks": "^0.1.99-beta.197",
111
- "@oneplatformdev/utils": "^0.1.99-beta.197"
109
+ "@oneplatformdev/tokens": "^0.1.99-beta.198",
110
+ "@oneplatformdev/utils": "^0.1.99-beta.198",
111
+ "@oneplatformdev/hooks": "^0.1.99-beta.198"
112
112
  },
113
113
  "scripts": {
114
114
  "chromatic": "chromatic"