@oneplatformdev/ui 0.1.99-beta.274 → 0.1.99-beta.275
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { jsx as a, jsxs as
|
|
1
|
+
import { jsx as a, jsxs as m } from "react/jsx-runtime";
|
|
2
2
|
import { useState as y, useMemo as x } from "react";
|
|
3
3
|
import { Combobox as g } from "./Combobox.js";
|
|
4
|
-
const
|
|
4
|
+
const p = (e) => new Promise((t) => setTimeout(t, e)), v = (e = []) => {
|
|
5
5
|
const t = [], l = (n) => {
|
|
6
6
|
if (n?.length)
|
|
7
7
|
for (const o of n)
|
|
8
8
|
t.push(o), o.items?.length && l(o.items);
|
|
9
9
|
};
|
|
10
10
|
return l(e), t;
|
|
11
|
-
},
|
|
12
|
-
await
|
|
11
|
+
}, b = (e, t = 150) => async ({ search: l }) => {
|
|
12
|
+
await p(t);
|
|
13
13
|
const n = (l ?? "").trim().toLowerCase();
|
|
14
14
|
if (!n) return e;
|
|
15
|
-
const o = v(e),
|
|
15
|
+
const o = v(e), d = new Set(
|
|
16
16
|
o.filter((s) => String(s.label).toLowerCase().includes(n)).map((s) => String(s.value))
|
|
17
17
|
), i = (s) => s.map((c) => {
|
|
18
18
|
const h = c.items?.length ? i(c.items) : void 0;
|
|
19
|
-
return !(
|
|
19
|
+
return !(d.has(String(c.value)) || String(c.label).toLowerCase().includes(n)) && !h?.length ? null : { ...c, items: h };
|
|
20
20
|
}).filter(Boolean);
|
|
21
21
|
return i(e);
|
|
22
22
|
}, C = (e, t) => {
|
|
@@ -24,26 +24,26 @@ const b = (e) => new Promise((t) => setTimeout(t, e)), v = (e = []) => {
|
|
|
24
24
|
if (!l) return e;
|
|
25
25
|
const n = v(e), o = new Set(
|
|
26
26
|
n.filter((i) => String(i.label).toLowerCase().includes(l)).map((i) => String(i.value))
|
|
27
|
-
),
|
|
28
|
-
const c = s.items?.length ?
|
|
27
|
+
), d = (i) => i.map((s) => {
|
|
28
|
+
const c = s.items?.length ? d(s.items) : void 0;
|
|
29
29
|
return !(o.has(String(s.value)) || String(s.label).toLowerCase().includes(l)) && !c?.length ? null : { ...s, items: c };
|
|
30
30
|
}).filter(Boolean);
|
|
31
|
-
return
|
|
31
|
+
return d(e);
|
|
32
32
|
}, N = (e, t = 250, l = 20) => async ({ search: n, offset: o = 0 }) => {
|
|
33
|
-
await
|
|
34
|
-
const
|
|
33
|
+
await p(t);
|
|
34
|
+
const d = C(e, n), i = v(d);
|
|
35
35
|
return {
|
|
36
36
|
data: i.slice(o, o + l),
|
|
37
37
|
total: i.length
|
|
38
38
|
};
|
|
39
|
-
},
|
|
39
|
+
}, u = [
|
|
40
40
|
{ value: "ua", label: "Ukraine" },
|
|
41
41
|
{ value: "pl", label: "Poland" },
|
|
42
42
|
{ value: "de", label: "Germany" },
|
|
43
43
|
{ value: "fr", label: "France" },
|
|
44
44
|
{ value: "es", label: "Spain" },
|
|
45
45
|
{ value: "it", label: "Italy" }
|
|
46
|
-
],
|
|
46
|
+
], O = Array.from({ length: 120 }).map((e, t) => ({
|
|
47
47
|
value: `option-${t + 1}`,
|
|
48
48
|
label: `Option ${t + 1}`
|
|
49
49
|
})), f = [
|
|
@@ -115,7 +115,7 @@ function r({ initialValue: e = "", ...t }) {
|
|
|
115
115
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
116
116
|
[]
|
|
117
117
|
);
|
|
118
|
-
return /* @__PURE__ */
|
|
118
|
+
return /* @__PURE__ */ m("div", { className: "max-w-sm", children: [
|
|
119
119
|
/* @__PURE__ */ a(
|
|
120
120
|
g,
|
|
121
121
|
{
|
|
@@ -127,18 +127,18 @@ function r({ initialValue: e = "", ...t }) {
|
|
|
127
127
|
defaultNodeMatched: !0
|
|
128
128
|
}
|
|
129
129
|
),
|
|
130
|
-
/* @__PURE__ */
|
|
130
|
+
/* @__PURE__ */ m("div", { className: "mt-3 text-xs text-muted-foreground", children: [
|
|
131
131
|
"value: ",
|
|
132
132
|
/* @__PURE__ */ a("span", { className: "font-mono", children: String(l || "") })
|
|
133
133
|
] })
|
|
134
134
|
] });
|
|
135
135
|
}
|
|
136
|
-
function
|
|
136
|
+
function w({
|
|
137
137
|
initialValue: e = [],
|
|
138
138
|
...t
|
|
139
139
|
}) {
|
|
140
140
|
const [l, n] = y(e), o = x(() => t.loadData, []);
|
|
141
|
-
return /* @__PURE__ */
|
|
141
|
+
return /* @__PURE__ */ m("div", { className: "max-w-sm", children: [
|
|
142
142
|
/* @__PURE__ */ a(
|
|
143
143
|
g,
|
|
144
144
|
{
|
|
@@ -149,7 +149,7 @@ function O({
|
|
|
149
149
|
loadData: o
|
|
150
150
|
}
|
|
151
151
|
),
|
|
152
|
-
/* @__PURE__ */
|
|
152
|
+
/* @__PURE__ */ m("div", { className: "mt-3 text-xs text-muted-foreground", children: [
|
|
153
153
|
"value: ",
|
|
154
154
|
/* @__PURE__ */ a("span", { className: "font-mono", children: (l || []).join(", ") })
|
|
155
155
|
] })
|
|
@@ -166,7 +166,7 @@ const D = {
|
|
|
166
166
|
searchLabel: "Type to search...",
|
|
167
167
|
emptyLabel: "No options",
|
|
168
168
|
disabled: !1,
|
|
169
|
-
loadData:
|
|
169
|
+
loadData: b(u, 250)
|
|
170
170
|
},
|
|
171
171
|
argTypes: {
|
|
172
172
|
loadData: { control: !1 },
|
|
@@ -190,16 +190,24 @@ const D = {
|
|
|
190
190
|
render: (e) => /* @__PURE__ */ a(r, { ...e, initialValue: "de" })
|
|
191
191
|
}, k = {
|
|
192
192
|
args: {
|
|
193
|
-
options:
|
|
194
|
-
loadData: async () =>
|
|
193
|
+
options: u,
|
|
194
|
+
loadData: async () => u
|
|
195
195
|
},
|
|
196
196
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
197
197
|
}, B = {
|
|
198
198
|
args: {
|
|
199
|
-
loadData:
|
|
199
|
+
loadData: b(u, 1200)
|
|
200
200
|
},
|
|
201
201
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
202
202
|
}, I = {
|
|
203
|
+
args: {
|
|
204
|
+
loadData: async () => u,
|
|
205
|
+
onMount: async (e) => {
|
|
206
|
+
e.setOpen(!0), e.setOptions([]), e.setLoading(!0), await p(1200), e.setOptions(u), e.setLoading(!1);
|
|
207
|
+
}
|
|
208
|
+
},
|
|
209
|
+
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
210
|
+
}, E = {
|
|
203
211
|
args: {
|
|
204
212
|
emptyLabel: "Nothing found",
|
|
205
213
|
emptyAction: (e) => {
|
|
@@ -220,10 +228,10 @@ const D = {
|
|
|
220
228
|
}
|
|
221
229
|
},
|
|
222
230
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
223
|
-
},
|
|
231
|
+
}, W = {
|
|
224
232
|
args: {
|
|
225
|
-
commandInputAction: (e) => /* @__PURE__ */
|
|
226
|
-
/* @__PURE__ */
|
|
233
|
+
commandInputAction: (e) => /* @__PURE__ */ m("div", { className: "px-3 py-2 flex items-center justify-between text-xs text-muted-foreground", children: [
|
|
234
|
+
/* @__PURE__ */ m("span", { children: [
|
|
227
235
|
"results: ",
|
|
228
236
|
/* @__PURE__ */ a("span", { className: "font-mono", children: e.options.length })
|
|
229
237
|
] }),
|
|
@@ -241,7 +249,7 @@ const D = {
|
|
|
241
249
|
] })
|
|
242
250
|
},
|
|
243
251
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
244
|
-
},
|
|
252
|
+
}, j = {
|
|
245
253
|
args: {
|
|
246
254
|
listHeadAction: (e) => /* @__PURE__ */ a(
|
|
247
255
|
"button",
|
|
@@ -256,7 +264,7 @@ const D = {
|
|
|
256
264
|
)
|
|
257
265
|
},
|
|
258
266
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
259
|
-
},
|
|
267
|
+
}, q = {
|
|
260
268
|
args: {
|
|
261
269
|
listFooterAction: (e) => /* @__PURE__ */ a(
|
|
262
270
|
"button",
|
|
@@ -271,32 +279,32 @@ const D = {
|
|
|
271
279
|
)
|
|
272
280
|
},
|
|
273
281
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
274
|
-
},
|
|
282
|
+
}, _ = {
|
|
275
283
|
args: {
|
|
276
|
-
loadData:
|
|
284
|
+
loadData: b(f, 250)
|
|
277
285
|
// defaultNodeDisabled: false,
|
|
278
286
|
// defaultNodeMatched: false,
|
|
279
287
|
// defaultNodeMuted: true,
|
|
280
288
|
// defaultNodeInteractive: false,
|
|
281
289
|
},
|
|
282
290
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
283
|
-
},
|
|
291
|
+
}, R = {
|
|
284
292
|
args: {
|
|
285
|
-
loadData:
|
|
293
|
+
loadData: b(f, 250),
|
|
286
294
|
onMount: async (e) => {
|
|
287
|
-
await
|
|
295
|
+
await p(900), e.setOptions(S(f));
|
|
288
296
|
}
|
|
289
297
|
},
|
|
290
|
-
render: (e) => /* @__PURE__ */ a(
|
|
291
|
-
},
|
|
298
|
+
render: (e) => /* @__PURE__ */ a(w, { ...e, initialValue: ["fr", "de"] })
|
|
299
|
+
}, $ = {
|
|
292
300
|
args: {
|
|
293
|
-
loadData:
|
|
301
|
+
loadData: b(u, 250),
|
|
294
302
|
onMount: async (e) => {
|
|
295
|
-
await
|
|
303
|
+
await p(900), e.setOptions(u);
|
|
296
304
|
}
|
|
297
305
|
},
|
|
298
306
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
299
|
-
},
|
|
307
|
+
}, G = {
|
|
300
308
|
args: {
|
|
301
309
|
renderTrigger: (e) => (console.log("state", e), /* @__PURE__ */ a(
|
|
302
310
|
"button",
|
|
@@ -309,28 +317,29 @@ const D = {
|
|
|
309
317
|
))
|
|
310
318
|
},
|
|
311
319
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
312
|
-
},
|
|
320
|
+
}, H = {
|
|
313
321
|
args: {
|
|
314
322
|
placeholder: "Select option...",
|
|
315
323
|
searchLabel: "Type to search...",
|
|
316
324
|
emptyLabel: "No options",
|
|
317
|
-
loadData: N(
|
|
325
|
+
loadData: N(O, 500, 20)
|
|
318
326
|
},
|
|
319
327
|
render: (e) => /* @__PURE__ */ a(r, { ...e })
|
|
320
328
|
};
|
|
321
329
|
export {
|
|
322
330
|
P as Default,
|
|
323
331
|
V as Disabled,
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
_ as
|
|
328
|
-
R as
|
|
329
|
-
$ as
|
|
332
|
+
E as EmptyStateWithAction,
|
|
333
|
+
H as InfiniteScrollLoadMore,
|
|
334
|
+
I as Loading,
|
|
335
|
+
_ as NestedOptions,
|
|
336
|
+
R as NestedOptionsMulti,
|
|
337
|
+
$ as OnMountPrefetch,
|
|
338
|
+
G as RenderCustomTrigger,
|
|
330
339
|
B as SlowFetchLoading,
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
340
|
+
W as WithCommandInputAction,
|
|
341
|
+
q as WithListFooterAction,
|
|
342
|
+
j as WithListHeadAction,
|
|
334
343
|
k as WithStaticOptionsProp,
|
|
335
344
|
F as WithValueSelected,
|
|
336
345
|
D as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Combobox } from './Combobox';\r\nimport {\r\n ComboboxCallbackStateParams,\r\n ComboboxOption,\r\n ComboboxProps, MultiComboboxProps, SingleComboboxProps,\r\n} from './Combobox.types';\r\n\r\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\r\n\r\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\r\n const res: ComboboxOption[] = [];\r\n const walk = (list?: ComboboxOption[]) => {\r\n if (!list?.length) return;\r\n for (const n of list) {\r\n res.push(n);\r\n if (n.items?.length) walk(n.items);\r\n }\r\n };\r\n walk(nodes);\r\n return res;\r\n};\r\n\r\nconst createFetchOptions =\r\n (all: ComboboxOption[], delayMs = 150): ComboboxProps['loadData'] =>\r\n async ({ search }) => {\r\n await sleep(delayMs);\r\n\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n // simple \"contains\" search across flattened options; then return top-level filtered\r\n // (enough for Storybook demos; your real API can do better)\r\n const allFlat = flatten(all);\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n };\r\n\r\n\r\nconst filterTreeBySearch = (\r\n all: ComboboxOption[],\r\n search?: string,\r\n): ComboboxOption[] => {\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n const allFlat = flatten(all);\r\n\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n};\r\n\r\nconst createPaginatedFetchOptions =\r\n (\r\n all: ComboboxOption[],\r\n delayMs = 250,\r\n limit = 20,\r\n ): ComboboxProps['loadData'] =>\r\n async ({ search, offset = 0 }) => {\r\n await sleep(delayMs);\r\n\r\n const filteredTree = filterTreeBySearch(all, search);\r\n const filteredFlat = flatten(filteredTree);\r\n\r\n const data = filteredFlat.slice(offset, offset + limit);\r\n\r\n return {\r\n data,\r\n total: filteredFlat.length,\r\n };\r\n };\r\n\r\nconst BASE_OPTIONS: ComboboxOption[] = [\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n { value: 'fr', label: 'France' },\r\n { value: 'es', label: 'Spain' },\r\n { value: 'it', label: 'Italy' },\r\n];\r\n\r\nconst MANY_OPTIONS: ComboboxOption[] = Array.from({ length: 120 }).map((_, i) => ({\r\n value: `option-${i + 1}`,\r\n label: `Option ${i + 1}`,\r\n}));\r\n\r\nconst NESTED_OPTIONS: ComboboxOption[] = [\r\n {\r\n value: 'europe',\r\n label: 'Europe',\r\n items: [\r\n {\r\n value: 'fr',\r\n label: 'France',\r\n items: [\r\n {\r\n value: 'paris',\r\n label: 'Paris (Île-de-France)',\r\n items: [\r\n { value: 'paris-1', label: 'Paris 1st arrondissement' },\r\n { value: 'paris-3', label: 'Paris 3rd arrondissement' },\r\n { value: 'paris-10', label: 'Paris 10th arrondissement' },\r\n ],\r\n },\r\n { value: 'marseille', label: 'Marseille (Provence-Alpes-Côte d\\'Azur)' },\r\n {\r\n value: 'lyon',\r\n label: 'Lyon (Auvergne-Rhône-Alpes)',\r\n items: [\r\n { value: 'lyon-presquile', label: 'Presqu\\'île (1st/2nd)' },\r\n { value: 'lyon-vieux', label: 'Vieux Lyon' },\r\n ],\r\n },\r\n { value: 'toulouse', label: 'Toulouse (Occitanie)' },\r\n { value: 'bordeaux', label: 'Bordeaux (Nouvelle-Aquitaine)' },\r\n { value: 'strasbourg', label: 'Strasbourg (Grand Est)' },\r\n {\r\n value: 'rennes',\r\n label: 'Rennes (Brittany)',\r\n items: [\r\n { value: 'rennes-centre', label: 'Rennes Centre' },\r\n { value: 'rennes-beauregard', label: 'Beauregard' },\r\n ],\r\n },\r\n ]\r\n },\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n ],\r\n },\r\n {\r\n value: 'north-america',\r\n label: 'North America',\r\n items: [\r\n { value: 'us', label: 'United States' },\r\n { value: 'ca', label: 'Canada' },\r\n { value: 'mx', label: 'Mexico' },\r\n { value: 'north-america-long', label: 'To long option to test wrapping. '.repeat(3) },\r\n {\r\n value: 'north-america-long-single',\r\n label: 'To long option to test wrapping. '.replace(/ /g, '_').repeat(3)\r\n },\r\n ],\r\n },\r\n];\r\nconst getFlattenOptions = (options: ComboboxOption[]) => {\r\n return options.flatMap(option => [\r\n option,\r\n ...(option.items ? getFlattenOptions(option.items) : [])\r\n ]);\r\n};\r\n\r\nconst getAllValues = (options: ComboboxOption[]): string[] => {\r\n return getFlattenOptions(options).map(o => o.value)\r\n};\r\n\r\ntype ControlledProps<T extends ComboboxProps = ComboboxProps> = Omit<T, 'value' | 'onChange'> & {\r\n initialValue?: T['value'];\r\n};\r\n\r\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps<SingleComboboxProps>) {\r\n const [ value, setValue ] = useState<SingleComboboxProps['value']>(initialValue);\r\n const loadData = useMemo(\r\n () => args.loadData,\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [],\r\n );\r\n\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox type='single' {...args} value={value} onChange={setValue} loadData={loadData}\r\n defaultNodeMatched/>\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{String(value || '')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nfunction ControlledComboboxMulti({\r\n initialValue = [],\r\n ...args\r\n }: ControlledProps<MultiComboboxProps>) {\r\n const [ value, setValue ] = useState<MultiComboboxProps['value'] | undefined>(initialValue);\r\n const loadData = useMemo(() => args.loadData, []);\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox\r\n {...args}\r\n type='multi'\r\n value={value}\r\n onChange={setValue}\r\n loadData={loadData}\r\n />\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{(value || []).join(', ')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Combobox',\r\n component: Combobox,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n disabled: false,\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n },\r\n argTypes: {\r\n loadData: { control: false },\r\n onChange: { control: false },\r\n onMount: { control: false },\r\n emptyAction: { control: false },\r\n commandInputAction: { control: false },\r\n listHeadAction: { control: false },\r\n options: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story/>\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Combobox>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\n/** 1) Default (async options) */\r\nexport const Default: Story = {\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 2) With initial selected value */\r\nexport const WithValueSelected: Story = {\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\"/>,\r\n};\r\n\r\n/** 3) Disabled */\r\nexport const Disabled: Story = {\r\n args: { disabled: true },\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\"/>,\r\n};\r\n\r\n/** 4) Static options via `options` prop (no async needed, but loadData still required) */\r\nexport const WithStaticOptionsProp: Story = {\r\n args: {\r\n options: BASE_OPTIONS,\r\n loadData: async () => BASE_OPTIONS,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5) Slow fetch to show loading state on open/search */\r\nexport const SlowFetchLoading: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 1200),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 6) Empty state with action (search something like \"zzz\") */\r\nexport const EmptyStateWithAction: Story = {\r\n args: {\r\n emptyLabel: 'Nothing found',\r\n emptyAction: (st: ComboboxCallbackStateParams) => {\r\n const canCreate = Boolean(st.search?.trim());\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\r\n disabled={!canCreate}\r\n onClick={() => {\r\n const v = st.search.trim();\r\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\r\n st.setOptions([ next ]);\r\n st.setLoading(false);\r\n }}\r\n >\r\n Create option\r\n </button>\r\n );\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 7) commandInputAction (helper row under input) */\r\nexport const WithCommandInputAction: Story = {\r\n args: {\r\n commandInputAction: (st: ComboboxCallbackStateParams) => (\r\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\r\n <span>\r\n results: <span className=\"font-mono\">{st.options.length}</span>\r\n </span>\r\n <button\r\n type=\"button\"\r\n className=\"underline\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setLoading(false);\r\n }}\r\n >\r\n Clear search\r\n </button>\r\n </div>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 8) listHeadAction (top action inside list) */\r\nexport const WithListHeadAction: Story = {\r\n args: {\r\n listHeadAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left px-3 py-2 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n Close list\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 9) listHeadAction (footer action outside of list) */\r\nexport const WithListFooterAction: Story = {\r\n args: {\r\n listFooterAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left min-h-10 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n list footer action\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 10) Nested options tree */\r\nexport const NestedOptions: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n // defaultNodeDisabled: false,\r\n // defaultNodeMatched: false,\r\n // defaultNodeMuted: true,\r\n // defaultNodeInteractive: false,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 11) Multi Nested options tree */\r\nexport const NestedOptionsMulti: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\r\n await sleep(900);\r\n st.setOptions(getFlattenOptions(NESTED_OPTIONS));\r\n },\r\n },\r\n render: (args) => {\r\n const TEST_FULL = false;\r\n const initialValues = TEST_FULL ? getAllValues(NESTED_OPTIONS) : [ 'fr', 'de' ];\r\n return <ControlledComboboxMulti {...args} initialValue={initialValues}/>\r\n },\r\n};\r\n\r\n/** 12) onMount initial loading (simulate prefetch on mount) */\r\nexport const OnMountPrefetch: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'multi'>) => {\r\n await sleep(900);\r\n st.setOptions(BASE_OPTIONS);\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 13) render custom trigger */\r\nexport const RenderCustomTrigger: Story = {\r\n args: {\r\n renderTrigger: (state) => {\r\n console.log('state', state);\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"w-full\"\r\n onClick={() => state.setOpen((o) => !o)}\r\n >\r\n {state.selectedOption ? `Selected: ${state.selectedOption.label}` : 'Select option...'}\r\n </button>\r\n )\r\n }\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 14) Load more with infinite scroll */\r\nexport const InfiniteScrollLoadMore: Story = {\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n loadData: createPaginatedFetchOptions(MANY_OPTIONS, 500, 20),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","filterTreeBySearch","createPaginatedFetchOptions","limit","offset","filteredTree","filteredFlat","BASE_OPTIONS","MANY_OPTIONS","_","i","NESTED_OPTIONS","getFlattenOptions","options","option","ControlledCombobox","initialValue","args","value","setValue","useState","loadData","useMemo","jsxs","jsx","Combobox","ControlledComboboxMulti","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","EmptyStateWithAction","st","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","NestedOptionsMulti","OnMountPrefetch","RenderCustomTrigger","state","InfiniteScrollLoadMore"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.stories.js","sources":["../../src/Combobox/Combobox.stories.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Combobox } from './Combobox';\r\nimport {\r\n ComboboxCallbackStateParams,\r\n ComboboxOption,\r\n ComboboxProps, MultiComboboxProps, SingleComboboxProps,\r\n} from './Combobox.types';\r\n\r\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\r\n\r\nconst flatten = (nodes: ComboboxOption[] = []): ComboboxOption[] => {\r\n const res: ComboboxOption[] = [];\r\n const walk = (list?: ComboboxOption[]) => {\r\n if (!list?.length) return;\r\n for (const n of list) {\r\n res.push(n);\r\n if (n.items?.length) walk(n.items);\r\n }\r\n };\r\n walk(nodes);\r\n return res;\r\n};\r\n\r\nconst createFetchOptions =\r\n (all: ComboboxOption[], delayMs = 150): ComboboxProps['loadData'] =>\r\n async ({ search }) => {\r\n await sleep(delayMs);\r\n\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n // simple \"contains\" search across flattened options; then return top-level filtered\r\n // (enough for Storybook demos; your real API can do better)\r\n const allFlat = flatten(all);\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n };\r\n\r\n\r\nconst filterTreeBySearch = (\r\n all: ComboboxOption[],\r\n search?: string,\r\n): ComboboxOption[] => {\r\n const q = (search ?? '').trim().toLowerCase();\r\n if (!q) return all;\r\n\r\n const allFlat = flatten(all);\r\n\r\n const matchedValues = new Set(\r\n allFlat\r\n .filter((o) => String(o.label).toLowerCase().includes(q))\r\n .map((o) => String(o.value)),\r\n );\r\n\r\n const filterTree = (list: ComboboxOption[]): ComboboxOption[] => {\r\n return list\r\n .map((n) => {\r\n const items = n.items?.length ? filterTree(n.items) : undefined;\r\n const selfMatch =\r\n matchedValues.has(String(n.value)) ||\r\n String(n.label).toLowerCase().includes(q);\r\n\r\n if (!selfMatch && !items?.length) return null;\r\n return { ...n, items };\r\n })\r\n .filter(Boolean) as ComboboxOption[];\r\n };\r\n\r\n return filterTree(all);\r\n};\r\n\r\nconst createPaginatedFetchOptions =\r\n (\r\n all: ComboboxOption[],\r\n delayMs = 250,\r\n limit = 20,\r\n ): ComboboxProps['loadData'] =>\r\n async ({ search, offset = 0 }) => {\r\n await sleep(delayMs);\r\n\r\n const filteredTree = filterTreeBySearch(all, search);\r\n const filteredFlat = flatten(filteredTree);\r\n\r\n const data = filteredFlat.slice(offset, offset + limit);\r\n\r\n return {\r\n data,\r\n total: filteredFlat.length,\r\n };\r\n };\r\n\r\nconst BASE_OPTIONS: ComboboxOption[] = [\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n { value: 'fr', label: 'France' },\r\n { value: 'es', label: 'Spain' },\r\n { value: 'it', label: 'Italy' },\r\n];\r\n\r\nconst MANY_OPTIONS: ComboboxOption[] = Array.from({ length: 120 }).map((_, i) => ({\r\n value: `option-${i + 1}`,\r\n label: `Option ${i + 1}`,\r\n}));\r\n\r\nconst NESTED_OPTIONS: ComboboxOption[] = [\r\n {\r\n value: 'europe',\r\n label: 'Europe',\r\n items: [\r\n {\r\n value: 'fr',\r\n label: 'France',\r\n items: [\r\n {\r\n value: 'paris',\r\n label: 'Paris (Île-de-France)',\r\n items: [\r\n { value: 'paris-1', label: 'Paris 1st arrondissement' },\r\n { value: 'paris-3', label: 'Paris 3rd arrondissement' },\r\n { value: 'paris-10', label: 'Paris 10th arrondissement' },\r\n ],\r\n },\r\n { value: 'marseille', label: 'Marseille (Provence-Alpes-Côte d\\'Azur)' },\r\n {\r\n value: 'lyon',\r\n label: 'Lyon (Auvergne-Rhône-Alpes)',\r\n items: [\r\n { value: 'lyon-presquile', label: 'Presqu\\'île (1st/2nd)' },\r\n { value: 'lyon-vieux', label: 'Vieux Lyon' },\r\n ],\r\n },\r\n { value: 'toulouse', label: 'Toulouse (Occitanie)' },\r\n { value: 'bordeaux', label: 'Bordeaux (Nouvelle-Aquitaine)' },\r\n { value: 'strasbourg', label: 'Strasbourg (Grand Est)' },\r\n {\r\n value: 'rennes',\r\n label: 'Rennes (Brittany)',\r\n items: [\r\n { value: 'rennes-centre', label: 'Rennes Centre' },\r\n { value: 'rennes-beauregard', label: 'Beauregard' },\r\n ],\r\n },\r\n ]\r\n },\r\n { value: 'ua', label: 'Ukraine' },\r\n { value: 'pl', label: 'Poland' },\r\n { value: 'de', label: 'Germany' },\r\n ],\r\n },\r\n {\r\n value: 'north-america',\r\n label: 'North America',\r\n items: [\r\n { value: 'us', label: 'United States' },\r\n { value: 'ca', label: 'Canada' },\r\n { value: 'mx', label: 'Mexico' },\r\n { value: 'north-america-long', label: 'To long option to test wrapping. '.repeat(3) },\r\n {\r\n value: 'north-america-long-single',\r\n label: 'To long option to test wrapping. '.replace(/ /g, '_').repeat(3)\r\n },\r\n ],\r\n },\r\n];\r\nconst getFlattenOptions = (options: ComboboxOption[]) => {\r\n return options.flatMap(option => [\r\n option,\r\n ...(option.items ? getFlattenOptions(option.items) : [])\r\n ]);\r\n};\r\n\r\nconst getAllValues = (options: ComboboxOption[]): string[] => {\r\n return getFlattenOptions(options).map(o => o.value)\r\n};\r\n\r\ntype ControlledProps<T extends ComboboxProps = ComboboxProps> = Omit<T, 'value' | 'onChange'> & {\r\n initialValue?: T['value'];\r\n};\r\n\r\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps<SingleComboboxProps>) {\r\n const [ value, setValue ] = useState<SingleComboboxProps['value']>(initialValue);\r\n const loadData = useMemo(\r\n () => args.loadData,\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [],\r\n );\r\n\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox type='single' {...args} value={value} onChange={setValue} loadData={loadData}\r\n defaultNodeMatched/>\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{String(value || '')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nfunction ControlledComboboxMulti({\r\n initialValue = [],\r\n ...args\r\n }: ControlledProps<MultiComboboxProps>) {\r\n const [ value, setValue ] = useState<MultiComboboxProps['value'] | undefined>(initialValue);\r\n const loadData = useMemo(() => args.loadData, []);\r\n return (\r\n <div className=\"max-w-sm\">\r\n <Combobox\r\n {...args}\r\n type='multi'\r\n value={value}\r\n onChange={setValue}\r\n loadData={loadData}\r\n />\r\n <div className=\"mt-3 text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{(value || []).join(', ')}</span>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Combobox',\r\n component: Combobox,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n disabled: false,\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n },\r\n argTypes: {\r\n loadData: { control: false },\r\n onChange: { control: false },\r\n onMount: { control: false },\r\n emptyAction: { control: false },\r\n commandInputAction: { control: false },\r\n listHeadAction: { control: false },\r\n options: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story/>\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Combobox>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\n/** 1) Default (async options) */\r\nexport const Default: Story = {\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 2) With initial selected value */\r\nexport const WithValueSelected: Story = {\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"pl\"/>,\r\n};\r\n\r\n/** 3) Disabled */\r\nexport const Disabled: Story = {\r\n args: { disabled: true },\r\n render: (args) => <ControlledCombobox {...args} initialValue=\"de\"/>,\r\n};\r\n\r\n/** 4) Static options via `options` prop (no async needed, but loadData still required) */\r\nexport const WithStaticOptionsProp: Story = {\r\n args: {\r\n options: BASE_OPTIONS,\r\n loadData: async () => BASE_OPTIONS,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5) Slow fetch to show loading state on open/search */\r\nexport const SlowFetchLoading: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 1200),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 5.1) Forced loading state (opened on mount) */\r\nexport const Loading: Story = {\r\n args: {\r\n loadData: async () => BASE_OPTIONS,\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\r\n st.setOpen(true);\r\n st.setOptions([]);\r\n st.setLoading(true);\r\n await sleep(1200);\r\n st.setOptions(BASE_OPTIONS);\r\n st.setLoading(false);\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 6) Empty state with action (search something like \"zzz\") */\r\nexport const EmptyStateWithAction: Story = {\r\n args: {\r\n emptyLabel: 'Nothing found',\r\n emptyAction: (st: ComboboxCallbackStateParams) => {\r\n const canCreate = Boolean(st.search?.trim());\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm\"\r\n disabled={!canCreate}\r\n onClick={() => {\r\n const v = st.search.trim();\r\n const next: ComboboxOption = { value: v, label: `Create \"${v}\"` };\r\n st.setOptions([ next ]);\r\n st.setLoading(false);\r\n }}\r\n >\r\n Create option\r\n </button>\r\n );\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 7) commandInputAction (helper row under input) */\r\nexport const WithCommandInputAction: Story = {\r\n args: {\r\n commandInputAction: (st: ComboboxCallbackStateParams) => (\r\n <div className=\"px-3 py-2 flex items-center justify-between text-xs text-muted-foreground\">\r\n <span>\r\n results: <span className=\"font-mono\">{st.options.length}</span>\r\n </span>\r\n <button\r\n type=\"button\"\r\n className=\"underline\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setLoading(false);\r\n }}\r\n >\r\n Clear search\r\n </button>\r\n </div>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 8) listHeadAction (top action inside list) */\r\nexport const WithListHeadAction: Story = {\r\n args: {\r\n listHeadAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left px-3 py-2 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n Close list\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 9) listHeadAction (footer action outside of list) */\r\nexport const WithListFooterAction: Story = {\r\n args: {\r\n listFooterAction: (st: ComboboxCallbackStateParams) => (\r\n <button\r\n type=\"button\"\r\n className=\"w-full text-left min-h-10 text-sm\"\r\n onClick={() => {\r\n st.setSearch('');\r\n st.setOpen(false);\r\n }}\r\n >\r\n list footer action\r\n </button>\r\n ),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 10) Nested options tree */\r\nexport const NestedOptions: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n // defaultNodeDisabled: false,\r\n // defaultNodeMatched: false,\r\n // defaultNodeMuted: true,\r\n // defaultNodeInteractive: false,\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 11) Multi Nested options tree */\r\nexport const NestedOptionsMulti: Story = {\r\n args: {\r\n loadData: createFetchOptions(NESTED_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\r\n await sleep(900);\r\n st.setOptions(getFlattenOptions(NESTED_OPTIONS));\r\n },\r\n },\r\n render: (args) => {\r\n const TEST_FULL = false;\r\n const initialValues = TEST_FULL ? getAllValues(NESTED_OPTIONS) : [ 'fr', 'de' ];\r\n return <ControlledComboboxMulti {...args} initialValue={initialValues}/>\r\n },\r\n};\r\n\r\n/** 12) onMount initial loading (simulate prefetch on mount) */\r\nexport const OnMountPrefetch: Story = {\r\n args: {\r\n loadData: createFetchOptions(BASE_OPTIONS, 250),\r\n onMount: async (st: ComboboxCallbackStateParams<object, 'multi'>) => {\r\n await sleep(900);\r\n st.setOptions(BASE_OPTIONS);\r\n },\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 13) render custom trigger */\r\nexport const RenderCustomTrigger: Story = {\r\n args: {\r\n renderTrigger: (state) => {\r\n console.log('state', state);\r\n return (\r\n <button\r\n type=\"button\"\r\n className=\"w-full\"\r\n onClick={() => state.setOpen((o) => !o)}\r\n >\r\n {state.selectedOption ? `Selected: ${state.selectedOption.label}` : 'Select option...'}\r\n </button>\r\n )\r\n }\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n\r\n/** 14) Load more with infinite scroll */\r\nexport const InfiniteScrollLoadMore: Story = {\r\n args: {\r\n placeholder: 'Select option...',\r\n searchLabel: 'Type to search...',\r\n emptyLabel: 'No options',\r\n loadData: createPaginatedFetchOptions(MANY_OPTIONS, 500, 20),\r\n },\r\n render: (args) => <ControlledCombobox {...args} />,\r\n};\r\n"],"names":["sleep","ms","r","flatten","nodes","res","walk","list","n","createFetchOptions","all","delayMs","search","q","allFlat","matchedValues","o","filterTree","items","filterTreeBySearch","createPaginatedFetchOptions","limit","offset","filteredTree","filteredFlat","BASE_OPTIONS","MANY_OPTIONS","_","i","NESTED_OPTIONS","getFlattenOptions","options","option","ControlledCombobox","initialValue","args","value","setValue","useState","loadData","useMemo","jsxs","jsx","Combobox","ControlledComboboxMulti","meta","Story","Default","WithValueSelected","Disabled","WithStaticOptionsProp","SlowFetchLoading","Loading","st","EmptyStateWithAction","canCreate","v","next","WithCommandInputAction","WithListHeadAction","WithListFooterAction","NestedOptions","NestedOptionsMulti","OnMountPrefetch","RenderCustomTrigger","state","InfiniteScrollLoadMore"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRenderContent.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EAAE,aAAa,EAC7B,oBAAoB,EAAE,iCAAiC,EACvD,UAAU,EACX,MAAM,kBAAkB,CAAC;AAM1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAC1D,iCAAiC,CAAC,IAAI,CAAC,GACrC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtF,OAAO,EAAE,OAAO,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAElD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAE5D,kBAAkB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAChE,gBAAgB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE7D,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC,CAAA;AAkBD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,EAChE,OAAO,0BAA0B,CAAC,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"ComboboxRenderContent.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"names":[],"mappings":"AAWA,OAAO,EACL,wCAAwC,EACxC,gCAAgC,EAChC,cAAc,EAAE,aAAa,EAC7B,oBAAoB,EAAE,iCAAiC,EACvD,UAAU,EACX,MAAM,kBAAkB,CAAC;AAM1B,KAAK,0BAA0B,CAAC,IAAI,SAAS,MAAM,GAAG,MAAM,IAC1D,iCAAiC,CAAC,IAAI,CAAC,GACrC;IACF,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,IAAI,EAAE,oBAAoB,CAAC;IAC3B,KAAK,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,aAAa,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC;IAEtF,OAAO,EAAE,OAAO,CAAC;IAEjB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAErB,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAElD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mBAAmB,EAAE,gCAAgC,CAAC,IAAI,CAAC,CAAC;IAE5D,kBAAkB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IACpE,UAAU,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAC5D,cAAc,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAChE,gBAAgB,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAClE,WAAW,CAAC,EAAE,wCAAwC,CAAC,IAAI,CAAC,CAAC;IAE7D,SAAS,CAAC,EAAE,UAAU,CAAC;IAEvB,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAEtC,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAClC,CAAA;AAkBD,eAAO,MAAM,qBAAqB,GAAI,IAAI,SAAS,MAAM,GAAG,MAAM,EAChE,OAAO,0BAA0B,CAAC,IAAI,CAAC,4CAyJxC,CAAA"}
|
|
@@ -3,15 +3,15 @@ import { cn as s } from "@oneplatformdev/utils";
|
|
|
3
3
|
import { ComboboxRenderOptions as G } from "./ComboboxRenderOptions.js";
|
|
4
4
|
import { useRef as H, useEffect as J } from "react";
|
|
5
5
|
import { useInView as T } from "react-intersection-observer";
|
|
6
|
-
import { PopoverContent as
|
|
7
|
-
import { Command as
|
|
8
|
-
import { LoadingMask as
|
|
9
|
-
import { Skeleton as
|
|
6
|
+
import { PopoverContent as _ } from "../Popover/Popover.js";
|
|
7
|
+
import { Command as q, CommandInput as z, CommandList as B, CommandGroup as K, CommandEmpty as y, CommandItem as Q } from "../Command/Command.js";
|
|
8
|
+
import { LoadingMask as U } from "../LoadingMask/LoadingMask.js";
|
|
9
|
+
import { Skeleton as W } from "../Skeleton/Skeleton.js";
|
|
10
10
|
const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap-0", children: Array.from({ length: t.length || 2 }).map((c, d) => /* @__PURE__ */ e(
|
|
11
11
|
"div",
|
|
12
12
|
{
|
|
13
13
|
className: "flex items-center min-h-10 w-full px-4",
|
|
14
|
-
children: /* @__PURE__ */ e("div", { className: s("flex items-center w-full", t.className), children: /* @__PURE__ */ e(
|
|
14
|
+
children: /* @__PURE__ */ e("div", { className: s("flex items-center w-full", t.className), children: /* @__PURE__ */ e(W, { className: "h-4 w-full" }) })
|
|
15
15
|
},
|
|
16
16
|
d
|
|
17
17
|
)) }), ae = (t) => {
|
|
@@ -51,16 +51,16 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
51
51
|
return J(() => {
|
|
52
52
|
c && g && V?.();
|
|
53
53
|
}, [g, c]), /* @__PURE__ */ e(
|
|
54
|
-
|
|
54
|
+
_,
|
|
55
55
|
{
|
|
56
56
|
className: s(
|
|
57
57
|
"w-(--radix-popper-anchor-width) max-w-none p-2"
|
|
58
58
|
),
|
|
59
59
|
align: "start",
|
|
60
60
|
container: E,
|
|
61
|
-
children: /* @__PURE__ */ i(
|
|
61
|
+
children: /* @__PURE__ */ i(q, { shouldFilter: !1, children: [
|
|
62
62
|
/* @__PURE__ */ e(
|
|
63
|
-
|
|
63
|
+
z,
|
|
64
64
|
{
|
|
65
65
|
placeholder: F,
|
|
66
66
|
value: u,
|
|
@@ -68,22 +68,22 @@ const X = (t) => /* @__PURE__ */ e("div", { className: "flex w-full flex-col gap
|
|
|
68
68
|
}
|
|
69
69
|
),
|
|
70
70
|
typeof p == "function" ? p(o) : p,
|
|
71
|
-
/* @__PURE__ */ e(
|
|
72
|
-
|
|
71
|
+
/* @__PURE__ */ e(B, { ref: b, children: /* @__PURE__ */ i(
|
|
72
|
+
K,
|
|
73
73
|
{
|
|
74
74
|
className: s(
|
|
75
75
|
!x.length && "p-0 shadow-none",
|
|
76
76
|
"px-0 py-2"
|
|
77
77
|
),
|
|
78
78
|
children: [
|
|
79
|
-
r && /* @__PURE__ */ e(
|
|
79
|
+
r && /* @__PURE__ */ e("div", { className: "pt-2 pb-0", children: /* @__PURE__ */ e(U, {}) }),
|
|
80
80
|
!r && m && /* @__PURE__ */ e(w, { children: n ? /* @__PURE__ */ i(y, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
81
81
|
/* @__PURE__ */ e("span", { children: N }),
|
|
82
82
|
typeof n == "function" ? n(o) : n
|
|
83
83
|
] }) : /* @__PURE__ */ e(y, { children: N }) }),
|
|
84
84
|
!r && !m && /* @__PURE__ */ i(w, { children: [
|
|
85
85
|
l && /* @__PURE__ */ e(
|
|
86
|
-
|
|
86
|
+
Q,
|
|
87
87
|
{
|
|
88
88
|
asChild: !0,
|
|
89
89
|
className: "w-full",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\r\nimport { PopoverContent } from '../Popover';\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '../Command';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption, ComboboxProps,\r\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\r\n ISlotProps,\r\n} from './Combobox.types';\r\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\r\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\r\nimport { useInView } from \"react-intersection-observer\";\r\nimport { Skeleton } from \"../Skeleton\";\r\n\r\ntype ComboboxRenderContentProps<Data extends object = object> =\r\n IComboboxOptionsNodeHandlersProps<Data>\r\n & {\r\n open?: boolean;\r\n\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n\r\n hasNext: boolean;\r\n\r\n loading: boolean;\r\n loadingMore: boolean;\r\n\r\n options: ComboboxOption<Data>[];\r\n search?: string;\r\n onSearch?: (term: string) => void;\r\n isEmptyList?: boolean;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n\r\n searchLabel?: string;\r\n emptyLabel?: string;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n\r\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n slotProps?: ISlotProps;\r\n\r\n popoverContainer?: HTMLElement | null;\r\n\r\n onLoadMore?: () => Promise<void>;\r\n}\r\n\r\nconst SkeletonItems = (props: HTMLAttributes<HTMLDivElement> & { length?: number }) => (\r\n <div className=\"flex w-full flex-col gap-0\">\r\n {Array.from({ length: props.length || 2 }).map((_, i) => (\r\n <div\r\n key={i}\r\n className='flex items-center min-h-10 w-full px-4'\r\n >\r\n <div className={cn('flex items-center w-full', props.className)}>\r\n <Skeleton className='h-4 w-full'/>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n);\r\n\r\n\r\nexport const ComboboxRenderContent = <Data extends object = object>(\r\n props: ComboboxRenderContentProps<Data>\r\n) => {\r\n const {\r\n open,\r\n type,\r\n search,\r\n onSearch,\r\n hasNext,\r\n loading,\r\n loadingMore,\r\n isEmptyList,\r\n onSelect,\r\n options = [],\r\n callbackStateParams,\r\n value,\r\n searchLabel = 'Type to search...',\r\n emptyLabel = 'No options',\r\n emptyAction,\r\n commandInputAction,\r\n listHeadAction,\r\n listFooterAction,\r\n slotProps = {},\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n forcePointerSelect,\r\n popoverContainer,\r\n renderList,\r\n onLoadMore,\r\n } = props;\r\n\r\n const scrollRootRef = useRef<HTMLDivElement>(null);\r\n const { ref: sentinelRef, inView } = useInView({\r\n root: scrollRootRef.current,\r\n rootMargin: \"0px 0px 200px 0px\",\r\n threshold: 0,\r\n });\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n if (!inView) return;\r\n void onLoadMore?.();\r\n }, [ inView, open ]);\r\n\r\n return (\r\n <PopoverContent\r\n className={cn(\r\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\r\n )}\r\n align=\"start\"\r\n container={popoverContainer}\r\n >\r\n <Command shouldFilter={false}>\r\n <CommandInput\r\n placeholder={searchLabel}\r\n value={search}\r\n onValueChange={onSearch}\r\n />\r\n {typeof commandInputAction === 'function'\r\n ? commandInputAction(callbackStateParams)\r\n : commandInputAction}\r\n\r\n <CommandList ref={scrollRootRef}>\r\n <CommandGroup\r\n className={cn(\r\n !options.length && 'p-0 shadow-none',\r\n 'px-0 py-2',\r\n )}\r\n >\r\n {loading && <LoadingMask fullWidth/>}\r\n {!loading && isEmptyList && (\r\n <>\r\n {emptyAction ? (\r\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\r\n <span>{emptyLabel}</span>\r\n {typeof emptyAction === 'function'\r\n ? emptyAction(callbackStateParams)\r\n : emptyAction}\r\n </CommandEmpty>\r\n ) : (\r\n <CommandEmpty>{emptyLabel}</CommandEmpty>\r\n )}\r\n </>\r\n )}\r\n\r\n {!loading && !isEmptyList && (\r\n <>\r\n {listHeadAction && (\r\n <CommandItem\r\n key='combobox-list-head-action'\r\n asChild\r\n className='w-full'\r\n >\r\n {typeof listHeadAction === 'function'\r\n ? listHeadAction(callbackStateParams)\r\n : listHeadAction}\r\n </CommandItem>\r\n )}\r\n\r\n {renderList && renderList(callbackStateParams)}\r\n\r\n {!renderList && (\r\n <ComboboxRenderOptions\r\n type={type}\r\n search={search}\r\n value={value}\r\n options={options}\r\n onSelect={onSelect}\r\n defaultNodeDisabled={defaultNodeDisabled}\r\n defaultNodeMatched={defaultNodeMatched}\r\n defaultNodeMuted={defaultNodeMuted}\r\n defaultNodeInteractive={defaultNodeInteractive}\r\n forcePointerSelect={forcePointerSelect}/>\r\n )}\r\n\r\n {hasNext && <div ref={sentinelRef} className=\"h-px w-full\"/>}\r\n {loadingMore && <SkeletonItems />}\r\n </>\r\n )}\r\n\r\n </CommandGroup>\r\n </CommandList>\r\n\r\n {/*LIST FOOTER ACTION*/}\r\n {!loading && listFooterAction && !isEmptyList && (\r\n <div\r\n data-slot=\"command-footer-wrapper\"\r\n {...((() => {\r\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\r\n return {\r\n ...rest,\r\n 'data-slot-bordered': JSON.stringify(bordered)\r\n }\r\n })())}\r\n className={cn(\r\n \"flex w-full items-center gap-2 px-0\",\r\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\r\n slotProps?.listFooterAction?.className,\r\n )}\r\n >\r\n {typeof listFooterAction === 'function'\r\n ? listFooterAction(callbackStateParams)\r\n : listFooterAction}\r\n </div>\r\n )}\r\n </Command>\r\n </PopoverContent>\r\n );\r\n}\r\n"],"names":["SkeletonItems","props","_","i","jsx","cn","Skeleton","ComboboxRenderContent","open","type","search","onSearch","hasNext","loading","loadingMore","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","popoverContainer","renderList","onLoadMore","scrollRootRef","useRef","sentinelRef","inView","useInView","useEffect","PopoverContent","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","bordered","rest"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ComboboxRenderContent.js","sources":["../../src/Combobox/ComboboxRenderContent.tsx"],"sourcesContent":["import { LoadingMask } from '../LoadingMask';\r\nimport { PopoverContent } from '../Popover';\r\nimport {\r\n Command,\r\n CommandEmpty,\r\n CommandGroup,\r\n CommandInput,\r\n CommandItem,\r\n CommandList,\r\n} from '../Command';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport {\r\n ComboboxCallbackStateParamsRenderHandler,\r\n ComboboxCallbackStateParamsUnion,\r\n ComboboxOption, ComboboxProps,\r\n ComboboxSelectedType, IComboboxOptionsNodeHandlersProps,\r\n ISlotProps,\r\n} from './Combobox.types';\r\nimport { ComboboxRenderOptions } from './ComboboxRenderOptions';\r\nimport { HTMLAttributes, useEffect, useRef } from \"react\";\r\nimport { useInView } from \"react-intersection-observer\";\r\nimport { Skeleton } from \"../Skeleton\";\r\n\r\ntype ComboboxRenderContentProps<Data extends object = object> =\r\n IComboboxOptionsNodeHandlersProps<Data>\r\n & {\r\n open?: boolean;\r\n\r\n type: ComboboxSelectedType,\r\n value: ComboboxProps<Data, 'single'>['value'] | ComboboxProps<Data, 'multi'>['value'];\r\n\r\n hasNext: boolean;\r\n\r\n loading: boolean;\r\n loadingMore: boolean;\r\n\r\n options: ComboboxOption<Data>[];\r\n search?: string;\r\n onSearch?: (term: string) => void;\r\n isEmptyList?: boolean;\r\n onSelect?: (option: ComboboxOption<Data>) => void;\r\n\r\n searchLabel?: string;\r\n emptyLabel?: string;\r\n\r\n callbackStateParams: ComboboxCallbackStateParamsUnion<Data>;\r\n\r\n commandInputAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n renderList?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listHeadAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n listFooterAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n emptyAction?: ComboboxCallbackStateParamsRenderHandler<Data>;\r\n\r\n slotProps?: ISlotProps;\r\n\r\n popoverContainer?: HTMLElement | null;\r\n\r\n onLoadMore?: () => Promise<void>;\r\n}\r\n\r\nconst SkeletonItems = (props: HTMLAttributes<HTMLDivElement> & { length?: number }) => (\r\n <div className=\"flex w-full flex-col gap-0\">\r\n {Array.from({ length: props.length || 2 }).map((_, i) => (\r\n <div\r\n key={i}\r\n className='flex items-center min-h-10 w-full px-4'\r\n >\r\n <div className={cn('flex items-center w-full', props.className)}>\r\n <Skeleton className='h-4 w-full'/>\r\n </div>\r\n </div>\r\n ))}\r\n </div>\r\n);\r\n\r\n\r\nexport const ComboboxRenderContent = <Data extends object = object>(\r\n props: ComboboxRenderContentProps<Data>\r\n) => {\r\n const {\r\n open,\r\n type,\r\n search,\r\n onSearch,\r\n hasNext,\r\n loading,\r\n loadingMore,\r\n isEmptyList,\r\n onSelect,\r\n options = [],\r\n callbackStateParams,\r\n value,\r\n searchLabel = 'Type to search...',\r\n emptyLabel = 'No options',\r\n emptyAction,\r\n commandInputAction,\r\n listHeadAction,\r\n listFooterAction,\r\n slotProps = {},\r\n defaultNodeDisabled,\r\n defaultNodeMatched,\r\n defaultNodeMuted,\r\n defaultNodeInteractive,\r\n forcePointerSelect,\r\n popoverContainer,\r\n renderList,\r\n onLoadMore,\r\n } = props;\r\n\r\n const scrollRootRef = useRef<HTMLDivElement>(null);\r\n const { ref: sentinelRef, inView } = useInView({\r\n root: scrollRootRef.current,\r\n rootMargin: \"0px 0px 200px 0px\",\r\n threshold: 0,\r\n });\r\n\r\n useEffect(() => {\r\n if (!open) return;\r\n if (!inView) return;\r\n void onLoadMore?.();\r\n }, [ inView, open ]);\r\n\r\n return (\r\n <PopoverContent\r\n className={cn(\r\n \"w-(--radix-popper-anchor-width) max-w-none p-2\"\r\n )}\r\n align=\"start\"\r\n container={popoverContainer}\r\n >\r\n <Command shouldFilter={false}>\r\n <CommandInput\r\n placeholder={searchLabel}\r\n value={search}\r\n onValueChange={onSearch}\r\n />\r\n {typeof commandInputAction === 'function'\r\n ? commandInputAction(callbackStateParams)\r\n : commandInputAction}\r\n\r\n <CommandList ref={scrollRootRef}>\r\n <CommandGroup\r\n className={cn(\r\n !options.length && 'p-0 shadow-none',\r\n 'px-0 py-2',\r\n )}\r\n >\r\n {loading && (\r\n <div className=\"pt-2 pb-0\">\r\n <LoadingMask />\r\n </div>\r\n )}\r\n {!loading && isEmptyList && (\r\n <>\r\n {emptyAction ? (\r\n <CommandEmpty className=\"flex flex-col gap-3 py-5 px-3 items-center\">\r\n <span>{emptyLabel}</span>\r\n {typeof emptyAction === 'function'\r\n ? emptyAction(callbackStateParams)\r\n : emptyAction}\r\n </CommandEmpty>\r\n ) : (\r\n <CommandEmpty>{emptyLabel}</CommandEmpty>\r\n )}\r\n </>\r\n )}\r\n\r\n {!loading && !isEmptyList && (\r\n <>\r\n {listHeadAction && (\r\n <CommandItem\r\n key='combobox-list-head-action'\r\n asChild\r\n className='w-full'\r\n >\r\n {typeof listHeadAction === 'function'\r\n ? listHeadAction(callbackStateParams)\r\n : listHeadAction}\r\n </CommandItem>\r\n )}\r\n\r\n {renderList && renderList(callbackStateParams)}\r\n\r\n {!renderList && (\r\n <ComboboxRenderOptions\r\n type={type}\r\n search={search}\r\n value={value}\r\n options={options}\r\n onSelect={onSelect}\r\n defaultNodeDisabled={defaultNodeDisabled}\r\n defaultNodeMatched={defaultNodeMatched}\r\n defaultNodeMuted={defaultNodeMuted}\r\n defaultNodeInteractive={defaultNodeInteractive}\r\n forcePointerSelect={forcePointerSelect}/>\r\n )}\r\n\r\n {hasNext && <div ref={sentinelRef} className=\"h-px w-full\"/>}\r\n {loadingMore && <SkeletonItems />}\r\n </>\r\n )}\r\n\r\n </CommandGroup>\r\n </CommandList>\r\n\r\n {/*LIST FOOTER ACTION*/}\r\n {!loading && listFooterAction && !isEmptyList && (\r\n <div\r\n data-slot=\"command-footer-wrapper\"\r\n {...((() => {\r\n const { bordered = true, ...rest } = slotProps?.listFooterAction || {};\r\n return {\r\n ...rest,\r\n 'data-slot-bordered': JSON.stringify(bordered)\r\n }\r\n })())}\r\n className={cn(\r\n \"flex w-full items-center gap-2 px-0\",\r\n (slotProps?.listFooterAction?.bordered ?? true) && 'border-t px-0 pt-2',\r\n slotProps?.listFooterAction?.className,\r\n )}\r\n >\r\n {typeof listFooterAction === 'function'\r\n ? listFooterAction(callbackStateParams)\r\n : listFooterAction}\r\n </div>\r\n )}\r\n </Command>\r\n </PopoverContent>\r\n );\r\n}\r\n"],"names":["SkeletonItems","props","_","i","jsx","cn","Skeleton","ComboboxRenderContent","open","type","search","onSearch","hasNext","loading","loadingMore","isEmptyList","onSelect","options","callbackStateParams","value","searchLabel","emptyLabel","emptyAction","commandInputAction","listHeadAction","listFooterAction","slotProps","defaultNodeDisabled","defaultNodeMatched","defaultNodeMuted","defaultNodeInteractive","forcePointerSelect","popoverContainer","renderList","onLoadMore","scrollRootRef","useRef","sentinelRef","inView","useInView","useEffect","PopoverContent","jsxs","Command","CommandInput","CommandList","CommandGroup","LoadingMask","Fragment","CommandEmpty","CommandItem","ComboboxRenderOptions","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.275",
|
|
4
4
|
"description": "UI component library for OnePlatform",
|
|
5
5
|
"author": "One Platform Development Team",
|
|
6
6
|
"keywords": [
|
|
@@ -109,9 +109,9 @@
|
|
|
109
109
|
"recharts": "^3.2.0",
|
|
110
110
|
"sonner": "^2.0.7",
|
|
111
111
|
"vaul": "^1.1.2",
|
|
112
|
-
"@oneplatformdev/tokens": "^0.1.99-beta.
|
|
113
|
-
"@oneplatformdev/
|
|
114
|
-
"@oneplatformdev/
|
|
112
|
+
"@oneplatformdev/tokens": "^0.1.99-beta.275",
|
|
113
|
+
"@oneplatformdev/hooks": "^0.1.99-beta.275",
|
|
114
|
+
"@oneplatformdev/utils": "^0.1.99-beta.275"
|
|
115
115
|
},
|
|
116
116
|
"scripts": {
|
|
117
117
|
"chromatic": "chromatic"
|