@sproutsocial/seeds-react-menu 1.10.9 → 1.11.1
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/.turbo/turbo-build.log +17 -11
- package/CHANGELOG.md +13 -0
- package/dist/esm/v2/index.js +1 -1
- package/dist/esm/v2/index.js.map +1 -1
- package/dist/esm/v3/index.js +800 -0
- package/dist/esm/v3/index.js.map +1 -0
- package/dist/index.d.mts +22 -22
- package/dist/index.d.ts +22 -22
- package/dist/v2/index.js +1 -1
- package/dist/v2/index.js.map +1 -1
- package/dist/v3/index.d.mts +295 -0
- package/dist/v3/index.d.ts +295 -0
- package/dist/v3/index.js +868 -0
- package/dist/v3/index.js.map +1 -0
- package/package.json +9 -3
- package/src/v2/Common-V2/ComboboxContent.tsx +1 -1
- package/src/v3/Common/ComboboxItem.tsx +82 -0
- package/src/v3/Common/ComboboxStyles.tsx +475 -0
- package/src/v3/Common/SelectGroup.tsx +28 -0
- package/src/v3/Common/SelectIcons.tsx +26 -0
- package/src/v3/Common/SelectItem.tsx +108 -0
- package/src/v3/Common/SelectStyles.tsx +126 -0
- package/src/v3/Common/VirtualizedComboboxList.tsx +200 -0
- package/src/v3/Common/groupItems.ts +12 -0
- package/src/v3/Common/types.ts +3 -0
- package/src/v3/ModalStories.stories.tsx +181 -0
- package/src/v3/MultiCombobox.stories.tsx +322 -0
- package/src/v3/MultiCombobox.tsx +562 -0
- package/src/v3/MultiSearchableSelect.stories.tsx +389 -0
- package/src/v3/MultiSearchableSelect.tsx +545 -0
- package/src/v3/MultiSelect.stories.tsx +300 -0
- package/src/v3/MultiSelect.tsx +498 -0
- package/src/v3/SeedsPortal.tsx +35 -0
- package/src/v3/SingleCombobox.stories.tsx +169 -0
- package/src/v3/SingleCombobox.tsx +304 -0
- package/src/v3/SingleSearchableSelect.stories.tsx +239 -0
- package/src/v3/SingleSearchableSelect.tsx +319 -0
- package/src/v3/SingleSelect.stories.tsx +227 -0
- package/src/v3/SingleSelect.tsx +245 -0
- package/src/v3/index.ts +7 -0
- package/src/v3/storyData.tsx +117 -0
- package/tsup.config.ts +1 -0
|
@@ -0,0 +1,322 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
3
|
+
import { FormField } from "@sproutsocial/seeds-react-form-field";
|
|
4
|
+
import MultiCombobox from "./MultiCombobox";
|
|
5
|
+
import { books, largeBookSet, itemToString, renderItem } from "./storyData";
|
|
6
|
+
|
|
7
|
+
const meta: Meta<typeof MultiCombobox> = {
|
|
8
|
+
title: "Really Under Development/V3/Multi Combobox",
|
|
9
|
+
component: MultiCombobox,
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<typeof MultiCombobox>;
|
|
14
|
+
|
|
15
|
+
export const Basic: Story = {
|
|
16
|
+
name: "Basic",
|
|
17
|
+
render: () => (
|
|
18
|
+
<div style={{ width: "300px" }}>
|
|
19
|
+
<FormField label="Pick books">
|
|
20
|
+
{({ id }) => (
|
|
21
|
+
<MultiCombobox
|
|
22
|
+
id={id}
|
|
23
|
+
data={books}
|
|
24
|
+
itemToString={itemToString}
|
|
25
|
+
placeholder="Search books..."
|
|
26
|
+
/>
|
|
27
|
+
)}
|
|
28
|
+
</FormField>
|
|
29
|
+
</div>
|
|
30
|
+
),
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const CustomRenderItem: Story = {
|
|
34
|
+
name: "Custom render item",
|
|
35
|
+
render: () => (
|
|
36
|
+
<div style={{ width: "300px" }}>
|
|
37
|
+
<FormField label="Pick books">
|
|
38
|
+
{({ id }) => (
|
|
39
|
+
<MultiCombobox
|
|
40
|
+
id={id}
|
|
41
|
+
data={books}
|
|
42
|
+
itemToString={itemToString}
|
|
43
|
+
renderItem={renderItem}
|
|
44
|
+
placeholder="Search books..."
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
</FormField>
|
|
48
|
+
</div>
|
|
49
|
+
),
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export const Grouped: Story = {
|
|
53
|
+
name: "Grouped",
|
|
54
|
+
render: () => (
|
|
55
|
+
<div style={{ width: "300px" }}>
|
|
56
|
+
<FormField label="Pick books">
|
|
57
|
+
{({ id }) => (
|
|
58
|
+
<MultiCombobox
|
|
59
|
+
id={id}
|
|
60
|
+
data={books}
|
|
61
|
+
itemToString={itemToString}
|
|
62
|
+
renderItem={renderItem}
|
|
63
|
+
placeholder="Search books..."
|
|
64
|
+
groupBy={(book) => book.author}
|
|
65
|
+
/>
|
|
66
|
+
)}
|
|
67
|
+
</FormField>
|
|
68
|
+
</div>
|
|
69
|
+
),
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export const DefaultSelected: Story = {
|
|
73
|
+
name: "Default selected",
|
|
74
|
+
render: () => (
|
|
75
|
+
<div style={{ width: "300px" }}>
|
|
76
|
+
<FormField label="Pick books">
|
|
77
|
+
{({ id }) => (
|
|
78
|
+
<MultiCombobox
|
|
79
|
+
id={id}
|
|
80
|
+
data={books}
|
|
81
|
+
itemToString={itemToString}
|
|
82
|
+
renderItem={renderItem}
|
|
83
|
+
placeholder="Search books..."
|
|
84
|
+
defaultSelectedItemIds={["book-1", "book-3"]}
|
|
85
|
+
/>
|
|
86
|
+
)}
|
|
87
|
+
</FormField>
|
|
88
|
+
</div>
|
|
89
|
+
),
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
export const Controlled: Story = {
|
|
93
|
+
name: "Controlled",
|
|
94
|
+
render: () => {
|
|
95
|
+
const [selectedIds, setSelectedIds] = React.useState<string[]>(["book-2"]);
|
|
96
|
+
const selected = books.filter((b) => selectedIds.includes(b.id));
|
|
97
|
+
return (
|
|
98
|
+
<div
|
|
99
|
+
style={{
|
|
100
|
+
width: "300px",
|
|
101
|
+
display: "flex",
|
|
102
|
+
flexDirection: "column",
|
|
103
|
+
gap: 16,
|
|
104
|
+
}}
|
|
105
|
+
>
|
|
106
|
+
<FormField label="Pick books">
|
|
107
|
+
{({ id }) => (
|
|
108
|
+
<MultiCombobox
|
|
109
|
+
id={id}
|
|
110
|
+
data={books}
|
|
111
|
+
itemToString={itemToString}
|
|
112
|
+
renderItem={renderItem}
|
|
113
|
+
placeholder="Search books..."
|
|
114
|
+
selectedItemIds={selectedIds}
|
|
115
|
+
onSelectedItemIdsChange={(ids: string[]) => setSelectedIds(ids)}
|
|
116
|
+
/>
|
|
117
|
+
)}
|
|
118
|
+
</FormField>
|
|
119
|
+
<div style={{ fontSize: 13 }}>
|
|
120
|
+
Selected:{" "}
|
|
121
|
+
<strong>
|
|
122
|
+
{selected.length > 0
|
|
123
|
+
? selected.map((b) => b.title).join(", ")
|
|
124
|
+
: "none"}
|
|
125
|
+
</strong>
|
|
126
|
+
</div>
|
|
127
|
+
<div style={{ display: "flex", gap: 8 }}>
|
|
128
|
+
<button onClick={() => setSelectedIds([])}>Clear all</button>
|
|
129
|
+
<button onClick={() => setSelectedIds(["book-5", "book-7"])}>
|
|
130
|
+
Select 1984 & Meditations
|
|
131
|
+
</button>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
);
|
|
135
|
+
},
|
|
136
|
+
};
|
|
137
|
+
|
|
138
|
+
export const SelectableHeadings: Story = {
|
|
139
|
+
name: "Selectable headings",
|
|
140
|
+
render: () => (
|
|
141
|
+
<div style={{ width: "300px" }}>
|
|
142
|
+
<FormField label="Pick books">
|
|
143
|
+
{({ id }) => (
|
|
144
|
+
<MultiCombobox
|
|
145
|
+
id={id}
|
|
146
|
+
data={books}
|
|
147
|
+
itemToString={itemToString}
|
|
148
|
+
renderItem={renderItem}
|
|
149
|
+
placeholder="Search books..."
|
|
150
|
+
groupBy={(book) => book.author}
|
|
151
|
+
selectHeadings
|
|
152
|
+
/>
|
|
153
|
+
)}
|
|
154
|
+
</FormField>
|
|
155
|
+
</div>
|
|
156
|
+
),
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
export const SelectAll: Story = {
|
|
160
|
+
name: "Select all",
|
|
161
|
+
render: () => (
|
|
162
|
+
<div style={{ width: "600px" }}>
|
|
163
|
+
<FormField label="Pick books">
|
|
164
|
+
{({ id }) => (
|
|
165
|
+
<MultiCombobox
|
|
166
|
+
id={id}
|
|
167
|
+
data={books}
|
|
168
|
+
itemToString={itemToString}
|
|
169
|
+
renderItem={renderItem}
|
|
170
|
+
placeholder="Search books..."
|
|
171
|
+
groupBy={(book) => book.author}
|
|
172
|
+
selectHeadings
|
|
173
|
+
selectAll
|
|
174
|
+
/>
|
|
175
|
+
)}
|
|
176
|
+
</FormField>
|
|
177
|
+
</div>
|
|
178
|
+
),
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
export const Virtualized: Story = {
|
|
182
|
+
name: "Virtualized",
|
|
183
|
+
render: () => (
|
|
184
|
+
<div style={{ width: "300px" }}>
|
|
185
|
+
<FormField label="Pick books">
|
|
186
|
+
{({ id }) => (
|
|
187
|
+
<MultiCombobox
|
|
188
|
+
id={id}
|
|
189
|
+
data={largeBookSet}
|
|
190
|
+
itemToString={itemToString}
|
|
191
|
+
renderItem={renderItem}
|
|
192
|
+
placeholder="Search books..."
|
|
193
|
+
selectHeadings
|
|
194
|
+
isVirtualized
|
|
195
|
+
/>
|
|
196
|
+
)}
|
|
197
|
+
</FormField>
|
|
198
|
+
</div>
|
|
199
|
+
),
|
|
200
|
+
};
|
|
201
|
+
|
|
202
|
+
export const MaxTokens: Story = {
|
|
203
|
+
name: "Max tokens",
|
|
204
|
+
render: () => (
|
|
205
|
+
<div style={{ width: "300px" }}>
|
|
206
|
+
<FormField label="Pick books">
|
|
207
|
+
{({ id }) => (
|
|
208
|
+
<MultiCombobox
|
|
209
|
+
id={id}
|
|
210
|
+
data={books}
|
|
211
|
+
itemToString={itemToString}
|
|
212
|
+
renderItem={renderItem}
|
|
213
|
+
placeholder="Search books..."
|
|
214
|
+
defaultSelectedItemIds={[
|
|
215
|
+
"book-1",
|
|
216
|
+
"book-2",
|
|
217
|
+
"book-3",
|
|
218
|
+
"book-4",
|
|
219
|
+
"book-5",
|
|
220
|
+
]}
|
|
221
|
+
maxTokens={2}
|
|
222
|
+
/>
|
|
223
|
+
)}
|
|
224
|
+
</FormField>
|
|
225
|
+
</div>
|
|
226
|
+
),
|
|
227
|
+
};
|
|
228
|
+
|
|
229
|
+
export const Loading: Story = {
|
|
230
|
+
name: "Loading",
|
|
231
|
+
render: () => (
|
|
232
|
+
<div style={{ width: "300px" }}>
|
|
233
|
+
<FormField label="Pick books">
|
|
234
|
+
{({ id }) => (
|
|
235
|
+
<MultiCombobox
|
|
236
|
+
id={id}
|
|
237
|
+
data={[]}
|
|
238
|
+
itemToString={itemToString}
|
|
239
|
+
placeholder="Search books..."
|
|
240
|
+
isLoading
|
|
241
|
+
/>
|
|
242
|
+
)}
|
|
243
|
+
</FormField>
|
|
244
|
+
</div>
|
|
245
|
+
),
|
|
246
|
+
};
|
|
247
|
+
|
|
248
|
+
export const LoadingWithToggle: Story = {
|
|
249
|
+
name: "Loading (toggle)",
|
|
250
|
+
render: () => {
|
|
251
|
+
const [isLoading, setIsLoading] = React.useState(true);
|
|
252
|
+
const data = isLoading ? [] : books;
|
|
253
|
+
return (
|
|
254
|
+
<div
|
|
255
|
+
style={{
|
|
256
|
+
width: "300px",
|
|
257
|
+
display: "flex",
|
|
258
|
+
flexDirection: "column",
|
|
259
|
+
gap: 16,
|
|
260
|
+
}}
|
|
261
|
+
>
|
|
262
|
+
<FormField label="Pick books">
|
|
263
|
+
{({ id }) => (
|
|
264
|
+
<MultiCombobox
|
|
265
|
+
id={id}
|
|
266
|
+
data={data}
|
|
267
|
+
itemToString={itemToString}
|
|
268
|
+
placeholder="Search books..."
|
|
269
|
+
isLoading={isLoading}
|
|
270
|
+
/>
|
|
271
|
+
)}
|
|
272
|
+
</FormField>
|
|
273
|
+
<button onClick={() => setIsLoading((v) => !v)}>
|
|
274
|
+
{isLoading ? "Finish loading" : "Set loading"}
|
|
275
|
+
</button>
|
|
276
|
+
</div>
|
|
277
|
+
);
|
|
278
|
+
},
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
export const RemoveSelectedItems: Story = {
|
|
282
|
+
name: "Remove selected items",
|
|
283
|
+
render: () => (
|
|
284
|
+
<div style={{ width: "300px" }}>
|
|
285
|
+
<FormField label="Pick books">
|
|
286
|
+
{({ id }) => (
|
|
287
|
+
<MultiCombobox
|
|
288
|
+
id={id}
|
|
289
|
+
data={books}
|
|
290
|
+
itemToString={itemToString}
|
|
291
|
+
renderItem={renderItem}
|
|
292
|
+
placeholder="Search books..."
|
|
293
|
+
removeSelectedItems
|
|
294
|
+
/>
|
|
295
|
+
)}
|
|
296
|
+
</FormField>
|
|
297
|
+
</div>
|
|
298
|
+
),
|
|
299
|
+
};
|
|
300
|
+
|
|
301
|
+
export const VirtualizedSelectAll: Story = {
|
|
302
|
+
name: "Virtualized + select all",
|
|
303
|
+
render: () => (
|
|
304
|
+
<div style={{ width: "300px" }}>
|
|
305
|
+
<FormField label="Pick books">
|
|
306
|
+
{({ id }) => (
|
|
307
|
+
<MultiCombobox
|
|
308
|
+
id={id}
|
|
309
|
+
data={largeBookSet}
|
|
310
|
+
itemToString={itemToString}
|
|
311
|
+
renderItem={renderItem}
|
|
312
|
+
placeholder="Search books..."
|
|
313
|
+
groupBy={(book) => book.author}
|
|
314
|
+
selectHeadings
|
|
315
|
+
selectAll
|
|
316
|
+
isVirtualized
|
|
317
|
+
/>
|
|
318
|
+
)}
|
|
319
|
+
</FormField>
|
|
320
|
+
</div>
|
|
321
|
+
),
|
|
322
|
+
};
|