@dust-tt/sparkle 0.2.210 → 0.2.211
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/dist/cjs/_index.d.ts +4 -4
- package/dist/cjs/components/Checkbox.d.ts +3 -3
- package/dist/cjs/components/Item.d.ts +1 -1
- package/dist/cjs/components/Tree.d.ts +11 -6
- package/dist/cjs/icons/solid/ArrowDownS.d.ts +4 -0
- package/dist/cjs/icons/solid/ArrowLeftS.d.ts +4 -0
- package/dist/cjs/icons/solid/ArrowRightS.d.ts +4 -0
- package/dist/cjs/icons/solid/ArrowUpS.d.ts +4 -0
- package/dist/cjs/icons/solid/ChevronDoubleLeft.d.ts +4 -0
- package/dist/cjs/icons/solid/ChevronDoubleRight.d.ts +4 -0
- package/dist/cjs/icons/solid/Company.d.ts +4 -0
- package/dist/cjs/icons/solid/Filter.d.ts +4 -0
- package/dist/cjs/icons/solid/Heart.d.ts +4 -0
- package/dist/cjs/icons/solid/History.d.ts +4 -0
- package/dist/cjs/icons/solid/Home.d.ts +4 -0
- package/dist/cjs/icons/solid/MarkPen.d.ts +4 -0
- package/dist/cjs/icons/solid/Translate.d.ts +4 -0
- package/dist/cjs/icons/solid/index.d.ts +13 -0
- package/dist/cjs/icons/stroke/ArrowDownS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ArrowLeftS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ArrowRightS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ArrowUpS.d.ts +4 -0
- package/dist/cjs/icons/stroke/ChevronDoubleLeft.d.ts +4 -0
- package/dist/cjs/icons/stroke/ChevronDoubleRight.d.ts +4 -0
- package/dist/cjs/icons/stroke/Company.d.ts +4 -0
- package/dist/cjs/icons/stroke/Filter.d.ts +4 -0
- package/dist/cjs/icons/stroke/Heart.d.ts +4 -0
- package/dist/cjs/icons/stroke/History.d.ts +4 -0
- package/dist/cjs/icons/stroke/Home.d.ts +4 -0
- package/dist/cjs/icons/stroke/MarkPen.d.ts +4 -0
- package/dist/cjs/icons/stroke/Translate.d.ts +4 -0
- package/dist/cjs/icons/stroke/index.d.ts +13 -0
- package/dist/cjs/index.js +4414 -4256
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/stories/Checkbox.stories.d.ts +2 -0
- package/dist/cjs/stories/Tree.stories.d.ts +0 -1
- package/dist/esm/_index.d.ts +4 -4
- package/dist/esm/components/Checkbox.d.ts +3 -3
- package/dist/esm/components/Item.d.ts +1 -1
- package/dist/esm/components/Tree.d.ts +11 -6
- package/dist/esm/icons/solid/ArrowDownS.d.ts +4 -0
- package/dist/esm/icons/solid/ArrowLeftS.d.ts +4 -0
- package/dist/esm/icons/solid/ArrowRightS.d.ts +4 -0
- package/dist/esm/icons/solid/ArrowUpS.d.ts +4 -0
- package/dist/esm/icons/solid/ChevronDoubleLeft.d.ts +4 -0
- package/dist/esm/icons/solid/ChevronDoubleRight.d.ts +4 -0
- package/dist/esm/icons/solid/Company.d.ts +4 -0
- package/dist/esm/icons/solid/Filter.d.ts +4 -0
- package/dist/esm/icons/solid/Heart.d.ts +4 -0
- package/dist/esm/icons/solid/History.d.ts +4 -0
- package/dist/esm/icons/solid/Home.d.ts +4 -0
- package/dist/esm/icons/solid/MarkPen.d.ts +4 -0
- package/dist/esm/icons/solid/Translate.d.ts +4 -0
- package/dist/esm/icons/solid/index.d.ts +13 -0
- package/dist/esm/icons/stroke/ArrowDownS.d.ts +4 -0
- package/dist/esm/icons/stroke/ArrowLeftS.d.ts +4 -0
- package/dist/esm/icons/stroke/ArrowRightS.d.ts +4 -0
- package/dist/esm/icons/stroke/ArrowUpS.d.ts +4 -0
- package/dist/esm/icons/stroke/ChevronDoubleLeft.d.ts +4 -0
- package/dist/esm/icons/stroke/ChevronDoubleRight.d.ts +4 -0
- package/dist/esm/icons/stroke/Company.d.ts +4 -0
- package/dist/esm/icons/stroke/Filter.d.ts +4 -0
- package/dist/esm/icons/stroke/Heart.d.ts +4 -0
- package/dist/esm/icons/stroke/History.d.ts +4 -0
- package/dist/esm/icons/stroke/Home.d.ts +4 -0
- package/dist/esm/icons/stroke/MarkPen.d.ts +4 -0
- package/dist/esm/icons/stroke/Translate.d.ts +4 -0
- package/dist/esm/icons/stroke/index.d.ts +13 -0
- package/dist/esm/index.js +4391 -4259
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/stories/Checkbox.stories.d.ts +2 -0
- package/dist/esm/stories/Tree.stories.d.ts +0 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/_index.ts +52 -0
- package/src/components/Checkbox.tsx +42 -12
- package/src/components/Item.tsx +1 -1
- package/src/components/Tree.tsx +89 -67
- package/src/components/WindowUtility.tsx +1 -2
- package/src/icons/solid/ArrowDownS.tsx +15 -0
- package/src/icons/solid/ArrowLeftS.tsx +15 -0
- package/src/icons/solid/ArrowRightS.tsx +15 -0
- package/src/icons/solid/ArrowUpS.tsx +15 -0
- package/src/icons/solid/ChevronDoubleLeft.tsx +22 -0
- package/src/icons/solid/ChevronDoubleRight.tsx +22 -0
- package/src/icons/solid/Company.tsx +20 -0
- package/src/icons/solid/Filter.tsx +18 -0
- package/src/icons/solid/Heart.tsx +18 -0
- package/src/icons/solid/History.tsx +18 -0
- package/src/icons/solid/Home.tsx +20 -0
- package/src/icons/solid/MarkPen.tsx +18 -0
- package/src/icons/solid/Translate.tsx +18 -0
- package/src/icons/solid/index.ts +13 -0
- package/src/icons/src/solid/arrow-down-s.svg +3 -0
- package/src/icons/src/solid/arrow-left-s.svg +3 -0
- package/src/icons/src/solid/arrow-right-s.svg +3 -0
- package/src/icons/src/solid/arrow-up-s.svg +3 -0
- package/src/icons/src/solid/chevron-double-left.svg +4 -0
- package/src/icons/src/solid/chevron-double-right.svg +4 -0
- package/src/icons/src/solid/company.svg +3 -0
- package/src/icons/src/solid/filter.svg +3 -0
- package/src/icons/src/solid/heart.svg +3 -0
- package/src/icons/src/solid/history.svg +3 -0
- package/src/icons/src/solid/home.svg +3 -0
- package/src/icons/src/solid/mark-pen.svg +3 -0
- package/src/icons/src/solid/translate.svg +3 -0
- package/src/icons/src/stroke/arrow-down-s.svg +3 -0
- package/src/icons/src/stroke/arrow-left-s.svg +3 -0
- package/src/icons/src/stroke/arrow-right-s.svg +3 -0
- package/src/icons/src/stroke/arrow-up-s.svg +3 -0
- package/src/icons/src/stroke/chevron-double-left.svg +4 -0
- package/src/icons/src/stroke/chevron-double-right.svg +4 -0
- package/src/icons/src/stroke/company.svg +9 -0
- package/src/icons/src/stroke/filter.svg +3 -0
- package/src/icons/src/stroke/heart.svg +3 -0
- package/src/icons/src/stroke/history.svg +3 -0
- package/src/icons/src/stroke/home.svg +3 -0
- package/src/icons/src/stroke/mark-pen.svg +3 -0
- package/src/icons/src/stroke/translate.svg +3 -0
- package/src/icons/stroke/ArrowDownS.tsx +15 -0
- package/src/icons/stroke/ArrowLeftS.tsx +15 -0
- package/src/icons/stroke/ArrowRightS.tsx +15 -0
- package/src/icons/stroke/ArrowUpS.tsx +15 -0
- package/src/icons/stroke/ChevronDoubleLeft.tsx +16 -0
- package/src/icons/stroke/ChevronDoubleRight.tsx +16 -0
- package/src/icons/stroke/Company.tsx +24 -0
- package/src/icons/stroke/Filter.tsx +15 -0
- package/src/icons/stroke/Heart.tsx +20 -0
- package/src/icons/stroke/History.tsx +18 -0
- package/src/icons/stroke/Home.tsx +20 -0
- package/src/icons/stroke/MarkPen.tsx +18 -0
- package/src/icons/stroke/Translate.tsx +18 -0
- package/src/icons/stroke/index.ts +13 -0
- package/src/logo/src/platforms/Zendesk.svg +6 -0
- package/src/lottie/collapseBar.ts +124 -124
- package/src/lottie/spinnerColor.ts +337 -337
- package/src/lottie/spinnerColorLG.ts +824 -824
- package/src/lottie/spinnerColorXS.ts +187 -187
- package/src/lottie/spinnerDark.ts +353 -353
- package/src/lottie/spinnerDarkLG.ts +824 -824
- package/src/lottie/spinnerDarkXS.ts +218 -218
- package/src/lottie/spinnerLight.ts +342 -342
- package/src/lottie/spinnerLightLG.ts +797 -797
- package/src/lottie/spinnerLightXS.ts +215 -215
- package/src/stories/Checkbox.stories.tsx +75 -6
- package/src/stories/Tree.stories.tsx +197 -226
- package/src/styles/tailwind.css +7 -9
|
@@ -8,7 +8,10 @@ import {
|
|
|
8
8
|
Chip,
|
|
9
9
|
CloudArrowDownIcon,
|
|
10
10
|
Cog6ToothIcon,
|
|
11
|
+
DocumentIcon,
|
|
11
12
|
DriveLogo,
|
|
13
|
+
EyeIcon,
|
|
14
|
+
FolderIcon,
|
|
12
15
|
IconButton,
|
|
13
16
|
IntercomLogo,
|
|
14
17
|
NotionLogo,
|
|
@@ -31,19 +34,19 @@ export const TreeExample = () => {
|
|
|
31
34
|
<div className="s-flex s-flex-col s-gap-3">
|
|
32
35
|
<div className="s-text-xl">Tree</div>
|
|
33
36
|
<div>
|
|
34
|
-
<Tree
|
|
35
|
-
<Tree.Item label="item 1 (no children)"
|
|
36
|
-
<Tree.Item label="item 2 (loading)"
|
|
37
|
+
<Tree>
|
|
38
|
+
<Tree.Item label="item 1 (no children)" visual={FolderIcon} />
|
|
39
|
+
<Tree.Item label="item 2 (loading)" visual={FolderIcon}>
|
|
37
40
|
<Tree isLoading />
|
|
38
41
|
</Tree.Item>
|
|
39
|
-
<Tree.Item label="item 3"
|
|
42
|
+
<Tree.Item label="item 3" visual={FolderIcon}>
|
|
40
43
|
<Tree>
|
|
41
44
|
<Tree.Item
|
|
42
45
|
type="leaf"
|
|
43
46
|
label="item 1"
|
|
44
47
|
checkbox={{
|
|
45
48
|
variant: "checkable",
|
|
46
|
-
checked:
|
|
49
|
+
checked: "unchecked",
|
|
47
50
|
onChange: () => {
|
|
48
51
|
return;
|
|
49
52
|
},
|
|
@@ -54,7 +57,7 @@ export const TreeExample = () => {
|
|
|
54
57
|
type="leaf"
|
|
55
58
|
checkbox={{
|
|
56
59
|
variant: "checkable",
|
|
57
|
-
checked:
|
|
60
|
+
checked: "unchecked",
|
|
58
61
|
onChange: () => {
|
|
59
62
|
return;
|
|
60
63
|
},
|
|
@@ -65,7 +68,7 @@ export const TreeExample = () => {
|
|
|
65
68
|
type="leaf"
|
|
66
69
|
checkbox={{
|
|
67
70
|
variant: "checkable",
|
|
68
|
-
checked:
|
|
71
|
+
checked: "unchecked",
|
|
69
72
|
onChange: () => {
|
|
70
73
|
return;
|
|
71
74
|
},
|
|
@@ -75,109 +78,55 @@ export const TreeExample = () => {
|
|
|
75
78
|
</Tree.Item>
|
|
76
79
|
<Tree.Item
|
|
77
80
|
label="item 4 (forced collapsed)"
|
|
78
|
-
|
|
81
|
+
visual={FolderIcon}
|
|
79
82
|
collapsed={true}
|
|
80
83
|
>
|
|
81
84
|
<Tree>
|
|
82
|
-
<Tree.Item label="item 1" />
|
|
85
|
+
<Tree.Item label="item 1" visual={DocumentIcon} />
|
|
83
86
|
</Tree>
|
|
84
87
|
</Tree.Item>
|
|
85
88
|
<Tree.Item
|
|
86
89
|
label="item 5 (forced expanded)"
|
|
87
|
-
|
|
90
|
+
visual={FolderIcon}
|
|
88
91
|
collapsed={false}
|
|
89
92
|
>
|
|
90
93
|
<Tree>
|
|
91
|
-
<Tree.Item
|
|
94
|
+
<Tree.Item
|
|
95
|
+
label="item 1"
|
|
96
|
+
visual={DocumentIcon}
|
|
97
|
+
actions={
|
|
98
|
+
<>
|
|
99
|
+
<div className="s-text-sm s-text-element-700">
|
|
100
|
+
hello
|
|
101
|
+
</div>
|
|
102
|
+
<IconButton
|
|
103
|
+
size="xs"
|
|
104
|
+
icon={EyeIcon}
|
|
105
|
+
variant="tertiary"
|
|
106
|
+
/>
|
|
107
|
+
</>
|
|
108
|
+
}
|
|
109
|
+
/>
|
|
92
110
|
</Tree>
|
|
93
111
|
</Tree.Item>
|
|
94
112
|
<Tree.Item
|
|
95
113
|
label="item 6 (default collapsed)"
|
|
96
|
-
|
|
114
|
+
visual={FolderIcon}
|
|
97
115
|
defaultCollapsed={true}
|
|
98
116
|
>
|
|
99
117
|
<Tree>
|
|
100
|
-
<Tree.Item
|
|
101
|
-
label="item 1"
|
|
102
|
-
checkbox={{
|
|
103
|
-
variant: "checkable",
|
|
104
|
-
checked: true,
|
|
105
|
-
partialChecked: true,
|
|
106
|
-
onChange: () => {
|
|
107
|
-
return;
|
|
108
|
-
},
|
|
109
|
-
}}
|
|
110
|
-
/>
|
|
111
|
-
<Tree.Item
|
|
112
|
-
label="item 2"
|
|
113
|
-
checkbox={{
|
|
114
|
-
variant: "checkable",
|
|
115
|
-
checked: true,
|
|
116
|
-
onChange: () => {
|
|
117
|
-
return;
|
|
118
|
-
},
|
|
119
|
-
}}
|
|
120
|
-
/>
|
|
121
|
-
<Tree.Item
|
|
122
|
-
label="item 3"
|
|
123
|
-
checkbox={{
|
|
124
|
-
variant: "checkable",
|
|
125
|
-
checked: false,
|
|
126
|
-
onChange: () => {
|
|
127
|
-
return;
|
|
128
|
-
},
|
|
129
|
-
}}
|
|
130
|
-
/>
|
|
131
|
-
<Tree.Item
|
|
132
|
-
label="item 4"
|
|
133
|
-
checkbox={{
|
|
134
|
-
variant: "checkable",
|
|
135
|
-
checked: false,
|
|
136
|
-
onChange: () => {
|
|
137
|
-
return;
|
|
138
|
-
},
|
|
139
|
-
}}
|
|
140
|
-
/>
|
|
141
|
-
<Tree.Item
|
|
142
|
-
label="item 5"
|
|
143
|
-
checkbox={{
|
|
144
|
-
variant: "checkable",
|
|
145
|
-
checked: false,
|
|
146
|
-
onChange: () => {
|
|
147
|
-
return;
|
|
148
|
-
},
|
|
149
|
-
}}
|
|
150
|
-
/>
|
|
118
|
+
<Tree.Item label="item 1" visual={DocumentIcon} />
|
|
151
119
|
</Tree>
|
|
152
120
|
</Tree.Item>
|
|
153
121
|
|
|
154
122
|
<Tree.Item
|
|
155
123
|
label="item 7 (default expanded)"
|
|
156
|
-
|
|
124
|
+
visual={FolderIcon}
|
|
157
125
|
defaultCollapsed={false}
|
|
158
126
|
>
|
|
159
127
|
<Tree>
|
|
160
|
-
<Tree.Item
|
|
161
|
-
|
|
162
|
-
checkbox={{
|
|
163
|
-
variant: "checkable",
|
|
164
|
-
checked: true,
|
|
165
|
-
partialChecked: true,
|
|
166
|
-
onChange: () => {
|
|
167
|
-
return;
|
|
168
|
-
},
|
|
169
|
-
}}
|
|
170
|
-
/>
|
|
171
|
-
<Tree.Item
|
|
172
|
-
label="item 2"
|
|
173
|
-
checkbox={{
|
|
174
|
-
variant: "checkable",
|
|
175
|
-
checked: true,
|
|
176
|
-
onChange: () => {
|
|
177
|
-
return;
|
|
178
|
-
},
|
|
179
|
-
}}
|
|
180
|
-
/>
|
|
128
|
+
<Tree.Item label="item 1" visual={DocumentIcon} />
|
|
129
|
+
<Tree.Item label="item 2" visual={DocumentIcon} />
|
|
181
130
|
</Tree>
|
|
182
131
|
</Tree.Item>
|
|
183
132
|
</Tree>
|
|
@@ -186,14 +135,14 @@ export const TreeExample = () => {
|
|
|
186
135
|
<div className="s-flex s-flex-col s-gap-3">
|
|
187
136
|
<div className="s-text-xl">Flat</div>
|
|
188
137
|
<div>
|
|
189
|
-
<Tree
|
|
138
|
+
<Tree>
|
|
190
139
|
<Tree.Item
|
|
191
140
|
label="item 1"
|
|
192
141
|
type="item"
|
|
193
|
-
|
|
142
|
+
visual={FolderIcon}
|
|
194
143
|
checkbox={{
|
|
195
144
|
variant: "checkable",
|
|
196
|
-
checked:
|
|
145
|
+
checked: "checked",
|
|
197
146
|
onChange: () => {
|
|
198
147
|
return;
|
|
199
148
|
},
|
|
@@ -202,10 +151,10 @@ export const TreeExample = () => {
|
|
|
202
151
|
<Tree.Item
|
|
203
152
|
label="item 2"
|
|
204
153
|
type="item"
|
|
205
|
-
|
|
154
|
+
visual={FolderIcon}
|
|
206
155
|
checkbox={{
|
|
207
156
|
variant: "checkable",
|
|
208
|
-
checked:
|
|
157
|
+
checked: "checked",
|
|
209
158
|
onChange: () => {
|
|
210
159
|
return;
|
|
211
160
|
},
|
|
@@ -214,10 +163,10 @@ export const TreeExample = () => {
|
|
|
214
163
|
<Tree.Item
|
|
215
164
|
label="item 3"
|
|
216
165
|
type="item"
|
|
217
|
-
|
|
166
|
+
visual={FolderIcon}
|
|
218
167
|
checkbox={{
|
|
219
168
|
variant: "checkable",
|
|
220
|
-
checked:
|
|
169
|
+
checked: "unchecked",
|
|
221
170
|
onChange: () => {
|
|
222
171
|
return;
|
|
223
172
|
},
|
|
@@ -226,10 +175,10 @@ export const TreeExample = () => {
|
|
|
226
175
|
<Tree.Item
|
|
227
176
|
label="item 4"
|
|
228
177
|
type="item"
|
|
229
|
-
|
|
178
|
+
visual={FolderIcon}
|
|
230
179
|
checkbox={{
|
|
231
180
|
variant: "checkable",
|
|
232
|
-
checked:
|
|
181
|
+
checked: "unchecked",
|
|
233
182
|
onChange: () => {
|
|
234
183
|
return;
|
|
235
184
|
},
|
|
@@ -238,10 +187,10 @@ export const TreeExample = () => {
|
|
|
238
187
|
<Tree.Item
|
|
239
188
|
label="item 5"
|
|
240
189
|
type="item"
|
|
241
|
-
|
|
190
|
+
visual={FolderIcon}
|
|
242
191
|
checkbox={{
|
|
243
192
|
variant: "checkable",
|
|
244
|
-
checked:
|
|
193
|
+
checked: "unchecked",
|
|
245
194
|
onChange: () => {
|
|
246
195
|
return;
|
|
247
196
|
},
|
|
@@ -256,11 +205,11 @@ export const TreeExample = () => {
|
|
|
256
205
|
<Tree>
|
|
257
206
|
<Tree.Item
|
|
258
207
|
label="Intercom"
|
|
208
|
+
visual={IntercomLogo}
|
|
259
209
|
type="item"
|
|
260
|
-
visual={<IntercomLogo />}
|
|
261
210
|
checkbox={{
|
|
262
211
|
variant: "checkable",
|
|
263
|
-
checked:
|
|
212
|
+
checked: "unchecked",
|
|
264
213
|
onChange: () => {
|
|
265
214
|
return;
|
|
266
215
|
},
|
|
@@ -269,10 +218,10 @@ export const TreeExample = () => {
|
|
|
269
218
|
<Tree.Item
|
|
270
219
|
label="Notion"
|
|
271
220
|
type="item"
|
|
272
|
-
visual={
|
|
221
|
+
visual={NotionLogo}
|
|
273
222
|
checkbox={{
|
|
274
223
|
variant: "checkable",
|
|
275
|
-
checked:
|
|
224
|
+
checked: "unchecked",
|
|
276
225
|
onChange: () => {
|
|
277
226
|
return;
|
|
278
227
|
},
|
|
@@ -281,10 +230,10 @@ export const TreeExample = () => {
|
|
|
281
230
|
<Tree.Item
|
|
282
231
|
label="Slack"
|
|
283
232
|
type="item"
|
|
284
|
-
visual={
|
|
233
|
+
visual={SlackLogo}
|
|
285
234
|
checkbox={{
|
|
286
235
|
variant: "checkable",
|
|
287
|
-
checked:
|
|
236
|
+
checked: "unchecked",
|
|
288
237
|
onChange: () => {
|
|
289
238
|
return;
|
|
290
239
|
},
|
|
@@ -293,10 +242,10 @@ export const TreeExample = () => {
|
|
|
293
242
|
<Tree.Item
|
|
294
243
|
label="Dust"
|
|
295
244
|
type="item"
|
|
296
|
-
visual={
|
|
245
|
+
visual={Dust}
|
|
297
246
|
checkbox={{
|
|
298
247
|
variant: "checkable",
|
|
299
|
-
checked:
|
|
248
|
+
checked: "unchecked",
|
|
300
249
|
onChange: () => {
|
|
301
250
|
return;
|
|
302
251
|
},
|
|
@@ -305,25 +254,74 @@ export const TreeExample = () => {
|
|
|
305
254
|
</Tree>
|
|
306
255
|
</div>
|
|
307
256
|
</div>
|
|
257
|
+
<div className="s-flex s-flex-col s-gap-3">
|
|
258
|
+
<div className="s-text-xl">Nav bar</div>
|
|
259
|
+
<div>
|
|
260
|
+
<Tree variant="navigator">
|
|
261
|
+
<Tree.Item
|
|
262
|
+
label="Intercom"
|
|
263
|
+
visual={IntercomLogo}
|
|
264
|
+
onItemClick={() => console.log("Clickable")}
|
|
265
|
+
isSelected={true}
|
|
266
|
+
size="md"
|
|
267
|
+
>
|
|
268
|
+
<Tree variant="navigator" tailwindIconTextColor="s-text-brand">
|
|
269
|
+
<Tree.Item label="item 1" visual={FolderIcon}>
|
|
270
|
+
<Tree variant="navigator">
|
|
271
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
272
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
273
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
274
|
+
</Tree>
|
|
275
|
+
</Tree.Item>
|
|
276
|
+
<Tree.Item
|
|
277
|
+
label="item 2"
|
|
278
|
+
visual={FolderIcon}
|
|
279
|
+
tailwindIconTextColor="s-text-brand"
|
|
280
|
+
>
|
|
281
|
+
<Tree variant="navigator">
|
|
282
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
283
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
284
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
285
|
+
</Tree>
|
|
286
|
+
</Tree.Item>
|
|
287
|
+
<Tree.Item
|
|
288
|
+
label="item 3"
|
|
289
|
+
visual={FolderIcon}
|
|
290
|
+
tailwindIconTextColor="s-text-brand"
|
|
291
|
+
>
|
|
292
|
+
<Tree variant="navigator">
|
|
293
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
294
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
295
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
296
|
+
</Tree>
|
|
297
|
+
</Tree.Item>
|
|
298
|
+
</Tree>
|
|
299
|
+
</Tree.Item>
|
|
300
|
+
<Tree.Item label="Notion" visual={NotionLogo} size="md" />
|
|
301
|
+
<Tree.Item label="Slack" visual={SlackLogo} size="md" />
|
|
302
|
+
<Tree.Item label="Dust" visual={Dust} size="md" />
|
|
303
|
+
</Tree>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
308
306
|
</div>
|
|
309
307
|
|
|
310
308
|
<div className="s-flex s-gap-10">
|
|
311
309
|
<div className="s-flex s-flex-col s-gap-3">
|
|
312
310
|
<div className="s-text-xl">Tree</div>
|
|
313
311
|
<div>
|
|
314
|
-
<Tree>
|
|
315
|
-
<Tree.Item label="item 1 (no children)"
|
|
316
|
-
<Tree.Item label="item 2 (loading)"
|
|
312
|
+
<Tree isBoxed>
|
|
313
|
+
<Tree.Item label="item 1 (no children)" visual={FolderIcon} />
|
|
314
|
+
<Tree.Item label="item 2 (loading)" visual={FolderIcon}>
|
|
317
315
|
<Tree isLoading />
|
|
318
316
|
</Tree.Item>
|
|
319
|
-
<Tree.Item label="item 3"
|
|
317
|
+
<Tree.Item label="item 3" visual={FolderIcon}>
|
|
320
318
|
<Tree>
|
|
321
319
|
<Tree.Item
|
|
322
320
|
type="leaf"
|
|
323
321
|
label="item 1"
|
|
324
322
|
checkbox={{
|
|
325
323
|
variant: "checkable",
|
|
326
|
-
checked:
|
|
324
|
+
checked: "unchecked",
|
|
327
325
|
onChange: () => {
|
|
328
326
|
return;
|
|
329
327
|
},
|
|
@@ -334,7 +332,7 @@ export const TreeExample = () => {
|
|
|
334
332
|
type="leaf"
|
|
335
333
|
checkbox={{
|
|
336
334
|
variant: "checkable",
|
|
337
|
-
checked:
|
|
335
|
+
checked: "unchecked",
|
|
338
336
|
onChange: () => {
|
|
339
337
|
return;
|
|
340
338
|
},
|
|
@@ -345,7 +343,7 @@ export const TreeExample = () => {
|
|
|
345
343
|
type="leaf"
|
|
346
344
|
checkbox={{
|
|
347
345
|
variant: "checkable",
|
|
348
|
-
checked:
|
|
346
|
+
checked: "unchecked",
|
|
349
347
|
onChange: () => {
|
|
350
348
|
return;
|
|
351
349
|
},
|
|
@@ -355,7 +353,7 @@ export const TreeExample = () => {
|
|
|
355
353
|
</Tree.Item>
|
|
356
354
|
<Tree.Item
|
|
357
355
|
label="item 4 (forced collapsed)"
|
|
358
|
-
|
|
356
|
+
visual={FolderIcon}
|
|
359
357
|
collapsed={true}
|
|
360
358
|
>
|
|
361
359
|
<Tree>
|
|
@@ -364,7 +362,7 @@ export const TreeExample = () => {
|
|
|
364
362
|
</Tree.Item>
|
|
365
363
|
<Tree.Item
|
|
366
364
|
label="item 5 (forced expanded)"
|
|
367
|
-
|
|
365
|
+
visual={FolderIcon}
|
|
368
366
|
collapsed={false}
|
|
369
367
|
>
|
|
370
368
|
<Tree>
|
|
@@ -373,7 +371,7 @@ export const TreeExample = () => {
|
|
|
373
371
|
</Tree.Item>
|
|
374
372
|
<Tree.Item
|
|
375
373
|
label="item 6 (default collapsed)"
|
|
376
|
-
|
|
374
|
+
visual={FolderIcon}
|
|
377
375
|
defaultCollapsed={true}
|
|
378
376
|
>
|
|
379
377
|
<Tree>
|
|
@@ -381,8 +379,7 @@ export const TreeExample = () => {
|
|
|
381
379
|
label="item 1"
|
|
382
380
|
checkbox={{
|
|
383
381
|
variant: "checkable",
|
|
384
|
-
checked:
|
|
385
|
-
partialChecked: true,
|
|
382
|
+
checked: "partial",
|
|
386
383
|
onChange: () => {
|
|
387
384
|
return;
|
|
388
385
|
},
|
|
@@ -392,7 +389,7 @@ export const TreeExample = () => {
|
|
|
392
389
|
label="item 2"
|
|
393
390
|
checkbox={{
|
|
394
391
|
variant: "checkable",
|
|
395
|
-
checked:
|
|
392
|
+
checked: "checked",
|
|
396
393
|
onChange: () => {
|
|
397
394
|
return;
|
|
398
395
|
},
|
|
@@ -402,7 +399,7 @@ export const TreeExample = () => {
|
|
|
402
399
|
label="item 3"
|
|
403
400
|
checkbox={{
|
|
404
401
|
variant: "checkable",
|
|
405
|
-
checked:
|
|
402
|
+
checked: "unchecked",
|
|
406
403
|
onChange: () => {
|
|
407
404
|
return;
|
|
408
405
|
},
|
|
@@ -412,7 +409,7 @@ export const TreeExample = () => {
|
|
|
412
409
|
label="item 4"
|
|
413
410
|
checkbox={{
|
|
414
411
|
variant: "checkable",
|
|
415
|
-
checked:
|
|
412
|
+
checked: "unchecked",
|
|
416
413
|
onChange: () => {
|
|
417
414
|
return;
|
|
418
415
|
},
|
|
@@ -422,7 +419,7 @@ export const TreeExample = () => {
|
|
|
422
419
|
label="item 5"
|
|
423
420
|
checkbox={{
|
|
424
421
|
variant: "checkable",
|
|
425
|
-
checked:
|
|
422
|
+
checked: "unchecked",
|
|
426
423
|
onChange: () => {
|
|
427
424
|
return;
|
|
428
425
|
},
|
|
@@ -433,7 +430,7 @@ export const TreeExample = () => {
|
|
|
433
430
|
|
|
434
431
|
<Tree.Item
|
|
435
432
|
label="item 7 (default expanded)"
|
|
436
|
-
|
|
433
|
+
visual={FolderIcon}
|
|
437
434
|
defaultCollapsed={false}
|
|
438
435
|
>
|
|
439
436
|
<Tree>
|
|
@@ -441,8 +438,7 @@ export const TreeExample = () => {
|
|
|
441
438
|
label="item 1"
|
|
442
439
|
checkbox={{
|
|
443
440
|
variant: "checkable",
|
|
444
|
-
checked:
|
|
445
|
-
partialChecked: true,
|
|
441
|
+
checked: "partial",
|
|
446
442
|
onChange: () => {
|
|
447
443
|
return;
|
|
448
444
|
},
|
|
@@ -452,7 +448,7 @@ export const TreeExample = () => {
|
|
|
452
448
|
label="item 2"
|
|
453
449
|
checkbox={{
|
|
454
450
|
variant: "checkable",
|
|
455
|
-
checked:
|
|
451
|
+
checked: "checked",
|
|
456
452
|
onChange: () => {
|
|
457
453
|
return;
|
|
458
454
|
},
|
|
@@ -466,14 +462,14 @@ export const TreeExample = () => {
|
|
|
466
462
|
<div className="s-flex s-flex-col s-gap-3">
|
|
467
463
|
<div className="s-text-xl">Flat</div>
|
|
468
464
|
<div>
|
|
469
|
-
<Tree>
|
|
465
|
+
<Tree isBoxed>
|
|
470
466
|
<Tree.Item
|
|
471
467
|
label="item 1"
|
|
472
468
|
type="item"
|
|
473
|
-
|
|
469
|
+
visual={FolderIcon}
|
|
474
470
|
checkbox={{
|
|
475
471
|
variant: "checkable",
|
|
476
|
-
checked:
|
|
472
|
+
checked: "checked",
|
|
477
473
|
onChange: () => {
|
|
478
474
|
return;
|
|
479
475
|
},
|
|
@@ -482,10 +478,10 @@ export const TreeExample = () => {
|
|
|
482
478
|
<Tree.Item
|
|
483
479
|
label="item 2"
|
|
484
480
|
type="item"
|
|
485
|
-
|
|
481
|
+
visual={FolderIcon}
|
|
486
482
|
checkbox={{
|
|
487
483
|
variant: "checkable",
|
|
488
|
-
checked:
|
|
484
|
+
checked: "checked",
|
|
489
485
|
onChange: () => {
|
|
490
486
|
return;
|
|
491
487
|
},
|
|
@@ -494,10 +490,10 @@ export const TreeExample = () => {
|
|
|
494
490
|
<Tree.Item
|
|
495
491
|
label="item 3"
|
|
496
492
|
type="item"
|
|
497
|
-
|
|
493
|
+
visual={FolderIcon}
|
|
498
494
|
checkbox={{
|
|
499
495
|
variant: "checkable",
|
|
500
|
-
checked:
|
|
496
|
+
checked: "unchecked",
|
|
501
497
|
onChange: () => {
|
|
502
498
|
return;
|
|
503
499
|
},
|
|
@@ -506,10 +502,10 @@ export const TreeExample = () => {
|
|
|
506
502
|
<Tree.Item
|
|
507
503
|
label="item 4"
|
|
508
504
|
type="item"
|
|
509
|
-
|
|
505
|
+
visual={FolderIcon}
|
|
510
506
|
checkbox={{
|
|
511
507
|
variant: "checkable",
|
|
512
|
-
checked:
|
|
508
|
+
checked: "unchecked",
|
|
513
509
|
onChange: () => {
|
|
514
510
|
return;
|
|
515
511
|
},
|
|
@@ -518,10 +514,10 @@ export const TreeExample = () => {
|
|
|
518
514
|
<Tree.Item
|
|
519
515
|
label="item 5"
|
|
520
516
|
type="item"
|
|
521
|
-
|
|
517
|
+
visual={FolderIcon}
|
|
522
518
|
checkbox={{
|
|
523
519
|
variant: "checkable",
|
|
524
|
-
checked:
|
|
520
|
+
checked: "unchecked",
|
|
525
521
|
onChange: () => {
|
|
526
522
|
return;
|
|
527
523
|
},
|
|
@@ -537,10 +533,10 @@ export const TreeExample = () => {
|
|
|
537
533
|
<Tree.Item
|
|
538
534
|
label="Intercom"
|
|
539
535
|
type="item"
|
|
540
|
-
visual={
|
|
536
|
+
visual={IntercomLogo}
|
|
541
537
|
checkbox={{
|
|
542
538
|
variant: "checkable",
|
|
543
|
-
checked:
|
|
539
|
+
checked: "unchecked",
|
|
544
540
|
onChange: () => {
|
|
545
541
|
return;
|
|
546
542
|
},
|
|
@@ -549,10 +545,10 @@ export const TreeExample = () => {
|
|
|
549
545
|
<Tree.Item
|
|
550
546
|
label="Notion"
|
|
551
547
|
type="item"
|
|
552
|
-
visual={
|
|
548
|
+
visual={NotionLogo}
|
|
553
549
|
checkbox={{
|
|
554
550
|
variant: "checkable",
|
|
555
|
-
checked:
|
|
551
|
+
checked: "unchecked",
|
|
556
552
|
onChange: () => {
|
|
557
553
|
return;
|
|
558
554
|
},
|
|
@@ -561,10 +557,10 @@ export const TreeExample = () => {
|
|
|
561
557
|
<Tree.Item
|
|
562
558
|
label="Slack"
|
|
563
559
|
type="item"
|
|
564
|
-
visual={
|
|
560
|
+
visual={SlackLogo}
|
|
565
561
|
checkbox={{
|
|
566
562
|
variant: "checkable",
|
|
567
|
-
checked:
|
|
563
|
+
checked: "unchecked",
|
|
568
564
|
onChange: () => {
|
|
569
565
|
return;
|
|
570
566
|
},
|
|
@@ -573,10 +569,10 @@ export const TreeExample = () => {
|
|
|
573
569
|
<Tree.Item
|
|
574
570
|
label="Dust"
|
|
575
571
|
type="item"
|
|
576
|
-
visual={
|
|
572
|
+
visual={Dust}
|
|
577
573
|
checkbox={{
|
|
578
574
|
variant: "checkable",
|
|
579
|
-
checked:
|
|
575
|
+
checked: "unchecked",
|
|
580
576
|
onChange: () => {
|
|
581
577
|
return;
|
|
582
578
|
},
|
|
@@ -585,76 +581,51 @@ export const TreeExample = () => {
|
|
|
585
581
|
</Tree>
|
|
586
582
|
</div>
|
|
587
583
|
</div>
|
|
588
|
-
<
|
|
584
|
+
<div className="s-flex s-flex-col s-gap-3">
|
|
585
|
+
<div className="s-text-xl">Nav bar</div>
|
|
586
|
+
<div>
|
|
587
|
+
<Tree isBoxed variant="navigator">
|
|
588
|
+
<Tree.Item
|
|
589
|
+
label="Intercom"
|
|
590
|
+
visual={IntercomLogo}
|
|
591
|
+
onItemClick={() => console.log("Clickable")}
|
|
592
|
+
isSelected={true}
|
|
593
|
+
>
|
|
594
|
+
<Tree tailwindIconTextColor="s-text-brand">
|
|
595
|
+
<Tree.Item label="item 1" visual={FolderIcon}>
|
|
596
|
+
<Tree>
|
|
597
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
598
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
599
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
600
|
+
</Tree>
|
|
601
|
+
</Tree.Item>
|
|
602
|
+
<Tree.Item label="item 2" visual={FolderIcon}>
|
|
603
|
+
<Tree>
|
|
604
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
605
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
606
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
607
|
+
</Tree>
|
|
608
|
+
</Tree.Item>
|
|
609
|
+
<Tree.Item label="item 3" visual={FolderIcon}>
|
|
610
|
+
<Tree>
|
|
611
|
+
<Tree.Item label="item 1" visual={FolderIcon} />
|
|
612
|
+
<Tree.Item label="item 2" visual={FolderIcon} />
|
|
613
|
+
<Tree.Item label="item 3" visual={FolderIcon} />
|
|
614
|
+
</Tree>
|
|
615
|
+
</Tree.Item>
|
|
616
|
+
</Tree>
|
|
617
|
+
</Tree.Item>
|
|
618
|
+
<Tree.Item label="Notion" visual={NotionLogo} />
|
|
619
|
+
<Tree.Item label="Slack" visual={SlackLogo} />
|
|
620
|
+
<Tree.Item label="Dust" visual={Dust} />
|
|
621
|
+
</Tree>
|
|
622
|
+
</div>
|
|
623
|
+
</div>
|
|
589
624
|
</div>
|
|
590
625
|
</div>
|
|
591
626
|
);
|
|
592
627
|
};
|
|
593
628
|
|
|
594
|
-
export const DummyNavBar = () => {
|
|
595
|
-
return <div className="s-flex s-flex-col s-gap-3">
|
|
596
|
-
<div className="s-text-xl">Nav bar</div>
|
|
597
|
-
<div>
|
|
598
|
-
<Tree isBoxed>
|
|
599
|
-
<Tree.Item
|
|
600
|
-
label="Intercom"
|
|
601
|
-
visual={<IntercomLogo />}
|
|
602
|
-
onItemClick={() => console.log("Clickable")}
|
|
603
|
-
isSelected={true}
|
|
604
|
-
>
|
|
605
|
-
<Tree>
|
|
606
|
-
<Tree.Item
|
|
607
|
-
type="leaf"
|
|
608
|
-
label="item 1"
|
|
609
|
-
checkbox={{
|
|
610
|
-
variant: "checkable",
|
|
611
|
-
checked: false,
|
|
612
|
-
onChange: () => {
|
|
613
|
-
return;
|
|
614
|
-
},
|
|
615
|
-
}}
|
|
616
|
-
/>
|
|
617
|
-
<Tree.Item
|
|
618
|
-
label="item 2"
|
|
619
|
-
type="leaf"
|
|
620
|
-
checkbox={{
|
|
621
|
-
variant: "checkable",
|
|
622
|
-
checked: false,
|
|
623
|
-
onChange: () => {
|
|
624
|
-
return;
|
|
625
|
-
},
|
|
626
|
-
}}
|
|
627
|
-
/>
|
|
628
|
-
<Tree.Item
|
|
629
|
-
label="item 3"
|
|
630
|
-
type="leaf"
|
|
631
|
-
checkbox={{
|
|
632
|
-
variant: "checkable",
|
|
633
|
-
checked: false,
|
|
634
|
-
onChange: () => {
|
|
635
|
-
return;
|
|
636
|
-
},
|
|
637
|
-
}}
|
|
638
|
-
/>
|
|
639
|
-
</Tree>
|
|
640
|
-
</Tree.Item>
|
|
641
|
-
<Tree.Item
|
|
642
|
-
label="Notion"
|
|
643
|
-
visual={<NotionLogo />}
|
|
644
|
-
/>
|
|
645
|
-
<Tree.Item
|
|
646
|
-
label="Slack"
|
|
647
|
-
visual={<SlackLogo />}
|
|
648
|
-
/>
|
|
649
|
-
<Tree.Item
|
|
650
|
-
label="Dust"
|
|
651
|
-
visual={<Dust />}
|
|
652
|
-
/>
|
|
653
|
-
</Tree>
|
|
654
|
-
</div>
|
|
655
|
-
</div>;
|
|
656
|
-
}
|
|
657
|
-
|
|
658
629
|
export const SelectDataSourceExample = () => {
|
|
659
630
|
return (
|
|
660
631
|
<div className="s-flex s-w-full s-flex-col s-gap-10">
|
|
@@ -665,7 +636,7 @@ export const SelectDataSourceExample = () => {
|
|
|
665
636
|
<Tree>
|
|
666
637
|
<Tree.Item
|
|
667
638
|
label="Intercom"
|
|
668
|
-
visual={
|
|
639
|
+
visual={IntercomLogo}
|
|
669
640
|
size="md"
|
|
670
641
|
areActionsFading={false}
|
|
671
642
|
actions={
|
|
@@ -687,7 +658,7 @@ export const SelectDataSourceExample = () => {
|
|
|
687
658
|
<Tree.Item
|
|
688
659
|
label="Slack"
|
|
689
660
|
collapsed={true}
|
|
690
|
-
visual={
|
|
661
|
+
visual={SlackLogo}
|
|
691
662
|
areActionsFading={false}
|
|
692
663
|
actions={
|
|
693
664
|
<div className="s-flex s-flex-row s-items-center s-justify-center s-gap-3">
|
|
@@ -708,7 +679,7 @@ export const SelectDataSourceExample = () => {
|
|
|
708
679
|
/>
|
|
709
680
|
<Tree.Item
|
|
710
681
|
label="Notion"
|
|
711
|
-
visual={
|
|
682
|
+
visual={NotionLogo}
|
|
712
683
|
areActionsFading={false}
|
|
713
684
|
size="md"
|
|
714
685
|
actions={
|
|
@@ -737,7 +708,7 @@ export const SelectDataSourceExample = () => {
|
|
|
737
708
|
</Tree.Item>
|
|
738
709
|
<Tree.Item
|
|
739
710
|
label="Google Drive"
|
|
740
|
-
visual={
|
|
711
|
+
visual={DriveLogo}
|
|
741
712
|
areActionsFading={false}
|
|
742
713
|
size="md"
|
|
743
714
|
defaultCollapsed={true}
|
|
@@ -768,11 +739,11 @@ export const SelectDataSourceExample = () => {
|
|
|
768
739
|
<Tree>
|
|
769
740
|
<Tree.Item
|
|
770
741
|
label="Intercom"
|
|
771
|
-
visual={
|
|
742
|
+
visual={IntercomLogo}
|
|
772
743
|
size="md"
|
|
773
744
|
checkbox={{
|
|
774
745
|
variant: "checkable",
|
|
775
|
-
checked:
|
|
746
|
+
checked: "unchecked",
|
|
776
747
|
onChange: () => {
|
|
777
748
|
return;
|
|
778
749
|
},
|
|
@@ -781,11 +752,11 @@ export const SelectDataSourceExample = () => {
|
|
|
781
752
|
<Tree.Item
|
|
782
753
|
label="Slack"
|
|
783
754
|
collapsed={true}
|
|
784
|
-
visual={
|
|
755
|
+
visual={SlackLogo}
|
|
785
756
|
size="md"
|
|
786
757
|
checkbox={{
|
|
787
758
|
variant: "checkable",
|
|
788
|
-
checked:
|
|
759
|
+
checked: "unchecked",
|
|
789
760
|
onChange: () => {
|
|
790
761
|
return;
|
|
791
762
|
},
|
|
@@ -793,11 +764,11 @@ export const SelectDataSourceExample = () => {
|
|
|
793
764
|
/>
|
|
794
765
|
<Tree.Item
|
|
795
766
|
label="Notion"
|
|
796
|
-
visual={
|
|
767
|
+
visual={NotionLogo}
|
|
797
768
|
size="md"
|
|
798
769
|
checkbox={{
|
|
799
770
|
variant: "checkable",
|
|
800
|
-
checked:
|
|
771
|
+
checked: "unchecked",
|
|
801
772
|
onChange: () => {
|
|
802
773
|
return;
|
|
803
774
|
},
|
|
@@ -809,7 +780,7 @@ export const SelectDataSourceExample = () => {
|
|
|
809
780
|
label="item 1"
|
|
810
781
|
checkbox={{
|
|
811
782
|
variant: "checkable",
|
|
812
|
-
checked:
|
|
783
|
+
checked: "unchecked",
|
|
813
784
|
onChange: () => {
|
|
814
785
|
return;
|
|
815
786
|
},
|
|
@@ -819,7 +790,7 @@ export const SelectDataSourceExample = () => {
|
|
|
819
790
|
label="item 2"
|
|
820
791
|
checkbox={{
|
|
821
792
|
variant: "checkable",
|
|
822
|
-
checked:
|
|
793
|
+
checked: "unchecked",
|
|
823
794
|
onChange: () => {
|
|
824
795
|
return;
|
|
825
796
|
},
|
|
@@ -829,7 +800,7 @@ export const SelectDataSourceExample = () => {
|
|
|
829
800
|
label="item 3"
|
|
830
801
|
checkbox={{
|
|
831
802
|
variant: "checkable",
|
|
832
|
-
checked:
|
|
803
|
+
checked: "unchecked",
|
|
833
804
|
onChange: () => {
|
|
834
805
|
return;
|
|
835
806
|
},
|
|
@@ -839,7 +810,7 @@ export const SelectDataSourceExample = () => {
|
|
|
839
810
|
label="item 4"
|
|
840
811
|
checkbox={{
|
|
841
812
|
variant: "checkable",
|
|
842
|
-
checked:
|
|
813
|
+
checked: "unchecked",
|
|
843
814
|
onChange: () => {
|
|
844
815
|
return;
|
|
845
816
|
},
|
|
@@ -849,11 +820,11 @@ export const SelectDataSourceExample = () => {
|
|
|
849
820
|
</Tree.Item>
|
|
850
821
|
<Tree.Item
|
|
851
822
|
label="Google Drive"
|
|
852
|
-
visual={
|
|
823
|
+
visual={DriveLogo}
|
|
853
824
|
size="md"
|
|
854
825
|
checkbox={{
|
|
855
826
|
variant: "checkable",
|
|
856
|
-
checked:
|
|
827
|
+
checked: "unchecked",
|
|
857
828
|
onChange: () => {
|
|
858
829
|
return;
|
|
859
830
|
},
|
|
@@ -879,7 +850,7 @@ const TreeItem = ({
|
|
|
879
850
|
return (
|
|
880
851
|
<Tree.Item
|
|
881
852
|
label={label}
|
|
882
|
-
|
|
853
|
+
visual={FolderIcon}
|
|
883
854
|
actions={
|
|
884
855
|
<div className="s-flex s-flex-row s-justify-center s-gap-2">
|
|
885
856
|
<span className="s-text-xs s-text-element-700">
|
|
@@ -902,4 +873,4 @@ const createTreeItems = (n = 5, getLabel: () => string) => {
|
|
|
902
873
|
}
|
|
903
874
|
|
|
904
875
|
return <Tree>{items}</Tree>;
|
|
905
|
-
};
|
|
876
|
+
};
|