@snack-uikit/tree 0.6.26-preview-d96c83e8.0 → 0.6.26-preview-7adaddbe.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/components/Tree/Tree.js +3 -1
- package/dist/cjs/components/Tree/styles.module.css +4 -0
- package/dist/cjs/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js +6 -1
- package/dist/cjs/helperComponents/ExpandableTreeNode/styles.module.css +34 -0
- package/dist/cjs/helperComponents/TreeLine/TreeLine.js +3 -1
- package/dist/cjs/helperComponents/TreeLine/styles.module.css +37 -0
- package/dist/cjs/helperComponents/TreeNode/TreeNode.js +9 -1
- package/dist/cjs/helperComponents/TreeNode/components/TreeNodeActions.js +9 -1
- package/dist/cjs/helperComponents/TreeNode/styles.module.css +113 -0
- package/dist/esm/components/Tree/styles.module.css +4 -0
- package/dist/esm/helperComponents/ExpandableTreeNode/styles.module.css +34 -0
- package/dist/esm/helperComponents/TreeLine/styles.module.css +37 -0
- package/dist/esm/helperComponents/TreeNode/styles.module.css +113 -0
- package/package.json +9 -9
|
@@ -22,7 +22,9 @@ const classnames_1 = __importDefault(require("classnames"));
|
|
|
22
22
|
const utils_1 = require("@snack-uikit/utils");
|
|
23
23
|
const TreeContext_1 = require("../../contexts/TreeContext");
|
|
24
24
|
const helperComponents_1 = require("../../helperComponents");
|
|
25
|
-
const styles_module_scss_1 = __importDefault({
|
|
25
|
+
const styles_module_scss_1 = __importDefault({
|
|
26
|
+
"tree": "styles-module__tree___3ibXd"
|
|
27
|
+
});
|
|
26
28
|
const utils_2 = require("./utils");
|
|
27
29
|
function Tree(_a) {
|
|
28
30
|
var {
|
|
@@ -52,7 +52,12 @@ const TreeContext_1 = require("../../contexts/TreeContext");
|
|
|
52
52
|
const TreeItem_1 = require("../TreeItem");
|
|
53
53
|
const TreeLine_1 = require("../TreeLine");
|
|
54
54
|
const TreeNode_1 = require("../TreeNode");
|
|
55
|
-
const styles_module_scss_1 = __importDefault({
|
|
55
|
+
const styles_module_scss_1 = __importDefault({
|
|
56
|
+
"expandableTreeNode": "styles-module__expandableTreeNode___3Nq75",
|
|
57
|
+
"expandableContent": "styles-module__expandableContent___3shLk",
|
|
58
|
+
"expandableWrap": "styles-module__expandableWrap___MXg9R",
|
|
59
|
+
"expandableNested": "styles-module__expandableNested___zEji1"
|
|
60
|
+
});
|
|
56
61
|
function ExpandableTreeNode(_a) {
|
|
57
62
|
var _b = _a.node,
|
|
58
63
|
{
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.expandableTreeNode{
|
|
2
|
+
position:relative;
|
|
3
|
+
width:100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.expandableContent{
|
|
7
|
+
overflow:hidden;
|
|
8
|
+
display:flex;
|
|
9
|
+
box-sizing:border-box;
|
|
10
|
+
min-height:0;
|
|
11
|
+
visibility:hidden;
|
|
12
|
+
transition:visibility 200ms;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.expandableWrap{
|
|
16
|
+
overflow:hidden;
|
|
17
|
+
display:grid;
|
|
18
|
+
grid-template-rows:0fr;
|
|
19
|
+
box-sizing:border-box;
|
|
20
|
+
width:100%;
|
|
21
|
+
transition:grid-template-rows 200ms;
|
|
22
|
+
}
|
|
23
|
+
.expandableWrap[data-expanded=true]{
|
|
24
|
+
overflow:unset;
|
|
25
|
+
grid-template-rows:1fr;
|
|
26
|
+
}
|
|
27
|
+
.expandableWrap[data-expanded=true] .expandableContent{
|
|
28
|
+
visibility:visible;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.expandableNested{
|
|
32
|
+
width:100%;
|
|
33
|
+
min-width:0;
|
|
34
|
+
}
|
|
@@ -11,7 +11,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
11
11
|
exports.TreeLine = TreeLine;
|
|
12
12
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
13
13
|
const constants_1 = require("../../constants");
|
|
14
|
-
const styles_module_scss_1 = __importDefault({
|
|
14
|
+
const styles_module_scss_1 = __importDefault({
|
|
15
|
+
"treeLine": "styles-module__treeLine___1l-AE"
|
|
16
|
+
});
|
|
15
17
|
function TreeLine(_ref) {
|
|
16
18
|
let {
|
|
17
19
|
halfWidth,
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
.treeLine{
|
|
2
|
+
pointer-events:none;
|
|
3
|
+
position:relative;
|
|
4
|
+
flex-shrink:0;
|
|
5
|
+
width:var(--size-tree-item-line-width, 24px);
|
|
6
|
+
visibility:hidden;
|
|
7
|
+
}
|
|
8
|
+
.treeLine[data-visible]{
|
|
9
|
+
visibility:visible;
|
|
10
|
+
}
|
|
11
|
+
.treeLine[data-visible]::after{
|
|
12
|
+
content:"";
|
|
13
|
+
position:absolute;
|
|
14
|
+
top:0;
|
|
15
|
+
left:50%;
|
|
16
|
+
transform:translateX(-50%);
|
|
17
|
+
width:1px;
|
|
18
|
+
height:calc(100% - var(--size-tree-item-height, 32px) / 2);
|
|
19
|
+
background:var(--sys-neutral-decor-default, #dde0ea);
|
|
20
|
+
}
|
|
21
|
+
.treeLine[data-half-height]::after{
|
|
22
|
+
height:calc(100% - var(--size-tree-item-height, 32px) / 2);
|
|
23
|
+
}
|
|
24
|
+
.treeLine[data-horizontal]::after{
|
|
25
|
+
top:50%;
|
|
26
|
+
left:-50%;
|
|
27
|
+
transform:translateY(-50%);
|
|
28
|
+
width:calc(150% - var(--space-tree-item-child-line-padding, 8px));
|
|
29
|
+
height:1px;
|
|
30
|
+
}
|
|
31
|
+
.treeLine[data-horizontal][data-half-width]{
|
|
32
|
+
width:0;
|
|
33
|
+
}
|
|
34
|
+
.treeLine[data-horizontal][data-half-width]::after{
|
|
35
|
+
left:calc(0px - var(--size-tree-item-line-width, 24px) / 2);
|
|
36
|
+
width:calc(var(--size-tree-item-line-width, 24px) / 2);
|
|
37
|
+
}
|
|
@@ -31,7 +31,15 @@ const TreeContext_1 = require("../../contexts/TreeContext");
|
|
|
31
31
|
const helpers_1 = require("../../helpers");
|
|
32
32
|
const TreeLine_1 = require("../TreeLine");
|
|
33
33
|
const components_1 = require("./components");
|
|
34
|
-
const styles_module_scss_1 = __importDefault({
|
|
34
|
+
const styles_module_scss_1 = __importDefault({
|
|
35
|
+
"treeNode": "styles-module__treeNode___1qkim",
|
|
36
|
+
"treeNodeIcon": "styles-module__treeNodeIcon___1j7oZ",
|
|
37
|
+
"treeNodeTitle": "styles-module__treeNodeTitle___1dRbs",
|
|
38
|
+
"treeNodeActions": "styles-module__treeNodeActions___3on13",
|
|
39
|
+
"treeNodeContent": "styles-module__treeNodeContent___Z0D_b",
|
|
40
|
+
"treeNodeCheckboxWrap": "styles-module__treeNodeCheckboxWrap___-JQMS",
|
|
41
|
+
"treeNodeExpandButton": "styles-module__treeNodeExpandButton___1KKJf"
|
|
42
|
+
});
|
|
35
43
|
const utils_2 = require("./utils");
|
|
36
44
|
function TreeNode(_a) {
|
|
37
45
|
var {
|
|
@@ -15,7 +15,15 @@ const button_1 = require("@snack-uikit/button");
|
|
|
15
15
|
const icons_1 = require("@snack-uikit/icons");
|
|
16
16
|
const list_1 = require("@snack-uikit/list");
|
|
17
17
|
const constants_1 = require("../../../constants");
|
|
18
|
-
const styles_module_scss_1 = __importDefault({
|
|
18
|
+
const styles_module_scss_1 = __importDefault({
|
|
19
|
+
"treeNode": "styles-module__treeNode___1qkim",
|
|
20
|
+
"treeNodeIcon": "styles-module__treeNodeIcon___1j7oZ",
|
|
21
|
+
"treeNodeTitle": "styles-module__treeNodeTitle___1dRbs",
|
|
22
|
+
"treeNodeActions": "styles-module__treeNodeActions___3on13",
|
|
23
|
+
"treeNodeContent": "styles-module__treeNodeContent___Z0D_b",
|
|
24
|
+
"treeNodeCheckboxWrap": "styles-module__treeNodeCheckboxWrap___-JQMS",
|
|
25
|
+
"treeNodeExpandButton": "styles-module__treeNodeExpandButton___1KKJf"
|
|
26
|
+
});
|
|
19
27
|
const utils_1 = require("../utils");
|
|
20
28
|
function TreeNodeActions(_ref) {
|
|
21
29
|
let {
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
.treeNode{
|
|
2
|
+
display:flex;
|
|
3
|
+
align-items:center;
|
|
4
|
+
box-sizing:border-box;
|
|
5
|
+
width:100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.treeNodeIcon{
|
|
9
|
+
display:flex;
|
|
10
|
+
flex-shrink:0;
|
|
11
|
+
align-items:center;
|
|
12
|
+
justify-content:center;
|
|
13
|
+
box-sizing:border-box;
|
|
14
|
+
color:var(--sys-neutral-text-support, #6d707f);
|
|
15
|
+
}
|
|
16
|
+
.treeNodeIcon svg{
|
|
17
|
+
width:var(--size-icon-container-s, 24px) !important;
|
|
18
|
+
height:var(--size-icon-container-s, 24px) !important;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.treeNodeTitle{
|
|
22
|
+
flex-grow:1;
|
|
23
|
+
box-sizing:border-box;
|
|
24
|
+
min-width:var(--size-tree-item-checkbox-wrap, 24px);
|
|
25
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.treeNodeActions{
|
|
29
|
+
display:flex;
|
|
30
|
+
visibility:hidden;
|
|
31
|
+
}
|
|
32
|
+
.treeNodeActions:focus-visible, .treeNodeActions[data-focused]{
|
|
33
|
+
visibility:visible;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.treeNodeContent{
|
|
37
|
+
height:var(--size-tree-item-height, 32px);
|
|
38
|
+
gap:var(--space-tree-item-content-layout-gap, 4px);
|
|
39
|
+
padding-right:var(--space-tree-item-content-layout-padding, 4px);
|
|
40
|
+
padding-left:var(--space-tree-item-content-layout-padding, 4px);
|
|
41
|
+
border-radius:var(--radius-tree-item-content-layout, 8px);
|
|
42
|
+
cursor:pointer;
|
|
43
|
+
position:relative;
|
|
44
|
+
display:flex;
|
|
45
|
+
align-items:center;
|
|
46
|
+
box-sizing:border-box;
|
|
47
|
+
width:100%;
|
|
48
|
+
}
|
|
49
|
+
.treeNodeContent::before{
|
|
50
|
+
pointer-events:none;
|
|
51
|
+
content:"";
|
|
52
|
+
position:absolute;
|
|
53
|
+
top:0;
|
|
54
|
+
left:0;
|
|
55
|
+
box-sizing:border-box;
|
|
56
|
+
width:100%;
|
|
57
|
+
height:100%;
|
|
58
|
+
opacity:0;
|
|
59
|
+
background-color:var(--sys-neutral-accent-default, #787b8a);
|
|
60
|
+
border-radius:inherit;
|
|
61
|
+
}
|
|
62
|
+
.treeNodeContent:hover::before, .treeNodeContent:focus-visible::before, .treeNodeContent[data-droplist-active]::before{
|
|
63
|
+
opacity:var(--opacity-a008, 0.08);
|
|
64
|
+
}
|
|
65
|
+
.treeNodeContent:hover .treeNodeActions, .treeNodeContent:focus-visible .treeNodeActions, .treeNodeContent[data-droplist-active] .treeNodeActions{
|
|
66
|
+
visibility:visible;
|
|
67
|
+
}
|
|
68
|
+
.treeNodeContent:focus-visible{
|
|
69
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
70
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
71
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
72
|
+
outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
|
|
73
|
+
outline-color:var(--sys-available-complementary, #1c1c24);
|
|
74
|
+
}
|
|
75
|
+
.treeNodeContent[data-multiselect]{
|
|
76
|
+
cursor:default;
|
|
77
|
+
}
|
|
78
|
+
.treeNodeContent[aria-disabled=true]{
|
|
79
|
+
cursor:not-allowed;
|
|
80
|
+
}
|
|
81
|
+
.treeNodeContent[aria-disabled=true]::before{
|
|
82
|
+
display:none;
|
|
83
|
+
}
|
|
84
|
+
.treeNodeContent[aria-disabled=true] .treeNodeTitle, .treeNodeContent[aria-disabled=true] .treeNodeIcon{
|
|
85
|
+
color:var(--sys-neutral-text-disabled, #aaaebd);
|
|
86
|
+
}
|
|
87
|
+
.treeNodeContent[aria-selected=true]:not([data-multiselect])::before{
|
|
88
|
+
opacity:var(--opacity-a008, 0.08);
|
|
89
|
+
background-color:var(--sys-primary-accent-default, #794ed3);
|
|
90
|
+
}
|
|
91
|
+
.treeNodeContent[aria-selected=true]:not([data-multiselect]):hover::before{
|
|
92
|
+
opacity:var(--opacity-a016, 0.16);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.treeNodeCheckboxWrap{
|
|
96
|
+
width:var(--size-tree-item-checkbox-wrap, 24px);
|
|
97
|
+
height:var(--size-tree-item-checkbox-wrap, 24px);
|
|
98
|
+
display:flex;
|
|
99
|
+
flex-shrink:0;
|
|
100
|
+
align-items:center;
|
|
101
|
+
justify-content:center;
|
|
102
|
+
box-sizing:border-box;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.treeNodeExpandButton{
|
|
106
|
+
box-sizing:border-box;
|
|
107
|
+
}
|
|
108
|
+
.treeNodeExpandButton svg{
|
|
109
|
+
transition:transform 0.2s ease;
|
|
110
|
+
}
|
|
111
|
+
.treeNodeExpandButton[data-expanded] svg{
|
|
112
|
+
transform:rotate(90deg);
|
|
113
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.expandableTreeNode{
|
|
2
|
+
position:relative;
|
|
3
|
+
width:100%;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.expandableContent{
|
|
7
|
+
overflow:hidden;
|
|
8
|
+
display:flex;
|
|
9
|
+
box-sizing:border-box;
|
|
10
|
+
min-height:0;
|
|
11
|
+
visibility:hidden;
|
|
12
|
+
transition:visibility 200ms;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.expandableWrap{
|
|
16
|
+
overflow:hidden;
|
|
17
|
+
display:grid;
|
|
18
|
+
grid-template-rows:0fr;
|
|
19
|
+
box-sizing:border-box;
|
|
20
|
+
width:100%;
|
|
21
|
+
transition:grid-template-rows 200ms;
|
|
22
|
+
}
|
|
23
|
+
.expandableWrap[data-expanded=true]{
|
|
24
|
+
overflow:unset;
|
|
25
|
+
grid-template-rows:1fr;
|
|
26
|
+
}
|
|
27
|
+
.expandableWrap[data-expanded=true] .expandableContent{
|
|
28
|
+
visibility:visible;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.expandableNested{
|
|
32
|
+
width:100%;
|
|
33
|
+
min-width:0;
|
|
34
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
.treeLine{
|
|
2
|
+
pointer-events:none;
|
|
3
|
+
position:relative;
|
|
4
|
+
flex-shrink:0;
|
|
5
|
+
width:var(--size-tree-item-line-width, 24px);
|
|
6
|
+
visibility:hidden;
|
|
7
|
+
}
|
|
8
|
+
.treeLine[data-visible]{
|
|
9
|
+
visibility:visible;
|
|
10
|
+
}
|
|
11
|
+
.treeLine[data-visible]::after{
|
|
12
|
+
content:"";
|
|
13
|
+
position:absolute;
|
|
14
|
+
top:0;
|
|
15
|
+
left:50%;
|
|
16
|
+
transform:translateX(-50%);
|
|
17
|
+
width:1px;
|
|
18
|
+
height:calc(100% - var(--size-tree-item-height, 32px) / 2);
|
|
19
|
+
background:var(--sys-neutral-decor-default, #dde0ea);
|
|
20
|
+
}
|
|
21
|
+
.treeLine[data-half-height]::after{
|
|
22
|
+
height:calc(100% - var(--size-tree-item-height, 32px) / 2);
|
|
23
|
+
}
|
|
24
|
+
.treeLine[data-horizontal]::after{
|
|
25
|
+
top:50%;
|
|
26
|
+
left:-50%;
|
|
27
|
+
transform:translateY(-50%);
|
|
28
|
+
width:calc(150% - var(--space-tree-item-child-line-padding, 8px));
|
|
29
|
+
height:1px;
|
|
30
|
+
}
|
|
31
|
+
.treeLine[data-horizontal][data-half-width]{
|
|
32
|
+
width:0;
|
|
33
|
+
}
|
|
34
|
+
.treeLine[data-horizontal][data-half-width]::after{
|
|
35
|
+
left:calc(0px - var(--size-tree-item-line-width, 24px) / 2);
|
|
36
|
+
width:calc(var(--size-tree-item-line-width, 24px) / 2);
|
|
37
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
.treeNode{
|
|
2
|
+
display:flex;
|
|
3
|
+
align-items:center;
|
|
4
|
+
box-sizing:border-box;
|
|
5
|
+
width:100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.treeNodeIcon{
|
|
9
|
+
display:flex;
|
|
10
|
+
flex-shrink:0;
|
|
11
|
+
align-items:center;
|
|
12
|
+
justify-content:center;
|
|
13
|
+
box-sizing:border-box;
|
|
14
|
+
color:var(--sys-neutral-text-support, #6d707f);
|
|
15
|
+
}
|
|
16
|
+
.treeNodeIcon svg{
|
|
17
|
+
width:var(--size-icon-container-s, 24px) !important;
|
|
18
|
+
height:var(--size-icon-container-s, 24px) !important;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.treeNodeTitle{
|
|
22
|
+
flex-grow:1;
|
|
23
|
+
box-sizing:border-box;
|
|
24
|
+
min-width:var(--size-tree-item-checkbox-wrap, 24px);
|
|
25
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.treeNodeActions{
|
|
29
|
+
display:flex;
|
|
30
|
+
visibility:hidden;
|
|
31
|
+
}
|
|
32
|
+
.treeNodeActions:focus-visible, .treeNodeActions[data-focused]{
|
|
33
|
+
visibility:visible;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.treeNodeContent{
|
|
37
|
+
height:var(--size-tree-item-height, 32px);
|
|
38
|
+
gap:var(--space-tree-item-content-layout-gap, 4px);
|
|
39
|
+
padding-right:var(--space-tree-item-content-layout-padding, 4px);
|
|
40
|
+
padding-left:var(--space-tree-item-content-layout-padding, 4px);
|
|
41
|
+
border-radius:var(--radius-tree-item-content-layout, 8px);
|
|
42
|
+
cursor:pointer;
|
|
43
|
+
position:relative;
|
|
44
|
+
display:flex;
|
|
45
|
+
align-items:center;
|
|
46
|
+
box-sizing:border-box;
|
|
47
|
+
width:100%;
|
|
48
|
+
}
|
|
49
|
+
.treeNodeContent::before{
|
|
50
|
+
pointer-events:none;
|
|
51
|
+
content:"";
|
|
52
|
+
position:absolute;
|
|
53
|
+
top:0;
|
|
54
|
+
left:0;
|
|
55
|
+
box-sizing:border-box;
|
|
56
|
+
width:100%;
|
|
57
|
+
height:100%;
|
|
58
|
+
opacity:0;
|
|
59
|
+
background-color:var(--sys-neutral-accent-default, #787b8a);
|
|
60
|
+
border-radius:inherit;
|
|
61
|
+
}
|
|
62
|
+
.treeNodeContent:hover::before, .treeNodeContent:focus-visible::before, .treeNodeContent[data-droplist-active]::before{
|
|
63
|
+
opacity:var(--opacity-a008, 0.08);
|
|
64
|
+
}
|
|
65
|
+
.treeNodeContent:hover .treeNodeActions, .treeNodeContent:focus-visible .treeNodeActions, .treeNodeContent[data-droplist-active] .treeNodeActions{
|
|
66
|
+
visibility:visible;
|
|
67
|
+
}
|
|
68
|
+
.treeNodeContent:focus-visible{
|
|
69
|
+
outline-width:var(--border-state-focus-s-border-width, 2px);
|
|
70
|
+
outline-style:var(--border-state-focus-s-border-style, solid);
|
|
71
|
+
outline-color:var(--border-state-focus-s-border-color, );
|
|
72
|
+
outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
|
|
73
|
+
outline-color:var(--sys-available-complementary, #1c1c24);
|
|
74
|
+
}
|
|
75
|
+
.treeNodeContent[data-multiselect]{
|
|
76
|
+
cursor:default;
|
|
77
|
+
}
|
|
78
|
+
.treeNodeContent[aria-disabled=true]{
|
|
79
|
+
cursor:not-allowed;
|
|
80
|
+
}
|
|
81
|
+
.treeNodeContent[aria-disabled=true]::before{
|
|
82
|
+
display:none;
|
|
83
|
+
}
|
|
84
|
+
.treeNodeContent[aria-disabled=true] .treeNodeTitle, .treeNodeContent[aria-disabled=true] .treeNodeIcon{
|
|
85
|
+
color:var(--sys-neutral-text-disabled, #aaaebd);
|
|
86
|
+
}
|
|
87
|
+
.treeNodeContent[aria-selected=true]:not([data-multiselect])::before{
|
|
88
|
+
opacity:var(--opacity-a008, 0.08);
|
|
89
|
+
background-color:var(--sys-primary-accent-default, #794ed3);
|
|
90
|
+
}
|
|
91
|
+
.treeNodeContent[aria-selected=true]:not([data-multiselect]):hover::before{
|
|
92
|
+
opacity:var(--opacity-a016, 0.16);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.treeNodeCheckboxWrap{
|
|
96
|
+
width:var(--size-tree-item-checkbox-wrap, 24px);
|
|
97
|
+
height:var(--size-tree-item-checkbox-wrap, 24px);
|
|
98
|
+
display:flex;
|
|
99
|
+
flex-shrink:0;
|
|
100
|
+
align-items:center;
|
|
101
|
+
justify-content:center;
|
|
102
|
+
box-sizing:border-box;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.treeNodeExpandButton{
|
|
106
|
+
box-sizing:border-box;
|
|
107
|
+
}
|
|
108
|
+
.treeNodeExpandButton svg{
|
|
109
|
+
transition:transform 0.2s ease;
|
|
110
|
+
}
|
|
111
|
+
.treeNodeExpandButton[data-expanded] svg{
|
|
112
|
+
transform:rotate(90deg);
|
|
113
|
+
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Tree",
|
|
7
|
-
"version": "0.6.26-preview-
|
|
7
|
+
"version": "0.6.26-preview-7adaddbe.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
"license": "Apache-2.0",
|
|
35
35
|
"scripts": {},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@snack-uikit/button": "0.17.6-preview-
|
|
38
|
-
"@snack-uikit/icons": "0.22.2-preview-
|
|
39
|
-
"@snack-uikit/list": "0.17.1-preview-
|
|
40
|
-
"@snack-uikit/toggles": "0.10.5-preview-
|
|
41
|
-
"@snack-uikit/truncate-string": "0.4.25-preview-
|
|
42
|
-
"@snack-uikit/typography": "0.6.4-preview-
|
|
43
|
-
"@snack-uikit/utils": "3.4.1-preview-
|
|
37
|
+
"@snack-uikit/button": "0.17.6-preview-7adaddbe.0",
|
|
38
|
+
"@snack-uikit/icons": "0.22.2-preview-7adaddbe.0",
|
|
39
|
+
"@snack-uikit/list": "0.17.1-preview-7adaddbe.0",
|
|
40
|
+
"@snack-uikit/toggles": "0.10.5-preview-7adaddbe.0",
|
|
41
|
+
"@snack-uikit/truncate-string": "0.4.25-preview-7adaddbe.0",
|
|
42
|
+
"@snack-uikit/typography": "0.6.4-preview-7adaddbe.0",
|
|
43
|
+
"@snack-uikit/utils": "3.4.1-preview-7adaddbe.0",
|
|
44
44
|
"classnames": "2.3.2",
|
|
45
45
|
"react-transition-state": "2.1.1",
|
|
46
46
|
"uncontrollable": "8.0.4"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "22ebb9f5f7f3407dd6a2a31baf58dab13199b158"
|
|
49
49
|
}
|