@react-spectrum/tree 3.0.0-alpha.0 → 3.0.0-alpha.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.main.js +98 -98
- package/dist/TreeView.mjs +99 -99
- package/dist/TreeView.module.js +98 -98
- package/package.json +12 -12
package/dist/TreeView.main.js
CHANGED
|
@@ -51,28 +51,28 @@ function $9b0dbe0a88ecfa3f$var$useTreeRendererContext() {
|
|
|
51
51
|
// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview
|
|
52
52
|
const $9b0dbe0a88ecfa3f$var$tree = function anonymous(props) {
|
|
53
53
|
let rules = "";
|
|
54
|
-
rules +=
|
|
55
|
-
rules +=
|
|
56
|
-
rules +=
|
|
57
|
-
rules +=
|
|
58
|
-
rules +=
|
|
59
|
-
rules +=
|
|
60
|
-
rules +=
|
|
61
|
-
rules +=
|
|
62
|
-
if (props.isEmpty) rules +=
|
|
63
|
-
if (props.isEmpty) rules +=
|
|
64
|
-
if (props.isEmpty) rules +=
|
|
65
|
-
if (props.isEmpty) rules +=
|
|
66
|
-
if (props.isEmpty) rules +=
|
|
54
|
+
rules += ' wc';
|
|
55
|
+
rules += ' xc';
|
|
56
|
+
rules += ' ua';
|
|
57
|
+
rules += ' va';
|
|
58
|
+
rules += ' __ka';
|
|
59
|
+
rules += ' Aa';
|
|
60
|
+
rules += ' ca___y';
|
|
61
|
+
rules += ' ca';
|
|
62
|
+
if (props.isEmpty) rules += ' _Vd';
|
|
63
|
+
if (props.isEmpty) rules += ' _Uc';
|
|
64
|
+
if (props.isEmpty) rules += ' oY';
|
|
65
|
+
if (props.isEmpty) rules += ' nY';
|
|
66
|
+
if (props.isEmpty) rules += ' _Sd';
|
|
67
67
|
return rules;
|
|
68
68
|
};
|
|
69
69
|
function $9b0dbe0a88ecfa3f$var$TreeView(props, ref) {
|
|
70
70
|
let { children: children, selectionStyle: selectionStyle } = props;
|
|
71
71
|
let renderer;
|
|
72
|
-
if (typeof children ===
|
|
72
|
+
if (typeof children === 'function') renderer = children;
|
|
73
73
|
let { styleProps: styleProps } = (0, $6Q8R1$reactspectrumutils.useStyleProps)(props);
|
|
74
74
|
let domRef = (0, $6Q8R1$reactspectrumutils.useDOMRef)(ref);
|
|
75
|
-
let selectionBehavior = selectionStyle ===
|
|
75
|
+
let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';
|
|
76
76
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement($9b0dbe0a88ecfa3f$var$TreeRendererContext.Provider, {
|
|
77
77
|
value: {
|
|
78
78
|
renderer: renderer
|
|
@@ -89,99 +89,99 @@ function $9b0dbe0a88ecfa3f$var$TreeView(props, ref) {
|
|
|
89
89
|
}
|
|
90
90
|
const $9b0dbe0a88ecfa3f$var$treeRow = function anonymous(props) {
|
|
91
91
|
let rules = "";
|
|
92
|
-
rules +=
|
|
93
|
-
rules +=
|
|
94
|
-
rules +=
|
|
95
|
-
rules +=
|
|
96
|
-
rules +=
|
|
97
|
-
rules +=
|
|
98
|
-
rules +=
|
|
99
|
-
rules +=
|
|
100
|
-
rules +=
|
|
101
|
-
rules +=
|
|
102
|
-
if (props.isLink) rules +=
|
|
103
|
-
else rules +=
|
|
104
|
-
if (props.isSelected) rules +=
|
|
105
|
-
else if (props.isPressed) rules +=
|
|
106
|
-
else if (props.isFocusVisibleWithin) rules +=
|
|
107
|
-
else if (props.isHovered) rules +=
|
|
92
|
+
rules += ' Xc';
|
|
93
|
+
rules += ' _Sd';
|
|
94
|
+
rules += ' nk';
|
|
95
|
+
rules += ' oY';
|
|
96
|
+
rules += ' __ka';
|
|
97
|
+
rules += ' _6c';
|
|
98
|
+
rules += ' _7d';
|
|
99
|
+
rules += ' _9b';
|
|
100
|
+
rules += ' a___K';
|
|
101
|
+
rules += ' _Ea';
|
|
102
|
+
if (props.isLink) rules += ' __Ec';
|
|
103
|
+
else rules += ' __Eb';
|
|
104
|
+
if (props.isSelected) rules += ' b-7vr0l1';
|
|
105
|
+
else if (props.isPressed) rules += ' b-1t6gvb8';
|
|
106
|
+
else if (props.isFocusVisibleWithin) rules += ' b-ml9cvk';
|
|
107
|
+
else if (props.isHovered) rules += ' b-ml9cvk';
|
|
108
108
|
return rules;
|
|
109
109
|
};
|
|
110
110
|
const $9b0dbe0a88ecfa3f$var$treeCellGrid = function anonymous(props) {
|
|
111
111
|
let rules = "";
|
|
112
|
-
rules +=
|
|
113
|
-
rules +=
|
|
114
|
-
rules +=
|
|
115
|
-
rules +=
|
|
116
|
-
rules +=
|
|
117
|
-
rules +=
|
|
112
|
+
rules += ' _Sf';
|
|
113
|
+
rules += ' oY';
|
|
114
|
+
rules += ' _Uc';
|
|
115
|
+
rules += ' __d-1nxidkl-1nxidkl-1nxidkl-zjkg1z-1nxidkl-375yi6-1nxidkl-ykdwf2';
|
|
116
|
+
rules += ' __e-375yi6';
|
|
117
|
+
rules += ' __f-1qk85yo';
|
|
118
118
|
if (props.isDisabled) {
|
|
119
|
-
rules +=
|
|
120
|
-
rules +=
|
|
119
|
+
rules += ' aa___F';
|
|
120
|
+
rules += ' ai';
|
|
121
121
|
}
|
|
122
122
|
return rules;
|
|
123
123
|
};
|
|
124
124
|
// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden
|
|
125
125
|
const $9b0dbe0a88ecfa3f$var$treeCheckbox = function anonymous(props) {
|
|
126
126
|
let rules = "";
|
|
127
|
-
rules +=
|
|
128
|
-
rules +=
|
|
129
|
-
rules +=
|
|
130
|
-
rules +=
|
|
127
|
+
rules += ' __g-4wahvw';
|
|
128
|
+
rules += ' _J-37nn5o';
|
|
129
|
+
rules += ' Cd';
|
|
130
|
+
rules += ' Da';
|
|
131
131
|
return rules;
|
|
132
132
|
};
|
|
133
133
|
const $9b0dbe0a88ecfa3f$var$treeIcon = function anonymous(props) {
|
|
134
134
|
let rules = "";
|
|
135
|
-
rules +=
|
|
136
|
-
rules +=
|
|
135
|
+
rules += ' __g-ykjmzy';
|
|
136
|
+
rules += ' Dc';
|
|
137
137
|
return rules;
|
|
138
138
|
};
|
|
139
139
|
const $9b0dbe0a88ecfa3f$var$treeContent = function anonymous(props) {
|
|
140
140
|
let rules = "";
|
|
141
|
-
rules +=
|
|
142
|
-
rules +=
|
|
143
|
-
rules +=
|
|
144
|
-
rules +=
|
|
145
|
-
rules +=
|
|
141
|
+
rules += ' __g-1mod4sg';
|
|
142
|
+
rules += ' _ga';
|
|
143
|
+
rules += ' _kb';
|
|
144
|
+
rules += ' __sb';
|
|
145
|
+
rules += ' __tb';
|
|
146
146
|
return rules;
|
|
147
147
|
};
|
|
148
148
|
const $9b0dbe0a88ecfa3f$var$treeActions = function anonymous(props) {
|
|
149
149
|
let rules = "";
|
|
150
|
-
rules +=
|
|
151
|
-
rules +=
|
|
152
|
-
rules +=
|
|
153
|
-
rules +=
|
|
154
|
-
rules +=
|
|
150
|
+
rules += ' __g-8ayfo6';
|
|
151
|
+
rules += ' _3-3t1x';
|
|
152
|
+
rules += ' _2-3t1x';
|
|
153
|
+
rules += ' CF';
|
|
154
|
+
rules += ' Db';
|
|
155
155
|
return rules;
|
|
156
156
|
};
|
|
157
157
|
const $9b0dbe0a88ecfa3f$var$treeActionMenu = function anonymous(props) {
|
|
158
158
|
let rules = "";
|
|
159
|
-
rules +=
|
|
160
|
-
rules +=
|
|
159
|
+
rules += ' __g-wit6hk';
|
|
160
|
+
rules += ' oi';
|
|
161
161
|
return rules;
|
|
162
162
|
};
|
|
163
163
|
const $9b0dbe0a88ecfa3f$var$treeRowOutline = function anonymous(props) {
|
|
164
164
|
let rules = "";
|
|
165
|
-
rules +=
|
|
166
|
-
rules +=
|
|
167
|
-
rules +=
|
|
168
|
-
rules +=
|
|
165
|
+
rules += ' _Sa';
|
|
166
|
+
rules += ' Xa';
|
|
167
|
+
rules += ' Ya';
|
|
168
|
+
rules += ' Za';
|
|
169
169
|
if (props.isSelected) {
|
|
170
|
-
if (props.isFocusVisible) rules +=
|
|
171
|
-
else rules +=
|
|
172
|
-
} else if (props.isFocusVisible) rules +=
|
|
173
|
-
else rules +=
|
|
174
|
-
rules +=
|
|
175
|
-
rules +=
|
|
176
|
-
rules +=
|
|
170
|
+
if (props.isFocusVisible) rules += ' _0-yj8a3w';
|
|
171
|
+
else rules += ' _0-yj899n';
|
|
172
|
+
} else if (props.isFocusVisible) rules += ' _0-yj8a3w';
|
|
173
|
+
else rules += ' _0a';
|
|
174
|
+
rules += ' _2a';
|
|
175
|
+
rules += ' __ya';
|
|
176
|
+
rules += ' _tb';
|
|
177
177
|
if (props.isSelected) {
|
|
178
|
-
if (props.isFocusVisible) rules +=
|
|
179
|
-
else rules +=
|
|
180
|
-
} else if (props.isFocusVisible) rules +=
|
|
178
|
+
if (props.isFocusVisible) rules += ' _oa-4bhpmf';
|
|
179
|
+
else rules += ' _oa-zlnqab';
|
|
180
|
+
} else if (props.isFocusVisible) rules += ' _oa-4bhpmf';
|
|
181
181
|
if (props.isSelected) {
|
|
182
|
-
if (props.isFocusVisible) rules +=
|
|
183
|
-
else rules +=
|
|
184
|
-
} else if (props.isFocusVisible) rules +=
|
|
182
|
+
if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
183
|
+
else rules += ' _o-1ytnijz';
|
|
184
|
+
} else if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
185
185
|
return rules;
|
|
186
186
|
};
|
|
187
187
|
const $9b0dbe0a88ecfa3f$export$6e77ea6719814e9c = (props)=>{
|
|
@@ -191,7 +191,7 @@ const $9b0dbe0a88ecfa3f$export$6e77ea6719814e9c = (props)=>{
|
|
|
191
191
|
let { renderer: renderer } = $9b0dbe0a88ecfa3f$var$useTreeRendererContext();
|
|
192
192
|
// TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be
|
|
193
193
|
// a nested tree item
|
|
194
|
-
if (typeof children ===
|
|
194
|
+
if (typeof children === 'string') content = /*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement((0, $6Q8R1$reactspectrumtext.Text), null, children);
|
|
195
195
|
else {
|
|
196
196
|
content = [];
|
|
197
197
|
nestedRows = [];
|
|
@@ -214,17 +214,17 @@ const $9b0dbe0a88ecfa3f$export$6e77ea6719814e9c = (props)=>{
|
|
|
214
214
|
className: $9b0dbe0a88ecfa3f$var$treeCellGrid({
|
|
215
215
|
isDisabled: isDisabled
|
|
216
216
|
})
|
|
217
|
-
}, selectionMode !==
|
|
217
|
+
}, selectionMode !== 'none' && selectionBehavior === 'toggle' && // TODO: add transition?
|
|
218
218
|
/*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement((0, $6Q8R1$reactspectrumcheckbox.Checkbox), {
|
|
219
219
|
isEmphasized: true,
|
|
220
220
|
UNSAFE_className: $9b0dbe0a88ecfa3f$var$treeCheckbox(),
|
|
221
221
|
UNSAFE_style: {
|
|
222
|
-
paddingInlineEnd:
|
|
222
|
+
paddingInlineEnd: '0px'
|
|
223
223
|
},
|
|
224
224
|
slot: "selection"
|
|
225
225
|
}), /*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement("div", {
|
|
226
226
|
style: {
|
|
227
|
-
gridArea:
|
|
227
|
+
gridArea: 'level-padding',
|
|
228
228
|
marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`
|
|
229
229
|
}
|
|
230
230
|
}), (hasChildRows || hasChildItems) && /*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement($9b0dbe0a88ecfa3f$var$ExpandableRowChevron, {
|
|
@@ -241,7 +241,7 @@ const $9b0dbe0a88ecfa3f$export$6e77ea6719814e9c = (props)=>{
|
|
|
241
241
|
// but could crop up later for other components
|
|
242
242
|
icon: {
|
|
243
243
|
UNSAFE_className: $9b0dbe0a88ecfa3f$var$treeIcon(),
|
|
244
|
-
size:
|
|
244
|
+
size: 'S'
|
|
245
245
|
},
|
|
246
246
|
actionButton: {
|
|
247
247
|
UNSAFE_className: $9b0dbe0a88ecfa3f$var$treeActions(),
|
|
@@ -250,15 +250,15 @@ const $9b0dbe0a88ecfa3f$export$6e77ea6719814e9c = (props)=>{
|
|
|
250
250
|
actionGroup: {
|
|
251
251
|
UNSAFE_className: $9b0dbe0a88ecfa3f$var$treeActions(),
|
|
252
252
|
isQuiet: true,
|
|
253
|
-
density:
|
|
254
|
-
buttonLabelBehavior:
|
|
253
|
+
density: 'compact',
|
|
254
|
+
buttonLabelBehavior: 'hide',
|
|
255
255
|
isDisabled: isDisabled,
|
|
256
|
-
overflowMode:
|
|
256
|
+
overflowMode: 'collapse'
|
|
257
257
|
},
|
|
258
258
|
actionMenu: {
|
|
259
259
|
UNSAFE_className: $9b0dbe0a88ecfa3f$var$treeActionMenu(),
|
|
260
260
|
UNSAFE_style: {
|
|
261
|
-
marginInlineEnd:
|
|
261
|
+
marginInlineEnd: '.5rem'
|
|
262
262
|
},
|
|
263
263
|
isQuiet: true
|
|
264
264
|
}
|
|
@@ -272,33 +272,33 @@ const $9b0dbe0a88ecfa3f$export$6e77ea6719814e9c = (props)=>{
|
|
|
272
272
|
};
|
|
273
273
|
const $9b0dbe0a88ecfa3f$var$expandButton = function anonymous(props) {
|
|
274
274
|
let rules = "";
|
|
275
|
-
rules +=
|
|
276
|
-
rules +=
|
|
277
|
-
rules +=
|
|
278
|
-
rules +=
|
|
279
|
-
rules +=
|
|
280
|
-
rules +=
|
|
281
|
-
rules +=
|
|
282
|
-
rules +=
|
|
275
|
+
rules += ' __g-pn4rxq';
|
|
276
|
+
rules += ' nY';
|
|
277
|
+
rules += ' _4b';
|
|
278
|
+
rules += ' _Sd';
|
|
279
|
+
rules += ' _0a';
|
|
280
|
+
rules += ' _Tb';
|
|
281
|
+
rules += ' _Vd';
|
|
282
|
+
rules += ' _Ea';
|
|
283
283
|
if (props.isExpanded) {
|
|
284
|
-
if (props.isRTL) rules +=
|
|
285
|
-
else rules +=
|
|
284
|
+
if (props.isRTL) rules += ' W-negfvv';
|
|
285
|
+
else rules += ' W-10b8jr2';
|
|
286
286
|
}
|
|
287
|
-
rules +=
|
|
287
|
+
rules += ' _H-1o2fh9e';
|
|
288
288
|
return rules;
|
|
289
289
|
};
|
|
290
290
|
function $9b0dbe0a88ecfa3f$var$ExpandableRowChevron(props) {
|
|
291
291
|
let expandButtonRef = (0, $6Q8R1$react.useRef)();
|
|
292
292
|
let [fullProps, ref] = (0, $6Q8R1$reactariacomponents.useContextProps)({
|
|
293
293
|
...props,
|
|
294
|
-
slot:
|
|
294
|
+
slot: 'chevron'
|
|
295
295
|
}, expandButtonRef, (0, $6Q8R1$reactariacomponents.ButtonContext));
|
|
296
296
|
let { isExpanded: isExpanded, isDisabled: isDisabled } = fullProps;
|
|
297
297
|
let { direction: direction } = (0, $6Q8R1$reactariai18n.useLocale)();
|
|
298
298
|
// Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future
|
|
299
299
|
let { buttonProps: buttonProps } = (0, $6Q8R1$reactariabutton.useButton)({
|
|
300
300
|
...fullProps,
|
|
301
|
-
elementType:
|
|
301
|
+
elementType: 'span'
|
|
302
302
|
}, ref);
|
|
303
303
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement("span", {
|
|
304
304
|
...buttonProps,
|
|
@@ -308,9 +308,9 @@ function $9b0dbe0a88ecfa3f$var$ExpandableRowChevron(props) {
|
|
|
308
308
|
className: $9b0dbe0a88ecfa3f$var$expandButton({
|
|
309
309
|
isExpanded: isExpanded,
|
|
310
310
|
isDisabled: isDisabled,
|
|
311
|
-
isRTL: direction ===
|
|
311
|
+
isRTL: direction === 'rtl'
|
|
312
312
|
})
|
|
313
|
-
}, direction ===
|
|
313
|
+
}, direction === 'ltr' ? /*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement((0, ($parcel$interopDefault($6Q8R1$spectrumiconsuiChevronRightMedium))), null) : /*#__PURE__*/ (0, ($parcel$interopDefault($6Q8R1$react))).createElement((0, ($parcel$interopDefault($6Q8R1$spectrumiconsuiChevronLeftMedium))), null));
|
|
314
314
|
}
|
|
315
315
|
/**
|
|
316
316
|
* A tree view provides users with a way to navigate nested hierarchical information.
|
package/dist/TreeView.mjs
CHANGED
|
@@ -40,28 +40,28 @@ function $48b8113347121625$var$useTreeRendererContext() {
|
|
|
40
40
|
// 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
41
|
const $48b8113347121625$var$tree = function anonymous(props) {
|
|
42
42
|
let rules = "";
|
|
43
|
-
rules +=
|
|
44
|
-
rules +=
|
|
45
|
-
rules +=
|
|
46
|
-
rules +=
|
|
47
|
-
rules +=
|
|
48
|
-
rules +=
|
|
49
|
-
rules +=
|
|
50
|
-
rules +=
|
|
51
|
-
if (props.isEmpty) rules +=
|
|
52
|
-
if (props.isEmpty) rules +=
|
|
53
|
-
if (props.isEmpty) rules +=
|
|
54
|
-
if (props.isEmpty) rules +=
|
|
55
|
-
if (props.isEmpty) rules +=
|
|
43
|
+
rules += ' wc';
|
|
44
|
+
rules += ' xc';
|
|
45
|
+
rules += ' ua';
|
|
46
|
+
rules += ' va';
|
|
47
|
+
rules += ' __ka';
|
|
48
|
+
rules += ' Aa';
|
|
49
|
+
rules += ' ca___y';
|
|
50
|
+
rules += ' ca';
|
|
51
|
+
if (props.isEmpty) rules += ' _Vd';
|
|
52
|
+
if (props.isEmpty) rules += ' _Uc';
|
|
53
|
+
if (props.isEmpty) rules += ' oY';
|
|
54
|
+
if (props.isEmpty) rules += ' nY';
|
|
55
|
+
if (props.isEmpty) rules += ' _Sd';
|
|
56
56
|
return rules;
|
|
57
57
|
};
|
|
58
58
|
function $48b8113347121625$var$TreeView(props, ref) {
|
|
59
59
|
let { children: children, selectionStyle: selectionStyle } = props;
|
|
60
60
|
let renderer;
|
|
61
|
-
if (typeof children ===
|
|
61
|
+
if (typeof children === 'function') renderer = children;
|
|
62
62
|
let { styleProps: styleProps } = (0, $FHprs$useStyleProps)(props);
|
|
63
63
|
let domRef = (0, $FHprs$useDOMRef)(ref);
|
|
64
|
-
let selectionBehavior = selectionStyle ===
|
|
64
|
+
let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';
|
|
65
65
|
return /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$TreeRendererContext.Provider, {
|
|
66
66
|
value: {
|
|
67
67
|
renderer: renderer
|
|
@@ -78,99 +78,99 @@ function $48b8113347121625$var$TreeView(props, ref) {
|
|
|
78
78
|
}
|
|
79
79
|
const $48b8113347121625$var$treeRow = function anonymous(props) {
|
|
80
80
|
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 +=
|
|
94
|
-
else if (props.isPressed) rules +=
|
|
95
|
-
else if (props.isFocusVisibleWithin) rules +=
|
|
96
|
-
else if (props.isHovered) rules +=
|
|
81
|
+
rules += ' Xc';
|
|
82
|
+
rules += ' _Sd';
|
|
83
|
+
rules += ' nk';
|
|
84
|
+
rules += ' oY';
|
|
85
|
+
rules += ' __ka';
|
|
86
|
+
rules += ' _6c';
|
|
87
|
+
rules += ' _7d';
|
|
88
|
+
rules += ' _9b';
|
|
89
|
+
rules += ' a___K';
|
|
90
|
+
rules += ' _Ea';
|
|
91
|
+
if (props.isLink) rules += ' __Ec';
|
|
92
|
+
else rules += ' __Eb';
|
|
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';
|
|
97
97
|
return rules;
|
|
98
98
|
};
|
|
99
99
|
const $48b8113347121625$var$treeCellGrid = function anonymous(props) {
|
|
100
100
|
let rules = "";
|
|
101
|
-
rules +=
|
|
102
|
-
rules +=
|
|
103
|
-
rules +=
|
|
104
|
-
rules +=
|
|
105
|
-
rules +=
|
|
106
|
-
rules +=
|
|
101
|
+
rules += ' _Sf';
|
|
102
|
+
rules += ' oY';
|
|
103
|
+
rules += ' _Uc';
|
|
104
|
+
rules += ' __d-1nxidkl-1nxidkl-1nxidkl-zjkg1z-1nxidkl-375yi6-1nxidkl-ykdwf2';
|
|
105
|
+
rules += ' __e-375yi6';
|
|
106
|
+
rules += ' __f-1qk85yo';
|
|
107
107
|
if (props.isDisabled) {
|
|
108
|
-
rules +=
|
|
109
|
-
rules +=
|
|
108
|
+
rules += ' aa___F';
|
|
109
|
+
rules += ' ai';
|
|
110
110
|
}
|
|
111
111
|
return rules;
|
|
112
112
|
};
|
|
113
113
|
// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden
|
|
114
114
|
const $48b8113347121625$var$treeCheckbox = function anonymous(props) {
|
|
115
115
|
let rules = "";
|
|
116
|
-
rules +=
|
|
117
|
-
rules +=
|
|
118
|
-
rules +=
|
|
119
|
-
rules +=
|
|
116
|
+
rules += ' __g-4wahvw';
|
|
117
|
+
rules += ' _J-37nn5o';
|
|
118
|
+
rules += ' Cd';
|
|
119
|
+
rules += ' Da';
|
|
120
120
|
return rules;
|
|
121
121
|
};
|
|
122
122
|
const $48b8113347121625$var$treeIcon = function anonymous(props) {
|
|
123
123
|
let rules = "";
|
|
124
|
-
rules +=
|
|
125
|
-
rules +=
|
|
124
|
+
rules += ' __g-ykjmzy';
|
|
125
|
+
rules += ' Dc';
|
|
126
126
|
return rules;
|
|
127
127
|
};
|
|
128
128
|
const $48b8113347121625$var$treeContent = function anonymous(props) {
|
|
129
129
|
let rules = "";
|
|
130
|
-
rules +=
|
|
131
|
-
rules +=
|
|
132
|
-
rules +=
|
|
133
|
-
rules +=
|
|
134
|
-
rules +=
|
|
130
|
+
rules += ' __g-1mod4sg';
|
|
131
|
+
rules += ' _ga';
|
|
132
|
+
rules += ' _kb';
|
|
133
|
+
rules += ' __sb';
|
|
134
|
+
rules += ' __tb';
|
|
135
135
|
return rules;
|
|
136
136
|
};
|
|
137
137
|
const $48b8113347121625$var$treeActions = function anonymous(props) {
|
|
138
138
|
let rules = "";
|
|
139
|
-
rules +=
|
|
140
|
-
rules +=
|
|
141
|
-
rules +=
|
|
142
|
-
rules +=
|
|
143
|
-
rules +=
|
|
139
|
+
rules += ' __g-8ayfo6';
|
|
140
|
+
rules += ' _3-3t1x';
|
|
141
|
+
rules += ' _2-3t1x';
|
|
142
|
+
rules += ' CF';
|
|
143
|
+
rules += ' Db';
|
|
144
144
|
return rules;
|
|
145
145
|
};
|
|
146
146
|
const $48b8113347121625$var$treeActionMenu = function anonymous(props) {
|
|
147
147
|
let rules = "";
|
|
148
|
-
rules +=
|
|
149
|
-
rules +=
|
|
148
|
+
rules += ' __g-wit6hk';
|
|
149
|
+
rules += ' oi';
|
|
150
150
|
return rules;
|
|
151
151
|
};
|
|
152
152
|
const $48b8113347121625$var$treeRowOutline = function anonymous(props) {
|
|
153
153
|
let rules = "";
|
|
154
|
-
rules +=
|
|
155
|
-
rules +=
|
|
156
|
-
rules +=
|
|
157
|
-
rules +=
|
|
154
|
+
rules += ' _Sa';
|
|
155
|
+
rules += ' Xa';
|
|
156
|
+
rules += ' Ya';
|
|
157
|
+
rules += ' Za';
|
|
158
158
|
if (props.isSelected) {
|
|
159
|
-
if (props.isFocusVisible) rules +=
|
|
160
|
-
else rules +=
|
|
161
|
-
} else if (props.isFocusVisible) rules +=
|
|
162
|
-
else rules +=
|
|
163
|
-
rules +=
|
|
164
|
-
rules +=
|
|
165
|
-
rules +=
|
|
159
|
+
if (props.isFocusVisible) rules += ' _0-yj8a3w';
|
|
160
|
+
else rules += ' _0-yj899n';
|
|
161
|
+
} else if (props.isFocusVisible) rules += ' _0-yj8a3w';
|
|
162
|
+
else rules += ' _0a';
|
|
163
|
+
rules += ' _2a';
|
|
164
|
+
rules += ' __ya';
|
|
165
|
+
rules += ' _tb';
|
|
166
166
|
if (props.isSelected) {
|
|
167
|
-
if (props.isFocusVisible) rules +=
|
|
168
|
-
else rules +=
|
|
169
|
-
} else if (props.isFocusVisible) rules +=
|
|
167
|
+
if (props.isFocusVisible) rules += ' _oa-4bhpmf';
|
|
168
|
+
else rules += ' _oa-zlnqab';
|
|
169
|
+
} else if (props.isFocusVisible) rules += ' _oa-4bhpmf';
|
|
170
170
|
if (props.isSelected) {
|
|
171
|
-
if (props.isFocusVisible) rules +=
|
|
172
|
-
else rules +=
|
|
173
|
-
} else if (props.isFocusVisible) rules +=
|
|
171
|
+
if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
172
|
+
else rules += ' _o-1ytnijz';
|
|
173
|
+
} else if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
174
174
|
return rules;
|
|
175
175
|
};
|
|
176
176
|
const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
@@ -180,7 +180,7 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
180
180
|
let { renderer: renderer } = $48b8113347121625$var$useTreeRendererContext();
|
|
181
181
|
// TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be
|
|
182
182
|
// a nested tree item
|
|
183
|
-
if (typeof children ===
|
|
183
|
+
if (typeof children === 'string') content = /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Text), null, children);
|
|
184
184
|
else {
|
|
185
185
|
content = [];
|
|
186
186
|
nestedRows = [];
|
|
@@ -203,17 +203,17 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
203
203
|
className: $48b8113347121625$var$treeCellGrid({
|
|
204
204
|
isDisabled: isDisabled
|
|
205
205
|
})
|
|
206
|
-
}, selectionMode !==
|
|
206
|
+
}, selectionMode !== 'none' && selectionBehavior === 'toggle' && // TODO: add transition?
|
|
207
207
|
/*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Checkbox), {
|
|
208
208
|
isEmphasized: true,
|
|
209
209
|
UNSAFE_className: $48b8113347121625$var$treeCheckbox(),
|
|
210
210
|
UNSAFE_style: {
|
|
211
|
-
paddingInlineEnd:
|
|
211
|
+
paddingInlineEnd: '0px'
|
|
212
212
|
},
|
|
213
213
|
slot: "selection"
|
|
214
214
|
}), /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
|
|
215
215
|
style: {
|
|
216
|
-
gridArea:
|
|
216
|
+
gridArea: 'level-padding',
|
|
217
217
|
marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`
|
|
218
218
|
}
|
|
219
219
|
}), (hasChildRows || hasChildItems) && /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$ExpandableRowChevron, {
|
|
@@ -230,7 +230,7 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
230
230
|
// but could crop up later for other components
|
|
231
231
|
icon: {
|
|
232
232
|
UNSAFE_className: $48b8113347121625$var$treeIcon(),
|
|
233
|
-
size:
|
|
233
|
+
size: 'S'
|
|
234
234
|
},
|
|
235
235
|
actionButton: {
|
|
236
236
|
UNSAFE_className: $48b8113347121625$var$treeActions(),
|
|
@@ -239,15 +239,15 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
239
239
|
actionGroup: {
|
|
240
240
|
UNSAFE_className: $48b8113347121625$var$treeActions(),
|
|
241
241
|
isQuiet: true,
|
|
242
|
-
density:
|
|
243
|
-
buttonLabelBehavior:
|
|
242
|
+
density: 'compact',
|
|
243
|
+
buttonLabelBehavior: 'hide',
|
|
244
244
|
isDisabled: isDisabled,
|
|
245
|
-
overflowMode:
|
|
245
|
+
overflowMode: 'collapse'
|
|
246
246
|
},
|
|
247
247
|
actionMenu: {
|
|
248
248
|
UNSAFE_className: $48b8113347121625$var$treeActionMenu(),
|
|
249
249
|
UNSAFE_style: {
|
|
250
|
-
marginInlineEnd:
|
|
250
|
+
marginInlineEnd: '.5rem'
|
|
251
251
|
},
|
|
252
252
|
isQuiet: true
|
|
253
253
|
}
|
|
@@ -261,33 +261,33 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
261
261
|
};
|
|
262
262
|
const $48b8113347121625$var$expandButton = function anonymous(props) {
|
|
263
263
|
let rules = "";
|
|
264
|
-
rules +=
|
|
265
|
-
rules +=
|
|
266
|
-
rules +=
|
|
267
|
-
rules +=
|
|
268
|
-
rules +=
|
|
269
|
-
rules +=
|
|
270
|
-
rules +=
|
|
271
|
-
rules +=
|
|
264
|
+
rules += ' __g-pn4rxq';
|
|
265
|
+
rules += ' nY';
|
|
266
|
+
rules += ' _4b';
|
|
267
|
+
rules += ' _Sd';
|
|
268
|
+
rules += ' _0a';
|
|
269
|
+
rules += ' _Tb';
|
|
270
|
+
rules += ' _Vd';
|
|
271
|
+
rules += ' _Ea';
|
|
272
272
|
if (props.isExpanded) {
|
|
273
|
-
if (props.isRTL) rules +=
|
|
274
|
-
else rules +=
|
|
273
|
+
if (props.isRTL) rules += ' W-negfvv';
|
|
274
|
+
else rules += ' W-10b8jr2';
|
|
275
275
|
}
|
|
276
|
-
rules +=
|
|
276
|
+
rules += ' _H-1o2fh9e';
|
|
277
277
|
return rules;
|
|
278
278
|
};
|
|
279
279
|
function $48b8113347121625$var$ExpandableRowChevron(props) {
|
|
280
280
|
let expandButtonRef = (0, $FHprs$useRef)();
|
|
281
281
|
let [fullProps, ref] = (0, $FHprs$useContextProps)({
|
|
282
282
|
...props,
|
|
283
|
-
slot:
|
|
283
|
+
slot: 'chevron'
|
|
284
284
|
}, expandButtonRef, (0, $FHprs$ButtonContext));
|
|
285
285
|
let { isExpanded: isExpanded, isDisabled: isDisabled } = fullProps;
|
|
286
286
|
let { direction: direction } = (0, $FHprs$useLocale)();
|
|
287
287
|
// Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future
|
|
288
288
|
let { buttonProps: buttonProps } = (0, $FHprs$useButton)({
|
|
289
289
|
...fullProps,
|
|
290
|
-
elementType:
|
|
290
|
+
elementType: 'span'
|
|
291
291
|
}, ref);
|
|
292
292
|
return /*#__PURE__*/ (0, $FHprs$react).createElement("span", {
|
|
293
293
|
...buttonProps,
|
|
@@ -297,9 +297,9 @@ function $48b8113347121625$var$ExpandableRowChevron(props) {
|
|
|
297
297
|
className: $48b8113347121625$var$expandButton({
|
|
298
298
|
isExpanded: isExpanded,
|
|
299
299
|
isDisabled: isDisabled,
|
|
300
|
-
isRTL: direction ===
|
|
300
|
+
isRTL: direction === 'rtl'
|
|
301
301
|
})
|
|
302
|
-
}, direction ===
|
|
302
|
+
}, direction === 'ltr' ? /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronRightMedium), null) : /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronLeftMedium), null));
|
|
303
303
|
}
|
|
304
304
|
/**
|
|
305
305
|
* A tree view provides users with a way to navigate nested hierarchical information.
|
|
@@ -307,4 +307,4 @@ function $48b8113347121625$var$ExpandableRowChevron(props) {
|
|
|
307
307
|
|
|
308
308
|
|
|
309
309
|
export {$48b8113347121625$export$6e77ea6719814e9c as TreeViewItem, $48b8113347121625$export$6940b0d9c820eca7 as TreeView};
|
|
310
|
-
//# sourceMappingURL=TreeView.
|
|
310
|
+
//# sourceMappingURL=TreeView.module.js.map
|
package/dist/TreeView.module.js
CHANGED
|
@@ -40,28 +40,28 @@ function $48b8113347121625$var$useTreeRendererContext() {
|
|
|
40
40
|
// 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
41
|
const $48b8113347121625$var$tree = function anonymous(props) {
|
|
42
42
|
let rules = "";
|
|
43
|
-
rules +=
|
|
44
|
-
rules +=
|
|
45
|
-
rules +=
|
|
46
|
-
rules +=
|
|
47
|
-
rules +=
|
|
48
|
-
rules +=
|
|
49
|
-
rules +=
|
|
50
|
-
rules +=
|
|
51
|
-
if (props.isEmpty) rules +=
|
|
52
|
-
if (props.isEmpty) rules +=
|
|
53
|
-
if (props.isEmpty) rules +=
|
|
54
|
-
if (props.isEmpty) rules +=
|
|
55
|
-
if (props.isEmpty) rules +=
|
|
43
|
+
rules += ' wc';
|
|
44
|
+
rules += ' xc';
|
|
45
|
+
rules += ' ua';
|
|
46
|
+
rules += ' va';
|
|
47
|
+
rules += ' __ka';
|
|
48
|
+
rules += ' Aa';
|
|
49
|
+
rules += ' ca___y';
|
|
50
|
+
rules += ' ca';
|
|
51
|
+
if (props.isEmpty) rules += ' _Vd';
|
|
52
|
+
if (props.isEmpty) rules += ' _Uc';
|
|
53
|
+
if (props.isEmpty) rules += ' oY';
|
|
54
|
+
if (props.isEmpty) rules += ' nY';
|
|
55
|
+
if (props.isEmpty) rules += ' _Sd';
|
|
56
56
|
return rules;
|
|
57
57
|
};
|
|
58
58
|
function $48b8113347121625$var$TreeView(props, ref) {
|
|
59
59
|
let { children: children, selectionStyle: selectionStyle } = props;
|
|
60
60
|
let renderer;
|
|
61
|
-
if (typeof children ===
|
|
61
|
+
if (typeof children === 'function') renderer = children;
|
|
62
62
|
let { styleProps: styleProps } = (0, $FHprs$useStyleProps)(props);
|
|
63
63
|
let domRef = (0, $FHprs$useDOMRef)(ref);
|
|
64
|
-
let selectionBehavior = selectionStyle ===
|
|
64
|
+
let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';
|
|
65
65
|
return /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$TreeRendererContext.Provider, {
|
|
66
66
|
value: {
|
|
67
67
|
renderer: renderer
|
|
@@ -78,99 +78,99 @@ function $48b8113347121625$var$TreeView(props, ref) {
|
|
|
78
78
|
}
|
|
79
79
|
const $48b8113347121625$var$treeRow = function anonymous(props) {
|
|
80
80
|
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 +=
|
|
94
|
-
else if (props.isPressed) rules +=
|
|
95
|
-
else if (props.isFocusVisibleWithin) rules +=
|
|
96
|
-
else if (props.isHovered) rules +=
|
|
81
|
+
rules += ' Xc';
|
|
82
|
+
rules += ' _Sd';
|
|
83
|
+
rules += ' nk';
|
|
84
|
+
rules += ' oY';
|
|
85
|
+
rules += ' __ka';
|
|
86
|
+
rules += ' _6c';
|
|
87
|
+
rules += ' _7d';
|
|
88
|
+
rules += ' _9b';
|
|
89
|
+
rules += ' a___K';
|
|
90
|
+
rules += ' _Ea';
|
|
91
|
+
if (props.isLink) rules += ' __Ec';
|
|
92
|
+
else rules += ' __Eb';
|
|
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';
|
|
97
97
|
return rules;
|
|
98
98
|
};
|
|
99
99
|
const $48b8113347121625$var$treeCellGrid = function anonymous(props) {
|
|
100
100
|
let rules = "";
|
|
101
|
-
rules +=
|
|
102
|
-
rules +=
|
|
103
|
-
rules +=
|
|
104
|
-
rules +=
|
|
105
|
-
rules +=
|
|
106
|
-
rules +=
|
|
101
|
+
rules += ' _Sf';
|
|
102
|
+
rules += ' oY';
|
|
103
|
+
rules += ' _Uc';
|
|
104
|
+
rules += ' __d-1nxidkl-1nxidkl-1nxidkl-zjkg1z-1nxidkl-375yi6-1nxidkl-ykdwf2';
|
|
105
|
+
rules += ' __e-375yi6';
|
|
106
|
+
rules += ' __f-1qk85yo';
|
|
107
107
|
if (props.isDisabled) {
|
|
108
|
-
rules +=
|
|
109
|
-
rules +=
|
|
108
|
+
rules += ' aa___F';
|
|
109
|
+
rules += ' ai';
|
|
110
110
|
}
|
|
111
111
|
return rules;
|
|
112
112
|
};
|
|
113
113
|
// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden
|
|
114
114
|
const $48b8113347121625$var$treeCheckbox = function anonymous(props) {
|
|
115
115
|
let rules = "";
|
|
116
|
-
rules +=
|
|
117
|
-
rules +=
|
|
118
|
-
rules +=
|
|
119
|
-
rules +=
|
|
116
|
+
rules += ' __g-4wahvw';
|
|
117
|
+
rules += ' _J-37nn5o';
|
|
118
|
+
rules += ' Cd';
|
|
119
|
+
rules += ' Da';
|
|
120
120
|
return rules;
|
|
121
121
|
};
|
|
122
122
|
const $48b8113347121625$var$treeIcon = function anonymous(props) {
|
|
123
123
|
let rules = "";
|
|
124
|
-
rules +=
|
|
125
|
-
rules +=
|
|
124
|
+
rules += ' __g-ykjmzy';
|
|
125
|
+
rules += ' Dc';
|
|
126
126
|
return rules;
|
|
127
127
|
};
|
|
128
128
|
const $48b8113347121625$var$treeContent = function anonymous(props) {
|
|
129
129
|
let rules = "";
|
|
130
|
-
rules +=
|
|
131
|
-
rules +=
|
|
132
|
-
rules +=
|
|
133
|
-
rules +=
|
|
134
|
-
rules +=
|
|
130
|
+
rules += ' __g-1mod4sg';
|
|
131
|
+
rules += ' _ga';
|
|
132
|
+
rules += ' _kb';
|
|
133
|
+
rules += ' __sb';
|
|
134
|
+
rules += ' __tb';
|
|
135
135
|
return rules;
|
|
136
136
|
};
|
|
137
137
|
const $48b8113347121625$var$treeActions = function anonymous(props) {
|
|
138
138
|
let rules = "";
|
|
139
|
-
rules +=
|
|
140
|
-
rules +=
|
|
141
|
-
rules +=
|
|
142
|
-
rules +=
|
|
143
|
-
rules +=
|
|
139
|
+
rules += ' __g-8ayfo6';
|
|
140
|
+
rules += ' _3-3t1x';
|
|
141
|
+
rules += ' _2-3t1x';
|
|
142
|
+
rules += ' CF';
|
|
143
|
+
rules += ' Db';
|
|
144
144
|
return rules;
|
|
145
145
|
};
|
|
146
146
|
const $48b8113347121625$var$treeActionMenu = function anonymous(props) {
|
|
147
147
|
let rules = "";
|
|
148
|
-
rules +=
|
|
149
|
-
rules +=
|
|
148
|
+
rules += ' __g-wit6hk';
|
|
149
|
+
rules += ' oi';
|
|
150
150
|
return rules;
|
|
151
151
|
};
|
|
152
152
|
const $48b8113347121625$var$treeRowOutline = function anonymous(props) {
|
|
153
153
|
let rules = "";
|
|
154
|
-
rules +=
|
|
155
|
-
rules +=
|
|
156
|
-
rules +=
|
|
157
|
-
rules +=
|
|
154
|
+
rules += ' _Sa';
|
|
155
|
+
rules += ' Xa';
|
|
156
|
+
rules += ' Ya';
|
|
157
|
+
rules += ' Za';
|
|
158
158
|
if (props.isSelected) {
|
|
159
|
-
if (props.isFocusVisible) rules +=
|
|
160
|
-
else rules +=
|
|
161
|
-
} else if (props.isFocusVisible) rules +=
|
|
162
|
-
else rules +=
|
|
163
|
-
rules +=
|
|
164
|
-
rules +=
|
|
165
|
-
rules +=
|
|
159
|
+
if (props.isFocusVisible) rules += ' _0-yj8a3w';
|
|
160
|
+
else rules += ' _0-yj899n';
|
|
161
|
+
} else if (props.isFocusVisible) rules += ' _0-yj8a3w';
|
|
162
|
+
else rules += ' _0a';
|
|
163
|
+
rules += ' _2a';
|
|
164
|
+
rules += ' __ya';
|
|
165
|
+
rules += ' _tb';
|
|
166
166
|
if (props.isSelected) {
|
|
167
|
-
if (props.isFocusVisible) rules +=
|
|
168
|
-
else rules +=
|
|
169
|
-
} else if (props.isFocusVisible) rules +=
|
|
167
|
+
if (props.isFocusVisible) rules += ' _oa-4bhpmf';
|
|
168
|
+
else rules += ' _oa-zlnqab';
|
|
169
|
+
} else if (props.isFocusVisible) rules += ' _oa-4bhpmf';
|
|
170
170
|
if (props.isSelected) {
|
|
171
|
-
if (props.isFocusVisible) rules +=
|
|
172
|
-
else rules +=
|
|
173
|
-
} else if (props.isFocusVisible) rules +=
|
|
171
|
+
if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
172
|
+
else rules += ' _o-1ytnijz';
|
|
173
|
+
} else if (props.isFocusVisible) rules += ' _o-ba5uxf';
|
|
174
174
|
return rules;
|
|
175
175
|
};
|
|
176
176
|
const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
@@ -180,7 +180,7 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
180
180
|
let { renderer: renderer } = $48b8113347121625$var$useTreeRendererContext();
|
|
181
181
|
// TODO alternative api is that we have a separate prop for the TreeItems contents and expect the child to then be
|
|
182
182
|
// a nested tree item
|
|
183
|
-
if (typeof children ===
|
|
183
|
+
if (typeof children === 'string') content = /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Text), null, children);
|
|
184
184
|
else {
|
|
185
185
|
content = [];
|
|
186
186
|
nestedRows = [];
|
|
@@ -203,17 +203,17 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
203
203
|
className: $48b8113347121625$var$treeCellGrid({
|
|
204
204
|
isDisabled: isDisabled
|
|
205
205
|
})
|
|
206
|
-
}, selectionMode !==
|
|
206
|
+
}, selectionMode !== 'none' && selectionBehavior === 'toggle' && // TODO: add transition?
|
|
207
207
|
/*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Checkbox), {
|
|
208
208
|
isEmphasized: true,
|
|
209
209
|
UNSAFE_className: $48b8113347121625$var$treeCheckbox(),
|
|
210
210
|
UNSAFE_style: {
|
|
211
|
-
paddingInlineEnd:
|
|
211
|
+
paddingInlineEnd: '0px'
|
|
212
212
|
},
|
|
213
213
|
slot: "selection"
|
|
214
214
|
}), /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
|
|
215
215
|
style: {
|
|
216
|
-
gridArea:
|
|
216
|
+
gridArea: 'level-padding',
|
|
217
217
|
marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`
|
|
218
218
|
}
|
|
219
219
|
}), (hasChildRows || hasChildItems) && /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$ExpandableRowChevron, {
|
|
@@ -230,7 +230,7 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
230
230
|
// but could crop up later for other components
|
|
231
231
|
icon: {
|
|
232
232
|
UNSAFE_className: $48b8113347121625$var$treeIcon(),
|
|
233
|
-
size:
|
|
233
|
+
size: 'S'
|
|
234
234
|
},
|
|
235
235
|
actionButton: {
|
|
236
236
|
UNSAFE_className: $48b8113347121625$var$treeActions(),
|
|
@@ -239,15 +239,15 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
239
239
|
actionGroup: {
|
|
240
240
|
UNSAFE_className: $48b8113347121625$var$treeActions(),
|
|
241
241
|
isQuiet: true,
|
|
242
|
-
density:
|
|
243
|
-
buttonLabelBehavior:
|
|
242
|
+
density: 'compact',
|
|
243
|
+
buttonLabelBehavior: 'hide',
|
|
244
244
|
isDisabled: isDisabled,
|
|
245
|
-
overflowMode:
|
|
245
|
+
overflowMode: 'collapse'
|
|
246
246
|
},
|
|
247
247
|
actionMenu: {
|
|
248
248
|
UNSAFE_className: $48b8113347121625$var$treeActionMenu(),
|
|
249
249
|
UNSAFE_style: {
|
|
250
|
-
marginInlineEnd:
|
|
250
|
+
marginInlineEnd: '.5rem'
|
|
251
251
|
},
|
|
252
252
|
isQuiet: true
|
|
253
253
|
}
|
|
@@ -261,33 +261,33 @@ const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
|
|
|
261
261
|
};
|
|
262
262
|
const $48b8113347121625$var$expandButton = function anonymous(props) {
|
|
263
263
|
let rules = "";
|
|
264
|
-
rules +=
|
|
265
|
-
rules +=
|
|
266
|
-
rules +=
|
|
267
|
-
rules +=
|
|
268
|
-
rules +=
|
|
269
|
-
rules +=
|
|
270
|
-
rules +=
|
|
271
|
-
rules +=
|
|
264
|
+
rules += ' __g-pn4rxq';
|
|
265
|
+
rules += ' nY';
|
|
266
|
+
rules += ' _4b';
|
|
267
|
+
rules += ' _Sd';
|
|
268
|
+
rules += ' _0a';
|
|
269
|
+
rules += ' _Tb';
|
|
270
|
+
rules += ' _Vd';
|
|
271
|
+
rules += ' _Ea';
|
|
272
272
|
if (props.isExpanded) {
|
|
273
|
-
if (props.isRTL) rules +=
|
|
274
|
-
else rules +=
|
|
273
|
+
if (props.isRTL) rules += ' W-negfvv';
|
|
274
|
+
else rules += ' W-10b8jr2';
|
|
275
275
|
}
|
|
276
|
-
rules +=
|
|
276
|
+
rules += ' _H-1o2fh9e';
|
|
277
277
|
return rules;
|
|
278
278
|
};
|
|
279
279
|
function $48b8113347121625$var$ExpandableRowChevron(props) {
|
|
280
280
|
let expandButtonRef = (0, $FHprs$useRef)();
|
|
281
281
|
let [fullProps, ref] = (0, $FHprs$useContextProps)({
|
|
282
282
|
...props,
|
|
283
|
-
slot:
|
|
283
|
+
slot: 'chevron'
|
|
284
284
|
}, expandButtonRef, (0, $FHprs$ButtonContext));
|
|
285
285
|
let { isExpanded: isExpanded, isDisabled: isDisabled } = fullProps;
|
|
286
286
|
let { direction: direction } = (0, $FHprs$useLocale)();
|
|
287
287
|
// Will need to keep the chevron as a button for iOS VO at all times since VO doesn't focus the cell. Also keep as button if cellAction is defined by the user in the future
|
|
288
288
|
let { buttonProps: buttonProps } = (0, $FHprs$useButton)({
|
|
289
289
|
...fullProps,
|
|
290
|
-
elementType:
|
|
290
|
+
elementType: 'span'
|
|
291
291
|
}, ref);
|
|
292
292
|
return /*#__PURE__*/ (0, $FHprs$react).createElement("span", {
|
|
293
293
|
...buttonProps,
|
|
@@ -297,9 +297,9 @@ function $48b8113347121625$var$ExpandableRowChevron(props) {
|
|
|
297
297
|
className: $48b8113347121625$var$expandButton({
|
|
298
298
|
isExpanded: isExpanded,
|
|
299
299
|
isDisabled: isDisabled,
|
|
300
|
-
isRTL: direction ===
|
|
300
|
+
isRTL: direction === 'rtl'
|
|
301
301
|
})
|
|
302
|
-
}, direction ===
|
|
302
|
+
}, direction === 'ltr' ? /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronRightMedium), null) : /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronLeftMedium), null));
|
|
303
303
|
}
|
|
304
304
|
/**
|
|
305
305
|
* A tree view provides users with a way to navigate nested hierarchical information.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/tree",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,17 +36,17 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/button": "^3.9.
|
|
40
|
-
"@react-aria/i18n": "^3.11.
|
|
41
|
-
"@react-aria/tree": "3.0.0-alpha.
|
|
42
|
-
"@react-aria/utils": "^3.24.
|
|
43
|
-
"@react-spectrum/checkbox": "^3.9.
|
|
44
|
-
"@react-spectrum/text": "^3.5.
|
|
45
|
-
"@react-spectrum/utils": "^3.11.
|
|
46
|
-
"@react-types/shared": "^3.23.
|
|
47
|
-
"@spectrum-icons/ui": "^3.6.
|
|
39
|
+
"@react-aria/button": "^3.9.5",
|
|
40
|
+
"@react-aria/i18n": "^3.11.1",
|
|
41
|
+
"@react-aria/tree": "3.0.0-alpha.1",
|
|
42
|
+
"@react-aria/utils": "^3.24.1",
|
|
43
|
+
"@react-spectrum/checkbox": "^3.9.6",
|
|
44
|
+
"@react-spectrum/text": "^3.5.5",
|
|
45
|
+
"@react-spectrum/utils": "^3.11.7",
|
|
46
|
+
"@react-types/shared": "^3.23.1",
|
|
47
|
+
"@spectrum-icons/ui": "^3.6.7",
|
|
48
48
|
"@swc/helpers": "^0.5.0",
|
|
49
|
-
"react-aria-components": "^1.2.
|
|
49
|
+
"react-aria-components": "^1.2.1"
|
|
50
50
|
},
|
|
51
51
|
"peerDependencies": {
|
|
52
52
|
"@react-spectrum/provider": "^3.0.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"publishConfig": {
|
|
61
61
|
"access": "public"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
|
|
64
64
|
}
|