@oneplatformdev/ui 0.1.99-beta.46 → 0.1.99-beta.48
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 +2 -1
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +122 -119
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js +55 -39
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.d.ts +2 -0
- package/Combobox/Combobox.types.d.ts.map +1 -1
- package/Dialog/Dialog.types.d.ts +4 -0
- package/Dialog/Dialog.types.d.ts.map +1 -0
- package/Dialog/Dialog.types.js +2 -0
- package/Dialog/Dialog.types.js.map +1 -0
- package/Dialog/index.d.ts +1 -0
- package/Dialog/index.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
## 0.1.99-beta.48 (2026-01-14)
|
|
2
|
+
|
|
3
|
+
### 🧱 Updated Dependencies
|
|
4
|
+
|
|
5
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.48
|
|
6
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.48
|
|
7
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.48
|
|
8
|
+
|
|
9
|
+
## 0.1.99-beta.47 (2026-01-14)
|
|
10
|
+
|
|
11
|
+
### 🧱 Updated Dependencies
|
|
12
|
+
|
|
13
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.47
|
|
14
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.47
|
|
15
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.47
|
|
16
|
+
|
|
1
17
|
## 0.1.99-beta.46 (2026-01-14)
|
|
2
18
|
|
|
3
19
|
### 🚀 Features
|
package/Combobox/Combobox.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { ComboboxProps } from './Combobox.types';
|
|
2
|
-
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
|
|
3
4
|
//# sourceMappingURL=Combobox.d.ts.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAGL,aAAa,EACd,MAAM,kBAAkB,CAAC;AAG1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B,eAAO,MAAM,QAAQ,sFAyQpB,CAAC"}
|
package/Combobox/Combobox.js
CHANGED
|
@@ -1,193 +1,196 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { forwardRef as
|
|
3
|
-
import { LoadingMask as
|
|
1
|
+
import { jsx as e, jsxs as p, Fragment as A } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef as re, useState as s, useCallback as m, useEffect as ae, useMemo as F, useLayoutEffect as ie } from "react";
|
|
3
|
+
import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
|
|
4
4
|
import "../LoadingMask/RenderLoadingMask.js";
|
|
5
|
-
import { Popover as
|
|
6
|
-
import { Button as
|
|
5
|
+
import { Popover as se, PopoverTrigger as le, PopoverContent as ce } from "../Popover/Popover.js";
|
|
6
|
+
import { Button as de } from "../Button/Button.js";
|
|
7
7
|
import "../Button/buttonVariants.js";
|
|
8
|
-
import { Command as
|
|
9
|
-
import { cn as
|
|
10
|
-
import { useDebounceCallback as
|
|
11
|
-
import { X as
|
|
12
|
-
import { ComboboxOptions as
|
|
13
|
-
const
|
|
14
|
-
const { value:
|
|
15
|
-
if (!
|
|
16
|
-
const v = [n.find((
|
|
17
|
-
return v ||
|
|
18
|
-
},
|
|
19
|
-
(
|
|
8
|
+
import { Command as pe, CommandInput as me, CommandList as fe, CommandGroup as ue, CommandEmpty as _, CommandItem as he } from "../Command/Command.js";
|
|
9
|
+
import { cn as M } from "@oneplatformdev/utils";
|
|
10
|
+
import { useDebounceCallback as ge } from "@oneplatformdev/hooks";
|
|
11
|
+
import { X as be, ChevronsUpDown as ye } from "lucide-react";
|
|
12
|
+
import { ComboboxOptions as ve } from "./ComboboxOptions.js";
|
|
13
|
+
const Ce = (N) => {
|
|
14
|
+
const { value: f, flattenOptions: n = [], selectedOption: L } = N;
|
|
15
|
+
if (!f) return "No value for render label";
|
|
16
|
+
const v = [n.find((u) => String(u.value).toLowerCase() === String(f).toLowerCase()), L].filter(Boolean).map((u) => u.label).find(Boolean);
|
|
17
|
+
return v || f;
|
|
18
|
+
}, je = re(
|
|
19
|
+
(N, f) => {
|
|
20
20
|
const {
|
|
21
21
|
value: n,
|
|
22
22
|
onChange: L,
|
|
23
|
-
placeholder:
|
|
23
|
+
placeholder: R,
|
|
24
24
|
disabled: v,
|
|
25
|
-
searchLabel:
|
|
26
|
-
fetchOptions:
|
|
27
|
-
options:
|
|
28
|
-
emptyLabel:
|
|
25
|
+
searchLabel: u = "Type to search...",
|
|
26
|
+
fetchOptions: J,
|
|
27
|
+
options: I,
|
|
28
|
+
emptyLabel: T = "No options",
|
|
29
29
|
emptyAction: C,
|
|
30
|
-
commandInputAction:
|
|
30
|
+
commandInputAction: B,
|
|
31
31
|
listHeadAction: w,
|
|
32
|
+
listFooterAction: x,
|
|
32
33
|
onMount: k
|
|
33
|
-
} =
|
|
34
|
-
const b = (
|
|
35
|
-
const i = [],
|
|
36
|
-
if (
|
|
37
|
-
for (const y of
|
|
38
|
-
i.push(y), y.items && y.items.length &&
|
|
34
|
+
} = N, [G, U] = s(!1), [l, P] = s(!1), [a, D] = s(""), [h, E] = s(), [r, c] = s(!1), [o, K] = s([]), [Q, Y] = s([]), g = m((t) => {
|
|
35
|
+
const b = (j) => {
|
|
36
|
+
const i = [], V = (O) => {
|
|
37
|
+
if (O)
|
|
38
|
+
for (const y of O)
|
|
39
|
+
i.push(y), y.items && y.items.length && V(y.items);
|
|
39
40
|
};
|
|
40
|
-
|
|
41
|
-
if (!i.find((
|
|
42
|
-
const
|
|
43
|
-
if (
|
|
41
|
+
V(j), Y((O) => {
|
|
42
|
+
if (!i.find((S) => !!n && String(S.value) === String(n))) {
|
|
43
|
+
const S = h || O.find((oe) => !!n && String(oe.value) === String(n));
|
|
44
|
+
if (S) return [S, ...i];
|
|
44
45
|
}
|
|
45
46
|
return i;
|
|
46
47
|
});
|
|
47
48
|
};
|
|
48
|
-
|
|
49
|
-
const i = typeof t == "function" ? t(
|
|
49
|
+
K((j) => {
|
|
50
|
+
const i = typeof t == "function" ? t(j) : t;
|
|
50
51
|
return b(i), i;
|
|
51
52
|
});
|
|
52
|
-
}, [
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
}, [
|
|
56
|
-
const
|
|
57
|
-
l || (
|
|
58
|
-
},
|
|
53
|
+
}, [h, n]);
|
|
54
|
+
ae(() => {
|
|
55
|
+
I?.length && g(I);
|
|
56
|
+
}, [I]);
|
|
57
|
+
const Z = async () => {
|
|
58
|
+
l || (W(), D(""));
|
|
59
|
+
}, W = m(async (t) => {
|
|
59
60
|
c(!0);
|
|
60
61
|
try {
|
|
61
|
-
const b = await
|
|
62
|
-
|
|
62
|
+
const b = await J(t);
|
|
63
|
+
g(b);
|
|
63
64
|
} catch (b) {
|
|
64
65
|
console.error("Unexpected error while get option:", b);
|
|
65
66
|
} finally {
|
|
66
67
|
c(!1);
|
|
67
68
|
}
|
|
68
|
-
}, [
|
|
69
|
+
}, [g]), $ = ge(W, 1e3, {
|
|
69
70
|
leading: !1,
|
|
70
71
|
trailing: !0
|
|
71
|
-
}),
|
|
72
|
-
c(!0),
|
|
73
|
-
}, []),
|
|
74
|
-
L(t.value),
|
|
75
|
-
}, []),
|
|
76
|
-
|
|
77
|
-
}, []),
|
|
78
|
-
options:
|
|
79
|
-
setOptions:
|
|
80
|
-
selectedOption:
|
|
81
|
-
setSelectedOption:
|
|
72
|
+
}), ee = m((t) => {
|
|
73
|
+
c(!0), D(t), $(t);
|
|
74
|
+
}, []), q = m((t) => {
|
|
75
|
+
L(t.value), E(t), c(!1);
|
|
76
|
+
}, []), te = m(() => {
|
|
77
|
+
q({ value: "", label: "" }), E(void 0), c(!1);
|
|
78
|
+
}, []), z = F(() => !!a && !o.length && !r, [r, o.length, a]), H = F(() => !o.length && !r, [r, o.length, a]), d = F(() => ({
|
|
79
|
+
options: o,
|
|
80
|
+
setOptions: g,
|
|
81
|
+
selectedOption: h,
|
|
82
|
+
setSelectedOption: E,
|
|
82
83
|
search: a || "",
|
|
83
|
-
setSearch:
|
|
84
|
+
setSearch: D,
|
|
84
85
|
open: l,
|
|
85
|
-
setOpen:
|
|
86
|
-
loading:
|
|
86
|
+
setOpen: P,
|
|
87
|
+
loading: r,
|
|
87
88
|
setLoading: c,
|
|
88
|
-
isEmptyList:
|
|
89
|
-
isSearchedEmptyList:
|
|
90
|
-
}), [
|
|
89
|
+
isEmptyList: H,
|
|
90
|
+
isSearchedEmptyList: z
|
|
91
|
+
}), [r, l, o, a, h, H, z, g]), ne = m(async () => {
|
|
91
92
|
if (k) {
|
|
92
|
-
|
|
93
|
+
U(!0);
|
|
93
94
|
try {
|
|
94
|
-
await k(
|
|
95
|
+
await k(d);
|
|
95
96
|
} finally {
|
|
96
|
-
|
|
97
|
+
U(!1);
|
|
97
98
|
}
|
|
98
99
|
}
|
|
99
|
-
}, [k,
|
|
100
|
-
return
|
|
101
|
-
|
|
102
|
-
}, []), /* @__PURE__ */ e("div", { className: "w-full", ref:
|
|
103
|
-
|
|
100
|
+
}, [k, d]);
|
|
101
|
+
return ie(() => {
|
|
102
|
+
ne();
|
|
103
|
+
}, []), /* @__PURE__ */ e("div", { className: "w-full", ref: f, children: /* @__PURE__ */ p(
|
|
104
|
+
se,
|
|
104
105
|
{
|
|
105
106
|
open: l,
|
|
106
107
|
onOpenChange: (t) => {
|
|
107
|
-
|
|
108
|
+
P(t), t && Z();
|
|
108
109
|
},
|
|
109
110
|
children: [
|
|
110
|
-
/* @__PURE__ */ e(
|
|
111
|
-
|
|
111
|
+
/* @__PURE__ */ e(le, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
|
|
112
|
+
de,
|
|
112
113
|
{
|
|
113
114
|
color: "secondary",
|
|
114
115
|
role: "combobox",
|
|
115
116
|
"aria-expanded": l,
|
|
116
|
-
className:
|
|
117
|
+
className: M(
|
|
117
118
|
"relative w-full justify-between font-normal text-sm bg-transparent",
|
|
118
119
|
"border border-border",
|
|
119
120
|
l && "border-2 outline-hidden ring-1 ring-ring",
|
|
120
121
|
"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
|
|
121
122
|
),
|
|
122
|
-
disabled: v ||
|
|
123
|
-
children:
|
|
124
|
-
/* @__PURE__ */ e("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: n ?
|
|
123
|
+
disabled: v || G,
|
|
124
|
+
children: G ? /* @__PURE__ */ e(X, { fullWidth: !0 }) : /* @__PURE__ */ p(A, { children: [
|
|
125
|
+
/* @__PURE__ */ e("span", { className: "truncate max-w-[calc(100%-1.5rem)] overflow-hidden whitespace-nowrap", children: n ? Ce({ value: n, flattenOptions: Q, selectedOption: h }) : /* @__PURE__ */ e("span", { className: "text-gray-400", children: R }) }),
|
|
125
126
|
n ? /* @__PURE__ */ e(
|
|
126
127
|
"div",
|
|
127
128
|
{
|
|
128
|
-
className:
|
|
129
|
+
className: M(
|
|
129
130
|
"absolute top-0 right-1",
|
|
130
131
|
"flex items-center justify-center",
|
|
131
132
|
"w-9 aspect-square [&_svg]:size-5",
|
|
132
133
|
"opacity-50 cursor-pointer hover:opacity-100"
|
|
133
134
|
),
|
|
134
135
|
onClick: (t) => {
|
|
135
|
-
t.stopPropagation(),
|
|
136
|
+
t.stopPropagation(), te();
|
|
136
137
|
},
|
|
137
|
-
children: /* @__PURE__ */ e(
|
|
138
|
+
children: /* @__PURE__ */ e(be, {})
|
|
138
139
|
}
|
|
139
|
-
) : /* @__PURE__ */ e(
|
|
140
|
+
) : /* @__PURE__ */ e(ye, { className: "opacity-50 w-4 h-4" })
|
|
140
141
|
] })
|
|
141
142
|
}
|
|
142
143
|
) }),
|
|
143
144
|
/* @__PURE__ */ e(
|
|
144
|
-
|
|
145
|
+
ce,
|
|
145
146
|
{
|
|
146
147
|
className: "w-(--radix-popper-anchor-width) max-w-none p-0",
|
|
147
148
|
align: "start",
|
|
148
|
-
children: /* @__PURE__ */
|
|
149
|
+
children: /* @__PURE__ */ p(pe, { shouldFilter: !1, children: [
|
|
149
150
|
/* @__PURE__ */ e(
|
|
150
|
-
|
|
151
|
+
me,
|
|
151
152
|
{
|
|
152
|
-
placeholder:
|
|
153
|
+
placeholder: u,
|
|
153
154
|
value: a,
|
|
154
|
-
onValueChange:
|
|
155
|
+
onValueChange: ee
|
|
155
156
|
}
|
|
156
157
|
),
|
|
157
|
-
typeof
|
|
158
|
-
/* @__PURE__ */ e(
|
|
159
|
-
|
|
158
|
+
typeof B == "function" ? B(d) : B,
|
|
159
|
+
/* @__PURE__ */ e(fe, { children: /* @__PURE__ */ p(ue, { className: M(!o.length && "p-0 shadow-none"), children: [
|
|
160
|
+
r && /* @__PURE__ */ e(X, { fullWidth: !0 }),
|
|
161
|
+
!r && !!a && /* @__PURE__ */ e(A, { children: C ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
162
|
+
/* @__PURE__ */ e("span", { children: T }),
|
|
163
|
+
typeof C == "function" ? C(d) : C
|
|
164
|
+
] }) : /* @__PURE__ */ e(_, { children: T }) }),
|
|
165
|
+
!r && /* @__PURE__ */ p(A, { children: [
|
|
166
|
+
!!o.length && w && /* @__PURE__ */ e(
|
|
167
|
+
he,
|
|
168
|
+
{
|
|
169
|
+
asChild: !0,
|
|
170
|
+
className: "w-full",
|
|
171
|
+
children: typeof w == "function" ? w(d) : w
|
|
172
|
+
},
|
|
173
|
+
"combobox-list-head-action"
|
|
174
|
+
),
|
|
175
|
+
/* @__PURE__ */ e(
|
|
176
|
+
ve,
|
|
177
|
+
{
|
|
178
|
+
value: n,
|
|
179
|
+
options: o,
|
|
180
|
+
onChangeOption: q,
|
|
181
|
+
setOpen: P
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
] })
|
|
185
|
+
] }) }),
|
|
186
|
+
!!o.length && x && /* @__PURE__ */ e(
|
|
187
|
+
"div",
|
|
160
188
|
{
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
!o && !!a && /* @__PURE__ */ e(j, { children: C ? /* @__PURE__ */ d(X, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
165
|
-
/* @__PURE__ */ e("span", { children: A }),
|
|
166
|
-
typeof C == "function" ? C(g) : C
|
|
167
|
-
] }) : /* @__PURE__ */ e(X, { children: A }) }),
|
|
168
|
-
!o && /* @__PURE__ */ d(j, { children: [
|
|
169
|
-
!!r.length && w && /* @__PURE__ */ e(
|
|
170
|
-
ue,
|
|
171
|
-
{
|
|
172
|
-
asChild: !0,
|
|
173
|
-
className: "w-full",
|
|
174
|
-
children: typeof w == "function" ? w(g) : w
|
|
175
|
-
},
|
|
176
|
-
"combobox-list-head-action"
|
|
177
|
-
),
|
|
178
|
-
/* @__PURE__ */ e(
|
|
179
|
-
ye,
|
|
180
|
-
{
|
|
181
|
-
value: n,
|
|
182
|
-
options: r,
|
|
183
|
-
onChangeOption: W,
|
|
184
|
-
setOpen: B
|
|
185
|
-
}
|
|
186
|
-
)
|
|
187
|
-
] })
|
|
188
|
-
]
|
|
189
|
+
"data-slot": "command-footer-wrapper",
|
|
190
|
+
className: "flex min-h-9 items-center gap-2 border-t px-3",
|
|
191
|
+
children: typeof x == "function" ? x(d) : x
|
|
189
192
|
}
|
|
190
|
-
)
|
|
193
|
+
)
|
|
191
194
|
] })
|
|
192
195
|
}
|
|
193
196
|
)
|
|
@@ -197,6 +200,6 @@ const ve = (S) => {
|
|
|
197
200
|
}
|
|
198
201
|
);
|
|
199
202
|
export {
|
|
200
|
-
|
|
203
|
+
je as Combobox
|
|
201
204
|
};
|
|
202
205
|
//# 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 {\n Dispatch,\n forwardRef, 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 { ChevronsUpDown, X } from 'lucide-react';\nimport {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions'; // TODO: refactor next component | nlt code\n\n\nconst getSelectRenderLabel = (params: {\n value: ComboboxProps['value'];\n flattenOptions: ComboboxOption[];\n selectedOption?: ComboboxOption;\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 = forwardRef<HTMLDivElement, ComboboxProps>(\n (props, ref) => {\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 onMount,\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>();\n const [loading, setLoading] = useState(false);\n\n const [options, setOptionsDispatch] = useState<ComboboxOption[]>([]);\n const [flattenOptions, setFlattenOptions] = useState<ComboboxOption[]>([]);\n const setOptions: Dispatch<SetStateAction<ComboboxOption[]>> = useCallback((stater) => {\n const flatten = (next: ComboboxOption[]) => {\n const res: ComboboxOption[] = [];\n const walk = (nodes?: ComboboxOption[]) => {\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[] = 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) => {\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 => {\n return {\n options,\n setOptions,\n selectedOption,\n setSelectedOption,\n search: searchTerm || '',\n setSearch: setSearchTerm,\n open,\n setOpen,\n loading,\n setLoading,\n isEmptyList,\n isSearchedEmptyList,\n };\n }, [loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions]);\n\n const runOnMount = useCallback(async () => {\n if (!onMount) return;\n setInitialLoading(true);\n try {\n await onMount(comboboxCallbackStateParams);\n } finally {\n setInitialLoading(false);\n }\n }, [onMount, comboboxCallbackStateParams]);\n\n useLayoutEffect(() => {\n runOnMount();\n }, []);\n\n return (\n <div className=\"w-full\" ref={ref}>\n <Popover\n open={open}\n onOpenChange={(newOpen) => {\n setOpen(newOpen);\n if (newOpen) handlePopoverOpen();\n }}\n >\n <PopoverTrigger asChild className=\"border-input\">\n <Button\n color='secondary'\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between font-normal text-sm bg-transparent',\n 'border border-border',\n open && 'border-2 outline-hidden ring-1 ring-ring',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring'\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading ? (\n <LoadingMask fullWidth />\n ) : (\n <>\n <span 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 <ChevronsUpDown className=\"opacity-50 w-4 h-4\" />\n )}\n </>\n )}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={searchTerm}\n onValueChange={handleSearchChange}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(comboboxCallbackStateParams)\n : commandInputAction}\n <CommandList>\n <CommandGroup\n className={cn(!options.length && 'p-0 shadow-none')}\n >\n {loading && <LoadingMask fullWidth />}\n {!loading && Boolean(searchTerm) && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(comboboxCallbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n {!loading && (\n <>\n {Boolean(options.length) && listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(comboboxCallbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n <ComboboxOptions\n value={value}\n options={options}\n onChangeOption={onChangeOption}\n setOpen={setOpen}\n />\n </>\n )}\n </CommandGroup>\n </CommandList>\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n );\n }\n);\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","forwardRef","props","ref","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","onMount","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","ChevronsUpDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.js","sources":["../../src/Combobox/Combobox.tsx"],"sourcesContent":["import {\n Dispatch,\n forwardRef, 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 { ChevronsUpDown, SearchIcon, X } from 'lucide-react';\nimport {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\nimport { ComboboxOptions } from './ComboboxOptions';\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport * as React from \"react\"; // TODO: refactor next component | nlt code\n\n\nconst getSelectRenderLabel = (params: {\n value: ComboboxProps['value'];\n flattenOptions: ComboboxOption[];\n selectedOption?: ComboboxOption;\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 = forwardRef<HTMLDivElement, ComboboxProps>(\n (props, ref) => {\n const {\n value,\n onChange,\n placeholder,\n disabled,\n searchLabel = 'Type to search...',\n fetchOptions,\n options: itemOptions,\n emptyLabel = 'No options',\n emptyAction,\n commandInputAction,\n listHeadAction,\n listFooterAction,\n onMount,\n } = props;\n const [initialLoading, setInitialLoading] = useState(false);\n const [open, setOpen] = useState(false);\n const [searchTerm, setSearchTerm] = useState('');\n const [selectedOption, setSelectedOption] = useState<ComboboxOption>();\n const [loading, setLoading] = useState(false);\n\n const [options, setOptionsDispatch] = useState<ComboboxOption[]>([]);\n const [flattenOptions, setFlattenOptions] = useState<ComboboxOption[]>([]);\n const setOptions: Dispatch<SetStateAction<ComboboxOption[]>> = useCallback((stater) => {\n const flatten = (next: ComboboxOption[]) => {\n const res: ComboboxOption[] = [];\n const walk = (nodes?: ComboboxOption[]) => {\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[] = 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) => {\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 => {\n return {\n options,\n setOptions,\n selectedOption,\n setSelectedOption,\n search: searchTerm || '',\n setSearch: setSearchTerm,\n open,\n setOpen,\n loading,\n setLoading,\n isEmptyList,\n isSearchedEmptyList,\n };\n }, [loading, open, options, searchTerm, selectedOption, isEmptyList, isSearchedEmptyList, setOptions]);\n\n const runOnMount = useCallback(async () => {\n if (!onMount) return;\n setInitialLoading(true);\n try {\n await onMount(comboboxCallbackStateParams);\n } finally {\n setInitialLoading(false);\n }\n }, [onMount, comboboxCallbackStateParams]);\n\n useLayoutEffect(() => {\n runOnMount();\n }, []);\n\n return (\n <div className=\"w-full\" ref={ref}>\n <Popover\n open={open}\n onOpenChange={(newOpen) => {\n setOpen(newOpen);\n if (newOpen) handlePopoverOpen();\n }}\n >\n <PopoverTrigger asChild className=\"border-input\">\n <Button\n color='secondary'\n role=\"combobox\"\n aria-expanded={open}\n className={cn(\n 'relative w-full justify-between font-normal text-sm bg-transparent',\n 'border border-border',\n open && 'border-2 outline-hidden ring-1 ring-ring',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring'\n )}\n disabled={disabled || initialLoading}\n >\n {initialLoading ? (\n <LoadingMask fullWidth />\n ) : (\n <>\n <span 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 <ChevronsUpDown className=\"opacity-50 w-4 h-4\" />\n )}\n </>\n )}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n className=\"w-(--radix-popper-anchor-width) max-w-none p-0\"\n align=\"start\"\n >\n <Command shouldFilter={false}>\n <CommandInput\n placeholder={searchLabel}\n value={searchTerm}\n onValueChange={handleSearchChange}\n />\n {typeof commandInputAction === 'function'\n ? commandInputAction(comboboxCallbackStateParams)\n : commandInputAction}\n <CommandList>\n <CommandGroup className={cn(!options.length && 'p-0 shadow-none')}>\n {loading && <LoadingMask fullWidth />}\n {!loading && Boolean(searchTerm) && (\n <>\n {emptyAction ? (\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\n <span>{emptyLabel}</span>\n {typeof emptyAction === 'function'\n ? emptyAction(comboboxCallbackStateParams)\n : emptyAction}\n </CommandEmpty>\n ) : (\n <CommandEmpty>{emptyLabel}</CommandEmpty>\n )}\n </>\n )}\n {!loading && (\n <>\n {Boolean(options.length) && listHeadAction && (\n <CommandItem\n key='combobox-list-head-action'\n asChild\n className='w-full'\n >\n {typeof listHeadAction === 'function'\n ? listHeadAction(comboboxCallbackStateParams)\n : listHeadAction}\n </CommandItem>\n )}\n <ComboboxOptions\n value={value}\n options={options}\n onChangeOption={onChangeOption}\n setOpen={setOpen}\n />\n </>\n )}\n </CommandGroup>\n </CommandList>\n\n {/*LIST FOOTER ACTION*/}\n {Boolean(options.length) && listFooterAction && (\n <div\n data-slot=\"command-footer-wrapper\"\n className=\"flex min-h-9 items-center gap-2 border-t px-3\"\n >\n {typeof listFooterAction === 'function'\n ? listFooterAction(comboboxCallbackStateParams)\n : listFooterAction}\n </div>\n )}\n </Command>\n </PopoverContent>\n </Popover>\n </div>\n );\n }\n);\n"],"names":["getSelectRenderLabel","params","value","flattenOptions","selectedOption","label","o","Combobox","forwardRef","props","ref","onChange","placeholder","disabled","searchLabel","fetchOptions","itemOptions","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","onMount","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","ChevronsUpDown","PopoverContent","Command","CommandInput","CommandList","CommandGroup","CommandEmpty","CommandItem","ComboboxOptions"],"mappings":"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"}
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import { jsx as t, jsxs as u } from "react/jsx-runtime";
|
|
2
|
-
import { useState as g, useMemo as
|
|
2
|
+
import { useState as g, useMemo as x } from "react";
|
|
3
3
|
import { Combobox as f } from "./Combobox.js";
|
|
4
|
-
const h = (e) => new Promise((n) => setTimeout(n, e)),
|
|
5
|
-
const n = [], a = (
|
|
6
|
-
if (
|
|
7
|
-
for (const s of
|
|
4
|
+
const h = (e) => new Promise((n) => setTimeout(n, e)), v = (e = []) => {
|
|
5
|
+
const n = [], a = (l) => {
|
|
6
|
+
if (l?.length)
|
|
7
|
+
for (const s of l)
|
|
8
8
|
n.push(s), s.items?.length && a(s.items);
|
|
9
9
|
};
|
|
10
10
|
return a(e), n;
|
|
11
11
|
}, d = (e, n = 350) => async (a) => {
|
|
12
12
|
await h(n);
|
|
13
|
-
const
|
|
14
|
-
if (!
|
|
15
|
-
const s =
|
|
16
|
-
s.filter((i) => String(i.label).toLowerCase().includes(
|
|
13
|
+
const l = (a ?? "").trim().toLowerCase();
|
|
14
|
+
if (!l) return e;
|
|
15
|
+
const s = v(e), b = new Set(
|
|
16
|
+
s.filter((i) => String(i.label).toLowerCase().includes(l)).map((i) => String(i.value))
|
|
17
17
|
), m = (i) => i.map((c) => {
|
|
18
18
|
const p = c.items?.length ? m(c.items) : void 0;
|
|
19
|
-
return !(b.has(String(c.value)) || String(c.label).toLowerCase().includes(
|
|
19
|
+
return !(b.has(String(c.value)) || String(c.label).toLowerCase().includes(l)) && !p?.length ? null : { ...c, items: p };
|
|
20
20
|
}).filter(Boolean);
|
|
21
21
|
return m(e);
|
|
22
22
|
}, r = [
|
|
@@ -47,14 +47,14 @@ const h = (e) => new Promise((n) => setTimeout(n, e)), x = (e = []) => {
|
|
|
47
47
|
]
|
|
48
48
|
}
|
|
49
49
|
];
|
|
50
|
-
function
|
|
51
|
-
const [a,
|
|
50
|
+
function o({ initialValue: e = "", ...n }) {
|
|
51
|
+
const [a, l] = g(e), s = x(
|
|
52
52
|
() => n.fetchOptions,
|
|
53
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
54
54
|
[]
|
|
55
55
|
);
|
|
56
56
|
return /* @__PURE__ */ u("div", { className: "max-w-sm", children: [
|
|
57
|
-
/* @__PURE__ */ t(f, { ...n, value: a, onChange:
|
|
57
|
+
/* @__PURE__ */ t(f, { ...n, value: a, onChange: l, fetchOptions: s }),
|
|
58
58
|
/* @__PURE__ */ u("div", { className: "mt-3 text-xs text-muted-foreground", children: [
|
|
59
59
|
"value: ",
|
|
60
60
|
/* @__PURE__ */ t("span", { className: "font-mono", children: String(a || "") })
|
|
@@ -88,24 +88,24 @@ const w = {
|
|
|
88
88
|
(e) => /* @__PURE__ */ t("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ t(e, {}) })
|
|
89
89
|
]
|
|
90
90
|
}, A = {
|
|
91
|
-
render: (e) => /* @__PURE__ */ t(
|
|
91
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
92
92
|
}, L = {
|
|
93
|
-
render: (e) => /* @__PURE__ */ t(
|
|
94
|
-
},
|
|
93
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e, initialValue: "pl" })
|
|
94
|
+
}, k = {
|
|
95
95
|
args: { disabled: !0 },
|
|
96
|
-
render: (e) => /* @__PURE__ */ t(
|
|
97
|
-
},
|
|
96
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e, initialValue: "de" })
|
|
97
|
+
}, F = {
|
|
98
98
|
args: {
|
|
99
99
|
options: r,
|
|
100
100
|
fetchOptions: async () => r
|
|
101
101
|
},
|
|
102
|
-
render: (e) => /* @__PURE__ */ t(
|
|
103
|
-
},
|
|
102
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
103
|
+
}, M = {
|
|
104
104
|
args: {
|
|
105
105
|
fetchOptions: d(r, 1200)
|
|
106
106
|
},
|
|
107
|
-
render: (e) => /* @__PURE__ */ t(
|
|
108
|
-
},
|
|
107
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
108
|
+
}, P = {
|
|
109
109
|
args: {
|
|
110
110
|
emptyLabel: "Nothing found",
|
|
111
111
|
emptyAction: (e) => {
|
|
@@ -117,16 +117,16 @@ const w = {
|
|
|
117
117
|
className: "inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm",
|
|
118
118
|
disabled: !n,
|
|
119
119
|
onClick: () => {
|
|
120
|
-
const a = e.search.trim(),
|
|
121
|
-
e.setOptions([
|
|
120
|
+
const a = e.search.trim(), l = { value: a, label: `Create "${a}"` };
|
|
121
|
+
e.setOptions([l]), e.setLoading(!1);
|
|
122
122
|
},
|
|
123
123
|
children: "Create option"
|
|
124
124
|
}
|
|
125
125
|
);
|
|
126
126
|
}
|
|
127
127
|
},
|
|
128
|
-
render: (e) => /* @__PURE__ */ t(
|
|
129
|
-
},
|
|
128
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
129
|
+
}, T = {
|
|
130
130
|
args: {
|
|
131
131
|
commandInputAction: (e) => /* @__PURE__ */ u("div", { className: "px-3 py-2 flex items-center justify-between text-xs text-muted-foreground", children: [
|
|
132
132
|
/* @__PURE__ */ u("span", { children: [
|
|
@@ -146,8 +146,8 @@ const w = {
|
|
|
146
146
|
)
|
|
147
147
|
] })
|
|
148
148
|
},
|
|
149
|
-
render: (e) => /* @__PURE__ */ t(
|
|
150
|
-
},
|
|
149
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
150
|
+
}, I = {
|
|
151
151
|
args: {
|
|
152
152
|
listHeadAction: (e) => /* @__PURE__ */ t(
|
|
153
153
|
"button",
|
|
@@ -161,12 +161,27 @@ const w = {
|
|
|
161
161
|
}
|
|
162
162
|
)
|
|
163
163
|
},
|
|
164
|
-
render: (e) => /* @__PURE__ */ t(
|
|
165
|
-
},
|
|
164
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
165
|
+
}, W = {
|
|
166
|
+
args: {
|
|
167
|
+
listFooterAction: (e) => /* @__PURE__ */ t(
|
|
168
|
+
"button",
|
|
169
|
+
{
|
|
170
|
+
type: "button",
|
|
171
|
+
className: "w-full text-left px-3 py-2 text-sm",
|
|
172
|
+
onClick: () => {
|
|
173
|
+
e.setSearch(""), e.setOpen(!1);
|
|
174
|
+
},
|
|
175
|
+
children: "Add new option"
|
|
176
|
+
}
|
|
177
|
+
)
|
|
178
|
+
},
|
|
179
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
180
|
+
}, E = {
|
|
166
181
|
args: {
|
|
167
182
|
fetchOptions: d(y, 250)
|
|
168
183
|
},
|
|
169
|
-
render: (e) => /* @__PURE__ */ t(
|
|
184
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
170
185
|
}, V = {
|
|
171
186
|
args: {
|
|
172
187
|
fetchOptions: d(r, 250),
|
|
@@ -174,18 +189,19 @@ const w = {
|
|
|
174
189
|
await h(900), e.setOptions(r), e.setLoading(!1);
|
|
175
190
|
}
|
|
176
191
|
},
|
|
177
|
-
render: (e) => /* @__PURE__ */ t(
|
|
192
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
178
193
|
};
|
|
179
194
|
export {
|
|
180
195
|
A as Default,
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
196
|
+
k as Disabled,
|
|
197
|
+
P as EmptyStateWithAction,
|
|
198
|
+
E as NestedOptions,
|
|
184
199
|
V as OnMountPrefetch,
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
200
|
+
M as SlowFetchLoading,
|
|
201
|
+
T as WithCommandInputAction,
|
|
202
|
+
W as WithListFooterAction,
|
|
203
|
+
I as WithListHeadAction,
|
|
204
|
+
F as WithStaticOptionsProp,
|
|
189
205
|
L as WithValueSelected,
|
|
190
206
|
w as default
|
|
191
207
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Combobox } from './Combobox';\nimport type {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\n const res: ComboboxOption[] = [];\n const walk = (list?: ComboboxOption[]) => {\n if (!list?.length) return;\n for (const n of list) {\n res.push(n);\n if (n.items?.length) walk(n.items);\n }\n };\n walk(nodes);\n return res;\n};\n\nconst createFetchOptions =\n (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\n async (search?: string) => {\n await sleep(delayMs);\n\n const q = (search ?? '').trim().toLowerCase();\n if (!q) return all;\n\n // simple \"contains\" search across flattened options; then return top-level filtered\n // (enough for Storybook demos; your real API can do better)\n const allFlat = flatten(all);\n const matchedValues = new Set(\n allFlat\n .filter((o) => String(o.label).toLowerCase().includes(q))\n .map((o) => String(o.value)),\n );\n\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\n return list\n .map((n) => {\n const items = n.items?.length ? filterTree(n.items) : undefined;\n const selfMatch =\n matchedValues.has(String(n.value)) ||\n String(n.label).toLowerCase().includes(q);\n\n if (!selfMatch && !items?.length) return null;\n return { ...n, items };\n })\n .filter(Boolean) as ComboboxOption[];\n };\n\n return filterTree(all);\n };\n\nconst BASE_OPTIONS: ComboboxOption[] = [\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n { value: 'fr', label: 'France' },\n { value: 'es', label: 'Spain' },\n { value: 'it', label: 'Italy' },\n];\n\nconst NESTED_OPTIONS: ComboboxOption[] = [\n {\n value: 'europe',\n label: 'Europe',\n items: [\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n { value: 'fr', label: 'France' },\n ],\n },\n {\n value: 'north-america',\n label: 'North America',\n items: [\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n { value: 'mx', label: 'Mexico' },\n ],\n },\n];\n\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\n initialValue?: ComboboxProps['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\n const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\n\n // keep stable reference if someone passes inline fetchOptions\n const fetchOptions = useMemo(\n () => args.fetchOptions,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n\n return (\n <div className=\"max-w-sm\">\n <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\n <div className=\"mt-3 text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{String(value || '')}</span>\n </div>\n </div>\n );\n}\n\nconst meta = {\n title: 'Combobox',\n component: Combobox,\n parameters: {\n layout: 'centered',\n },\n args: {\n placeholder: 'Select option...',\n searchLabel: 'Type to search...',\n emptyLabel: 'No options',\n disabled: false,\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n },\n argTypes: {\n fetchOptions: { control: false },\n onChange: { control: false },\n onMount: { control: false },\n emptyAction: { control: false },\n commandInputAction: { control: false },\n listHeadAction: { control: false },\n options: { control: false },\n value: { control: false },\n },\n decorators: [\n (Story) => (\n <div className=\"p-6 w-[420px]\">\n <Story />\n </div>\n ),\n ],\n} satisfies Meta<typeof Combobox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/** 1) Default (async options) */\nexport const Default: Story = {\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 2) With initial selected value */\nexport const WithValueSelected: Story = {\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\n};\n\n/** 3) Disabled */\nexport const Disabled: Story = {\n args: { disabled: true },\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\n};\n\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\nexport const WithStaticOptionsProp: Story = {\n args: {\n options: BASE_OPTIONS,\n fetchOptions: async () => BASE_OPTIONS,\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 5) Slow fetch to show loading state on open/search */\nexport const SlowFetchLoading: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 6) Empty state with action (search something like \"zzz\") */\nexport const EmptyStateWithAction: Story = {\n args: {\n emptyLabel: 'Nothing found',\n emptyAction: (st: ComboboxCallbackStateParams) => {\n const canCreate = Boolean(st.search?.trim());\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\n disabled={!canCreate}\n onClick={() => {\n const v = st.search.trim();\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\n st.setOptions([next]);\n st.setLoading(false);\n }}\n >\n Create option\n </button>\n );\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 7) commandInputAction (helper row under input) */\nexport const WithCommandInputAction: Story = {\n args: {\n commandInputAction: (st: ComboboxCallbackStateParams) => (\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\n <span>\n results: <span className=\"font-mono\">{st.options.length}</span>\n </span>\n <button\n type=\"button\"\n className=\"underline\"\n onClick={() => {\n st.setSearch('');\n st.setLoading(false);\n }}\n >\n Clear search\n </button>\n </div>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 8) listHeadAction (top action inside list) */\nexport const WithListHeadAction: Story = {\n args: {\n listHeadAction: (st: ComboboxCallbackStateParams) => (\n <button\n type=\"button\"\n className=\"w-full text-left px-3 py-2 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n Close list\n </button>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 9) Nested options tree */\nexport const NestedOptions: Story = {\n args: {\n fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n onMount: async (st: ComboboxCallbackStateParams) => {\n await sleep(900);\n st.setOptions(BASE_OPTIONS);\n st.setLoading(false);\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\n\nimport { Combobox } from './Combobox';\nimport type {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps,\n} from './Combobox.types';\n\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\n const res: ComboboxOption[] = [];\n const walk = (list?: ComboboxOption[]) => {\n if (!list?.length) return;\n for (const n of list) {\n res.push(n);\n if (n.items?.length) walk(n.items);\n }\n };\n walk(nodes);\n return res;\n};\n\nconst createFetchOptions =\n (all: ComboboxOption[], delayMs = 350): ComboboxProps['fetchOptions'] =>\n async (search?: string) => {\n await sleep(delayMs);\n\n const q = (search ?? '').trim().toLowerCase();\n if (!q) return all;\n\n // simple \"contains\" search across flattened options; then return top-level filtered\n // (enough for Storybook demos; your real API can do better)\n const allFlat = flatten(all);\n const matchedValues = new Set(\n allFlat\n .filter((o) => String(o.label).toLowerCase().includes(q))\n .map((o) => String(o.value)),\n );\n\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\n return list\n .map((n) => {\n const items = n.items?.length ? filterTree(n.items) : undefined;\n const selfMatch =\n matchedValues.has(String(n.value)) ||\n String(n.label).toLowerCase().includes(q);\n\n if (!selfMatch && !items?.length) return null;\n return { ...n, items };\n })\n .filter(Boolean) as ComboboxOption[];\n };\n\n return filterTree(all);\n };\n\nconst BASE_OPTIONS: ComboboxOption[] = [\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n { value: 'fr', label: 'France' },\n { value: 'es', label: 'Spain' },\n { value: 'it', label: 'Italy' },\n];\n\nconst NESTED_OPTIONS: ComboboxOption[] = [\n {\n value: 'europe',\n label: 'Europe',\n items: [\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\n { value: 'fr', label: 'France' },\n ],\n },\n {\n value: 'north-america',\n label: 'North America',\n items: [\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n { value: 'mx', label: 'Mexico' },\n ],\n },\n];\n\ntype ControlledProps = Omit<ComboboxProps, 'value' | 'onChange'> & {\n initialValue?: ComboboxProps['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps) {\n const [value, setValue] = useState<ComboboxProps['value']>(initialValue);\n\n // keep stable reference if someone passes inline fetchOptions\n const fetchOptions = useMemo(\n () => args.fetchOptions,\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [],\n );\n\n return (\n <div className=\"max-w-sm\">\n <Combobox {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} />\n <div className=\"mt-3 text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{String(value || '')}</span>\n </div>\n </div>\n );\n}\n\nconst meta = {\n title: 'Combobox',\n component: Combobox,\n parameters: {\n layout: 'centered',\n },\n args: {\n placeholder: 'Select option...',\n searchLabel: 'Type to search...',\n emptyLabel: 'No options',\n disabled: false,\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n },\n argTypes: {\n fetchOptions: { control: false },\n onChange: { control: false },\n onMount: { control: false },\n emptyAction: { control: false },\n commandInputAction: { control: false },\n listHeadAction: { control: false },\n options: { control: false },\n value: { control: false },\n },\n decorators: [\n (Story) => (\n <div className=\"p-6 w-[420px]\">\n <Story />\n </div>\n ),\n ],\n} satisfies Meta<typeof Combobox>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/** 1) Default (async options) */\nexport const Default: Story = {\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 2) With initial selected value */\nexport const WithValueSelected: Story = {\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\" />,\n};\n\n/** 3) Disabled */\nexport const Disabled: Story = {\n args: { disabled: true },\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\" />,\n};\n\n/** 4) Static options via `options` prop (no async needed, but fetchOptions still required) */\nexport const WithStaticOptionsProp: Story = {\n args: {\n options: BASE_OPTIONS,\n fetchOptions: async () => BASE_OPTIONS,\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 5) Slow fetch to show loading state on open/search */\nexport const SlowFetchLoading: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 1200),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 6) Empty state with action (search something like \"zzz\") */\nexport const EmptyStateWithAction: Story = {\n args: {\n emptyLabel: 'Nothing found',\n emptyAction: (st: ComboboxCallbackStateParams) => {\n const canCreate = Boolean(st.search?.trim());\n return (\n <button\n type=\"button\"\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\n disabled={!canCreate}\n onClick={() => {\n const v = st.search.trim();\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\n st.setOptions([next]);\n st.setLoading(false);\n }}\n >\n Create option\n </button>\n );\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 7) commandInputAction (helper row under input) */\nexport const WithCommandInputAction: Story = {\n args: {\n commandInputAction: (st: ComboboxCallbackStateParams) => (\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\n <span>\n results: <span className=\"font-mono\">{st.options.length}</span>\n </span>\n <button\n type=\"button\"\n className=\"underline\"\n onClick={() => {\n st.setSearch('');\n st.setLoading(false);\n }}\n >\n Clear search\n </button>\n </div>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 8) listHeadAction (top action inside list) */\nexport const WithListHeadAction: Story = {\n args: {\n listHeadAction: (st: ComboboxCallbackStateParams) => (\n <button\n type=\"button\"\n className=\"w-full text-left px-3 py-2 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n Close list\n </button>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 9) listHeadAction (footer action outside of list) */\nexport const WithListFooterAction: Story = {\n args: {\n listFooterAction: (st: ComboboxCallbackStateParams) => (\n <button\n type=\"button\"\n className=\"w-full text-left px-3 py-2 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n Add new option\n </button>\n ),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 10) Nested options tree */\nexport const NestedOptions: Story = {\n args: {\n fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 11) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n onMount: async (st: ComboboxCallbackStateParams) => {\n await sleep(900);\n st.setOptions(BASE_OPTIONS);\n st.setLoading(false);\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","BASE_OPTIONS","NESTED_OPTIONS","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","useMemo","jsxs","jsx","Combobox","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","OnMountPrefetch"],"mappings":"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"}
|
|
@@ -44,6 +44,8 @@ export interface ComboboxProps {
|
|
|
44
44
|
commandInputAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
|
|
45
45
|
/** Command List first element action */
|
|
46
46
|
listHeadAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
|
|
47
|
+
/** Command List footer element action */
|
|
48
|
+
listFooterAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
|
|
47
49
|
/** Callback for load data on start component */
|
|
48
50
|
onMount?: (params: ComboboxCallbackStateParams) => Promise<void>;
|
|
49
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,EAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;IACvD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC,CAAA;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CAC3C;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IACjD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAC/E,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACtF,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAClF,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAClE"}
|
|
1
|
+
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,EAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;IACvD,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,iBAAiB,EAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC,CAAA;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAC5C,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9C,WAAW,EAAE,OAAO,CAAC;IACrB,mBAAmB,EAAE,OAAO,CAAC;CAC9B;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,cAAc,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CAC3C;AAED,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IACjD,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,CAAC,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC;IAC7D,OAAO,CAAC,EAAE,cAAc,EAAE,CAAC;IAC3B,8BAA8B;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gCAAgC;IAChC,WAAW,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAC/E,kCAAkC;IAClC,kBAAkB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACtF,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAClF,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,2BAA2B,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACpF,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAClE"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../src/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Dialog.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/Dialog/index.d.ts
CHANGED
package/Dialog/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAA;AACpC,mBAAmB,gBAAgB,CAAA"}
|
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.48",
|
|
4
4
|
"description": "UI component library for OnePlatform",
|
|
5
5
|
"author": "One Platform Development Team",
|
|
6
6
|
"keywords": [
|
|
@@ -105,9 +105,9 @@
|
|
|
105
105
|
"recharts": "^3.2.0",
|
|
106
106
|
"sonner": "^2.0.7",
|
|
107
107
|
"vaul": "^1.1.2",
|
|
108
|
-
"@oneplatformdev/
|
|
109
|
-
"@oneplatformdev/
|
|
110
|
-
"@oneplatformdev/utils": "^0.1.99-beta.
|
|
108
|
+
"@oneplatformdev/tokens": "^0.1.99-beta.48",
|
|
109
|
+
"@oneplatformdev/hooks": "^0.1.99-beta.48",
|
|
110
|
+
"@oneplatformdev/utils": "^0.1.99-beta.48"
|
|
111
111
|
},
|
|
112
112
|
"scripts": {
|
|
113
113
|
"chromatic": "chromatic"
|