@react-spectrum/tree 3.1.11 → 3.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/TreeView.mjs DELETED
@@ -1,299 +0,0 @@
1
- import "./tree.961568f2.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
- import {Checkbox as $FHprs$Checkbox} from "@react-spectrum/checkbox";
4
- import $FHprs$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
5
- import $FHprs$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
6
- import {isAndroid as $FHprs$isAndroid} from "@react-aria/utils";
7
- import $FHprs$react, {createContext as $FHprs$createContext, useRef as $FHprs$useRef} from "react";
8
- import {useStyleProps as $FHprs$useStyleProps, useDOMRef as $FHprs$useDOMRef, SlotProvider as $FHprs$SlotProvider} from "@react-spectrum/utils";
9
- import {useButton as $FHprs$useButton} from "@react-aria/button";
10
- import {useLocale as $FHprs$useLocale} from "@react-aria/i18n";
11
-
12
- /*
13
- * Copyright 2024 Adobe. All rights reserved.
14
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
15
- * you may not use this file except in compliance with the License. You may obtain a copy
16
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
17
- *
18
- * Unless required by applicable law or agreed to in writing, software distributed under
19
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
20
- * OF ANY KIND, either express or implied. See the License for the specific language
21
- * governing permissions and limitations under the License.
22
- */
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
- const $48b8113347121625$var$TreeRendererContext = /*#__PURE__*/ (0, $FHprs$createContext)({});
32
- // TODO: add animations for rows appearing and disappearing
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
34
- // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
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
36
- const $48b8113347121625$var$tree = function anonymous(props) {
37
- let rules = "";
38
- if (props.isFocusVisible) rules += ' s1-_Fs1-b';
39
- else rules += ' s1-_Fs1-a';
40
- rules += ' s1-ds1-as1-___D';
41
- rules += ' s1-ds1-___I';
42
- rules += ' s1-_Hs1-c';
43
- rules += ' s1-_G-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-__ls1-a';
51
- rules += ' s1-As1-a';
52
- rules += ' s1-cs1-as1-___y';
53
- rules += ' s1-cs1-a';
54
- if (props.isEmpty) rules += ' s1-_Ws1-d';
55
- if (props.isEmpty) rules += ' s1-_Vs1-c';
56
- if (props.isEmpty) rules += ' s1-_Ts1-d';
57
- rules += ' s1-__ts1-a';
58
- rules += ' s1-__us1-a';
59
- return rules;
60
- };
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;
63
- let renderer;
64
- if (typeof children === 'function') renderer = children;
65
- let { styleProps: styleProps } = (0, $FHprs$useStyleProps)(props);
66
- let domRef = (0, $FHprs$useDOMRef)(ref);
67
- let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';
68
- return /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$TreeRendererContext.Provider, {
69
- value: {
70
- renderer: renderer
71
- }
72
- }, /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Tree), {
73
- ...props,
74
- ...styleProps,
75
- className: (renderProps)=>(UNSAFE_className !== null && UNSAFE_className !== void 0 ? UNSAFE_className : '') + $48b8113347121625$var$tree(renderProps),
76
- selectionBehavior: selectionBehavior,
77
- ref: domRef
78
- }, props.children));
79
- });
80
- const $48b8113347121625$var$treeRow = function anonymous(props) {
81
- let rules = "";
82
- rules += ' s1-Xs1-c';
83
- rules += ' s1-_Ts1-d';
84
- rules += ' s1-ns1-k';
85
- rules += ' s1-os1-Y';
86
- rules += ' s1-__ls1-a';
87
- rules += ' s1-6s1-c';
88
- rules += ' s1-7s1-d';
89
- rules += ' s1-9s1-b';
90
- rules += ' s1-as1-___K';
91
- rules += ' s1-_Fs1-a';
92
- if (props.isLink) rules += ' s1-__Fs1-c';
93
- else rules += ' s1-__Fs1-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';
98
- return rules;
99
- };
100
- const $48b8113347121625$var$treeCellGrid = function anonymous(props) {
101
- let rules = "";
102
- rules += ' s1-_Ts1-f';
103
- rules += ' s1-os1-Y';
104
- rules += ' s1-_Vs1-c';
105
- rules += ' s1-__e-1nxidkl-1nxidkl-1nxidkl-3hmti-1nxidkl-375yi6-1nxidkl-ykdwf2';
106
- rules += ' s1-__f-375yi6';
107
- rules += ' s1-__g-1qk85yo';
108
- if (props.isDisabled) {
109
- rules += ' s1-as1-as1-___F';
110
- rules += ' s1-as1-i';
111
- }
112
- return rules;
113
- };
114
- // TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden
115
- const $48b8113347121625$var$treeCheckbox = function anonymous(props) {
116
- let rules = "";
117
- rules += ' s1-__h-4wahvw';
118
- rules += ' s1-_K-37nn5o';
119
- rules += ' s1-Cs1-d';
120
- rules += ' s1-Ds1-a';
121
- return rules;
122
- };
123
- const $48b8113347121625$var$treeIcon = function anonymous(props) {
124
- let rules = "";
125
- rules += ' s1-__h-ykjmzy';
126
- rules += ' s1-Ds1-c';
127
- return rules;
128
- };
129
- const $48b8113347121625$var$treeContent = function anonymous(props) {
130
- let rules = "";
131
- rules += ' s1-__h-1mod4sg';
132
- rules += ' s1-_gs1-a';
133
- rules += ' s1-_ks1-b';
134
- rules += ' s1-__ts1-b';
135
- rules += ' s1-__us1-b';
136
- return rules;
137
- };
138
- const $48b8113347121625$var$treeActions = function anonymous(props) {
139
- let rules = "";
140
- rules += ' s1-__h-8ayfo6';
141
- rules += ' s1-_4-3t1x';
142
- rules += ' s1-_3-3t1x';
143
- rules += ' s1-Cs1-F';
144
- rules += ' s1-Ds1-b';
145
- return rules;
146
- };
147
- const $48b8113347121625$var$treeActionMenu = function anonymous(props) {
148
- let rules = "";
149
- rules += ' s1-__h-wit6hk';
150
- rules += ' s1-os1-i';
151
- return rules;
152
- };
153
- const $48b8113347121625$var$treeRowOutline = function anonymous(props) {
154
- let rules = "";
155
- rules += ' s1-_Ts1-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-__zs1-a';
167
- rules += ' s1-_us1-b';
168
- if (props.isSelected) {
169
- if (props.isFocusVisible) rules += ' s1-_ps1-a-4bhpmf';
170
- else rules += ' s1-_ps1-a-zlnqab';
171
- } else if (props.isFocusVisible) rules += ' s1-_ps1-a-4bhpmf';
172
- if (props.isSelected) {
173
- if (props.isFocusVisible) rules += ' s1-_p-ba5uxf';
174
- else rules += ' s1-_p-1ytnijz';
175
- } else if (props.isFocusVisible) rules += ' s1-_p-ba5uxf';
176
- return rules;
177
- };
178
- const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
179
- let { href: href } = props;
180
- return /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$TreeItem), {
181
- ...props,
182
- className: (renderProps)=>$48b8113347121625$var$treeRow({
183
- ...renderProps,
184
- isLink: !!href
185
- })
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", {
193
- className: $48b8113347121625$var$treeCellGrid({
194
- isDisabled: isDisabled
195
- })
196
- }, selectionMode !== 'none' && selectionBehavior === 'toggle' && // TODO: add transition?
197
- /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Checkbox), {
198
- isEmphasized: true,
199
- UNSAFE_className: $48b8113347121625$var$treeCheckbox(),
200
- UNSAFE_style: {
201
- paddingInlineEnd: '0px'
202
- },
203
- slot: "selection"
204
- }), /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
205
- style: {
206
- gridArea: 'level-padding',
207
- marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`
208
- }
209
- }), hasChildItems && /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$ExpandableRowChevron, {
210
- isDisabled: isDisabled,
211
- isExpanded: isExpanded
212
- }), /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$SlotProvider), {
213
- slots: {
214
- text: {
215
- UNSAFE_className: $48b8113347121625$var$treeContent({
216
- isDisabled: isDisabled
217
- })
218
- },
219
- // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656
220
- // but could crop up later for other components
221
- icon: {
222
- UNSAFE_className: $48b8113347121625$var$treeIcon(),
223
- size: 'S'
224
- },
225
- actionButton: {
226
- UNSAFE_className: $48b8113347121625$var$treeActions(),
227
- isQuiet: true
228
- },
229
- actionGroup: {
230
- UNSAFE_className: $48b8113347121625$var$treeActions(),
231
- isQuiet: true,
232
- density: 'compact',
233
- buttonLabelBehavior: 'hide',
234
- isDisabled: isDisabled,
235
- overflowMode: 'collapse'
236
- },
237
- actionMenu: {
238
- UNSAFE_className: $48b8113347121625$var$treeActionMenu(),
239
- UNSAFE_style: {
240
- marginInlineEnd: '.5rem'
241
- },
242
- isQuiet: true
243
- }
244
- }
245
- }, children), /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
246
- className: $48b8113347121625$var$treeRowOutline({
247
- isFocusVisible: isFocusVisible,
248
- isSelected: isSelected,
249
- isFirst: isFirst
250
- })
251
- }));
252
- });
253
- };
254
- const $48b8113347121625$var$expandButton = function anonymous(props) {
255
- let rules = "";
256
- rules += ' s1-__h-pn4rxq';
257
- rules += ' s1-ns1-Y';
258
- rules += ' s1-4s1-b';
259
- rules += ' s1-_Ts1-d';
260
- rules += ' s1-_1s1-a';
261
- rules += ' s1-_Us1-b';
262
- rules += ' s1-_Ws1-d';
263
- rules += ' s1-_Fs1-a';
264
- if (props.isExpanded) {
265
- if (props.isRTL) rules += ' s1-W-negfvv';
266
- else rules += ' s1-W-10b8jr2';
267
- }
268
- rules += ' s1-_I-1o2fh9e';
269
- return rules;
270
- };
271
- function $48b8113347121625$var$ExpandableRowChevron(props) {
272
- let expandButtonRef = (0, $FHprs$useRef)(null);
273
- let [fullProps, ref] = (0, $FHprs$useContextProps)({
274
- ...props,
275
- slot: 'chevron'
276
- }, expandButtonRef, (0, $FHprs$ButtonContext));
277
- let { isExpanded: isExpanded, isDisabled: isDisabled } = fullProps;
278
- let { direction: direction } = (0, $FHprs$useLocale)();
279
- // 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
280
- let { buttonProps: buttonProps } = (0, $FHprs$useButton)({
281
- ...fullProps,
282
- elementType: 'span'
283
- }, ref);
284
- return /*#__PURE__*/ (0, $FHprs$react).createElement("span", {
285
- ...buttonProps,
286
- ref: ref,
287
- // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually "focus" it
288
- tabIndex: (0, $FHprs$isAndroid)() && !isDisabled ? -1 : undefined,
289
- className: $48b8113347121625$var$expandButton({
290
- isExpanded: isExpanded,
291
- isDisabled: isDisabled,
292
- isRTL: direction === 'rtl'
293
- })
294
- }, direction === 'ltr' ? /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronRightMedium), null) : /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronLeftMedium), null));
295
- }
296
-
297
-
298
- export {$48b8113347121625$export$6940b0d9c820eca7 as TreeView, $48b8113347121625$export$6e77ea6719814e9c as TreeViewItem, $48b8113347121625$export$9a5779ed3fade674 as TreeViewItemContent};
299
- //# sourceMappingURL=TreeView.module.js.map
@@ -1,299 +0,0 @@
1
- import "./tree.961568f2.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
- import {Checkbox as $FHprs$Checkbox} from "@react-spectrum/checkbox";
4
- import $FHprs$spectrumiconsuiChevronLeftMedium from "@spectrum-icons/ui/ChevronLeftMedium";
5
- import $FHprs$spectrumiconsuiChevronRightMedium from "@spectrum-icons/ui/ChevronRightMedium";
6
- import {isAndroid as $FHprs$isAndroid} from "@react-aria/utils";
7
- import $FHprs$react, {createContext as $FHprs$createContext, useRef as $FHprs$useRef} from "react";
8
- import {useStyleProps as $FHprs$useStyleProps, useDOMRef as $FHprs$useDOMRef, SlotProvider as $FHprs$SlotProvider} from "@react-spectrum/utils";
9
- import {useButton as $FHprs$useButton} from "@react-aria/button";
10
- import {useLocale as $FHprs$useLocale} from "@react-aria/i18n";
11
-
12
- /*
13
- * Copyright 2024 Adobe. All rights reserved.
14
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
15
- * you may not use this file except in compliance with the License. You may obtain a copy
16
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
17
- *
18
- * Unless required by applicable law or agreed to in writing, software distributed under
19
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
20
- * OF ANY KIND, either express or implied. See the License for the specific language
21
- * governing permissions and limitations under the License.
22
- */
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
- const $48b8113347121625$var$TreeRendererContext = /*#__PURE__*/ (0, $FHprs$createContext)({});
32
- // TODO: add animations for rows appearing and disappearing
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
34
- // keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't
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
36
- const $48b8113347121625$var$tree = function anonymous(props) {
37
- let rules = "";
38
- if (props.isFocusVisible) rules += ' s1-_Fs1-b';
39
- else rules += ' s1-_Fs1-a';
40
- rules += ' s1-ds1-as1-___D';
41
- rules += ' s1-ds1-___I';
42
- rules += ' s1-_Hs1-c';
43
- rules += ' s1-_G-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-__ls1-a';
51
- rules += ' s1-As1-a';
52
- rules += ' s1-cs1-as1-___y';
53
- rules += ' s1-cs1-a';
54
- if (props.isEmpty) rules += ' s1-_Ws1-d';
55
- if (props.isEmpty) rules += ' s1-_Vs1-c';
56
- if (props.isEmpty) rules += ' s1-_Ts1-d';
57
- rules += ' s1-__ts1-a';
58
- rules += ' s1-__us1-a';
59
- return rules;
60
- };
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;
63
- let renderer;
64
- if (typeof children === 'function') renderer = children;
65
- let { styleProps: styleProps } = (0, $FHprs$useStyleProps)(props);
66
- let domRef = (0, $FHprs$useDOMRef)(ref);
67
- let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';
68
- return /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$TreeRendererContext.Provider, {
69
- value: {
70
- renderer: renderer
71
- }
72
- }, /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Tree), {
73
- ...props,
74
- ...styleProps,
75
- className: (renderProps)=>(UNSAFE_className !== null && UNSAFE_className !== void 0 ? UNSAFE_className : '') + $48b8113347121625$var$tree(renderProps),
76
- selectionBehavior: selectionBehavior,
77
- ref: domRef
78
- }, props.children));
79
- });
80
- const $48b8113347121625$var$treeRow = function anonymous(props) {
81
- let rules = "";
82
- rules += ' s1-Xs1-c';
83
- rules += ' s1-_Ts1-d';
84
- rules += ' s1-ns1-k';
85
- rules += ' s1-os1-Y';
86
- rules += ' s1-__ls1-a';
87
- rules += ' s1-6s1-c';
88
- rules += ' s1-7s1-d';
89
- rules += ' s1-9s1-b';
90
- rules += ' s1-as1-___K';
91
- rules += ' s1-_Fs1-a';
92
- if (props.isLink) rules += ' s1-__Fs1-c';
93
- else rules += ' s1-__Fs1-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';
98
- return rules;
99
- };
100
- const $48b8113347121625$var$treeCellGrid = function anonymous(props) {
101
- let rules = "";
102
- rules += ' s1-_Ts1-f';
103
- rules += ' s1-os1-Y';
104
- rules += ' s1-_Vs1-c';
105
- rules += ' s1-__e-1nxidkl-1nxidkl-1nxidkl-3hmti-1nxidkl-375yi6-1nxidkl-ykdwf2';
106
- rules += ' s1-__f-375yi6';
107
- rules += ' s1-__g-1qk85yo';
108
- if (props.isDisabled) {
109
- rules += ' s1-as1-as1-___F';
110
- rules += ' s1-as1-i';
111
- }
112
- return rules;
113
- };
114
- // TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden
115
- const $48b8113347121625$var$treeCheckbox = function anonymous(props) {
116
- let rules = "";
117
- rules += ' s1-__h-4wahvw';
118
- rules += ' s1-_K-37nn5o';
119
- rules += ' s1-Cs1-d';
120
- rules += ' s1-Ds1-a';
121
- return rules;
122
- };
123
- const $48b8113347121625$var$treeIcon = function anonymous(props) {
124
- let rules = "";
125
- rules += ' s1-__h-ykjmzy';
126
- rules += ' s1-Ds1-c';
127
- return rules;
128
- };
129
- const $48b8113347121625$var$treeContent = function anonymous(props) {
130
- let rules = "";
131
- rules += ' s1-__h-1mod4sg';
132
- rules += ' s1-_gs1-a';
133
- rules += ' s1-_ks1-b';
134
- rules += ' s1-__ts1-b';
135
- rules += ' s1-__us1-b';
136
- return rules;
137
- };
138
- const $48b8113347121625$var$treeActions = function anonymous(props) {
139
- let rules = "";
140
- rules += ' s1-__h-8ayfo6';
141
- rules += ' s1-_4-3t1x';
142
- rules += ' s1-_3-3t1x';
143
- rules += ' s1-Cs1-F';
144
- rules += ' s1-Ds1-b';
145
- return rules;
146
- };
147
- const $48b8113347121625$var$treeActionMenu = function anonymous(props) {
148
- let rules = "";
149
- rules += ' s1-__h-wit6hk';
150
- rules += ' s1-os1-i';
151
- return rules;
152
- };
153
- const $48b8113347121625$var$treeRowOutline = function anonymous(props) {
154
- let rules = "";
155
- rules += ' s1-_Ts1-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-__zs1-a';
167
- rules += ' s1-_us1-b';
168
- if (props.isSelected) {
169
- if (props.isFocusVisible) rules += ' s1-_ps1-a-4bhpmf';
170
- else rules += ' s1-_ps1-a-zlnqab';
171
- } else if (props.isFocusVisible) rules += ' s1-_ps1-a-4bhpmf';
172
- if (props.isSelected) {
173
- if (props.isFocusVisible) rules += ' s1-_p-ba5uxf';
174
- else rules += ' s1-_p-1ytnijz';
175
- } else if (props.isFocusVisible) rules += ' s1-_p-ba5uxf';
176
- return rules;
177
- };
178
- const $48b8113347121625$export$6e77ea6719814e9c = (props)=>{
179
- let { href: href } = props;
180
- return /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$TreeItem), {
181
- ...props,
182
- className: (renderProps)=>$48b8113347121625$var$treeRow({
183
- ...renderProps,
184
- isLink: !!href
185
- })
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", {
193
- className: $48b8113347121625$var$treeCellGrid({
194
- isDisabled: isDisabled
195
- })
196
- }, selectionMode !== 'none' && selectionBehavior === 'toggle' && // TODO: add transition?
197
- /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$Checkbox), {
198
- isEmphasized: true,
199
- UNSAFE_className: $48b8113347121625$var$treeCheckbox(),
200
- UNSAFE_style: {
201
- paddingInlineEnd: '0px'
202
- },
203
- slot: "selection"
204
- }), /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
205
- style: {
206
- gridArea: 'level-padding',
207
- marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`
208
- }
209
- }), hasChildItems && /*#__PURE__*/ (0, $FHprs$react).createElement($48b8113347121625$var$ExpandableRowChevron, {
210
- isDisabled: isDisabled,
211
- isExpanded: isExpanded
212
- }), /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$SlotProvider), {
213
- slots: {
214
- text: {
215
- UNSAFE_className: $48b8113347121625$var$treeContent({
216
- isDisabled: isDisabled
217
- })
218
- },
219
- // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656
220
- // but could crop up later for other components
221
- icon: {
222
- UNSAFE_className: $48b8113347121625$var$treeIcon(),
223
- size: 'S'
224
- },
225
- actionButton: {
226
- UNSAFE_className: $48b8113347121625$var$treeActions(),
227
- isQuiet: true
228
- },
229
- actionGroup: {
230
- UNSAFE_className: $48b8113347121625$var$treeActions(),
231
- isQuiet: true,
232
- density: 'compact',
233
- buttonLabelBehavior: 'hide',
234
- isDisabled: isDisabled,
235
- overflowMode: 'collapse'
236
- },
237
- actionMenu: {
238
- UNSAFE_className: $48b8113347121625$var$treeActionMenu(),
239
- UNSAFE_style: {
240
- marginInlineEnd: '.5rem'
241
- },
242
- isQuiet: true
243
- }
244
- }
245
- }, children), /*#__PURE__*/ (0, $FHprs$react).createElement("div", {
246
- className: $48b8113347121625$var$treeRowOutline({
247
- isFocusVisible: isFocusVisible,
248
- isSelected: isSelected,
249
- isFirst: isFirst
250
- })
251
- }));
252
- });
253
- };
254
- const $48b8113347121625$var$expandButton = function anonymous(props) {
255
- let rules = "";
256
- rules += ' s1-__h-pn4rxq';
257
- rules += ' s1-ns1-Y';
258
- rules += ' s1-4s1-b';
259
- rules += ' s1-_Ts1-d';
260
- rules += ' s1-_1s1-a';
261
- rules += ' s1-_Us1-b';
262
- rules += ' s1-_Ws1-d';
263
- rules += ' s1-_Fs1-a';
264
- if (props.isExpanded) {
265
- if (props.isRTL) rules += ' s1-W-negfvv';
266
- else rules += ' s1-W-10b8jr2';
267
- }
268
- rules += ' s1-_I-1o2fh9e';
269
- return rules;
270
- };
271
- function $48b8113347121625$var$ExpandableRowChevron(props) {
272
- let expandButtonRef = (0, $FHprs$useRef)(null);
273
- let [fullProps, ref] = (0, $FHprs$useContextProps)({
274
- ...props,
275
- slot: 'chevron'
276
- }, expandButtonRef, (0, $FHprs$ButtonContext));
277
- let { isExpanded: isExpanded, isDisabled: isDisabled } = fullProps;
278
- let { direction: direction } = (0, $FHprs$useLocale)();
279
- // 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
280
- let { buttonProps: buttonProps } = (0, $FHprs$useButton)({
281
- ...fullProps,
282
- elementType: 'span'
283
- }, ref);
284
- return /*#__PURE__*/ (0, $FHprs$react).createElement("span", {
285
- ...buttonProps,
286
- ref: ref,
287
- // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually "focus" it
288
- tabIndex: (0, $FHprs$isAndroid)() && !isDisabled ? -1 : undefined,
289
- className: $48b8113347121625$var$expandButton({
290
- isExpanded: isExpanded,
291
- isDisabled: isDisabled,
292
- isRTL: direction === 'rtl'
293
- })
294
- }, direction === 'ltr' ? /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronRightMedium), null) : /*#__PURE__*/ (0, $FHprs$react).createElement((0, $FHprs$spectrumiconsuiChevronLeftMedium), null));
295
- }
296
-
297
-
298
- export {$48b8113347121625$export$6940b0d9c820eca7 as TreeView, $48b8113347121625$export$6e77ea6719814e9c as TreeViewItem, $48b8113347121625$export$9a5779ed3fade674 as TreeViewItemContent};
299
- //# sourceMappingURL=TreeView.module.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/tree/src/TreeView.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaTreeProps} from '@react-aria/tree';\nimport {\n ButtonContext,\n Tree,\n TreeItem,\n TreeItemContent,\n TreeItemContentProps,\n TreeItemContentRenderProps,\n TreeItemProps,\n TreeItemRenderProps,\n TreeRenderProps,\n useContextProps\n} from 'react-aria-components';\nimport {Checkbox} from '@react-spectrum/checkbox';\nimport ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';\nimport ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';\nimport {DOMRef, Expandable, Key, SelectionBehavior, SpectrumSelectionProps, StyleProps} from '@react-types/shared';\nimport {focusRing, style} from '@react-spectrum/style-macro-s1' with {type: 'macro'};\nimport {isAndroid} from '@react-aria/utils';\nimport React, {createContext, JSX, JSXElementConstructor, ReactElement, ReactNode, useRef} from 'react';\nimport {SlotProvider, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {useButton} from '@react-aria/button';\nimport {useLocale} from '@react-aria/i18n';\n\nexport interface SpectrumTreeViewProps<T> extends Omit<AriaTreeProps<T>, 'children' | 'render'>, StyleProps, SpectrumSelectionProps, Expandable {\n /** Provides content to display when there are no items in the tree. */\n renderEmptyState?: () => JSX.Element,\n /**\n * Handler that is called when a user performs an action on an item. The exact user event depends on\n * the collection's `selectionStyle` prop and the interaction modality.\n */\n onAction?: (key: Key) => void,\n /**\n * The contents of the tree.\n */\n children?: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface SpectrumTreeViewItemProps extends Omit<TreeItemProps, 'className' | 'style' | 'render' | 'value' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'> {\n /** Rendered contents of the tree item or child items. */\n children: ReactNode\n}\n\ninterface TreeRendererContextValue {\n renderer?: (item) => ReactElement<any, string | JSXElementConstructor<any>>\n}\nconst TreeRendererContext = createContext<TreeRendererContextValue>({});\n\n// TODO: add animations for rows appearing and disappearing\n\n// 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\n// keyboard focus ring. Perhaps find a different way of rendering the outlines since the top of the item doesn't\n// scroll into view due to how the ring is offset. Alternatively, have the tree render the top/bottom outline like it does in Listview\nconst tree = style<Pick<TreeRenderProps, 'isEmpty'>>({\n ...focusRing(),\n outlineOffset: '[-2px]', // make certain we are visible inside overflow hidden containers\n height: 'full',\n width: 'full',\n borderWidth: 2,\n boxSizing: 'border-box',\n borderXWidth: 0,\n borderStyle: 'solid',\n borderColor: {\n default: 'transparent',\n forcedColors: 'Background'\n },\n justifyContent: {\n isEmpty: 'center'\n },\n alignItems: {\n isEmpty: 'center'\n },\n display: {\n isEmpty: 'flex'\n },\n overflow: 'auto'\n});\n\n/**\n * A tree view provides users with a way to navigate nested hierarchical information.\n */\nexport const TreeView = React.forwardRef(function TreeView<T extends object>(props: SpectrumTreeViewProps<T>, ref: DOMRef<HTMLDivElement>) {\n let {children, selectionStyle, UNSAFE_className} = props;\n\n let renderer;\n if (typeof children === 'function') {\n renderer = children;\n }\n\n let {styleProps} = useStyleProps(props);\n let domRef = useDOMRef(ref);\n let selectionBehavior = selectionStyle === 'highlight' ? 'replace' : 'toggle';\n\n return (\n <TreeRendererContext.Provider value={{renderer}}>\n <Tree {...props} {...styleProps} className={renderProps => (UNSAFE_className ?? '') + tree(renderProps)} selectionBehavior={selectionBehavior as SelectionBehavior} ref={domRef}>\n {props.children}\n </Tree>\n </TreeRendererContext.Provider>\n );\n}) as <T>(props: SpectrumTreeViewProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\n\ninterface TreeRowRenderProps extends TreeItemRenderProps {\n isLink?: boolean\n}\n\nconst treeRow = style<TreeRowRenderProps>({\n position: 'relative',\n display: 'flex',\n height: 10,\n width: 'full',\n boxSizing: 'border-box',\n fontSize: 'base',\n fontWeight: 'normal',\n lineHeight: 200,\n color: 'body',\n outlineStyle: 'none',\n cursor: {\n default: 'default',\n isLink: 'pointer'\n },\n // TODO: not sure where to get the equivalent colors here, for instance isHovered is spectrum 600 with 10% opacity but I don't think that exists in the theme\n backgroundColor: {\n isHovered: '[var(--spectrum-table-row-background-color-hover)]',\n isFocusVisibleWithin: '[var(--spectrum-table-row-background-color-hover)]',\n isPressed: '[var(--spectrum-table-row-background-color-down)]',\n isSelected: '[var(--spectrum-table-row-background-color-selected)]'\n }\n});\n\nconst treeCellGrid = style({\n display: 'grid',\n width: 'full',\n alignItems: 'center',\n gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 10, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],\n gridTemplateRows: '1fr',\n gridTemplateAreas: [\n 'drag-handle checkbox level-padding expand-button icon content actions actionmenu'\n ],\n color: {\n isDisabled: {\n default: 'gray-400',\n forcedColors: 'GrayText'\n }\n }\n});\n\n// TODO: These styles lose against the spectrum class names, so I've did unsafe for the ones that get overridden\nconst treeCheckbox = style({\n gridArea: 'checkbox',\n transitionDuration: '160ms',\n marginStart: 3,\n marginEnd: 0\n});\n\nconst treeIcon = style({\n gridArea: 'icon',\n marginEnd: 2\n});\n\nconst treeContent = style<Pick<TreeItemContentRenderProps, 'isDisabled'>>({\n gridArea: 'content',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden'\n});\n\nconst treeActions = style({\n gridArea: 'actions',\n flexGrow: 0,\n flexShrink: 0,\n /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */\n marginStart: .5,\n marginEnd: 1\n});\n\nconst treeActionMenu = style({\n gridArea: 'actionmenu',\n width: 8\n});\n\nconst treeRowOutline = style({\n content: '',\n display: 'block',\n position: 'absolute',\n insetStart: 0,\n insetEnd: 0,\n top: {\n default: 0,\n isFocusVisible: '[-2px]',\n isSelected: {\n default: '[-1px]',\n isFocusVisible: '[-2px]'\n },\n isFirst: 0\n },\n bottom: 0,\n pointerEvents: 'none',\n forcedColorAdjust: 'none',\n\n boxShadow: {\n isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]',\n isSelected: {\n default: '[inset 1px 0 0 0 var(--spectrum-alias-focus-color), inset -1px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -1px 0 0 var(--spectrum-alias-focus-color), inset 0 1px 0 0 var(--spectrum-alias-focus-color)]',\n isFocusVisible: '[inset 2px 0 0 0 var(--spectrum-alias-focus-color), inset -2px 0 0 0 var(--spectrum-alias-focus-color), inset 0 -2px 0 0 var(--spectrum-alias-focus-color), inset 0 2px 0 0 var(--spectrum-alias-focus-color)]'\n },\n forcedColors: {\n isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]',\n isSelected: {\n default: '[inset 1px 0 0 0 Highlight, inset -1px 0 0 0 Highlight, inset 0 -1px 0 0 Highlight, inset 0 1px 0 0 Highlight]',\n isFocusVisible: '[inset 2px 0 0 0 Highlight, inset -2px 0 0 0 Highlight, inset 0 -2px 0 0 Highlight, inset 0 2px 0 0 Highlight]'\n }\n }\n }\n});\n\nexport const TreeViewItem = (props: SpectrumTreeViewItemProps): ReactNode => {\n let {\n href\n } = props;\n\n return (\n <TreeItem\n {...props}\n className={renderProps => treeRow({\n ...renderProps,\n isLink: !!href\n })} />\n );\n};\n\nexport interface SpectrumTreeViewItemContentProps extends Omit<TreeItemContentProps, 'children'> {\n /** Rendered contents of the tree item or child items. */\n children: ReactNode\n}\n\n\nexport const TreeViewItemContent = (props: SpectrumTreeViewItemContentProps): ReactNode => {\n let {\n children\n } = props;\n\n return (\n <TreeItemContent>\n {({isExpanded, hasChildItems, level, selectionMode, selectionBehavior, isDisabled, isSelected, isFocusVisible, state, id}) => {\n let isFirst = state.collection.getFirstKey() === id;\n return (\n <div className={treeCellGrid({isDisabled})}>\n {selectionMode !== 'none' && selectionBehavior === 'toggle' && (\n // TODO: add transition?\n <Checkbox\n isEmphasized\n UNSAFE_className={treeCheckbox()}\n UNSAFE_style={{paddingInlineEnd: '0px'}}\n slot=\"selection\" />\n )}\n <div style={{gridArea: 'level-padding', marginInlineEnd: `calc(${level - 1} * var(--spectrum-global-dimension-size-200))`}} />\n {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}\n {hasChildItems && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}\n <SlotProvider\n slots={{\n text: {UNSAFE_className: treeContent({isDisabled})},\n // Note there is also an issue here where these icon props are making into the action menu's icon. Resolved by 8ab0ffb276ff437a65b365c9a3be0323a1b24656\n // but could crop up later for other components\n icon: {UNSAFE_className: treeIcon(), size: 'S'},\n actionButton: {UNSAFE_className: treeActions(), isQuiet: true},\n actionGroup: {\n UNSAFE_className: treeActions(),\n isQuiet: true,\n density: 'compact',\n buttonLabelBehavior: 'hide',\n isDisabled,\n overflowMode: 'collapse'\n },\n actionMenu: {UNSAFE_className: treeActionMenu(), UNSAFE_style: {marginInlineEnd: '.5rem'}, isQuiet: true}\n }}>\n {children}\n </SlotProvider>\n <div className={treeRowOutline({isFocusVisible, isSelected, isFirst})} />\n </div>\n );\n }}\n </TreeItemContent>\n );\n};\n\ninterface ExpandableRowChevronProps {\n isExpanded?: boolean,\n isDisabled?: boolean,\n isRTL?: boolean\n}\n\nconst expandButton = style<ExpandableRowChevronProps>({\n gridArea: 'expand-button',\n height: 'full',\n aspectRatio: 'square',\n display: 'flex',\n flexWrap: 'wrap',\n alignContent: 'center',\n justifyContent: 'center',\n outlineStyle: 'none',\n transform: {\n isExpanded: {\n default: 'rotate(90deg)',\n isRTL: 'rotate(-90deg)'\n }\n },\n transition: '[transform ease var(--spectrum-global-animation-duration-100)]'\n});\n\nfunction ExpandableRowChevron(props: ExpandableRowChevronProps) {\n let expandButtonRef = useRef(null);\n let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);\n let {isExpanded, isDisabled} = fullProps;\n let {direction} = useLocale();\n\n // 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\n let {buttonProps} = useButton({\n ...fullProps,\n elementType: 'span'\n }, ref);\n\n return (\n <span\n {...buttonProps}\n ref={ref}\n // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually \"focus\" it\n tabIndex={isAndroid() && !isDisabled ? -1 : undefined}\n className={expandButton({isExpanded, isDisabled, isRTL: direction === 'rtl'})}>\n {direction === 'ltr' ? <ChevronRightMedium /> : <ChevronLeftMedium />}\n </span>\n );\n}\n"],"names":[],"version":3,"file":"TreeView.module.js.map"}