@react-spectrum/tree 3.0.0-nightly.5042 → 3.0.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/dist/{TreeView.fdfdaa1c.css → TreeView.a32d8337.css} +112 -84
- package/dist/TreeView.a32d8337.css.map +1 -0
- package/dist/TreeView.main.js +116 -126
- package/dist/TreeView.main.js.map +1 -1
- package/dist/TreeView.mjs +117 -128
- package/dist/TreeView.module.js +117 -128
- package/dist/TreeView.module.js.map +1 -1
- package/dist/import.mjs +4 -2
- package/dist/main.js +4 -0
- package/dist/main.js.map +1 -1
- package/dist/module.js +4 -2
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +11 -9
- package/dist/types.d.ts.map +1 -1
- package/package.json +16 -16
- package/src/TreeView.tsx +67 -84
- package/src/index.ts +3 -2
- package/dist/TreeView.fdfdaa1c.css.map +0 -1
package/dist/TreeView.mjs
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import "./TreeView.
|
|
2
|
-
import {
|
|
1
|
+
import "./TreeView.a32d8337.css";
|
|
2
|
+
import {Tree as $FHprs$Tree, TreeItem as $FHprs$TreeItem, TreeItemContent as $FHprs$TreeItemContent, useContextProps as $FHprs$useContextProps, ButtonContext as $FHprs$ButtonContext} from "react-aria-components";
|
|
3
3
|
import {Checkbox as $FHprs$Checkbox} from "@react-spectrum/checkbox";
|
|
4
4
|
import $FHprs$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
|
|
5
5
|
import $FHprs$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
|
|
6
6
|
import {isAndroid as $FHprs$isAndroid} from "@react-aria/utils";
|
|
7
|
-
import $FHprs$react, {createContext as $FHprs$createContext,
|
|
7
|
+
import $FHprs$react, {createContext as $FHprs$createContext, useRef as $FHprs$useRef} from "react";
|
|
8
8
|
import {useStyleProps as $FHprs$useStyleProps, useDOMRef as $FHprs$useDOMRef, SlotProvider as $FHprs$SlotProvider} from "@react-spectrum/utils";
|
|
9
|
-
import {Text as $FHprs$Text} from "@react-spectrum/text";
|
|
10
9
|
import {useButton as $FHprs$useButton} from "@react-aria/button";
|
|
11
10
|
import {useLocale as $FHprs$useLocale} from "@react-aria/i18n";
|
|
12
11
|
|
|
@@ -29,34 +28,38 @@ import {useLocale as $FHprs$useLocale} from "@react-aria/i18n";
|
|
|
29
28
|
|
|
30
29
|
|
|
31
30
|
|
|
32
|
-
|
|
33
31
|
const $48b8113347121625$var$TreeRendererContext = /*#__PURE__*/ (0, $FHprs$createContext)({});
|
|
34
|
-
function $48b8113347121625$var$useTreeRendererContext() {
|
|
35
|
-
return (0, $FHprs$useContext)($48b8113347121625$var$TreeRendererContext);
|
|
36
|
-
}
|
|
37
32
|
// TODO: add animations for rows appearing and disappearing
|
|
38
33
|
// TODO: the below is needed so the borders of the top and bottom row isn't cut off if the TreeView is wrapped within a container by always reserving the 2px needed for the
|
|
39
34
|
// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
|
|
40
35
|
// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
|
|
41
36
|
const $48b8113347121625$var$tree = function anonymous(props) {
|
|
42
37
|
let rules = "";
|
|
43
|
-
rules += '
|
|
44
|
-
rules += '
|
|
45
|
-
rules += '
|
|
46
|
-
rules += '
|
|
47
|
-
rules += '
|
|
48
|
-
rules += '
|
|
49
|
-
rules += '
|
|
50
|
-
rules += '
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
38
|
+
if (props.isFocusVisible) rules += ' s1-_Es1-b';
|
|
39
|
+
else rules += ' s1-_Es1-a';
|
|
40
|
+
rules += ' s1-ds1-as1-___D';
|
|
41
|
+
rules += ' s1-ds1-___I';
|
|
42
|
+
rules += ' s1-_Gs1-c';
|
|
43
|
+
rules += ' s1-_F-yj8a3w';
|
|
44
|
+
rules += ' s1-ns1-Y';
|
|
45
|
+
rules += ' s1-os1-Y';
|
|
46
|
+
rules += ' s1-ws1-c';
|
|
47
|
+
rules += ' s1-xs1-c';
|
|
48
|
+
rules += ' s1-us1-a';
|
|
49
|
+
rules += ' s1-vs1-a';
|
|
50
|
+
rules += ' s1-__ks1-a';
|
|
51
|
+
rules += ' s1-As1-a';
|
|
52
|
+
rules += ' s1-cs1-as1-___y';
|
|
53
|
+
rules += ' s1-cs1-a';
|
|
54
|
+
if (props.isEmpty) rules += ' s1-_Vs1-d';
|
|
55
|
+
if (props.isEmpty) rules += ' s1-_Us1-c';
|
|
56
|
+
if (props.isEmpty) rules += ' s1-_Ss1-d';
|
|
57
|
+
rules += ' s1-__ss1-a';
|
|
58
|
+
rules += ' s1-__ts1-a';
|
|
56
59
|
return rules;
|
|
57
60
|
};
|
|
58
|
-
|
|
59
|
-
let { children: children, selectionStyle: selectionStyle } = props;
|
|
61
|
+
const $48b8113347121625$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $FHprs$react).forwardRef(function TreeView(props, ref) {
|
|
62
|
+
let { children: children, selectionStyle: selectionStyle, UNSAFE_className: UNSAFE_className } = props;
|
|
60
63
|
let renderer;
|
|
61
64
|
if (typeof children === 'function') renderer = children;
|
|
62
65
|
let { styleProps: styleProps } = (0, $FHprs$useStyleProps)(props);
|
|
@@ -66,140 +69,127 @@ function $48b8113347121625$var$TreeView(props, ref) {
|
|
|
66
69
|
value: {
|
|
67
70
|
renderer: renderer
|
|
68
71
|
}
|
|
69
|
-
}, /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$
|
|
72
|
+
}, /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Tree), {
|
|
70
73
|
...props,
|
|
71
74
|
...styleProps,
|
|
72
|
-
className: (
|
|
73
|
-
isEmpty: isEmpty
|
|
74
|
-
}),
|
|
75
|
+
className: (renderProps)=>(UNSAFE_className !== null && UNSAFE_className !== void 0 ? UNSAFE_className : '') + $48b8113347121625$var$tree(renderProps),
|
|
75
76
|
selectionBehavior: selectionBehavior,
|
|
76
77
|
ref: domRef
|
|
77
78
|
}, props.children));
|
|
78
|
-
}
|
|
79
|
+
});
|
|
79
80
|
const $48b8113347121625$var$treeRow = function anonymous(props) {
|
|
80
81
|
let rules = "";
|
|
81
|
-
rules += '
|
|
82
|
-
rules += '
|
|
83
|
-
rules += '
|
|
84
|
-
rules += '
|
|
85
|
-
rules += '
|
|
86
|
-
rules += '
|
|
87
|
-
rules += '
|
|
88
|
-
rules += '
|
|
89
|
-
rules += '
|
|
90
|
-
rules += '
|
|
91
|
-
if (props.isLink) rules += '
|
|
92
|
-
else rules += '
|
|
93
|
-
if (props.isSelected) rules += ' b-7vr0l1';
|
|
94
|
-
else if (props.isPressed) rules += ' b-1t6gvb8';
|
|
95
|
-
else if (props.isFocusVisibleWithin) rules += ' b-ml9cvk';
|
|
96
|
-
else if (props.isHovered) rules += ' b-ml9cvk';
|
|
82
|
+
rules += ' s1-Xs1-c';
|
|
83
|
+
rules += ' s1-_Ss1-d';
|
|
84
|
+
rules += ' s1-ns1-k';
|
|
85
|
+
rules += ' s1-os1-Y';
|
|
86
|
+
rules += ' s1-__ks1-a';
|
|
87
|
+
rules += ' s1-6s1-c';
|
|
88
|
+
rules += ' s1-7s1-d';
|
|
89
|
+
rules += ' s1-9s1-b';
|
|
90
|
+
rules += ' s1-as1-___K';
|
|
91
|
+
rules += ' s1-_Es1-a';
|
|
92
|
+
if (props.isLink) rules += ' s1-__Es1-c';
|
|
93
|
+
else rules += ' s1-__Es1-b';
|
|
94
|
+
if (props.isSelected) rules += ' s1-b-7vr0l1';
|
|
95
|
+
else if (props.isPressed) rules += ' s1-b-1t6gvb8';
|
|
96
|
+
else if (props.isFocusVisibleWithin) rules += ' s1-b-ml9cvk';
|
|
97
|
+
else if (props.isHovered) rules += ' s1-b-ml9cvk';
|
|
97
98
|
return rules;
|
|
98
99
|
};
|
|
99
100
|
const $48b8113347121625$var$treeCellGrid = function anonymous(props) {
|
|
100
101
|
let rules = "";
|
|
101
|
-
rules += '
|
|
102
|
-
rules += '
|
|
103
|
-
rules += '
|
|
104
|
-
rules += ' __d-1nxidkl-1nxidkl-1nxidkl-
|
|
105
|
-
rules += ' __e-375yi6';
|
|
106
|
-
rules += ' __f-1qk85yo';
|
|
102
|
+
rules += ' s1-_Ss1-f';
|
|
103
|
+
rules += ' s1-os1-Y';
|
|
104
|
+
rules += ' s1-_Us1-c';
|
|
105
|
+
rules += ' s1-__d-1nxidkl-1nxidkl-1nxidkl-3hmti-1nxidkl-375yi6-1nxidkl-ykdwf2';
|
|
106
|
+
rules += ' s1-__e-375yi6';
|
|
107
|
+
rules += ' s1-__f-1qk85yo';
|
|
107
108
|
if (props.isDisabled) {
|
|
108
|
-
rules += '
|
|
109
|
-
rules += '
|
|
109
|
+
rules += ' s1-as1-as1-___F';
|
|
110
|
+
rules += ' s1-as1-i';
|
|
110
111
|
}
|
|
111
112
|
return rules;
|
|
112
113
|
};
|
|
113
114
|
// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden
|
|
114
115
|
const $48b8113347121625$var$treeCheckbox = function anonymous(props) {
|
|
115
116
|
let rules = "";
|
|
116
|
-
rules += ' __g-4wahvw';
|
|
117
|
-
rules += ' _J-37nn5o';
|
|
118
|
-
rules += '
|
|
119
|
-
rules += '
|
|
117
|
+
rules += ' s1-__g-4wahvw';
|
|
118
|
+
rules += ' s1-_J-37nn5o';
|
|
119
|
+
rules += ' s1-Cs1-d';
|
|
120
|
+
rules += ' s1-Ds1-a';
|
|
120
121
|
return rules;
|
|
121
122
|
};
|
|
122
123
|
const $48b8113347121625$var$treeIcon = function anonymous(props) {
|
|
123
124
|
let rules = "";
|
|
124
|
-
rules += ' __g-ykjmzy';
|
|
125
|
-
rules += '
|
|
125
|
+
rules += ' s1-__g-ykjmzy';
|
|
126
|
+
rules += ' s1-Ds1-c';
|
|
126
127
|
return rules;
|
|
127
128
|
};
|
|
128
129
|
const $48b8113347121625$var$treeContent = function anonymous(props) {
|
|
129
130
|
let rules = "";
|
|
130
|
-
rules += ' __g-1mod4sg';
|
|
131
|
-
rules += '
|
|
132
|
-
rules += '
|
|
133
|
-
rules += '
|
|
134
|
-
rules += '
|
|
131
|
+
rules += ' s1-__g-1mod4sg';
|
|
132
|
+
rules += ' s1-_gs1-a';
|
|
133
|
+
rules += ' s1-_ks1-b';
|
|
134
|
+
rules += ' s1-__ss1-b';
|
|
135
|
+
rules += ' s1-__ts1-b';
|
|
135
136
|
return rules;
|
|
136
137
|
};
|
|
137
138
|
const $48b8113347121625$var$treeActions = function anonymous(props) {
|
|
138
139
|
let rules = "";
|
|
139
|
-
rules += ' __g-8ayfo6';
|
|
140
|
-
rules += ' _3-3t1x';
|
|
141
|
-
rules += ' _2-3t1x';
|
|
142
|
-
rules += '
|
|
143
|
-
rules += '
|
|
140
|
+
rules += ' s1-__g-8ayfo6';
|
|
141
|
+
rules += ' s1-_3-3t1x';
|
|
142
|
+
rules += ' s1-_2-3t1x';
|
|
143
|
+
rules += ' s1-Cs1-F';
|
|
144
|
+
rules += ' s1-Ds1-b';
|
|
144
145
|
return rules;
|
|
145
146
|
};
|
|
146
147
|
const $48b8113347121625$var$treeActionMenu = function anonymous(props) {
|
|
147
148
|
let rules = "";
|
|
148
|
-
rules += ' __g-wit6hk';
|
|
149
|
-
rules += '
|
|
149
|
+
rules += ' s1-__g-wit6hk';
|
|
150
|
+
rules += ' s1-os1-i';
|
|
150
151
|
return rules;
|
|
151
152
|
};
|
|
152
153
|
const $48b8113347121625$var$treeRowOutline = function anonymous(props) {
|
|
153
154
|
let rules = "";
|
|
154
|
-
rules += '
|
|
155
|
-
rules += '
|
|
156
|
-
rules += '
|
|
157
|
-
rules += '
|
|
155
|
+
rules += ' s1-_Ss1-a';
|
|
156
|
+
rules += ' s1-Xs1-a';
|
|
157
|
+
rules += ' s1-Ys1-a';
|
|
158
|
+
rules += ' s1-Zs1-a';
|
|
159
|
+
if (props.isFirst) rules += ' s1-0s1-a';
|
|
160
|
+
else if (props.isSelected) {
|
|
161
|
+
if (props.isFocusVisible) rules += ' s1-0-yj8a3w';
|
|
162
|
+
else rules += ' s1-0-yj899n';
|
|
163
|
+
} else if (props.isFocusVisible) rules += ' s1-0-yj8a3w';
|
|
164
|
+
else rules += ' s1-0s1-a';
|
|
165
|
+
rules += ' s1-2s1-a';
|
|
166
|
+
rules += ' s1-__ys1-a';
|
|
167
|
+
rules += ' s1-_ts1-b';
|
|
158
168
|
if (props.isSelected) {
|
|
159
|
-
if (props.isFocusVisible) rules += '
|
|
160
|
-
else rules += '
|
|
161
|
-
} else if (props.isFocusVisible) rules += '
|
|
162
|
-
else rules += ' _0a';
|
|
163
|
-
rules += ' _2a';
|
|
164
|
-
rules += ' __ya';
|
|
165
|
-
rules += ' _tb';
|
|
169
|
+
if (props.isFocusVisible) rules += ' s1-_os1-a-4bhpmf';
|
|
170
|
+
else rules += ' s1-_os1-a-zlnqab';
|
|
171
|
+
} else if (props.isFocusVisible) rules += ' s1-_os1-a-4bhpmf';
|
|
166
172
|
if (props.isSelected) {
|
|
167
|
-
if (props.isFocusVisible) rules += '
|
|
168
|
-
else rules += '
|
|
169
|
-
} else if (props.isFocusVisible) rules += '
|
|
170
|
-
if (props.isSelected) {
|
|
171
|
-
if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
172
|
-
else rules += ' _o-1ytnijz';
|
|
173
|
-
} else if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
173
|
+
if (props.isFocusVisible) rules += ' s1-_o-ba5uxf';
|
|
174
|
+
else rules += ' s1-_o-1ytnijz';
|
|
175
|
+
} else if (props.isFocusVisible) rules += ' s1-_o-ba5uxf';
|
|
174
176
|
return rules;
|
|
175
177
|
};
|
|
176
178
|
const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
177
|
-
let {
|
|
178
|
-
|
|
179
|
-
let nestedRows;
|
|
180
|
-
let { renderer: renderer } = $48b8113347121625$var$useTreeRendererContext();
|
|
181
|
-
// TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be
|
|
182
|
-
// a nested tree item
|
|
183
|
-
if (typeof children === 'string') content = /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Text), null, children);
|
|
184
|
-
else {
|
|
185
|
-
content = [];
|
|
186
|
-
nestedRows = [];
|
|
187
|
-
(0, $FHprs$react).Children.forEach(children, (node)=>{
|
|
188
|
-
if (/*#__PURE__*/ (0, $FHprs$isValidElement)(node) && node.type === $48b8113347121625$export$6e77ea6719814e9c) nestedRows.push(node);
|
|
189
|
-
else content.push(node);
|
|
190
|
-
});
|
|
191
|
-
}
|
|
192
|
-
if (childItems != null && renderer) nestedRows = /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Collection), {
|
|
193
|
-
items: childItems
|
|
194
|
-
}, renderer);
|
|
195
|
-
return(// TODO right now all the tree rows have the various data attributes applied on their dom nodes, should they? Doesn't feel very useful
|
|
196
|
-
/*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$UNSTABLE_TreeItem), {
|
|
179
|
+
let { href: href } = props;
|
|
180
|
+
return /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$TreeItem), {
|
|
197
181
|
...props,
|
|
198
182
|
className: (renderProps)=>$48b8113347121625$var$treeRow({
|
|
199
183
|
...renderProps,
|
|
200
184
|
isLink: !!href
|
|
201
185
|
})
|
|
202
|
-
}
|
|
186
|
+
});
|
|
187
|
+
};
|
|
188
|
+
const $48b8113347121625$export$9a5779ed3fade674 = (props)=>{
|
|
189
|
+
let { children: children } = props;
|
|
190
|
+
return /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$TreeItemContent), null, ({ isExpanded: isExpanded, hasChildItems: hasChildItems, level: level, selectionMode: selectionMode, selectionBehavior: selectionBehavior, isDisabled: isDisabled, isSelected: isSelected, isFocusVisible: isFocusVisible, state: state, id: id })=>{
|
|
191
|
+
let isFirst = state.collection.getFirstKey() === id;
|
|
192
|
+
return /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
|
|
203
193
|
className: $48b8113347121625$var$treeCellGrid({
|
|
204
194
|
isDisabled: isDisabled
|
|
205
195
|
})
|
|
@@ -216,7 +206,7 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
216
206
|
gridArea: 'level-padding',
|
|
217
207
|
marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`
|
|
218
208
|
}
|
|
219
|
-
}),
|
|
209
|
+
}), hasChildItems && /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$ExpandableRowChevron, {
|
|
220
210
|
isDisabled: isDisabled,
|
|
221
211
|
isExpanded: isExpanded
|
|
222
212
|
}), /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$SlotProvider), {
|
|
@@ -252,28 +242,30 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
252
242
|
isQuiet: true
|
|
253
243
|
}
|
|
254
244
|
}
|
|
255
|
-
},
|
|
245
|
+
}, children), /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
|
|
256
246
|
className: $48b8113347121625$var$treeRowOutline({
|
|
257
247
|
isFocusVisible: isFocusVisible,
|
|
258
|
-
isSelected: isSelected
|
|
248
|
+
isSelected: isSelected,
|
|
249
|
+
isFirst: isFirst
|
|
259
250
|
})
|
|
260
|
-
}))
|
|
251
|
+
}));
|
|
252
|
+
});
|
|
261
253
|
};
|
|
262
254
|
const $48b8113347121625$var$expandButton = function anonymous(props) {
|
|
263
255
|
let rules = "";
|
|
264
|
-
rules += ' __g-pn4rxq';
|
|
265
|
-
rules += '
|
|
266
|
-
rules += '
|
|
267
|
-
rules += '
|
|
268
|
-
rules += '
|
|
269
|
-
rules += '
|
|
270
|
-
rules += '
|
|
271
|
-
rules += '
|
|
256
|
+
rules += ' s1-__g-pn4rxq';
|
|
257
|
+
rules += ' s1-ns1-Y';
|
|
258
|
+
rules += ' s1-4s1-b';
|
|
259
|
+
rules += ' s1-_Ss1-d';
|
|
260
|
+
rules += ' s1-_0s1-a';
|
|
261
|
+
rules += ' s1-_Ts1-b';
|
|
262
|
+
rules += ' s1-_Vs1-d';
|
|
263
|
+
rules += ' s1-_Es1-a';
|
|
272
264
|
if (props.isExpanded) {
|
|
273
|
-
if (props.isRTL) rules += ' W-negfvv';
|
|
274
|
-
else rules += ' W-10b8jr2';
|
|
265
|
+
if (props.isRTL) rules += ' s1-W-negfvv';
|
|
266
|
+
else rules += ' s1-W-10b8jr2';
|
|
275
267
|
}
|
|
276
|
-
rules += ' _H-1o2fh9e';
|
|
268
|
+
rules += ' s1-_H-1o2fh9e';
|
|
277
269
|
return rules;
|
|
278
270
|
};
|
|
279
271
|
function $48b8113347121625$var$ExpandableRowChevron(props) {
|
|
@@ -301,10 +293,7 @@ function $48b8113347121625$var$ExpandableRowChevron(props) {
|
|
|
301
293
|
})
|
|
302
294
|
}, direction === 'ltr' ? /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronRightMedium), null) : /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronLeftMedium), null));
|
|
303
295
|
}
|
|
304
|
-
/**
|
|
305
|
-
* A tree view provides users with a way to navigate nested hierarchical information.
|
|
306
|
-
*/ const $48b8113347121625$export$6940b0d9c820eca7 = /*#__PURE__*/ (0, $FHprs$react).forwardRef($48b8113347121625$var$TreeView);
|
|
307
296
|
|
|
308
297
|
|
|
309
|
-
export {$48b8113347121625$export$6e77ea6719814e9c as TreeViewItem, $48b8113347121625$export$
|
|
298
|
+
export {$48b8113347121625$export$6940b0d9c820eca7 as TreeView, $48b8113347121625$export$6e77ea6719814e9c as TreeViewItem, $48b8113347121625$export$9a5779ed3fade674 as TreeViewItemContent};
|
|
310
299
|
//# sourceMappingURL=TreeView.module.js.map
|