@veracity/vui 2.1.0 → 2.2.0
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/avatar/theme.d.ts +1 -0
- package/dist/cjs/avatar/theme.d.ts.map +1 -1
- package/dist/cjs/avatar/theme.js +2 -1
- package/dist/cjs/badge/theme.d.ts +1 -0
- package/dist/cjs/badge/theme.d.ts.map +1 -1
- package/dist/cjs/badge/theme.js +2 -1
- package/dist/cjs/button/theme.d.ts +1 -0
- package/dist/cjs/button/theme.d.ts.map +1 -1
- package/dist/cjs/button/theme.js +2 -1
- package/dist/cjs/divider/divider.js +1 -1
- package/dist/cjs/dragAndDrop/dragAndDrop.d.ts +1 -1
- package/dist/cjs/dragAndDrop/dragAndDrop.d.ts.map +1 -1
- package/dist/cjs/dragAndDrop/dragAndDrop.js +3 -3
- package/dist/cjs/dragAndDrop/dragAndDrop.types.d.ts +1 -1
- package/dist/cjs/dragAndDrop/dragAndDrop.types.d.ts.map +1 -1
- package/dist/cjs/dragAndDrop/theme.d.ts +18 -3
- package/dist/cjs/dragAndDrop/theme.d.ts.map +1 -1
- package/dist/cjs/dragAndDrop/theme.js +23 -3
- package/dist/cjs/index.d.ts +1 -0
- package/dist/cjs/index.d.ts.map +1 -1
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/input/consts.d.ts +17 -3
- package/dist/cjs/input/consts.d.ts.map +1 -1
- package/dist/cjs/input/consts.js +27 -13
- package/dist/cjs/input/helpText.js +2 -2
- package/dist/cjs/input/input.d.ts.map +1 -1
- package/dist/cjs/input/input.js +8 -11
- package/dist/cjs/input/input.types.d.ts +6 -6
- package/dist/cjs/input/input.types.d.ts.map +1 -1
- package/dist/cjs/input/inputIcon.d.ts.map +1 -1
- package/dist/cjs/input/inputIcon.js +2 -1
- package/dist/cjs/input/theme.d.ts +33 -17
- package/dist/cjs/input/theme.d.ts.map +1 -1
- package/dist/cjs/input/theme.js +32 -22
- package/dist/cjs/skeleton/skeleton.types.d.ts +1 -1
- package/dist/cjs/skeleton/skeleton.types.d.ts.map +1 -1
- package/dist/cjs/skeleton/theme.d.ts +10 -14
- package/dist/cjs/skeleton/theme.d.ts.map +1 -1
- package/dist/cjs/skeleton/theme.js +10 -21
- package/dist/cjs/tag/theme.d.ts +1 -0
- package/dist/cjs/tag/theme.d.ts.map +1 -1
- package/dist/cjs/tag/theme.js +2 -1
- package/dist/cjs/theme/components.d.ts +110 -19
- package/dist/cjs/theme/components.d.ts.map +1 -1
- package/dist/cjs/theme/components.js +3 -1
- package/dist/cjs/theme/defaultTheme.d.ts +110 -19
- package/dist/cjs/theme/defaultTheme.d.ts.map +1 -1
- package/dist/cjs/tooltip/tooltip.js +1 -1
- package/dist/cjs/tooltip/tooltipContent.d.ts +1 -1
- package/dist/cjs/tooltip/tooltipContent.d.ts.map +1 -1
- package/dist/cjs/tooltip/tooltipContent.js +1 -4
- package/dist/cjs/tree/context.d.ts +5 -0
- package/dist/cjs/tree/context.d.ts.map +1 -0
- package/dist/cjs/tree/context.js +7 -0
- package/dist/cjs/tree/index.d.ts +8 -0
- package/dist/cjs/tree/index.d.ts.map +1 -0
- package/dist/cjs/tree/index.js +28 -0
- package/dist/cjs/tree/theme.d.ts +59 -0
- package/dist/cjs/tree/theme.d.ts.map +1 -0
- package/dist/cjs/tree/theme.js +69 -0
- package/dist/cjs/tree/tree.d.ts +14 -0
- package/dist/cjs/tree/tree.d.ts.map +1 -0
- package/dist/cjs/tree/tree.js +116 -0
- package/dist/cjs/tree/tree.types.d.ts +58 -0
- package/dist/cjs/tree/tree.types.d.ts.map +1 -0
- package/dist/cjs/tree/tree.types.js +2 -0
- package/dist/cjs/tree/treeIcon.d.ts +5 -0
- package/dist/cjs/tree/treeIcon.d.ts.map +1 -0
- package/dist/cjs/tree/treeIcon.js +29 -0
- package/dist/cjs/tree/treeItem.d.ts +8 -0
- package/dist/cjs/tree/treeItem.d.ts.map +1 -0
- package/dist/cjs/tree/treeItem.js +131 -0
- package/dist/cjs/tree/treeText.d.ts +5 -0
- package/dist/cjs/tree/treeText.d.ts.map +1 -0
- package/dist/cjs/tree/treeText.js +29 -0
- package/dist/cjs/tree/useTreeState.d.ts +9 -0
- package/dist/cjs/tree/useTreeState.d.ts.map +1 -0
- package/dist/cjs/tree/useTreeState.js +10 -0
- package/dist/esm/avatar/theme.d.ts +1 -0
- package/dist/esm/avatar/theme.d.ts.map +1 -1
- package/dist/esm/avatar/theme.js +2 -1
- package/dist/esm/badge/theme.d.ts +1 -0
- package/dist/esm/badge/theme.d.ts.map +1 -1
- package/dist/esm/badge/theme.js +2 -1
- package/dist/esm/button/theme.d.ts +1 -0
- package/dist/esm/button/theme.d.ts.map +1 -1
- package/dist/esm/button/theme.js +2 -1
- package/dist/esm/divider/divider.js +1 -1
- package/dist/esm/dragAndDrop/dragAndDrop.d.ts +1 -1
- package/dist/esm/dragAndDrop/dragAndDrop.d.ts.map +1 -1
- package/dist/esm/dragAndDrop/dragAndDrop.js +3 -3
- package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts +1 -1
- package/dist/esm/dragAndDrop/dragAndDrop.types.d.ts.map +1 -1
- package/dist/esm/dragAndDrop/theme.d.ts +18 -3
- package/dist/esm/dragAndDrop/theme.d.ts.map +1 -1
- package/dist/esm/dragAndDrop/theme.js +23 -3
- package/dist/esm/index.d.ts +1 -0
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -0
- package/dist/esm/input/consts.d.ts +17 -3
- package/dist/esm/input/consts.d.ts.map +1 -1
- package/dist/esm/input/consts.js +26 -12
- package/dist/esm/input/helpText.js +3 -3
- package/dist/esm/input/input.d.ts.map +1 -1
- package/dist/esm/input/input.js +6 -9
- package/dist/esm/input/input.types.d.ts +6 -6
- package/dist/esm/input/input.types.d.ts.map +1 -1
- package/dist/esm/input/inputIcon.d.ts.map +1 -1
- package/dist/esm/input/inputIcon.js +2 -1
- package/dist/esm/input/theme.d.ts +33 -17
- package/dist/esm/input/theme.d.ts.map +1 -1
- package/dist/esm/input/theme.js +32 -22
- package/dist/esm/skeleton/skeleton.types.d.ts +1 -1
- package/dist/esm/skeleton/skeleton.types.d.ts.map +1 -1
- package/dist/esm/skeleton/theme.d.ts +10 -14
- package/dist/esm/skeleton/theme.d.ts.map +1 -1
- package/dist/esm/skeleton/theme.js +10 -21
- package/dist/esm/tag/theme.d.ts +1 -0
- package/dist/esm/tag/theme.d.ts.map +1 -1
- package/dist/esm/tag/theme.js +2 -1
- package/dist/esm/theme/components.d.ts +110 -19
- package/dist/esm/theme/components.d.ts.map +1 -1
- package/dist/esm/theme/components.js +3 -1
- package/dist/esm/theme/defaultTheme.d.ts +110 -19
- package/dist/esm/theme/defaultTheme.d.ts.map +1 -1
- package/dist/esm/tooltip/tooltip.js +1 -1
- package/dist/esm/tooltip/tooltipContent.d.ts +1 -1
- package/dist/esm/tooltip/tooltipContent.d.ts.map +1 -1
- package/dist/esm/tooltip/tooltipContent.js +1 -4
- package/dist/esm/tree/context.d.ts +5 -0
- package/dist/esm/tree/context.d.ts.map +1 -0
- package/dist/esm/tree/context.js +3 -0
- package/dist/esm/tree/index.d.ts +8 -0
- package/dist/esm/tree/index.d.ts.map +1 -0
- package/dist/esm/tree/index.js +7 -0
- package/dist/esm/tree/theme.d.ts +59 -0
- package/dist/esm/tree/theme.d.ts.map +1 -0
- package/dist/esm/tree/theme.js +67 -0
- package/dist/esm/tree/tree.d.ts +14 -0
- package/dist/esm/tree/tree.d.ts.map +1 -0
- package/dist/esm/tree/tree.js +74 -0
- package/dist/esm/tree/tree.types.d.ts +58 -0
- package/dist/esm/tree/tree.types.d.ts.map +1 -0
- package/dist/esm/tree/tree.types.js +1 -0
- package/dist/esm/tree/treeIcon.d.ts +5 -0
- package/dist/esm/tree/treeIcon.d.ts.map +1 -0
- package/dist/esm/tree/treeIcon.js +12 -0
- package/dist/esm/tree/treeItem.d.ts +8 -0
- package/dist/esm/tree/treeItem.d.ts.map +1 -0
- package/dist/esm/tree/treeItem.js +91 -0
- package/dist/esm/tree/treeText.d.ts +5 -0
- package/dist/esm/tree/treeText.d.ts.map +1 -0
- package/dist/esm/tree/treeText.js +12 -0
- package/dist/esm/tree/useTreeState.d.ts +9 -0
- package/dist/esm/tree/useTreeState.d.ts.map +1 -0
- package/dist/esm/tree/useTreeState.js +6 -0
- package/package.json +1 -1
- package/src/avatar/theme.ts +2 -1
- package/src/badge/theme.ts +2 -1
- package/src/button/theme.ts +2 -1
- package/src/divider/divider.tsx +1 -1
- package/src/dragAndDrop/dragAndDrop.tsx +3 -3
- package/src/dragAndDrop/dragAndDrop.types.ts +1 -1
- package/src/dragAndDrop/theme.ts +24 -3
- package/src/index.ts +1 -0
- package/src/input/consts.ts +27 -12
- package/src/input/helpText.tsx +3 -3
- package/src/input/input.tsx +5 -14
- package/src/input/input.types.ts +6 -6
- package/src/input/inputIcon.tsx +2 -1
- package/src/input/theme.ts +31 -27
- package/src/skeleton/skeleton.types.ts +1 -1
- package/src/skeleton/theme.ts +9 -28
- package/src/tag/theme.ts +2 -1
- package/src/theme/components.ts +3 -1
- package/src/tooltip/tooltip.tsx +1 -1
- package/src/tooltip/tooltipContent.tsx +17 -21
- package/src/tree/context.ts +5 -0
- package/src/tree/index.ts +7 -0
- package/src/tree/theme.ts +76 -0
- package/src/tree/tree.tsx +121 -0
- package/src/tree/tree.types.ts +65 -0
- package/src/tree/treeIcon.tsx +16 -0
- package/src/tree/treeItem.tsx +177 -0
- package/src/tree/treeText.tsx +26 -0
- package/src/tree/useTreeState.ts +10 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,wBA0CC"}
|
|
@@ -38,6 +38,7 @@ import Table from '../table/theme';
|
|
|
38
38
|
import Tabs from '../tabs/theme';
|
|
39
39
|
import Tag from '../tag/theme';
|
|
40
40
|
import Textarea from '../textarea/theme';
|
|
41
|
+
import Tree from '../tree/theme';
|
|
41
42
|
export default {
|
|
42
43
|
Accordion,
|
|
43
44
|
Avatar,
|
|
@@ -78,5 +79,6 @@ export default {
|
|
|
78
79
|
Table,
|
|
79
80
|
Tabs,
|
|
80
81
|
Tag,
|
|
81
|
-
Textarea
|
|
82
|
+
Textarea,
|
|
83
|
+
Tree
|
|
82
84
|
};
|
|
@@ -520,6 +520,7 @@ declare const defaultTheme: {
|
|
|
520
520
|
colorScheme: string;
|
|
521
521
|
size: string;
|
|
522
522
|
variant: string;
|
|
523
|
+
fontWeight: string;
|
|
523
524
|
};
|
|
524
525
|
sizes: {
|
|
525
526
|
xs: {
|
|
@@ -568,6 +569,7 @@ declare const defaultTheme: {
|
|
|
568
569
|
defaultProps: {
|
|
569
570
|
size: string;
|
|
570
571
|
variant: string;
|
|
572
|
+
fontWeight: string;
|
|
571
573
|
};
|
|
572
574
|
parts: string[];
|
|
573
575
|
sizes: {
|
|
@@ -719,6 +721,7 @@ declare const defaultTheme: {
|
|
|
719
721
|
defaultProps: {
|
|
720
722
|
size: string;
|
|
721
723
|
variant: string;
|
|
724
|
+
fontWeight: string;
|
|
722
725
|
};
|
|
723
726
|
parts: string[];
|
|
724
727
|
sizes: {
|
|
@@ -1054,10 +1057,25 @@ declare const defaultTheme: {
|
|
|
1054
1057
|
variants: {};
|
|
1055
1058
|
};
|
|
1056
1059
|
DragAndDrop: {
|
|
1057
|
-
baseStyle: {
|
|
1058
|
-
|
|
1060
|
+
baseStyle: {
|
|
1061
|
+
borderWidth: number;
|
|
1062
|
+
borderStyle: string;
|
|
1063
|
+
borderColor: string;
|
|
1064
|
+
bg: string;
|
|
1065
|
+
color: string;
|
|
1066
|
+
hoverBg: string;
|
|
1067
|
+
};
|
|
1068
|
+
defaultProps: {
|
|
1069
|
+
variant: string;
|
|
1070
|
+
};
|
|
1059
1071
|
sizes: {};
|
|
1060
|
-
variants: {
|
|
1072
|
+
variants: {
|
|
1073
|
+
default: {};
|
|
1074
|
+
outlined: {
|
|
1075
|
+
borderColor: string;
|
|
1076
|
+
borderStyle: string;
|
|
1077
|
+
};
|
|
1078
|
+
};
|
|
1061
1079
|
};
|
|
1062
1080
|
Footer: {
|
|
1063
1081
|
baseStyle: {};
|
|
@@ -1291,15 +1309,24 @@ declare const defaultTheme: {
|
|
|
1291
1309
|
variants: {};
|
|
1292
1310
|
};
|
|
1293
1311
|
Input: {
|
|
1294
|
-
baseStyle: {
|
|
1312
|
+
baseStyle: {
|
|
1313
|
+
container: {
|
|
1314
|
+
focusWithinRing: number;
|
|
1315
|
+
color: string;
|
|
1316
|
+
};
|
|
1317
|
+
input: {
|
|
1318
|
+
color: {
|
|
1319
|
+
placeholder: string;
|
|
1320
|
+
};
|
|
1321
|
+
};
|
|
1322
|
+
};
|
|
1295
1323
|
defaultProps: {
|
|
1296
|
-
colorScheme: string;
|
|
1297
1324
|
size: string;
|
|
1298
1325
|
variant: string;
|
|
1299
1326
|
};
|
|
1300
1327
|
parts: string[];
|
|
1301
1328
|
sizes: {
|
|
1302
|
-
|
|
1329
|
+
sm: {
|
|
1303
1330
|
container: {
|
|
1304
1331
|
fontSize: string;
|
|
1305
1332
|
h: number;
|
|
@@ -1309,7 +1336,7 @@ declare const defaultTheme: {
|
|
|
1309
1336
|
};
|
|
1310
1337
|
input: {};
|
|
1311
1338
|
};
|
|
1312
|
-
|
|
1339
|
+
md: {
|
|
1313
1340
|
container: {
|
|
1314
1341
|
fontSize: string;
|
|
1315
1342
|
h: number;
|
|
@@ -1319,7 +1346,7 @@ declare const defaultTheme: {
|
|
|
1319
1346
|
};
|
|
1320
1347
|
input: {};
|
|
1321
1348
|
};
|
|
1322
|
-
|
|
1349
|
+
lg: {
|
|
1323
1350
|
container: {
|
|
1324
1351
|
fontSize: string;
|
|
1325
1352
|
h: number;
|
|
@@ -1329,7 +1356,7 @@ declare const defaultTheme: {
|
|
|
1329
1356
|
};
|
|
1330
1357
|
input: {};
|
|
1331
1358
|
};
|
|
1332
|
-
|
|
1359
|
+
xl: {
|
|
1333
1360
|
container: {
|
|
1334
1361
|
fontSize: string;
|
|
1335
1362
|
h: number;
|
|
@@ -1341,14 +1368,23 @@ declare const defaultTheme: {
|
|
|
1341
1368
|
};
|
|
1342
1369
|
};
|
|
1343
1370
|
variants: {
|
|
1344
|
-
|
|
1371
|
+
grey: {
|
|
1372
|
+
container: {
|
|
1373
|
+
borderColor: string;
|
|
1374
|
+
focusWithinRingColor: string;
|
|
1375
|
+
};
|
|
1376
|
+
};
|
|
1377
|
+
green: {
|
|
1378
|
+
container: {
|
|
1379
|
+
borderColor: string;
|
|
1380
|
+
focusWithinRingColor: string;
|
|
1381
|
+
};
|
|
1382
|
+
};
|
|
1383
|
+
red: {
|
|
1345
1384
|
container: {
|
|
1346
1385
|
borderColor: string;
|
|
1347
|
-
focusWithinRing: number;
|
|
1348
1386
|
focusWithinRingColor: string;
|
|
1349
1387
|
};
|
|
1350
|
-
icon: {};
|
|
1351
|
-
input: {};
|
|
1352
1388
|
};
|
|
1353
1389
|
};
|
|
1354
1390
|
};
|
|
@@ -1812,9 +1848,10 @@ declare const defaultTheme: {
|
|
|
1812
1848
|
variants: {};
|
|
1813
1849
|
};
|
|
1814
1850
|
Skeleton: {
|
|
1815
|
-
baseStyle: {
|
|
1851
|
+
baseStyle: {
|
|
1852
|
+
bg: string;
|
|
1853
|
+
};
|
|
1816
1854
|
defaultProps: {
|
|
1817
|
-
colorScheme: string;
|
|
1818
1855
|
size: string;
|
|
1819
1856
|
variant: string;
|
|
1820
1857
|
};
|
|
@@ -1833,13 +1870,11 @@ declare const defaultTheme: {
|
|
|
1833
1870
|
};
|
|
1834
1871
|
};
|
|
1835
1872
|
variants: {
|
|
1836
|
-
circle:
|
|
1873
|
+
circle: {
|
|
1837
1874
|
borderRadius: string;
|
|
1838
|
-
bg: string;
|
|
1839
1875
|
};
|
|
1840
|
-
rect:
|
|
1876
|
+
rect: {
|
|
1841
1877
|
borderRadius: string;
|
|
1842
|
-
bg: string;
|
|
1843
1878
|
w: string;
|
|
1844
1879
|
};
|
|
1845
1880
|
};
|
|
@@ -2102,6 +2137,7 @@ declare const defaultTheme: {
|
|
|
2102
2137
|
defaultProps: {
|
|
2103
2138
|
size: string;
|
|
2104
2139
|
variant: string;
|
|
2140
|
+
fontWeight: string;
|
|
2105
2141
|
};
|
|
2106
2142
|
parts: string[];
|
|
2107
2143
|
sizes: {
|
|
@@ -2344,6 +2380,61 @@ declare const defaultTheme: {
|
|
|
2344
2380
|
};
|
|
2345
2381
|
};
|
|
2346
2382
|
};
|
|
2383
|
+
Tree: {
|
|
2384
|
+
baseStyle: {};
|
|
2385
|
+
defaultProps: {
|
|
2386
|
+
size: string;
|
|
2387
|
+
variant: string;
|
|
2388
|
+
};
|
|
2389
|
+
parts: string[];
|
|
2390
|
+
sizes: {
|
|
2391
|
+
sm: {
|
|
2392
|
+
icon: {
|
|
2393
|
+
size: string;
|
|
2394
|
+
};
|
|
2395
|
+
item: {
|
|
2396
|
+
fontSize: string;
|
|
2397
|
+
h: number;
|
|
2398
|
+
py: string;
|
|
2399
|
+
};
|
|
2400
|
+
};
|
|
2401
|
+
md: {
|
|
2402
|
+
icon: {
|
|
2403
|
+
size: string;
|
|
2404
|
+
};
|
|
2405
|
+
item: {
|
|
2406
|
+
fontSize: string;
|
|
2407
|
+
h: number;
|
|
2408
|
+
py: string;
|
|
2409
|
+
};
|
|
2410
|
+
};
|
|
2411
|
+
lg: {
|
|
2412
|
+
item: {
|
|
2413
|
+
fontSize: string;
|
|
2414
|
+
h: number;
|
|
2415
|
+
py: string;
|
|
2416
|
+
};
|
|
2417
|
+
icon: {
|
|
2418
|
+
size: string;
|
|
2419
|
+
};
|
|
2420
|
+
};
|
|
2421
|
+
xl: {
|
|
2422
|
+
item: {
|
|
2423
|
+
fontSize: string;
|
|
2424
|
+
h: number;
|
|
2425
|
+
py: string;
|
|
2426
|
+
};
|
|
2427
|
+
icon: {
|
|
2428
|
+
scale: number;
|
|
2429
|
+
};
|
|
2430
|
+
};
|
|
2431
|
+
};
|
|
2432
|
+
variants: {
|
|
2433
|
+
default: (props: import("..").Dict<any>) => {
|
|
2434
|
+
item: import("..").Dict<any>;
|
|
2435
|
+
};
|
|
2436
|
+
};
|
|
2437
|
+
};
|
|
2347
2438
|
};
|
|
2348
2439
|
};
|
|
2349
2440
|
export default defaultTheme;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY
|
|
1
|
+
{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/theme/defaultTheme.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGjB,CAAA;AAED,eAAe,YAAY,CAAA"}
|
|
@@ -20,7 +20,7 @@ export const Tooltip = (props) => {
|
|
|
20
20
|
text,
|
|
21
21
|
!!linkText && (React.createElement(React.Fragment, null,
|
|
22
22
|
"\u00A0",
|
|
23
|
-
React.createElement(Link, { variant: "
|
|
23
|
+
React.createElement(Link, { variant: "white", ...linkProps }, linkText))))), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
|
|
24
24
|
modifiers: [
|
|
25
25
|
{
|
|
26
26
|
name: 'flip',
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { TooltipProps } from './tooltip.types';
|
|
2
|
-
export declare const TooltipContent: (
|
|
2
|
+
export declare const TooltipContent: ({ children, fontSize, maxWidth }: TooltipProps) => JSX.Element;
|
|
3
3
|
//# sourceMappingURL=tooltipContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"tooltipContent.d.ts","sourceRoot":"","sources":["../../../src/tooltip/tooltipContent.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAE9C,eAAO,MAAM,cAAc,qCAAyD,YAAY,gBAgB/F,CAAA"}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Box from '../box';
|
|
3
3
|
import { color } from './tooltip.setup';
|
|
4
|
-
export const TooltipContent = (
|
|
5
|
-
const { children, fontSize = '16px', maxWidth = '400px' } = props;
|
|
6
|
-
return (React.createElement(Box, { bg: color, borderRadius: "md", boxShadow: "2", className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));
|
|
7
|
-
};
|
|
4
|
+
export const TooltipContent = ({ children, fontSize = '16px', maxWidth = '400px' }) => (React.createElement(Box, { bg: color, boxShadow: "2", className: "vui-tooltip-content", color: "white", fontSize: fontSize, m: 1, maxW: maxWidth, overflowY: "auto", p: 1, pl: 2, pr: 2 }, children));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/tree/context.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,IAAI,EAAE,MAAM,UAAU,CAAA;AAE9C,QAAA,MAAO,YAAY,uCAAE,cAAc,iBAA6C,CAAA;AAEhF,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tree/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAChC,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA"}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { Dict } from '../utils';
|
|
2
|
+
declare function variantDefault(props: Dict): {
|
|
3
|
+
item: Dict<any>;
|
|
4
|
+
};
|
|
5
|
+
declare const _default: {
|
|
6
|
+
baseStyle: {};
|
|
7
|
+
defaultProps: {
|
|
8
|
+
size: string;
|
|
9
|
+
variant: string;
|
|
10
|
+
};
|
|
11
|
+
parts: string[];
|
|
12
|
+
sizes: {
|
|
13
|
+
sm: {
|
|
14
|
+
icon: {
|
|
15
|
+
size: string;
|
|
16
|
+
};
|
|
17
|
+
item: {
|
|
18
|
+
fontSize: string;
|
|
19
|
+
h: number;
|
|
20
|
+
py: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
md: {
|
|
24
|
+
icon: {
|
|
25
|
+
size: string;
|
|
26
|
+
};
|
|
27
|
+
item: {
|
|
28
|
+
fontSize: string;
|
|
29
|
+
h: number;
|
|
30
|
+
py: string;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
lg: {
|
|
34
|
+
item: {
|
|
35
|
+
fontSize: string;
|
|
36
|
+
h: number;
|
|
37
|
+
py: string;
|
|
38
|
+
};
|
|
39
|
+
icon: {
|
|
40
|
+
size: string;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
xl: {
|
|
44
|
+
item: {
|
|
45
|
+
fontSize: string;
|
|
46
|
+
h: number;
|
|
47
|
+
py: string;
|
|
48
|
+
};
|
|
49
|
+
icon: {
|
|
50
|
+
scale: number;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
variants: {
|
|
55
|
+
default: typeof variantDefault;
|
|
56
|
+
};
|
|
57
|
+
};
|
|
58
|
+
export default _default;
|
|
59
|
+
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/tree/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,iBAAS,cAAc,CAAC,KAAK,EAAE,IAAI;;EASlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DD,wBAMC"}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
function variantDefault(props) {
|
|
2
|
+
const item = {
|
|
3
|
+
activeBg: 'skyBlue.30',
|
|
4
|
+
hoverBg: 'skyBlue.20',
|
|
5
|
+
selectedBg: 'skyBlue.10',
|
|
6
|
+
px: 2
|
|
7
|
+
};
|
|
8
|
+
return { item };
|
|
9
|
+
}
|
|
10
|
+
const baseStyle = {};
|
|
11
|
+
const defaultProps = {
|
|
12
|
+
size: 'md',
|
|
13
|
+
variant: 'default'
|
|
14
|
+
};
|
|
15
|
+
const parts = ['container', 'icon', 'item', 'text'];
|
|
16
|
+
const sizes = {
|
|
17
|
+
sm: {
|
|
18
|
+
icon: {
|
|
19
|
+
size: 'xs'
|
|
20
|
+
},
|
|
21
|
+
item: {
|
|
22
|
+
fontSize: 'md',
|
|
23
|
+
h: 32,
|
|
24
|
+
py: '3px'
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
md: {
|
|
28
|
+
icon: {
|
|
29
|
+
size: 'sm'
|
|
30
|
+
},
|
|
31
|
+
item: {
|
|
32
|
+
fontSize: 'md',
|
|
33
|
+
h: 40,
|
|
34
|
+
py: '5px'
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
lg: {
|
|
38
|
+
item: {
|
|
39
|
+
fontSize: 'md',
|
|
40
|
+
h: 48,
|
|
41
|
+
py: '7px'
|
|
42
|
+
},
|
|
43
|
+
icon: {
|
|
44
|
+
size: 'md'
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
xl: {
|
|
48
|
+
item: {
|
|
49
|
+
fontSize: 'lg',
|
|
50
|
+
h: 56,
|
|
51
|
+
py: '9px'
|
|
52
|
+
},
|
|
53
|
+
icon: {
|
|
54
|
+
scale: 2
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
const variants = {
|
|
59
|
+
default: variantDefault
|
|
60
|
+
};
|
|
61
|
+
export default {
|
|
62
|
+
baseStyle,
|
|
63
|
+
defaultProps,
|
|
64
|
+
parts,
|
|
65
|
+
sizes,
|
|
66
|
+
variants
|
|
67
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { VuiComponent } from '../core';
|
|
2
|
+
import { TreeProps } from './tree.types';
|
|
3
|
+
import TreeIcon from './treeIcon';
|
|
4
|
+
import TreeItem from './treeItem';
|
|
5
|
+
import TreeText from './treeText';
|
|
6
|
+
export declare const TreeBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
|
|
7
|
+
/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
|
|
8
|
+
export declare const Tree: VuiComponent<"div", TreeProps> & {
|
|
9
|
+
Icon: typeof TreeIcon;
|
|
10
|
+
Item: typeof TreeItem;
|
|
11
|
+
Text: typeof TreeText;
|
|
12
|
+
};
|
|
13
|
+
export default Tree;
|
|
14
|
+
//# sourceMappingURL=tree.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,YAAY,EAAE,MAAM,SAAS,CAAA;AAGnE,OAAO,EAA6B,SAAS,EAAE,MAAM,cAAc,CAAA;AACnE,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AACjC,OAAO,QAAQ,MAAM,YAAY,CAAA;AAGjC,eAAO,MAAM,QAAQ,+HAKpB,CAAA;AAED,+GAA+G;AAC/G,eAAO,MAAM,IAAI;UA4FT,eAAe;UACf,eAAe;UACf,eAAe;CACtB,CAAA;AAMD,eAAe,IAAI,CAAA"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React, { Children, useEffect, useMemo } from 'react';
|
|
2
|
+
import { styled, useStyleConfig, vui } from '../core';
|
|
3
|
+
import { cs, filterUndefined } from '../utils';
|
|
4
|
+
import { TreeProvider } from './context';
|
|
5
|
+
import TreeIcon from './treeIcon';
|
|
6
|
+
import TreeItem from './treeItem';
|
|
7
|
+
import TreeText from './treeText';
|
|
8
|
+
import { useTreeState } from './useTreeState';
|
|
9
|
+
export const TreeBase = styled.divBox `
|
|
10
|
+
display: flex;
|
|
11
|
+
height: auto;
|
|
12
|
+
align-content: flex-start;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
`;
|
|
15
|
+
/** Displays a tree of tree link items and optional heading. Exposes some props to the children via context. */
|
|
16
|
+
export const Tree = vui((props, ref) => {
|
|
17
|
+
const { activeItemId, children, className, iconCollapse = 'falMinus', iconExpand = 'falPlus', items, onClickItem, size, variant, ...rest } = props;
|
|
18
|
+
const styles = useStyleConfig('Tree', props);
|
|
19
|
+
const { itemsInternal, setItemsInternal, activeItemIndex, setActiveItemIndex } = useTreeState(activeItemId);
|
|
20
|
+
const context = useMemo(() => filterUndefined({ size, variant }), [size, variant]);
|
|
21
|
+
const transformChildrenToItems = (children) => {
|
|
22
|
+
const t = [];
|
|
23
|
+
if (children) {
|
|
24
|
+
;
|
|
25
|
+
Children.toArray(children).forEach((child, index) => {
|
|
26
|
+
if (child?.props?.text) {
|
|
27
|
+
let items = [];
|
|
28
|
+
if (child.props.children) {
|
|
29
|
+
items = transformChildrenToItems(child.props.children);
|
|
30
|
+
}
|
|
31
|
+
t.push({
|
|
32
|
+
id: child.props.id,
|
|
33
|
+
text: child.props.text,
|
|
34
|
+
isActive: child.props.isActive,
|
|
35
|
+
items: child.props.items || items,
|
|
36
|
+
isCollapsed: child.props.isCollapsed,
|
|
37
|
+
disabled: child.props.disabled,
|
|
38
|
+
onClickTreeItem: onClickTreeItem
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
return t;
|
|
44
|
+
};
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
if (items) {
|
|
47
|
+
setItemsInternal(items);
|
|
48
|
+
return;
|
|
49
|
+
}
|
|
50
|
+
const t = [];
|
|
51
|
+
if (children) {
|
|
52
|
+
const transformed = transformChildrenToItems(children);
|
|
53
|
+
t.push(...transformed);
|
|
54
|
+
}
|
|
55
|
+
setItemsInternal(t);
|
|
56
|
+
if (activeItemId !== undefined && t?.find((i) => i.id === activeItemId)) {
|
|
57
|
+
setActiveItemIndex(activeItemId);
|
|
58
|
+
}
|
|
59
|
+
}, [children, activeItemId]);
|
|
60
|
+
const onClickTreeItem = (id) => {
|
|
61
|
+
setActiveItemIndex(id);
|
|
62
|
+
if (onClickItem) {
|
|
63
|
+
onClickItem(id);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
return (React.createElement(TreeProvider, { value: context },
|
|
67
|
+
React.createElement(TreeBase, { className: cs('vui-tree', className), ref: ref, ...styles.container, ...rest }, itemsInternal?.map(({ id, isActive, ...props }, index) => {
|
|
68
|
+
return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, id: id, isActive: activeItemIndex ? activeItemIndex === id : false, key: id ?? index, onClickTreeItem: onClickTreeItem, ...props }));
|
|
69
|
+
}))));
|
|
70
|
+
});
|
|
71
|
+
Tree.Icon = TreeIcon;
|
|
72
|
+
Tree.Item = TreeItem;
|
|
73
|
+
Tree.Text = TreeText;
|
|
74
|
+
export default Tree;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { ReactNode, ReactText } from 'react';
|
|
2
|
+
import { IconProp } from '../icon';
|
|
3
|
+
import { LinkProps } from '../link';
|
|
4
|
+
import { SystemProps } from '../system';
|
|
5
|
+
import { ThemingProps } from '../theme';
|
|
6
|
+
import { PropsOf } from '../utils';
|
|
7
|
+
export declare type TreeProps = SystemProps & ThemingProps<'Tree'> & {
|
|
8
|
+
/** Currently selected item. */
|
|
9
|
+
activeItemId?: TreeItemId;
|
|
10
|
+
/** Socket defining the collapse icon on the left. */
|
|
11
|
+
iconCollapse?: IconProp;
|
|
12
|
+
/** Socket defining the expand icon on the left. */
|
|
13
|
+
iconExpand?: IconProp;
|
|
14
|
+
/** Socket displaying a tree of items. */
|
|
15
|
+
items?: PropsOf<'div', TreeItemProps>[] | JSX.Element;
|
|
16
|
+
/** Socket defining the size of the tree. */
|
|
17
|
+
onClickItem?: (id: TreeItemId) => void;
|
|
18
|
+
};
|
|
19
|
+
export declare type TreeItemLinkProps = PropsOf<'a', LinkProps> | object;
|
|
20
|
+
export declare type TreeItemId = string | number;
|
|
21
|
+
export declare type TreeOnToggleEvent = {
|
|
22
|
+
id: TreeItemId;
|
|
23
|
+
collapsed: boolean;
|
|
24
|
+
};
|
|
25
|
+
export declare type TreeItemProps = SystemProps & ThemingProps<'Tree'> & {
|
|
26
|
+
activeItemId?: TreeItemId;
|
|
27
|
+
/** internal, not exposed */
|
|
28
|
+
activeItemIndex?: TreeItemId;
|
|
29
|
+
/** Unique ID */
|
|
30
|
+
id: TreeItemId;
|
|
31
|
+
/** Centers the content vertically and horizontally. @deprecated */
|
|
32
|
+
center?: boolean;
|
|
33
|
+
/** Centers the content horizontally. @deprecated */
|
|
34
|
+
centerH?: boolean;
|
|
35
|
+
/** Centers the content vertically. @deprecated */
|
|
36
|
+
centerV?: boolean;
|
|
37
|
+
/** Socket defining the collapse icon on the left. */
|
|
38
|
+
iconCollapse?: IconProp;
|
|
39
|
+
/** Socket defining the expand icon on the left. */
|
|
40
|
+
iconExpand?: IconProp;
|
|
41
|
+
/** The children of this tree item. */
|
|
42
|
+
items?: PropsOf<'div', TreeItemProps>[];
|
|
43
|
+
children?: ReactNode;
|
|
44
|
+
/** Collapsed state */
|
|
45
|
+
isCollapsed?: boolean;
|
|
46
|
+
/** Displays item and its content in disabled state with appropriate styling. */
|
|
47
|
+
disabled?: boolean;
|
|
48
|
+
/** Displays item in selected state with appropriate styling. */
|
|
49
|
+
isActive?: boolean;
|
|
50
|
+
/** If provided, content is wrapper with a link and the props are provided to the element. */
|
|
51
|
+
linkProps?: TreeItemLinkProps;
|
|
52
|
+
/** Socket displaying text within the item. */
|
|
53
|
+
text: ReactText | JSX.Element;
|
|
54
|
+
/** Collapse change state */
|
|
55
|
+
onToggle?: (event: TreeOnToggleEvent) => void;
|
|
56
|
+
onClickTreeItem?: (id: TreeItemId) => void;
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=tree.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tree.types.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACrD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CACvC,CAAA;AAEH,oBAAY,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAExC,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,gBAAgB;IAChB,EAAE,EAAE,UAAU,CAAA;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC7C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CAC3C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"treeIcon.d.ts","sourceRoot":"","sources":["../../../src/tree/treeIcon.tsx"],"names":[],"mappings":"AAGA,OAAa,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAIzC,oDAAoD;AACpD,eAAO,MAAM,QAAQ,kDAKnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { useStyleConfig, vui } from '../core';
|
|
3
|
+
import Icon from '../icon';
|
|
4
|
+
import { cs } from '../utils';
|
|
5
|
+
import { useTreeContext } from './context';
|
|
6
|
+
/** Displays an icon on the side of the TreeItem. */
|
|
7
|
+
export const TreeIcon = vui((props, ref) => {
|
|
8
|
+
const { className, ...rest } = props;
|
|
9
|
+
const styles = useStyleConfig('Tree', useTreeContext());
|
|
10
|
+
return React.createElement(Icon, { className: cs('vui-treeIcon', className), ref: ref, size: "xs", ...styles.icon, ...rest });
|
|
11
|
+
});
|
|
12
|
+
export default TreeIcon;
|