@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.
- package/Combobox/Combobox.js +81 -81
- package/Combobox/Combobox.js.map +1 -1
- package/package.json +4 -4
package/Combobox/Combobox.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { jsx as e, jsxs as p, Fragment as
|
|
2
|
-
import { useState as s, useCallback as f, useEffect as se, useMemo as
|
|
3
|
-
import { cn as
|
|
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 = (
|
|
12
|
-
const { value: n, flattenOptions:
|
|
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
|
|
15
|
-
return
|
|
16
|
-
},
|
|
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:
|
|
20
|
-
placeholder:
|
|
21
|
-
disabled:
|
|
22
|
-
searchLabel:
|
|
19
|
+
onChange: L,
|
|
20
|
+
placeholder: I,
|
|
21
|
+
disabled: R,
|
|
22
|
+
searchLabel: v = "Type to search...",
|
|
23
23
|
fetchOptions: m,
|
|
24
|
-
options:
|
|
25
|
-
emptyLabel:
|
|
26
|
-
emptyAction:
|
|
27
|
-
commandInputAction:
|
|
28
|
-
listHeadAction:
|
|
29
|
-
listFooterAction:
|
|
30
|
-
onMount:
|
|
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
|
-
} =
|
|
36
|
-
const
|
|
37
|
-
const i = [], V = (
|
|
38
|
-
if (
|
|
39
|
-
for (const
|
|
40
|
-
i.push(
|
|
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(
|
|
43
|
-
if (!i.find((
|
|
44
|
-
const
|
|
45
|
-
if (
|
|
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((
|
|
51
|
-
const i = typeof t == "function" ? t(
|
|
52
|
-
return
|
|
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
|
-
|
|
57
|
-
}, [
|
|
56
|
+
k?.length && h(k);
|
|
57
|
+
}, [k]);
|
|
58
58
|
const te = async () => {
|
|
59
|
-
l || (
|
|
60
|
-
},
|
|
59
|
+
l || (z(), E(""));
|
|
60
|
+
}, z = f(async (t) => {
|
|
61
61
|
c(!0);
|
|
62
62
|
try {
|
|
63
|
-
const
|
|
64
|
-
h(
|
|
65
|
-
} catch (
|
|
66
|
-
console.error("Unexpected error while get option:",
|
|
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(
|
|
70
|
+
}, [h]), ne = ce(z, 1e3, {
|
|
71
71
|
leading: !1,
|
|
72
72
|
trailing: !0
|
|
73
73
|
}), oe = f((t) => {
|
|
74
|
-
c(!0),
|
|
75
|
-
}, []),
|
|
76
|
-
|
|
77
|
-
}, []),
|
|
78
|
-
|
|
79
|
-
}, []),
|
|
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:
|
|
83
|
+
setSelectedOption: j,
|
|
84
84
|
search: a || "",
|
|
85
|
-
setSearch:
|
|
85
|
+
setSearch: E,
|
|
86
86
|
open: l,
|
|
87
|
-
setOpen:
|
|
87
|
+
setOpen: P,
|
|
88
88
|
loading: o,
|
|
89
89
|
setLoading: c,
|
|
90
|
-
isEmptyList:
|
|
91
|
-
isSearchedEmptyList:
|
|
92
|
-
}), [o, l, r, a, u,
|
|
93
|
-
if (
|
|
94
|
-
|
|
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
|
|
96
|
+
await M(d);
|
|
97
97
|
} finally {
|
|
98
|
-
|
|
98
|
+
q(!1);
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
}, [
|
|
101
|
+
}, [M, d]);
|
|
102
102
|
return le(() => {
|
|
103
|
-
|
|
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
|
-
|
|
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:
|
|
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:
|
|
125
|
-
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:
|
|
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:
|
|
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(),
|
|
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:
|
|
160
|
+
placeholder: v,
|
|
161
161
|
value: a,
|
|
162
162
|
onValueChange: oe
|
|
163
163
|
}
|
|
164
164
|
),
|
|
165
|
-
typeof
|
|
166
|
-
/* @__PURE__ */ e(ve, { children: /* @__PURE__ */ p(Ce, { className:
|
|
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 &&
|
|
169
|
-
/* @__PURE__ */ e("span", { children:
|
|
170
|
-
typeof
|
|
171
|
-
] }) : /* @__PURE__ */ e(_, { children:
|
|
172
|
-
!o && /* @__PURE__ */ p(
|
|
173
|
-
|
|
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
|
|
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:
|
|
189
|
-
setOpen:
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
214
|
+
je as Combobox
|
|
215
215
|
};
|
|
216
216
|
//# sourceMappingURL=Combobox.js.map
|
package/Combobox/Combobox.js.map
CHANGED
|
@@ -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.
|
|
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.
|
|
110
|
-
"@oneplatformdev/
|
|
111
|
-
"@oneplatformdev/
|
|
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"
|