@oneplatformdev/ui 0.1.99-beta.25 → 0.1.99-beta.251
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/Accordion/Accordion.d.ts +1 -1
- package/Accordion/Accordion.d.ts.map +1 -1
- package/Accordion/Accordion.js +48 -26
- package/Accordion/Accordion.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +3 -2
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.d.ts.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +26 -24
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/Button/Button.d.ts.map +1 -1
- package/Button/Button.js +43 -43
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js +15 -12
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.utils.d.ts +3 -0
- package/Button/Button.utils.d.ts.map +1 -0
- package/Button/Button.utils.js +14 -0
- package/Button/Button.utils.js.map +1 -0
- package/Button/buttonVariants.d.ts +2 -2
- package/Button/buttonVariants.d.ts.map +1 -1
- package/Button/buttonVariants.js +38 -6
- package/Button/buttonVariants.js.map +1 -1
- package/Button/index.d.ts +1 -0
- package/Button/index.d.ts.map +1 -1
- package/Button/index.js +8 -6
- package/Button/index.js.map +1 -1
- package/ButtonIcon/ButtonIcon.d.ts.map +1 -1
- package/ButtonIcon/ButtonIcon.js +41 -39
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +35 -33
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts +1 -1
- package/ButtonIcon/buttonIconVariants.d.ts.map +1 -1
- package/ButtonIcon/buttonIconVariants.js +3 -2
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +1439 -0
- package/Calendar/Calendar.js +5 -4
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.d.ts.map +1 -1
- package/Card/Card.js +22 -21
- package/Card/Card.js.map +1 -1
- package/Checkbox/Checkbox.d.ts.map +1 -1
- package/Checkbox/Checkbox.js +36 -34
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js +108 -0
- package/Checkbox/Checkbox.stories.js.map +1 -0
- package/Checkbox/Checkbox.types.d.ts +2 -1
- package/Checkbox/Checkbox.types.d.ts.map +1 -1
- package/Combobox/Combobox.d.ts +4 -2
- package/Combobox/Combobox.d.ts.map +1 -1
- package/Combobox/Combobox.js +183 -194
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js +174 -73
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.d.ts +68 -24
- package/Combobox/Combobox.types.d.ts.map +1 -1
- package/Combobox/Combobox.types.js +4 -1
- package/Combobox/Combobox.types.js.map +1 -1
- package/Combobox/ComboboxOptionItem.d.ts +5 -3
- package/Combobox/ComboboxOptionItem.d.ts.map +1 -1
- package/Combobox/ComboboxOptionItem.js +79 -23
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxRenderContent.d.ts +23 -0
- package/Combobox/ComboboxRenderContent.d.ts.map +1 -0
- package/Combobox/ComboboxRenderContent.js +117 -0
- package/Combobox/ComboboxRenderContent.js.map +1 -0
- package/Combobox/ComboboxRenderOptions.d.ts +4 -0
- package/Combobox/ComboboxRenderOptions.d.ts.map +1 -0
- package/Combobox/ComboboxRenderOptions.js +53 -0
- package/Combobox/ComboboxRenderOptions.js.map +1 -0
- package/Combobox/ComboboxRenderTrigger.d.ts +18 -0
- package/Combobox/ComboboxRenderTrigger.d.ts.map +1 -0
- package/Combobox/ComboboxRenderTrigger.js +120 -0
- package/Combobox/ComboboxRenderTrigger.js.map +1 -0
- package/Command/Command.d.ts +6 -1
- package/Command/Command.d.ts.map +1 -1
- package/Command/Command.js +61 -43
- package/Command/Command.js.map +1 -1
- package/ContextPopover/ContextDropdownMenu.d.ts +12 -0
- package/ContextPopover/ContextDropdownMenu.d.ts.map +1 -0
- package/ContextPopover/ContextDropdownMenu.js +41 -0
- package/ContextPopover/ContextDropdownMenu.js.map +1 -0
- package/ContextPopover/ContextPopover.d.ts +12 -0
- package/ContextPopover/ContextPopover.d.ts.map +1 -0
- package/ContextPopover/ContextPopover.js +34 -0
- package/ContextPopover/ContextPopover.js.map +1 -0
- package/ContextPopover/index.d.ts +4 -0
- package/ContextPopover/index.d.ts.map +1 -0
- package/ContextPopover/index.js +9 -0
- package/ContextPopover/index.js.map +1 -0
- package/ContextPopover/useContextPopoverHandler.d.ts +14 -0
- package/ContextPopover/useContextPopoverHandler.d.ts.map +1 -0
- package/ContextPopover/useContextPopoverHandler.js +21 -0
- package/ContextPopover/useContextPopoverHandler.js.map +1 -0
- package/DataTable/DataTable.js +16 -15
- package/DataTable/DataTable.js.map +1 -1
- package/Dialog/Dialog.d.ts +4 -1
- package/Dialog/Dialog.d.ts.map +1 -1
- package/Dialog/Dialog.js +84 -41
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +109 -0
- package/Dialog/Dialog.stories.js.map +1 -0
- 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/Dialog/useDialogClosePosition.d.ts +11 -0
- package/Dialog/useDialogClosePosition.d.ts.map +1 -0
- package/Dialog/useDialogClosePosition.js +50 -0
- package/Dialog/useDialogClosePosition.js.map +1 -0
- package/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/DropdownMenu/DropdownMenu.js +33 -20
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.d.ts.map +1 -1
- package/Dropzone/Dropzone.js +46 -28
- package/Dropzone/Dropzone.js.map +1 -1
- package/Dropzone/Dropzone.stories.js +100 -0
- package/Dropzone/Dropzone.stories.js.map +1 -0
- package/Dropzone/Dropzone.types.js +6 -6
- package/Dropzone/Dropzone.types.js.map +1 -1
- package/Form/FormRenderControl.d.ts +1 -1
- package/Form/FormRenderControl.d.ts.map +1 -1
- package/Form/FormRenderControl.js +55 -14
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/FormRenderControl.types.d.ts +6 -2
- package/Form/FormRenderControl.types.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.d.ts +4 -2
- package/FormCombobox/FormCombobox.d.ts.map +1 -1
- package/FormCombobox/FormCombobox.js +30 -17
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormCombobox/FormCombobox.types.d.ts +6 -2
- package/FormCombobox/FormCombobox.types.d.ts.map +1 -1
- package/FormDatePicker/FormDatePicker.d.ts.map +1 -1
- package/FormDatePicker/FormDatePicker.js +18 -16
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.d.ts.map +1 -1
- package/FormDropzone/FormDropzone.js +11 -9
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.d.ts.map +1 -1
- package/FormInput/FormInput.js +47 -27
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js +61 -0
- package/FormInput/FormInput.stories.js.map +1 -0
- package/FormInput/FormInput.types.d.ts +1 -0
- package/FormInput/FormInput.types.d.ts.map +1 -1
- package/FormSelect/FormSelect.d.ts.map +1 -1
- package/FormSelect/FormSelect.js +21 -17
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.d.ts.map +1 -1
- package/FormTextarea/FormTextarea.js +15 -12
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/InfoBlock/InfoBlock.d.ts +7 -0
- package/InfoBlock/InfoBlock.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.js +28 -0
- package/InfoBlock/InfoBlock.js.map +1 -0
- package/InfoBlock/InfoBlock.stories.js +50 -0
- package/InfoBlock/InfoBlock.stories.js.map +1 -0
- package/InfoBlock/InfoBlock.types.d.ts +9 -0
- package/InfoBlock/InfoBlock.types.d.ts.map +1 -0
- package/InfoBlock/InfoBlock.types.js +2 -0
- package/InfoBlock/InfoBlock.types.js.map +1 -0
- package/InfoBlock/index.d.ts +3 -0
- package/InfoBlock/index.d.ts.map +1 -0
- package/InfoBlock/index.js +5 -0
- package/InfoBlock/index.js.map +1 -0
- package/InfoBlock/infoBlockVariants.d.ts +6 -0
- package/InfoBlock/infoBlockVariants.d.ts.map +1 -0
- package/InfoBlock/infoBlockVariants.js +27 -0
- package/InfoBlock/infoBlockVariants.js.map +1 -0
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +65 -51
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +154 -0
- package/Input/Input.stories.js.map +1 -0
- package/Input/Input.types.d.ts +1 -0
- package/Input/Input.types.d.ts.map +1 -1
- package/LoadingMask/LoadingMask.d.ts +1 -2
- package/LoadingMask/LoadingMask.d.ts.map +1 -1
- package/LoadingMask/LoadingMask.js +8 -8
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/LoadingMask.types.d.ts +1 -0
- package/LoadingMask/LoadingMask.types.d.ts.map +1 -1
- package/Popover/Popover.d.ts.map +1 -1
- package/Popover/Popover.js +9 -5
- package/Popover/Popover.js.map +1 -1
- package/ScrollArea/ScrollArea.d.ts +5 -1
- package/ScrollArea/ScrollArea.d.ts.map +1 -1
- package/ScrollArea/ScrollArea.js +23 -17
- package/ScrollArea/ScrollArea.js.map +1 -1
- package/Search/Search.d.ts.map +1 -1
- package/Search/Search.js +40 -31
- package/Search/Search.js.map +1 -1
- package/Select/Select.d.ts.map +1 -1
- package/Select/Select.js +53 -48
- package/Select/Select.js.map +1 -1
- package/Select/Select.types.d.ts +4 -0
- package/Select/Select.types.d.ts.map +1 -1
- package/Select/SelectRoot.js +6 -6
- package/Select/SelectRoot.js.map +1 -1
- package/Switch/Switch.d.ts +1 -1
- package/Switch/Switch.d.ts.map +1 -1
- package/Switch/Switch.js +19 -9
- package/Switch/Switch.js.map +1 -1
- package/Switch/Switch.stories.js +62 -0
- package/Switch/Switch.stories.js.map +1 -0
- package/TablePagination/TablePagination.js +9 -8
- package/TablePagination/TablePagination.js.map +1 -1
- package/Textarea/Textarea.d.ts.map +1 -1
- package/Textarea/Textarea.js +50 -45
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.types.d.ts +3 -1
- package/Textarea/Textarea.types.d.ts.map +1 -1
- package/Toast/Toast.d.ts +1 -1
- package/Toast/toastVariants.d.ts +1 -1
- package/Tooltip/Tooltip.d.ts.map +1 -1
- package/Tooltip/Tooltip.js +51 -32
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/Tooltip.types.d.ts +10 -0
- package/Tooltip/Tooltip.types.d.ts.map +1 -1
- package/Tooltip/tooltipVariants.d.ts +4 -0
- package/Tooltip/tooltipVariants.d.ts.map +1 -0
- package/Tooltip/tooltipVariants.js +22 -0
- package/Tooltip/tooltipVariants.js.map +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +342 -332
- package/index.js.map +1 -1
- package/package.json +6 -5
- package/Combobox/ComboboxOptions.d.ts +0 -4
- package/Combobox/ComboboxOptions.d.ts.map +0 -1
- package/Combobox/ComboboxOptions.js +0 -65
- package/Combobox/ComboboxOptions.js.map +0 -1
|
@@ -1,40 +1,74 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
1
|
+
import { jsx as t, jsxs as r } from "react/jsx-runtime";
|
|
2
2
|
import { useState as g, useMemo as v } from "react";
|
|
3
|
-
import { Combobox as
|
|
4
|
-
const
|
|
5
|
-
const n = [],
|
|
6
|
-
if (
|
|
7
|
-
for (const s of
|
|
8
|
-
n.push(s), s.items?.length &&
|
|
3
|
+
import { Combobox as m } from "./Combobox.js";
|
|
4
|
+
const b = (e) => new Promise((n) => setTimeout(n, e)), O = (e = []) => {
|
|
5
|
+
const n = [], l = (a) => {
|
|
6
|
+
if (a?.length)
|
|
7
|
+
for (const s of a)
|
|
8
|
+
n.push(s), s.items?.length && l(s.items);
|
|
9
9
|
};
|
|
10
|
-
return
|
|
11
|
-
}, d = (e, n = 350) => async (
|
|
12
|
-
await
|
|
13
|
-
const
|
|
14
|
-
if (!
|
|
15
|
-
const s =
|
|
16
|
-
s.filter((
|
|
17
|
-
),
|
|
18
|
-
const
|
|
19
|
-
return !(
|
|
10
|
+
return l(e), n;
|
|
11
|
+
}, d = (e, n = 350) => async (l) => {
|
|
12
|
+
await b(n);
|
|
13
|
+
const a = (l ?? "").trim().toLowerCase();
|
|
14
|
+
if (!a) return e;
|
|
15
|
+
const s = O(e), y = new Set(
|
|
16
|
+
s.filter((c) => String(c.label).toLowerCase().includes(a)).map((c) => String(c.value))
|
|
17
|
+
), f = (c) => c.map((u) => {
|
|
18
|
+
const h = u.items?.length ? f(u.items) : void 0;
|
|
19
|
+
return !(y.has(String(u.value)) || String(u.label).toLowerCase().includes(a)) && !h?.length ? null : { ...u, items: h };
|
|
20
20
|
}).filter(Boolean);
|
|
21
|
-
return
|
|
22
|
-
},
|
|
21
|
+
return f(e);
|
|
22
|
+
}, i = [
|
|
23
23
|
{ value: "ua", label: "Ukraine" },
|
|
24
24
|
{ value: "pl", label: "Poland" },
|
|
25
25
|
{ value: "de", label: "Germany" },
|
|
26
26
|
{ value: "fr", label: "France" },
|
|
27
27
|
{ value: "es", label: "Spain" },
|
|
28
28
|
{ value: "it", label: "Italy" }
|
|
29
|
-
],
|
|
29
|
+
], p = [
|
|
30
30
|
{
|
|
31
31
|
value: "europe",
|
|
32
32
|
label: "Europe",
|
|
33
33
|
items: [
|
|
34
|
+
{
|
|
35
|
+
value: "fr",
|
|
36
|
+
label: "France",
|
|
37
|
+
items: [
|
|
38
|
+
{
|
|
39
|
+
value: "paris",
|
|
40
|
+
label: "Paris (Île-de-France)",
|
|
41
|
+
items: [
|
|
42
|
+
{ value: "paris-1", label: "Paris 1st arrondissement" },
|
|
43
|
+
{ value: "paris-3", label: "Paris 3rd arrondissement" },
|
|
44
|
+
{ value: "paris-10", label: "Paris 10th arrondissement" }
|
|
45
|
+
]
|
|
46
|
+
},
|
|
47
|
+
{ value: "marseille", label: "Marseille (Provence-Alpes-Côte d'Azur)" },
|
|
48
|
+
{
|
|
49
|
+
value: "lyon",
|
|
50
|
+
label: "Lyon (Auvergne-Rhône-Alpes)",
|
|
51
|
+
items: [
|
|
52
|
+
{ value: "lyon-presquile", label: "Presqu'île (1st/2nd)" },
|
|
53
|
+
{ value: "lyon-vieux", label: "Vieux Lyon" }
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
{ value: "toulouse", label: "Toulouse (Occitanie)" },
|
|
57
|
+
{ value: "bordeaux", label: "Bordeaux (Nouvelle-Aquitaine)" },
|
|
58
|
+
{ value: "strasbourg", label: "Strasbourg (Grand Est)" },
|
|
59
|
+
{
|
|
60
|
+
value: "rennes",
|
|
61
|
+
label: "Rennes (Brittany)",
|
|
62
|
+
items: [
|
|
63
|
+
{ value: "rennes-centre", label: "Rennes Centre" },
|
|
64
|
+
{ value: "rennes-beauregard", label: "Beauregard" }
|
|
65
|
+
]
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
},
|
|
34
69
|
{ value: "ua", label: "Ukraine" },
|
|
35
70
|
{ value: "pl", label: "Poland" },
|
|
36
|
-
{ value: "de", label: "Germany" }
|
|
37
|
-
{ value: "fr", label: "France" }
|
|
71
|
+
{ value: "de", label: "Germany" }
|
|
38
72
|
]
|
|
39
73
|
},
|
|
40
74
|
{
|
|
@@ -43,27 +77,51 @@ const h = (e) => new Promise((n) => setTimeout(n, e)), x = (e = []) => {
|
|
|
43
77
|
items: [
|
|
44
78
|
{ value: "us", label: "United States" },
|
|
45
79
|
{ value: "ca", label: "Canada" },
|
|
46
|
-
{ value: "mx", label: "Mexico" }
|
|
80
|
+
{ value: "mx", label: "Mexico" },
|
|
81
|
+
{ value: "north-america-long", label: "To long option to test wrapping. ".repeat(3) },
|
|
82
|
+
{ value: "north-america-long-single", label: "To long option to test wrapping. ".replace(/ /g, "_").repeat(3) }
|
|
47
83
|
]
|
|
48
84
|
}
|
|
49
|
-
]
|
|
50
|
-
|
|
51
|
-
|
|
85
|
+
], x = (e) => e.flatMap((n) => [
|
|
86
|
+
n,
|
|
87
|
+
...n.items ? x(n.items) : []
|
|
88
|
+
]);
|
|
89
|
+
function o({ initialValue: e = "", ...n }) {
|
|
90
|
+
const [l, a] = g(e), s = v(
|
|
52
91
|
() => n.fetchOptions,
|
|
53
92
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
54
93
|
[]
|
|
55
94
|
);
|
|
56
|
-
return /* @__PURE__ */
|
|
57
|
-
/* @__PURE__ */ t(
|
|
58
|
-
/* @__PURE__ */
|
|
95
|
+
return /* @__PURE__ */ r("div", { className: "max-w-sm", children: [
|
|
96
|
+
/* @__PURE__ */ t(m, { type: "single", ...n, value: l, onChange: a, fetchOptions: s, defaultNodeMatched: !0 }),
|
|
97
|
+
/* @__PURE__ */ r("div", { className: "mt-3 text-xs text-muted-foreground", children: [
|
|
59
98
|
"value: ",
|
|
60
|
-
/* @__PURE__ */ t("span", { className: "font-mono", children: String(
|
|
99
|
+
/* @__PURE__ */ t("span", { className: "font-mono", children: String(l || "") })
|
|
61
100
|
] })
|
|
62
101
|
] });
|
|
63
102
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
103
|
+
function C({ initialValue: e = [], ...n }) {
|
|
104
|
+
const [l, a] = g(e), s = v(() => n.fetchOptions, []);
|
|
105
|
+
return /* @__PURE__ */ r("div", { className: "max-w-sm", children: [
|
|
106
|
+
/* @__PURE__ */ t(
|
|
107
|
+
m,
|
|
108
|
+
{
|
|
109
|
+
...n,
|
|
110
|
+
type: "multi",
|
|
111
|
+
value: l,
|
|
112
|
+
onChange: a,
|
|
113
|
+
fetchOptions: s
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
/* @__PURE__ */ r("div", { className: "mt-3 text-xs text-muted-foreground", children: [
|
|
117
|
+
"value: ",
|
|
118
|
+
/* @__PURE__ */ t("span", { className: "font-mono", children: (l || []).join(", ") })
|
|
119
|
+
] })
|
|
120
|
+
] });
|
|
121
|
+
}
|
|
122
|
+
const L = {
|
|
123
|
+
title: "Combobox",
|
|
124
|
+
component: m,
|
|
67
125
|
parameters: {
|
|
68
126
|
layout: "centered"
|
|
69
127
|
},
|
|
@@ -72,7 +130,7 @@ const w = {
|
|
|
72
130
|
searchLabel: "Type to search...",
|
|
73
131
|
emptyLabel: "No options",
|
|
74
132
|
disabled: !1,
|
|
75
|
-
fetchOptions: d(
|
|
133
|
+
fetchOptions: d(i, 250)
|
|
76
134
|
},
|
|
77
135
|
argTypes: {
|
|
78
136
|
fetchOptions: { control: !1 },
|
|
@@ -87,25 +145,25 @@ const w = {
|
|
|
87
145
|
decorators: [
|
|
88
146
|
(e) => /* @__PURE__ */ t("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ t(e, {}) })
|
|
89
147
|
]
|
|
90
|
-
}, A = {
|
|
91
|
-
render: (e) => /* @__PURE__ */ t(l, { ...e })
|
|
92
|
-
}, L = {
|
|
93
|
-
render: (e) => /* @__PURE__ */ t(l, { ...e, initialValue: "pl" })
|
|
94
|
-
}, I = {
|
|
95
|
-
args: { disabled: !0 },
|
|
96
|
-
render: (e) => /* @__PURE__ */ t(l, { ...e, initialValue: "de" })
|
|
97
148
|
}, M = {
|
|
149
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
150
|
+
}, P = {
|
|
151
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e, initialValue: "pl" })
|
|
152
|
+
}, T = {
|
|
153
|
+
args: { disabled: !0 },
|
|
154
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e, initialValue: "de" })
|
|
155
|
+
}, V = {
|
|
98
156
|
args: {
|
|
99
|
-
options:
|
|
100
|
-
fetchOptions: async () =>
|
|
157
|
+
options: i,
|
|
158
|
+
fetchOptions: async () => i
|
|
101
159
|
},
|
|
102
|
-
render: (e) => /* @__PURE__ */ t(
|
|
103
|
-
},
|
|
160
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
161
|
+
}, F = {
|
|
104
162
|
args: {
|
|
105
|
-
fetchOptions: d(
|
|
163
|
+
fetchOptions: d(i, 1200)
|
|
106
164
|
},
|
|
107
|
-
render: (e) => /* @__PURE__ */ t(
|
|
108
|
-
},
|
|
165
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
166
|
+
}, k = {
|
|
109
167
|
args: {
|
|
110
168
|
emptyLabel: "Nothing found",
|
|
111
169
|
emptyAction: (e) => {
|
|
@@ -117,19 +175,19 @@ const w = {
|
|
|
117
175
|
className: "inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm",
|
|
118
176
|
disabled: !n,
|
|
119
177
|
onClick: () => {
|
|
120
|
-
const
|
|
121
|
-
e.setOptions([
|
|
178
|
+
const l = e.search.trim(), a = { value: l, label: `Create "${l}"` };
|
|
179
|
+
e.setOptions([a]), e.setLoading(!1);
|
|
122
180
|
},
|
|
123
181
|
children: "Create option"
|
|
124
182
|
}
|
|
125
183
|
);
|
|
126
184
|
}
|
|
127
185
|
},
|
|
128
|
-
render: (e) => /* @__PURE__ */ t(
|
|
129
|
-
},
|
|
186
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
187
|
+
}, B = {
|
|
130
188
|
args: {
|
|
131
|
-
commandInputAction: (e) => /* @__PURE__ */
|
|
132
|
-
/* @__PURE__ */
|
|
189
|
+
commandInputAction: (e) => /* @__PURE__ */ r("div", { className: "px-3 py-2 flex items-center justify-between text-xs text-muted-foreground", children: [
|
|
190
|
+
/* @__PURE__ */ r("span", { children: [
|
|
133
191
|
"results: ",
|
|
134
192
|
/* @__PURE__ */ t("span", { className: "font-mono", children: e.options.length })
|
|
135
193
|
] }),
|
|
@@ -146,7 +204,7 @@ const w = {
|
|
|
146
204
|
)
|
|
147
205
|
] })
|
|
148
206
|
},
|
|
149
|
-
render: (e) => /* @__PURE__ */ t(
|
|
207
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
150
208
|
}, E = {
|
|
151
209
|
args: {
|
|
152
210
|
listHeadAction: (e) => /* @__PURE__ */ t(
|
|
@@ -161,32 +219,75 @@ const w = {
|
|
|
161
219
|
}
|
|
162
220
|
)
|
|
163
221
|
},
|
|
164
|
-
render: (e) => /* @__PURE__ */ t(
|
|
165
|
-
},
|
|
222
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
223
|
+
}, I = {
|
|
166
224
|
args: {
|
|
167
|
-
|
|
225
|
+
listFooterAction: (e) => /* @__PURE__ */ t(
|
|
226
|
+
"button",
|
|
227
|
+
{
|
|
228
|
+
type: "button",
|
|
229
|
+
className: "w-full text-left min-h-10 text-sm",
|
|
230
|
+
onClick: () => {
|
|
231
|
+
e.setSearch(""), e.setOpen(!1);
|
|
232
|
+
},
|
|
233
|
+
children: "list footer action"
|
|
234
|
+
}
|
|
235
|
+
)
|
|
168
236
|
},
|
|
169
|
-
render: (e) => /* @__PURE__ */ t(
|
|
170
|
-
},
|
|
237
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
238
|
+
}, W = {
|
|
239
|
+
args: {
|
|
240
|
+
fetchOptions: d(p, 250)
|
|
241
|
+
// defaultNodeDisabled: false,
|
|
242
|
+
// defaultNodeMatched: false,
|
|
243
|
+
// defaultNodeMuted: true,
|
|
244
|
+
// defaultNodeInteractive: false,
|
|
245
|
+
},
|
|
246
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
247
|
+
}, j = {
|
|
171
248
|
args: {
|
|
172
|
-
fetchOptions: d(
|
|
249
|
+
fetchOptions: d(p, 250),
|
|
173
250
|
onMount: async (e) => {
|
|
174
|
-
await
|
|
251
|
+
await b(900), e.setOptions(x(p));
|
|
175
252
|
}
|
|
176
253
|
},
|
|
177
|
-
render: (e) => /* @__PURE__ */ t(
|
|
254
|
+
render: (e) => /* @__PURE__ */ t(C, { ...e, initialValue: ["fr", "de"] })
|
|
255
|
+
}, q = {
|
|
256
|
+
args: {
|
|
257
|
+
fetchOptions: d(i, 250),
|
|
258
|
+
onMount: async (e) => {
|
|
259
|
+
await b(900), e.setOptions(i);
|
|
260
|
+
}
|
|
261
|
+
},
|
|
262
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
263
|
+
}, R = {
|
|
264
|
+
args: {
|
|
265
|
+
renderTrigger: (e) => (console.log("state", e), /* @__PURE__ */ t(
|
|
266
|
+
"button",
|
|
267
|
+
{
|
|
268
|
+
type: "button",
|
|
269
|
+
className: "w-full",
|
|
270
|
+
onClick: () => e.setOpen((n) => !n),
|
|
271
|
+
children: e.selectedOption ? `Selected: ${e.selectedOption.label}` : "Select option..."
|
|
272
|
+
}
|
|
273
|
+
))
|
|
274
|
+
},
|
|
275
|
+
render: (e) => /* @__PURE__ */ t(o, { ...e })
|
|
178
276
|
};
|
|
179
277
|
export {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
278
|
+
M as Default,
|
|
279
|
+
T as Disabled,
|
|
280
|
+
k as EmptyStateWithAction,
|
|
281
|
+
W as NestedOptions,
|
|
282
|
+
j as NestedOptionsMulti,
|
|
283
|
+
q as OnMountPrefetch,
|
|
284
|
+
R as RenderCustomTrigger,
|
|
285
|
+
F as SlowFetchLoading,
|
|
286
|
+
B as WithCommandInputAction,
|
|
287
|
+
I as WithListFooterAction,
|
|
187
288
|
E as WithListHeadAction,
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
289
|
+
V as WithStaticOptionsProp,
|
|
290
|
+
P as WithValueSelected,
|
|
291
|
+
L as default
|
|
191
292
|
};
|
|
192
293
|
//# sourceMappingURL=Combobox.stories.js.map
|
|
@@ -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: 'UI/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 {\n ComboboxCallbackStateParams,\n ComboboxOption,\n ComboboxProps, MultiComboboxProps, SingleComboboxProps,\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 {\n value: 'fr',\n label: 'France',\n items: [\n {\n value: 'paris',\n label: 'Paris (Île-de-France)',\n items: [\n { value: 'paris-1', label: 'Paris 1st arrondissement' },\n { value: 'paris-3', label: 'Paris 3rd arrondissement' },\n { value: 'paris-10', label: 'Paris 10th arrondissement' },\n ],\n },\n { value: 'marseille', label: 'Marseille (Provence-Alpes-Côte d\\'Azur)' },\n {\n value: 'lyon',\n label: 'Lyon (Auvergne-Rhône-Alpes)',\n items: [\n { value: 'lyon-presquile', label: 'Presqu\\'île (1st/2nd)' },\n { value: 'lyon-vieux', label: 'Vieux Lyon' },\n ],\n },\n { value: 'toulouse', label: 'Toulouse (Occitanie)' },\n { value: 'bordeaux', label: 'Bordeaux (Nouvelle-Aquitaine)' },\n { value: 'strasbourg', label: 'Strasbourg (Grand Est)' },\n {\n value: 'rennes',\n label: 'Rennes (Brittany)',\n items: [\n { value: 'rennes-centre', label: 'Rennes Centre' },\n { value: 'rennes-beauregard', label: 'Beauregard' },\n ],\n },\n ]\n },\n { value: 'ua', label: 'Ukraine' },\n { value: 'pl', label: 'Poland' },\n { value: 'de', label: 'Germany' },\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 { value: 'north-america-long', label: 'To long option to test wrapping. '.repeat(3) },\n { value: 'north-america-long-single', label: 'To long option to test wrapping. '.replace(/ /g, '_').repeat(3) },\n ],\n },\n];\nconst getFlattenOptions = (options: ComboboxOption[]) => {\n return options.flatMap(option => [\n option,\n ...(option.items ? getFlattenOptions(option.items) : [])\n ]);\n};\n\nconst getAllValues = (options: ComboboxOption[]): string[] => {\n return getFlattenOptions(options).map(o => o.value)\n};\n\ntype ControlledProps<T extends ComboboxProps = ComboboxProps> = Omit<T, 'value' | 'onChange'> & {\n initialValue?: T['value'];\n};\n\nfunction ControlledCombobox({ initialValue = '', ...args }: ControlledProps<SingleComboboxProps>) {\n const [value, setValue] = useState<SingleComboboxProps['value']>(initialValue);\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 type='single' {...args} value={value} onChange={setValue} fetchOptions={fetchOptions} defaultNodeMatched />\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}\nfunction ControlledComboboxMulti({ initialValue = [], ...args }: ControlledProps<MultiComboboxProps>) {\n const [value, setValue] = useState<MultiComboboxProps['value'] | undefined>(initialValue);\n const fetchOptions = useMemo(() => args.fetchOptions, []);\n return (\n <div className=\"max-w-sm\">\n <Combobox\n {...args}\n type='multi'\n value={value}\n onChange={setValue}\n fetchOptions={fetchOptions}\n />\n <div className=\"mt-3 text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{(value || []).join(', ')}</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 min-h-10 text-sm\"\n onClick={() => {\n st.setSearch('');\n st.setOpen(false);\n }}\n >\n list footer action\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 // defaultNodeDisabled: false,\n // defaultNodeMatched: false,\n // defaultNodeMuted: true,\n // defaultNodeInteractive: false,\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 11) Multi Nested options tree */\nexport const NestedOptionsMulti: Story = {\n args: {\n fetchOptions: createFetchOptions(NESTED_OPTIONS, 250),\n onMount: async (st: ComboboxCallbackStateParams<object, 'single'>) => {\n await sleep(900);\n st.setOptions(getFlattenOptions(NESTED_OPTIONS));\n },\n },\n render: (args) => {\n const TEST_FULL = false;\n const initialValues = TEST_FULL ? getAllValues(NESTED_OPTIONS): ['fr', 'de'];\n return <ControlledComboboxMulti {...args} initialValue={initialValues} />\n },\n};\n\n/** 12) onMount initial loading (simulate prefetch on mount) */\nexport const OnMountPrefetch: Story = {\n args: {\n fetchOptions: createFetchOptions(BASE_OPTIONS, 250),\n onMount: async (st: ComboboxCallbackStateParams<object, 'multi'>) => {\n await sleep(900);\n st.setOptions(BASE_OPTIONS);\n },\n },\n render: (args) => <ControlledCombobox {...args} />,\n};\n\n/** 13) render custom trigger */\nexport const RenderCustomTrigger: Story = {\n args: {\n renderTrigger: (state) => {\n console.log('state', state);\n return (\n <button\n type=\"button\"\n className=\"w-full\"\n onClick={() => state.setOpen((o) => !o)}\n >\n {state.selectedOption ? `Selected: ${state.selectedOption.label}` : 'Select option...'}\n </button>\n )\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","getFlattenOptions","options","option","ControlledCombobox","initialValue","args","value","setValue","useState","fetchOptions","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"],"mappings":"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"}
|
|
@@ -1,50 +1,94 @@
|
|
|
1
|
-
import { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
2
|
-
export
|
|
1
|
+
import { Dispatch, HTMLAttributes, ReactNode, Ref, SetStateAction } from 'react';
|
|
2
|
+
export type ComboboxValueType = string | string[];
|
|
3
|
+
export type ComboboxSelectedType = 'single' | 'multi';
|
|
4
|
+
export declare const DEFAULT_COMBOBOX_TYPE: ComboboxSelectedType;
|
|
5
|
+
export interface ComboboxOption<Data extends object = object> {
|
|
3
6
|
value: string;
|
|
4
7
|
label: string;
|
|
5
|
-
|
|
8
|
+
node?: Data;
|
|
9
|
+
items?: ComboboxOption<Data>[];
|
|
10
|
+
path?: string[];
|
|
11
|
+
parent?: string;
|
|
12
|
+
level?: number;
|
|
13
|
+
matched?: boolean;
|
|
6
14
|
}
|
|
7
|
-
export interface ComboboxCallbackStateParams {
|
|
8
|
-
options: ComboboxOption[];
|
|
9
|
-
setOptions: Dispatch<SetStateAction<ComboboxOption[]>>;
|
|
10
|
-
selectedOption?: ComboboxOption;
|
|
11
|
-
setSelectedOption: Dispatch<SetStateAction<ComboboxOption | undefined>>;
|
|
15
|
+
export interface ComboboxCallbackStateParams<Data extends object = object, T extends ComboboxSelectedType = 'single'> {
|
|
16
|
+
options: ComboboxOption<Data>[];
|
|
17
|
+
setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>>;
|
|
12
18
|
search: string;
|
|
13
19
|
setSearch: Dispatch<SetStateAction<string>>;
|
|
20
|
+
onChangeOption: (option: ComboboxOption<Data>) => void;
|
|
14
21
|
open: boolean;
|
|
15
22
|
setOpen: Dispatch<SetStateAction<boolean>>;
|
|
16
23
|
loading: boolean;
|
|
17
24
|
setLoading: Dispatch<SetStateAction<boolean>>;
|
|
18
25
|
isEmptyList: boolean;
|
|
19
26
|
isSearchedEmptyList: boolean;
|
|
27
|
+
placeholder?: string;
|
|
28
|
+
type: T;
|
|
29
|
+
selectedOption: T extends 'single' ? ComboboxOption<Data> | undefined : ComboboxOption<Data>[];
|
|
30
|
+
setSelectedOption: T extends 'single' ? Dispatch<SetStateAction<ComboboxOption<Data> | undefined>> : Dispatch<SetStateAction<ComboboxOption<Data>[] | undefined>>;
|
|
20
31
|
}
|
|
21
|
-
export
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
32
|
+
export type ComboboxCallbackStateParamsUnion<Data extends object = object> = ComboboxCallbackStateParams<Data, 'single'> | ComboboxCallbackStateParams<Data, 'multi'>;
|
|
33
|
+
export type ComboboxCallbackStateParamsRenderHandler<Data extends object = object> = (params: ComboboxCallbackStateParamsUnion<Data>) => ReactNode;
|
|
34
|
+
export interface IComboboxOptionsNodeHandlersProps<Data extends object = object> {
|
|
35
|
+
defaultNodeOpen?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);
|
|
36
|
+
defaultNodeDisabled?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);
|
|
37
|
+
defaultNodeMatched?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);
|
|
38
|
+
defaultNodeMuted?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);
|
|
39
|
+
defaultNodeInteractive?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);
|
|
40
|
+
}
|
|
41
|
+
export interface IComboboxOptionsNodeProps<Data extends object = object> extends IComboboxOptionsNodeHandlersProps<Data> {
|
|
42
|
+
type: ComboboxSelectedType;
|
|
43
|
+
search?: string;
|
|
44
|
+
value?: ComboboxValueType;
|
|
45
|
+
option: ComboboxOption<Data>;
|
|
46
|
+
onSelect?: (option: ComboboxOption<Data>) => void;
|
|
25
47
|
deep?: number;
|
|
26
|
-
setOpen: Dispatch<SetStateAction<boolean>>;
|
|
27
48
|
}
|
|
28
|
-
export interface IComboboxOptionsProps extends Omit<IComboboxOptionsNodeProps
|
|
29
|
-
options?: ComboboxOption[];
|
|
49
|
+
export interface IComboboxOptionsProps<Data extends object = object> extends Omit<IComboboxOptionsNodeProps<Data>, 'option'>, IComboboxOptionsNodeHandlersProps<Data> {
|
|
50
|
+
options?: ComboboxOption<Data>[];
|
|
30
51
|
}
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
52
|
+
interface IListActionProps extends HTMLAttributes<HTMLDivElement> {
|
|
53
|
+
bordered?: boolean;
|
|
54
|
+
}
|
|
55
|
+
export interface ISlotProps {
|
|
56
|
+
listFooterAction?: IListActionProps;
|
|
57
|
+
}
|
|
58
|
+
export interface ComboboxBaseProps<Data extends object = object, T extends ComboboxSelectedType = 'single'> extends IComboboxOptionsNodeHandlersProps {
|
|
59
|
+
type?: T;
|
|
60
|
+
imperativeRef?: Ref<ComboboxCallbackStateParams<Data, 'single'> | ComboboxCallbackStateParams<Data, 'multi'> | null>;
|
|
34
61
|
placeholder?: string;
|
|
35
62
|
searchLabel?: string;
|
|
36
63
|
disabled?: boolean;
|
|
37
|
-
fetchOptions: (search?: string) => Promise<ComboboxOption[]>;
|
|
38
|
-
options?: ComboboxOption[];
|
|
64
|
+
fetchOptions: (search?: string) => Promise<ComboboxOption<Data>[]>;
|
|
65
|
+
options?: ComboboxOption<Data>[];
|
|
39
66
|
/** Command Empty list label*/
|
|
40
67
|
emptyLabel?: string;
|
|
41
68
|
/** Command Empty list action */
|
|
42
|
-
emptyAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
|
|
69
|
+
emptyAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;
|
|
43
70
|
/** Command Input footer action */
|
|
44
|
-
commandInputAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
|
|
71
|
+
commandInputAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;
|
|
45
72
|
/** Command List first element action */
|
|
46
|
-
listHeadAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
|
|
73
|
+
listHeadAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;
|
|
74
|
+
/** Command List footer element action */
|
|
75
|
+
listFooterAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;
|
|
47
76
|
/** Callback for load data on start component */
|
|
48
|
-
onMount?: (params: ComboboxCallbackStateParams) => Promise<void>;
|
|
77
|
+
onMount?: (params: ComboboxCallbackStateParams<Data, T>) => Promise<void>;
|
|
78
|
+
renderTrigger?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;
|
|
79
|
+
renderList?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;
|
|
80
|
+
slotProps?: ISlotProps;
|
|
81
|
+
}
|
|
82
|
+
export interface SingleComboboxProps<Data extends object = object> extends ComboboxBaseProps<Data, 'single'> {
|
|
83
|
+
type?: 'single';
|
|
84
|
+
value?: string;
|
|
85
|
+
onChange: (value: string | undefined) => void;
|
|
86
|
+
}
|
|
87
|
+
export interface MultiComboboxProps<Data extends object = object> extends ComboboxBaseProps<Data, 'multi'> {
|
|
88
|
+
type: 'multi';
|
|
89
|
+
value?: string[];
|
|
90
|
+
onChange: (value: string[] | undefined) => void;
|
|
49
91
|
}
|
|
92
|
+
export type ComboboxProps<Data extends object = object, T extends ComboboxSelectedType = 'single'> = T extends 'single' ? SingleComboboxProps<Data> : MultiComboboxProps<Data>;
|
|
93
|
+
export {};
|
|
50
94
|
//# sourceMappingURL=Combobox.types.d.ts.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"Combobox.types.d.ts","sourceRoot":"","sources":["../../src/Combobox/Combobox.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Combobox.types.js","sources":["../../src/Combobox/Combobox.types.ts"],"sourcesContent":["import { Dispatch, HTMLAttributes, ReactNode, Ref, SetStateAction } from 'react';\n\nexport type ComboboxValueType = string | string[];\nexport type ComboboxSelectedType = 'single' | 'multi';\n\nexport const DEFAULT_COMBOBOX_TYPE: ComboboxSelectedType = 'single';\n\nexport interface ComboboxOption<Data extends object = object> {\n value: string;\n label: string;\n node?: Data;\n // tree only\n items?: ComboboxOption<Data>[];\n path?: string[];\n parent?: string;\n level?: number;\n matched?: boolean;\n}\n\nexport interface ComboboxCallbackStateParams<\n Data extends object = object,\n T extends ComboboxSelectedType = 'single'\n> {\n options: ComboboxOption<Data>[];\n setOptions: Dispatch<SetStateAction<ComboboxOption<Data>[]>>\n search: string;\n setSearch: Dispatch<SetStateAction<string>>\n onChangeOption: (option: ComboboxOption<Data>) => void;\n open: boolean,\n setOpen: Dispatch<SetStateAction<boolean>>;\n loading: boolean;\n setLoading: Dispatch<SetStateAction<boolean>>;\n isEmptyList: boolean;\n isSearchedEmptyList: boolean;\n placeholder?: string;\n\n type: T;\n selectedOption: T extends 'single'\n ? ComboboxOption<Data> | undefined\n : ComboboxOption<Data>[];\n setSelectedOption: T extends 'single'\n ? Dispatch<SetStateAction<ComboboxOption<Data> | undefined>>\n : Dispatch<SetStateAction<ComboboxOption<Data>[] | undefined>>;\n}\n\nexport type ComboboxCallbackStateParamsUnion<Data extends object = object> = ComboboxCallbackStateParams<Data, 'single'> | ComboboxCallbackStateParams<Data, 'multi'>\nexport type ComboboxCallbackStateParamsRenderHandler<Data extends object = object> = (params:ComboboxCallbackStateParamsUnion<Data>) => ReactNode\n\nexport interface IComboboxOptionsNodeHandlersProps<Data extends object = object> {\n defaultNodeOpen?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeDisabled?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeMatched?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeMuted?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n defaultNodeInteractive?: boolean | ((option: ComboboxOption<Data>, deep: number) => boolean | undefined);\n}\n\nexport interface IComboboxOptionsNodeProps<Data extends object = object>\n extends IComboboxOptionsNodeHandlersProps<Data> {\n type: ComboboxSelectedType,\n search?: string;\n value?: ComboboxValueType;\n option: ComboboxOption<Data>;\n onSelect?: (option: ComboboxOption<Data>) => void;\n deep?: number;\n}\n\nexport interface IComboboxOptionsProps<Data extends object = object>\n extends Omit<IComboboxOptionsNodeProps<Data>, 'option'>, IComboboxOptionsNodeHandlersProps<Data> {\n options?: ComboboxOption<Data>[];\n}\n\ninterface IListActionProps extends HTMLAttributes<HTMLDivElement> {\n bordered?: boolean;\n}\nexport interface ISlotProps {\n listFooterAction?: IListActionProps\n}\n\nexport interface ComboboxBaseProps<\n Data extends object = object,\n T extends ComboboxSelectedType = 'single'\n> extends IComboboxOptionsNodeHandlersProps {\n type?: T;\n // ref?: Ref<ComboboxCallbackStateParams<Data, T> | null>;\n imperativeRef?: Ref<\n ComboboxCallbackStateParams<Data, 'single'>\n | ComboboxCallbackStateParams<Data, 'multi'>\n | null\n >;\n placeholder?: string;\n searchLabel?: string;\n disabled?: boolean;\n fetchOptions: (search?: string) => Promise<ComboboxOption<Data>[]>;\n options?: ComboboxOption<Data>[];\n /** Command Empty list label*/\n emptyLabel?: string;\n /** Command Empty list action */\n emptyAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Command Input footer action */\n commandInputAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Command List first element action */\n listHeadAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Command List footer element action */\n listFooterAction?: ((params: ComboboxCallbackStateParams<Data, T>) => ReactNode) | ReactNode;\n /** Callback for load data on start component */\n onMount?: (params: ComboboxCallbackStateParams<Data, T>) => Promise<void>;\n\n renderTrigger?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;\n renderList?: (params: ComboboxCallbackStateParams<Data, T>) => ReactNode;\n\n slotProps?: ISlotProps;\n}\n\nexport interface SingleComboboxProps<Data extends object = object>\n extends ComboboxBaseProps<Data, 'single'> {\n type?: 'single';\n value?: string;\n onChange: (value: string | undefined) => void;\n}\nexport interface MultiComboboxProps<Data extends object = object>\n extends ComboboxBaseProps<Data, 'multi'> {\n type: 'multi';\n value?: string[];\n onChange: (value: string[] | undefined) => void;\n}\n\nexport type ComboboxProps<\n Data extends object = object,\n T extends ComboboxSelectedType = 'single'\n> = T extends 'single'\n ? SingleComboboxProps<Data>\n : MultiComboboxProps<Data>;\n"],"names":["DEFAULT_COMBOBOX_TYPE"],"mappings":"AAKO,MAAMA,IAA8C;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
1
2
|
import { IComboboxOptionsNodeProps } from './Combobox.types';
|
|
2
|
-
export declare const ComboboxOptionItem:
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
export declare const ComboboxOptionItem: <Data extends object>(props: PropsWithChildren<IComboboxOptionsNodeProps<Data>> & {
|
|
4
|
+
onCollapseToggle?: () => void;
|
|
5
|
+
expanded?: boolean;
|
|
6
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
5
7
|
//# sourceMappingURL=ComboboxOptionItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ComboboxOptionItem.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ComboboxOptionItem.d.ts","sourceRoot":"","sources":["../../src/Combobox/ComboboxOptionItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAyB,yBAAyB,EAAE,MAAM,kBAAkB,CAAC;AAcpF,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,MAAM,EACpD,OAAO,iBAAiB,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC,GAAG;IAC1D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,4CAuHF,CAAA"}
|