@oneplatformdev/ui 0.1.99-beta.206 → 0.1.99-beta.207
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/CHANGELOG.md +16 -0
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +53 -51
- package/Combobox/Combobox.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
## 0.1.99-beta.207 (2026-02-18)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **FormCombobox:** add generic `Node` type to enhance type flexibility ([e53f094](https://github.com/oneplatformdev/core-web/commit/e53f094))
|
|
6
|
+
|
|
7
|
+
### 🧱 Updated Dependencies
|
|
8
|
+
|
|
9
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.207
|
|
10
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.207
|
|
11
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.207
|
|
12
|
+
|
|
13
|
+
### ❤️ Thank You
|
|
14
|
+
|
|
15
|
+
- Bohdan Radchenko
|
|
16
|
+
|
|
1
17
|
## 0.1.99-beta.206 (2026-02-18)
|
|
2
18
|
|
|
3
19
|
### 🚀 Features
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAGL,aAAa,EACd,MAAM,kBAAkB,CAAC;AAqB1B,eAAO,MAAM,QAAQ,GAAI,IAAI,SAAS,MAAM,EAAI,OAAO,aAAa,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAGL,aAAa,EACd,MAAM,kBAAkB,CAAC;AAqB1B,eAAO,MAAM,QAAQ,GAAI,IAAI,SAAS,MAAM,EAAI,OAAO,aAAa,CAAC,IAAI,CAAC,4CA+SzE,CAAA"}
|
package/Combobox/Combobox.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsx as t, jsxs as p, Fragment as q } from "react/jsx-runtime";
|
|
2
|
+
import { useState as f, useCallback as u, useEffect as de, useMemo as z, useLayoutEffect as pe } from "react";
|
|
3
3
|
import { LoadingMask as K } from "../LoadingMask/LoadingMask.js";
|
|
4
4
|
import "../LoadingMask/RenderLoadingMask.js";
|
|
5
5
|
import { Popover as fe, PopoverTrigger as me, PopoverContent as ue } from "../Popover/Popover.js";
|
|
@@ -13,7 +13,7 @@ import { ComboboxOptions as Oe } from "./ComboboxOptions.js";
|
|
|
13
13
|
const Se = (k) => {
|
|
14
14
|
const { value: n, flattenOptions: D = [], selectedOption: M } = k;
|
|
15
15
|
if (!n) return "No value for render label";
|
|
16
|
-
const C = [D.find((
|
|
16
|
+
const C = [D.find((h) => String(h.value).toLowerCase() === String(n).toLowerCase()), M].filter(Boolean).map((h) => h.label).find(Boolean);
|
|
17
17
|
return C || n;
|
|
18
18
|
}, Re = (k) => {
|
|
19
19
|
const {
|
|
@@ -22,7 +22,7 @@ const Se = (k) => {
|
|
|
22
22
|
placeholder: M,
|
|
23
23
|
disabled: H,
|
|
24
24
|
searchLabel: C = "Type to search...",
|
|
25
|
-
fetchOptions:
|
|
25
|
+
fetchOptions: h,
|
|
26
26
|
options: A,
|
|
27
27
|
emptyLabel: J = "No options",
|
|
28
28
|
emptyAction: w,
|
|
@@ -35,67 +35,67 @@ const Se = (k) => {
|
|
|
35
35
|
defaultNodeMatched: Z,
|
|
36
36
|
defaultNodeMuted: $,
|
|
37
37
|
defaultNodeInteractive: ee,
|
|
38
|
-
renderTrigger:
|
|
38
|
+
renderTrigger: i,
|
|
39
39
|
renderList: j
|
|
40
|
-
} = k, [S, U] =
|
|
41
|
-
const
|
|
42
|
-
const
|
|
40
|
+
} = k, [S, U] = f(!1), [s, B] = f(!1), [l, R] = f(""), [g, G] = f(), [o, m] = f(!1), [r, te] = f([]), [ne, oe] = f([]), b = u((e) => {
|
|
41
|
+
const c = (W) => {
|
|
42
|
+
const d = [], _ = (I) => {
|
|
43
43
|
if (I)
|
|
44
44
|
for (const v of I)
|
|
45
|
-
|
|
45
|
+
d.push(v), v.items && v.items.length && _(v.items);
|
|
46
46
|
};
|
|
47
47
|
_(W), oe((I) => {
|
|
48
|
-
if (!
|
|
48
|
+
if (!d.find((P) => !!n && String(P.value) === String(n))) {
|
|
49
49
|
const P = g || I.find((ce) => !!n && String(ce.value) === String(n));
|
|
50
|
-
if (P) return [P, ...
|
|
50
|
+
if (P) return [P, ...d];
|
|
51
51
|
}
|
|
52
|
-
return
|
|
52
|
+
return d;
|
|
53
53
|
});
|
|
54
54
|
};
|
|
55
55
|
te((W) => {
|
|
56
|
-
const
|
|
57
|
-
return
|
|
56
|
+
const d = typeof e == "function" ? e(W) : e;
|
|
57
|
+
return c(d), d;
|
|
58
58
|
});
|
|
59
59
|
}, [g, n]);
|
|
60
60
|
de(() => {
|
|
61
61
|
A?.length && b(A);
|
|
62
62
|
}, [A]);
|
|
63
63
|
const re = async () => {
|
|
64
|
-
|
|
65
|
-
}, V =
|
|
66
|
-
|
|
64
|
+
s || (V(), R(""));
|
|
65
|
+
}, V = u(async (e) => {
|
|
66
|
+
m(!0);
|
|
67
67
|
try {
|
|
68
|
-
const
|
|
69
|
-
b(
|
|
70
|
-
} catch (
|
|
71
|
-
console.error("Unexpected error while get option:",
|
|
68
|
+
const c = await h(e);
|
|
69
|
+
b(c);
|
|
70
|
+
} catch (c) {
|
|
71
|
+
console.error("Unexpected error while get option:", c);
|
|
72
72
|
} finally {
|
|
73
|
-
|
|
73
|
+
m(!1);
|
|
74
74
|
}
|
|
75
75
|
}, [b]), ae = Ce(V, 1e3, {
|
|
76
76
|
leading: !1,
|
|
77
77
|
trailing: !0
|
|
78
|
-
}), ie =
|
|
79
|
-
|
|
80
|
-
}, []), L =
|
|
81
|
-
D(e.value), G(e),
|
|
82
|
-
}, []), se =
|
|
83
|
-
L({ value: "", label: "" }), G(void 0),
|
|
84
|
-
}, []), X = z(() => !!
|
|
78
|
+
}), ie = u((e) => {
|
|
79
|
+
m(!0), R(e), ae(e);
|
|
80
|
+
}, []), L = u((e) => {
|
|
81
|
+
D(e.value), G(e), m(!1);
|
|
82
|
+
}, []), se = u(() => {
|
|
83
|
+
L({ value: "", label: "" }), G(void 0), m(!1);
|
|
84
|
+
}, []), X = z(() => !!l && !r.length && !o, [o, r.length, l]), y = z(() => !r.length && !o, [o, r.length, l]), a = z(() => ({
|
|
85
85
|
options: r,
|
|
86
86
|
setOptions: b,
|
|
87
87
|
selectedOption: g,
|
|
88
88
|
setSelectedOption: G,
|
|
89
|
-
search:
|
|
89
|
+
search: l || "",
|
|
90
90
|
setSearch: R,
|
|
91
91
|
onChangeOption: L,
|
|
92
|
-
open:
|
|
92
|
+
open: s,
|
|
93
93
|
setOpen: B,
|
|
94
94
|
loading: o,
|
|
95
|
-
setLoading:
|
|
95
|
+
setLoading: m,
|
|
96
96
|
isEmptyList: y,
|
|
97
97
|
isSearchedEmptyList: X
|
|
98
|
-
}), [o,
|
|
98
|
+
}), [o, s, r, l, g, y, X, b, L]), le = u(async () => {
|
|
99
99
|
if (T) {
|
|
100
100
|
U(!0);
|
|
101
101
|
try {
|
|
@@ -107,33 +107,35 @@ const Se = (k) => {
|
|
|
107
107
|
}, [T, a]);
|
|
108
108
|
return pe(() => {
|
|
109
109
|
le();
|
|
110
|
-
}, []), /* @__PURE__ */ t("div", { className: "w-full", children: /* @__PURE__ */
|
|
110
|
+
}, []), /* @__PURE__ */ t("div", { className: "w-full", children: /* @__PURE__ */ p(
|
|
111
111
|
fe,
|
|
112
112
|
{
|
|
113
|
-
open:
|
|
113
|
+
open: s,
|
|
114
114
|
onOpenChange: (e) => {
|
|
115
115
|
B(e), e && re();
|
|
116
116
|
},
|
|
117
117
|
children: [
|
|
118
|
-
/* @__PURE__ */ t(me, { asChild: !0, className: "border-input", children: /* @__PURE__ */
|
|
118
|
+
/* @__PURE__ */ t(me, { asChild: !0, className: "border-input", children: /* @__PURE__ */ p(
|
|
119
119
|
he,
|
|
120
120
|
{
|
|
121
|
+
variant: i ? "none" : "contained",
|
|
121
122
|
color: "secondary",
|
|
122
123
|
role: "combobox",
|
|
123
|
-
"aria-expanded":
|
|
124
|
+
"aria-expanded": s,
|
|
124
125
|
className: x(
|
|
125
|
-
"relative w-full justify-between
|
|
126
|
+
"relative w-full justify-between bg-transparent",
|
|
127
|
+
!i && "font-normal text-sm",
|
|
126
128
|
"border border-border",
|
|
127
|
-
|
|
129
|
+
s && "border-2 outline-hidden ring-1 ring-ring",
|
|
128
130
|
"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring",
|
|
129
|
-
|
|
130
|
-
|
|
131
|
+
i && "p-0",
|
|
132
|
+
i && s && "p-0 border-1 ring-0 ring-transparent"
|
|
131
133
|
),
|
|
132
134
|
disabled: H || S,
|
|
133
135
|
children: [
|
|
134
136
|
S && /* @__PURE__ */ t(K, { fullWidth: !0 }),
|
|
135
|
-
!S &&
|
|
136
|
-
!S && !
|
|
137
|
+
!S && i && i(a),
|
|
138
|
+
!S && !i && /* @__PURE__ */ p(q, { children: [
|
|
137
139
|
/* @__PURE__ */ t(
|
|
138
140
|
"span",
|
|
139
141
|
{
|
|
@@ -168,17 +170,17 @@ const Se = (k) => {
|
|
|
168
170
|
"-translate-y-3"
|
|
169
171
|
),
|
|
170
172
|
align: "start",
|
|
171
|
-
children: /* @__PURE__ */
|
|
173
|
+
children: /* @__PURE__ */ p(ge, { shouldFilter: !1, children: [
|
|
172
174
|
/* @__PURE__ */ t(
|
|
173
175
|
be,
|
|
174
176
|
{
|
|
175
177
|
placeholder: C,
|
|
176
|
-
value:
|
|
178
|
+
value: l,
|
|
177
179
|
onValueChange: ie
|
|
178
180
|
}
|
|
179
181
|
),
|
|
180
182
|
typeof E == "function" ? E(a) : E,
|
|
181
|
-
/* @__PURE__ */ t(ye, { children: /* @__PURE__ */
|
|
183
|
+
/* @__PURE__ */ t(ye, { children: /* @__PURE__ */ p(
|
|
182
184
|
ve,
|
|
183
185
|
{
|
|
184
186
|
className: x(
|
|
@@ -187,11 +189,11 @@ const Se = (k) => {
|
|
|
187
189
|
),
|
|
188
190
|
children: [
|
|
189
191
|
o && /* @__PURE__ */ t(K, { fullWidth: !0 }),
|
|
190
|
-
!o && y && /* @__PURE__ */ t(q, { children: w ? /* @__PURE__ */
|
|
192
|
+
!o && y && /* @__PURE__ */ t(q, { children: w ? /* @__PURE__ */ p(Q, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
191
193
|
/* @__PURE__ */ t("span", { children: J }),
|
|
192
194
|
typeof w == "function" ? w(a) : w
|
|
193
195
|
] }) : /* @__PURE__ */ t(Q, { children: J }) }),
|
|
194
|
-
!o && !y && /* @__PURE__ */
|
|
196
|
+
!o && !y && /* @__PURE__ */ p(q, { children: [
|
|
195
197
|
N && /* @__PURE__ */ t(
|
|
196
198
|
xe,
|
|
197
199
|
{
|
|
@@ -205,7 +207,7 @@ const Se = (k) => {
|
|
|
205
207
|
!j && /* @__PURE__ */ t(
|
|
206
208
|
Oe,
|
|
207
209
|
{
|
|
208
|
-
searchTerm:
|
|
210
|
+
searchTerm: l,
|
|
209
211
|
value: n,
|
|
210
212
|
options: r,
|
|
211
213
|
onChangeOption: L,
|
|
@@ -225,9 +227,9 @@ const Se = (k) => {
|
|
|
225
227
|
{
|
|
226
228
|
"data-slot": "command-footer-wrapper",
|
|
227
229
|
...(() => {
|
|
228
|
-
const { bordered: e = !0, ...
|
|
230
|
+
const { bordered: e = !0, ...c } = F || {};
|
|
229
231
|
return {
|
|
230
|
-
...
|
|
232
|
+
...c,
|
|
231
233
|
"data-slot-bordered": JSON.stringify(e)
|
|
232
234
|
};
|
|
233
235
|
})(),
|
package/Combobox/Combobox.js.map
CHANGED
|
@@ -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 listFooterActionProps,\n onMount,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n renderTrigger,\n renderList,\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 onChangeOption,\n open,\n setOpen,\n loading,\n setLoading,\n isEmptyList,\n isSearchedEmptyList,\n };\n }, [ loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions, onChangeOption ]);\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 renderTrigger && 'p-0',\n renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading && <LoadingMask fullWidth/>}\n {!initialLoading && renderTrigger && renderTrigger(comboboxCallbackStateParams)}\n {!initialLoading && !renderTrigger && (\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={cn(\n \"w-(--radix-popper-anchor-width) max-w-none p-2\",\n '-translate-y-3',\n )}\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\n className={cn(\n !options.length && 'p-0 shadow-none',\n 'px-0 py-2',\n )}\n >\n {loading && <LoadingMask fullWidth/>}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(comboboxCallbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(comboboxCallbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n {renderList && renderList(comboboxCallbackStateParams)}\n {!renderList && (\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 )}\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {!loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n {...((() => {\n const { bordered = true, ...rest } = listFooterActionProps || {};\n return {\n ...rest,\n 'data-slot-bordered': JSON.stringify(bordered)\n }\n })())}\n className={cn(\n \"flex w-full min-h-10 items-center gap-2 px-0\",\n (listFooterActionProps?.bordered ?? true) && 'border-t px-0 pt-2 min-h-12',\n listFooterActionProps?.className,\n )}\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","listFooterActionProps","onMount","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderTrigger","renderList","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","X","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions","bordered","rest"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useState,\n} from 'react';\nimport { LoadingMask } from '../LoadingMask';\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\nimport { Button } from '../Button';\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from '../Command';\nimport { cn } from '@oneplatformdev/utils';\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { ChevronDown, X } from 'lucide-react';\nimport {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions';\n\n// TODO: refactor next component | nlt code\nconst getSelectRenderLabel = <Data extends object>(params: {\n value: ComboboxProps<Data>['value'];\n flattenOptions: ComboboxOption<Data>[];\n selectedOption?: ComboboxOption<Data>;\n}): string => {\n const { value, flattenOptions = [], selectedOption } = params;\n if (!value) return 'No value for render label';\n const flattenedOption = flattenOptions.find(o => String(o.value).toLowerCase() === String(value).toLowerCase());\n const label = [ flattenedOption, selectedOption ]\n .filter(Boolean)\n .map(o => o!.label)\n .find(Boolean);\n if (!label) return value;\n return label;\n}\n\n// TODO: refactor next component | nlt code\nexport const Combobox = <Data extends object, >(props: ComboboxProps<Data>) => {\n const {\n value,\n onChange,\n placeholder,\n disabled,\n searchLabel = 'Type to search...',\n fetchOptions,\n options: itemOptions,\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n listFooterActionProps,\n onMount,\n defaultNodeDisabled,\n defaultNodeMatched,\n defaultNodeMuted,\n defaultNodeInteractive,\n renderTrigger,\n renderList,\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 onChangeOption,\n open,\n setOpen,\n loading,\n setLoading,\n isEmptyList,\n isSearchedEmptyList,\n };\n }, [ loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions, onChangeOption ]);\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 variant={renderTrigger ? 'none' : 'contained'}\n color='secondary'\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between bg-transparent',\n !renderTrigger && 'font-normal text-sm',\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 renderTrigger && 'p-0',\n renderTrigger && open && 'p-0 border-1 ring-0 ring-transparent',\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading && <LoadingMask fullWidth/>}\n {!initialLoading && renderTrigger && renderTrigger(comboboxCallbackStateParams)}\n {!initialLoading && !renderTrigger && (\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={cn(\n \"w-(--radix-popper-anchor-width) max-w-none p-2\",\n '-translate-y-3',\n )}\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\n className={cn(\n !options.length && 'p-0 shadow-none',\n 'px-0 py-2',\n )}\n >\n {loading && <LoadingMask fullWidth/>}\n {!loading && isEmptyList && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(comboboxCallbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n {!loading && !isEmptyList && (\n <>\n {listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(comboboxCallbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n {renderList && renderList(comboboxCallbackStateParams)}\n {!renderList && (\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 )}\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {!loading && listFooterAction && !isEmptyList && (\n <div\n data-slot=\"command-footer-wrapper\"\n {...((() => {\n const { bordered = true, ...rest } = listFooterActionProps || {};\n return {\n ...rest,\n 'data-slot-bordered': JSON.stringify(bordered)\n }\n })())}\n className={cn(\n \"flex w-full min-h-10 items-center gap-2 px-0\",\n (listFooterActionProps?.bordered ?? true) && 'border-t px-0 pt-2 min-h-12',\n listFooterActionProps?.className,\n )}\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","listFooterActionProps","onMount","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","renderTrigger","renderList","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","X","ChevronDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions","bordered","rest"],"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.207",
|
|
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/utils": "^0.1.99-beta.
|
|
111
|
-
"@oneplatformdev/hooks": "^0.1.99-beta.
|
|
109
|
+
"@oneplatformdev/tokens": "^0.1.99-beta.207",
|
|
110
|
+
"@oneplatformdev/utils": "^0.1.99-beta.207",
|
|
111
|
+
"@oneplatformdev/hooks": "^0.1.99-beta.207"
|
|
112
112
|
},
|
|
113
113
|
"scripts": {
|
|
114
114
|
"chromatic": "chromatic"
|