@react-spectrum/tabs 3.1.2-nightly.3100 → 3.1.3
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/main.js +169 -168
- package/dist/main.js.map +1 -1
- package/dist/module.js +168 -167
- package/dist/module.js.map +1 -1
- package/package.json +20 -20
package/dist/main.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
require("./main.css");
|
|
2
|
-
var $
|
|
3
|
-
var $
|
|
4
|
-
var $
|
|
5
|
-
var $
|
|
6
|
-
var $
|
|
7
|
-
var $
|
|
8
|
-
var $
|
|
9
|
-
var $
|
|
10
|
-
var $
|
|
11
|
-
var $
|
|
12
|
-
var $
|
|
13
|
-
var $
|
|
14
|
-
var $
|
|
2
|
+
var $e7A5M$reactstatelycollections = require("@react-stately/collections");
|
|
3
|
+
var $e7A5M$reactspectrumutils = require("@react-spectrum/utils");
|
|
4
|
+
var $e7A5M$reactariautils = require("@react-aria/utils");
|
|
5
|
+
var $e7A5M$reactariafocus = require("@react-aria/focus");
|
|
6
|
+
var $e7A5M$reactspectrumpicker = require("@react-spectrum/picker");
|
|
7
|
+
var $e7A5M$reactstatelylist = require("@react-stately/list");
|
|
8
|
+
var $e7A5M$react = require("react");
|
|
9
|
+
var $e7A5M$reactstatelytabs = require("@react-stately/tabs");
|
|
10
|
+
var $e7A5M$reactspectrumtext = require("@react-spectrum/text");
|
|
11
|
+
var $e7A5M$reactariainteractions = require("@react-aria/interactions");
|
|
12
|
+
var $e7A5M$reactariai18n = require("@react-aria/i18n");
|
|
13
|
+
var $e7A5M$reactspectrumprovider = require("@react-spectrum/provider");
|
|
14
|
+
var $e7A5M$reactariatabs = require("@react-aria/tabs");
|
|
15
15
|
|
|
16
16
|
function $parcel$export(e, n, v, s) {
|
|
17
17
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
@@ -36,12 +36,12 @@ function $parcel$interopDefault(a) {
|
|
|
36
36
|
return a && a.__esModule ? a.default : a;
|
|
37
37
|
}
|
|
38
38
|
|
|
39
|
-
$parcel$export(module.exports, "Item", () => $
|
|
40
|
-
var $
|
|
39
|
+
$parcel$export(module.exports, "Item", () => $e7A5M$reactstatelycollections.Item);
|
|
40
|
+
var $4b5f7944b4795980$exports = {};
|
|
41
41
|
|
|
42
|
-
$parcel$export($
|
|
43
|
-
$parcel$export($
|
|
44
|
-
$parcel$export($
|
|
42
|
+
$parcel$export($4b5f7944b4795980$exports, "TabList", () => $4b5f7944b4795980$export$e51a686c67fdaa2d);
|
|
43
|
+
$parcel$export($4b5f7944b4795980$exports, "TabPanels", () => $4b5f7944b4795980$export$5dae8d435677f210);
|
|
44
|
+
$parcel$export($4b5f7944b4795980$exports, "Tabs", () => $4b5f7944b4795980$export$b2539bed5023c21c);
|
|
45
45
|
|
|
46
46
|
|
|
47
47
|
|
|
@@ -49,68 +49,68 @@ $parcel$export($41838ba3ee23d2b2$exports, "Tabs", () => $41838ba3ee23d2b2$export
|
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
|
|
52
|
-
var $
|
|
52
|
+
var $652630c2aefd3d05$exports = {};
|
|
53
53
|
|
|
54
|
-
$parcel$export($
|
|
55
|
-
$parcel$export($
|
|
56
|
-
$parcel$export($
|
|
57
|
-
$parcel$export($
|
|
58
|
-
$parcel$export($
|
|
59
|
-
$parcel$export($
|
|
60
|
-
$parcel$export($
|
|
61
|
-
$parcel$export($
|
|
62
|
-
$parcel$export($
|
|
63
|
-
$parcel$export($
|
|
64
|
-
$parcel$export($
|
|
65
|
-
$parcel$export($
|
|
66
|
-
$parcel$export($
|
|
67
|
-
$parcel$export($
|
|
68
|
-
$parcel$export($
|
|
69
|
-
$parcel$export($
|
|
70
|
-
$parcel$export($
|
|
71
|
-
$parcel$export($
|
|
72
|
-
$parcel$export($
|
|
73
|
-
$parcel$export($
|
|
74
|
-
var $
|
|
75
|
-
var $
|
|
76
|
-
var $
|
|
77
|
-
var $
|
|
78
|
-
var $
|
|
79
|
-
var $
|
|
80
|
-
var $
|
|
81
|
-
var $
|
|
82
|
-
var $
|
|
83
|
-
var $
|
|
84
|
-
var $
|
|
85
|
-
var $
|
|
86
|
-
var $
|
|
87
|
-
var $
|
|
88
|
-
var $
|
|
89
|
-
var $
|
|
90
|
-
var $
|
|
91
|
-
var $
|
|
92
|
-
var $
|
|
93
|
-
var $
|
|
94
|
-
$
|
|
95
|
-
$
|
|
96
|
-
$
|
|
97
|
-
$
|
|
98
|
-
$
|
|
99
|
-
$
|
|
100
|
-
$
|
|
101
|
-
$
|
|
102
|
-
$
|
|
103
|
-
$
|
|
104
|
-
$
|
|
105
|
-
$
|
|
106
|
-
$
|
|
107
|
-
$
|
|
108
|
-
$
|
|
109
|
-
$
|
|
110
|
-
$
|
|
111
|
-
$
|
|
112
|
-
$
|
|
113
|
-
$
|
|
54
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-TabsPanel", () => $652630c2aefd3d05$export$34f1a65c57bb7bb, (v) => $652630c2aefd3d05$export$34f1a65c57bb7bb = v);
|
|
55
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-TabsPanel--horizontal", () => $652630c2aefd3d05$export$778fb839eaa0528c, (v) => $652630c2aefd3d05$export$778fb839eaa0528c = v);
|
|
56
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-TabsPanel--vertical", () => $652630c2aefd3d05$export$9a6e2fb72c648072, (v) => $652630c2aefd3d05$export$9a6e2fb72c648072 = v);
|
|
57
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs", () => $652630c2aefd3d05$export$35c105c0d9c8e56f, (v) => $652630c2aefd3d05$export$35c105c0d9c8e56f = v);
|
|
58
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs-item", () => $652630c2aefd3d05$export$123e4c01a5440a3e, (v) => $652630c2aefd3d05$export$123e4c01a5440a3e = v);
|
|
59
|
+
$parcel$export($652630c2aefd3d05$exports, "is-disabled", () => $652630c2aefd3d05$export$d35bc1e505d1ebbf, (v) => $652630c2aefd3d05$export$d35bc1e505d1ebbf = v);
|
|
60
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs-itemLabel", () => $652630c2aefd3d05$export$1f253edac4b98526, (v) => $652630c2aefd3d05$export$1f253edac4b98526 = v);
|
|
61
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Icon", () => $652630c2aefd3d05$export$d374b04f30360026, (v) => $652630c2aefd3d05$export$d374b04f30360026 = v);
|
|
62
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs-selectionIndicator", () => $652630c2aefd3d05$export$a115f9117a19563e, (v) => $652630c2aefd3d05$export$a115f9117a19563e = v);
|
|
63
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs--horizontal", () => $652630c2aefd3d05$export$229f1ac4d3d38f0e, (v) => $652630c2aefd3d05$export$229f1ac4d3d38f0e = v);
|
|
64
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs--compact", () => $652630c2aefd3d05$export$e15c78184ee03abe, (v) => $652630c2aefd3d05$export$e15c78184ee03abe = v);
|
|
65
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs--isCollapsed", () => $652630c2aefd3d05$export$ea514cd060922d6b, (v) => $652630c2aefd3d05$export$ea514cd060922d6b = v);
|
|
66
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs--quiet", () => $652630c2aefd3d05$export$831e830d5828d42b, (v) => $652630c2aefd3d05$export$831e830d5828d42b = v);
|
|
67
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-Tabs--vertical", () => $652630c2aefd3d05$export$e415005be3957065, (v) => $652630c2aefd3d05$export$e415005be3957065 = v);
|
|
68
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-TabsPanel-collapseWrapper", () => $652630c2aefd3d05$export$e09869956b4c96f2, (v) => $652630c2aefd3d05$export$e09869956b4c96f2 = v);
|
|
69
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-TabsPanel-tabs", () => $652630c2aefd3d05$export$4a157a691c854e23, (v) => $652630c2aefd3d05$export$4a157a691c854e23 = v);
|
|
70
|
+
$parcel$export($652630c2aefd3d05$exports, "spectrum-TabsPanel-tabpanel", () => $652630c2aefd3d05$export$acb5da0970288266, (v) => $652630c2aefd3d05$export$acb5da0970288266 = v);
|
|
71
|
+
$parcel$export($652630c2aefd3d05$exports, "focus-ring", () => $652630c2aefd3d05$export$f39a09f249340e2a, (v) => $652630c2aefd3d05$export$f39a09f249340e2a = v);
|
|
72
|
+
$parcel$export($652630c2aefd3d05$exports, "is-hovered", () => $652630c2aefd3d05$export$b8813cd5d7824ce7, (v) => $652630c2aefd3d05$export$b8813cd5d7824ce7 = v);
|
|
73
|
+
$parcel$export($652630c2aefd3d05$exports, "is-selected", () => $652630c2aefd3d05$export$1e0fb04f31d3c22a, (v) => $652630c2aefd3d05$export$1e0fb04f31d3c22a = v);
|
|
74
|
+
var $652630c2aefd3d05$export$34f1a65c57bb7bb;
|
|
75
|
+
var $652630c2aefd3d05$export$778fb839eaa0528c;
|
|
76
|
+
var $652630c2aefd3d05$export$9a6e2fb72c648072;
|
|
77
|
+
var $652630c2aefd3d05$export$35c105c0d9c8e56f;
|
|
78
|
+
var $652630c2aefd3d05$export$123e4c01a5440a3e;
|
|
79
|
+
var $652630c2aefd3d05$export$d35bc1e505d1ebbf;
|
|
80
|
+
var $652630c2aefd3d05$export$1f253edac4b98526;
|
|
81
|
+
var $652630c2aefd3d05$export$d374b04f30360026;
|
|
82
|
+
var $652630c2aefd3d05$export$a115f9117a19563e;
|
|
83
|
+
var $652630c2aefd3d05$export$229f1ac4d3d38f0e;
|
|
84
|
+
var $652630c2aefd3d05$export$e15c78184ee03abe;
|
|
85
|
+
var $652630c2aefd3d05$export$ea514cd060922d6b;
|
|
86
|
+
var $652630c2aefd3d05$export$831e830d5828d42b;
|
|
87
|
+
var $652630c2aefd3d05$export$e415005be3957065;
|
|
88
|
+
var $652630c2aefd3d05$export$e09869956b4c96f2;
|
|
89
|
+
var $652630c2aefd3d05$export$4a157a691c854e23;
|
|
90
|
+
var $652630c2aefd3d05$export$acb5da0970288266;
|
|
91
|
+
var $652630c2aefd3d05$export$f39a09f249340e2a;
|
|
92
|
+
var $652630c2aefd3d05$export$b8813cd5d7824ce7;
|
|
93
|
+
var $652630c2aefd3d05$export$1e0fb04f31d3c22a;
|
|
94
|
+
$652630c2aefd3d05$export$34f1a65c57bb7bb = "spectrum-TabsPanel_3e140b";
|
|
95
|
+
$652630c2aefd3d05$export$778fb839eaa0528c = "spectrum-TabsPanel--horizontal_3e140b";
|
|
96
|
+
$652630c2aefd3d05$export$9a6e2fb72c648072 = "spectrum-TabsPanel--vertical_3e140b";
|
|
97
|
+
$652630c2aefd3d05$export$35c105c0d9c8e56f = "spectrum-Tabs_3e140b";
|
|
98
|
+
$652630c2aefd3d05$export$123e4c01a5440a3e = "spectrum-Tabs-item_3e140b";
|
|
99
|
+
$652630c2aefd3d05$export$d35bc1e505d1ebbf = "is-disabled_3e140b";
|
|
100
|
+
$652630c2aefd3d05$export$1f253edac4b98526 = "spectrum-Tabs-itemLabel_3e140b";
|
|
101
|
+
$652630c2aefd3d05$export$d374b04f30360026 = "spectrum-Icon_3e140b";
|
|
102
|
+
$652630c2aefd3d05$export$a115f9117a19563e = "spectrum-Tabs-selectionIndicator_3e140b";
|
|
103
|
+
$652630c2aefd3d05$export$229f1ac4d3d38f0e = "spectrum-Tabs--horizontal_3e140b";
|
|
104
|
+
$652630c2aefd3d05$export$e15c78184ee03abe = "spectrum-Tabs--compact_3e140b";
|
|
105
|
+
$652630c2aefd3d05$export$ea514cd060922d6b = "spectrum-Tabs--isCollapsed_3e140b";
|
|
106
|
+
$652630c2aefd3d05$export$831e830d5828d42b = "spectrum-Tabs--quiet_3e140b";
|
|
107
|
+
$652630c2aefd3d05$export$e415005be3957065 = "spectrum-Tabs--vertical_3e140b";
|
|
108
|
+
$652630c2aefd3d05$export$e09869956b4c96f2 = "spectrum-TabsPanel-collapseWrapper_3e140b";
|
|
109
|
+
$652630c2aefd3d05$export$4a157a691c854e23 = "spectrum-TabsPanel-tabs_3e140b";
|
|
110
|
+
$652630c2aefd3d05$export$acb5da0970288266 = "spectrum-TabsPanel-tabpanel_3e140b";
|
|
111
|
+
$652630c2aefd3d05$export$f39a09f249340e2a = "focus-ring_3e140b";
|
|
112
|
+
$652630c2aefd3d05$export$b8813cd5d7824ce7 = "is-hovered_3e140b";
|
|
113
|
+
$652630c2aefd3d05$export$1e0fb04f31d3c22a = "is-selected_3e140b";
|
|
114
114
|
|
|
115
115
|
|
|
116
116
|
|
|
@@ -121,31 +121,31 @@ $fbfde72129136356$export$1e0fb04f31d3c22a = "is-selected_3e140b";
|
|
|
121
121
|
|
|
122
122
|
|
|
123
123
|
|
|
124
|
-
const $
|
|
125
|
-
function $
|
|
126
|
-
props = $
|
|
124
|
+
const $4b5f7944b4795980$var$TabContext = /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createContext(null);
|
|
125
|
+
function $4b5f7944b4795980$var$Tabs(props, ref) {
|
|
126
|
+
props = $e7A5M$reactspectrumprovider.useProviderProps(props);
|
|
127
127
|
let { orientation: orientation = 'horizontal' , density: density = 'regular' , children: children , ...otherProps } = props;
|
|
128
|
-
let domRef = $
|
|
129
|
-
let tablistRef = $
|
|
130
|
-
let wrapperRef = $
|
|
131
|
-
let { direction: direction } = $
|
|
132
|
-
let { styleProps: styleProps } = $
|
|
133
|
-
let [collapse, setCollapse] = $
|
|
134
|
-
let [selectedTab1, setSelectedTab] = $
|
|
135
|
-
const [tabListState, setTabListState] = $
|
|
136
|
-
$
|
|
128
|
+
let domRef = $e7A5M$reactspectrumutils.useDOMRef(ref);
|
|
129
|
+
let tablistRef = $e7A5M$react.useRef();
|
|
130
|
+
let wrapperRef = $e7A5M$react.useRef();
|
|
131
|
+
let { direction: direction } = $e7A5M$reactariai18n.useLocale();
|
|
132
|
+
let { styleProps: styleProps } = $e7A5M$reactspectrumutils.useStyleProps(otherProps);
|
|
133
|
+
let [collapse, setCollapse] = $e7A5M$reactariautils.useValueEffect(false);
|
|
134
|
+
let [selectedTab1, setSelectedTab] = $e7A5M$react.useState();
|
|
135
|
+
const [tabListState, setTabListState] = $e7A5M$react.useState(null);
|
|
136
|
+
$e7A5M$react.useEffect(()=>{
|
|
137
137
|
if (tablistRef.current) {
|
|
138
|
-
let selectedTab = tablistRef.current.querySelector(`[data-key="${tabListState
|
|
138
|
+
let selectedTab = tablistRef.current.querySelector(`[data-key="${tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey}"]`);
|
|
139
139
|
if (selectedTab != null) setSelectedTab(selectedTab);
|
|
140
140
|
}
|
|
141
141
|
// collapse is in the dep array so selectedTab can be updated for TabLine positioning
|
|
142
142
|
}, [
|
|
143
143
|
children,
|
|
144
|
-
tabListState
|
|
144
|
+
tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey,
|
|
145
145
|
collapse,
|
|
146
146
|
tablistRef
|
|
147
147
|
]);
|
|
148
|
-
let checkShouldCollapse = $
|
|
148
|
+
let checkShouldCollapse = $e7A5M$react.useCallback(()=>{
|
|
149
149
|
let computeShouldCollapse = ()=>{
|
|
150
150
|
if (wrapperRef.current) {
|
|
151
151
|
let tabsComponent = wrapperRef.current;
|
|
@@ -153,7 +153,7 @@ function $41838ba3ee23d2b2$var$Tabs(props, ref) {
|
|
|
153
153
|
let lastTab = tabs[tabs.length - 1];
|
|
154
154
|
let end = direction === 'rtl' ? 'left' : 'right';
|
|
155
155
|
let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
|
|
156
|
-
let farEdgeLastTab = lastTab
|
|
156
|
+
let farEdgeLastTab = lastTab === null || lastTab === void 0 ? void 0 : lastTab.getBoundingClientRect()[end];
|
|
157
157
|
let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
|
|
158
158
|
return shouldCollapse;
|
|
159
159
|
}
|
|
@@ -171,13 +171,13 @@ function $41838ba3ee23d2b2$var$Tabs(props, ref) {
|
|
|
171
171
|
orientation,
|
|
172
172
|
setCollapse
|
|
173
173
|
]);
|
|
174
|
-
$
|
|
174
|
+
$e7A5M$react.useEffect(()=>{
|
|
175
175
|
checkShouldCollapse();
|
|
176
176
|
}, [
|
|
177
177
|
children,
|
|
178
178
|
checkShouldCollapse
|
|
179
179
|
]);
|
|
180
|
-
$
|
|
180
|
+
$e7A5M$reactariautils.useResizeObserver({
|
|
181
181
|
ref: wrapperRef,
|
|
182
182
|
onResize: checkShouldCollapse
|
|
183
183
|
});
|
|
@@ -185,9 +185,9 @@ function $41838ba3ee23d2b2$var$Tabs(props, ref) {
|
|
|
185
185
|
'aria-labelledby': undefined
|
|
186
186
|
};
|
|
187
187
|
// When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
|
|
188
|
-
let collapsibleTabListId = $
|
|
188
|
+
let collapsibleTabListId = $e7A5M$reactariautils.useId();
|
|
189
189
|
if (collapse && orientation !== 'vertical') tabPanelProps['aria-labelledby'] = collapsibleTabListId;
|
|
190
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
190
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($4b5f7944b4795980$var$TabContext.Provider, {
|
|
191
191
|
value: {
|
|
192
192
|
tabProps: {
|
|
193
193
|
...props,
|
|
@@ -206,71 +206,72 @@ function $41838ba3ee23d2b2$var$Tabs(props, ref) {
|
|
|
206
206
|
},
|
|
207
207
|
tabPanelProps: tabPanelProps
|
|
208
208
|
}
|
|
209
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
210
|
-
...$
|
|
209
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement("div", {
|
|
210
|
+
...$e7A5M$reactariautils.filterDOMProps(otherProps),
|
|
211
211
|
...styleProps,
|
|
212
212
|
ref: domRef,
|
|
213
|
-
className: $
|
|
213
|
+
className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-TabsPanel', `spectrum-TabsPanel--${orientation}`, styleProps.className)
|
|
214
214
|
}, props.children)));
|
|
215
215
|
}
|
|
216
216
|
// @private
|
|
217
|
-
function $
|
|
217
|
+
function $4b5f7944b4795980$var$Tab(props) {
|
|
218
218
|
let { item: item , state: state , isDisabled: propsDisabled } = props;
|
|
219
219
|
let { key: key , rendered: rendered } = item;
|
|
220
220
|
let isDisabled = propsDisabled || state.disabledKeys.has(key);
|
|
221
|
-
let ref = $
|
|
222
|
-
let { tabProps: tabProps } = $
|
|
221
|
+
let ref = $e7A5M$react.useRef();
|
|
222
|
+
let { tabProps: tabProps } = $e7A5M$reactariatabs.useTab({
|
|
223
223
|
key: key,
|
|
224
224
|
isDisabled: isDisabled
|
|
225
225
|
}, state, ref);
|
|
226
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $
|
|
226
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = $e7A5M$reactariainteractions.useHover({
|
|
227
227
|
...props
|
|
228
228
|
});
|
|
229
229
|
let isSelected = state.selectedKey === key;
|
|
230
|
-
let domProps = $
|
|
230
|
+
let domProps = $e7A5M$reactariautils.filterDOMProps(item.props);
|
|
231
231
|
delete domProps.id;
|
|
232
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
233
|
-
focusRingClass: $
|
|
234
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
235
|
-
...$
|
|
232
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($e7A5M$reactariafocus.FocusRing, {
|
|
233
|
+
focusRingClass: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'focus-ring')
|
|
234
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement("div", {
|
|
235
|
+
...$e7A5M$reactariautils.mergeProps(tabProps, hoverProps, domProps),
|
|
236
236
|
ref: ref,
|
|
237
|
-
className: $
|
|
237
|
+
className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-Tabs-item', {
|
|
238
238
|
'is-selected': isSelected,
|
|
239
239
|
'is-disabled': isDisabled,
|
|
240
240
|
'is-hovered': isHovered
|
|
241
241
|
})
|
|
242
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
242
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($e7A5M$reactspectrumutils.SlotProvider, {
|
|
243
243
|
slots: {
|
|
244
244
|
icon: {
|
|
245
245
|
size: 'S',
|
|
246
|
-
UNSAFE_className: $
|
|
246
|
+
UNSAFE_className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-Icon')
|
|
247
247
|
},
|
|
248
248
|
text: {
|
|
249
|
-
UNSAFE_className: $
|
|
249
|
+
UNSAFE_className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-Tabs-itemLabel')
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
|
-
}, typeof rendered === 'string' ? /*#__PURE__*/ ($parcel$interopDefault($
|
|
252
|
+
}, typeof rendered === 'string' ? /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($e7A5M$reactspectrumtext.Text, null, rendered) : rendered))));
|
|
253
253
|
}
|
|
254
254
|
// @private
|
|
255
|
-
function $
|
|
255
|
+
function $4b5f7944b4795980$var$TabLine(props) {
|
|
256
256
|
let { orientation: orientation , selectedTab: // Is either the tab node (non-collapsed) or the picker node (collapsed)
|
|
257
257
|
selectedTab , selectedKey: // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change
|
|
258
258
|
selectedKey } = props;
|
|
259
|
-
let { direction: direction } = $
|
|
260
|
-
let { scale: scale } = $
|
|
261
|
-
let [style, setStyle] = $
|
|
259
|
+
let { direction: direction } = $e7A5M$reactariai18n.useLocale();
|
|
260
|
+
let { scale: scale } = $e7A5M$reactspectrumprovider.useProvider();
|
|
261
|
+
let [style, setStyle] = $e7A5M$react.useState({
|
|
262
262
|
width: undefined,
|
|
263
263
|
height: undefined
|
|
264
264
|
});
|
|
265
|
-
$
|
|
265
|
+
$e7A5M$reactariautils.useLayoutEffect(()=>{
|
|
266
266
|
if (selectedTab) {
|
|
267
|
+
var ref;
|
|
267
268
|
let styleObj = {
|
|
268
269
|
transform: undefined,
|
|
269
270
|
width: undefined,
|
|
270
271
|
height: undefined
|
|
271
272
|
};
|
|
272
273
|
// In RTL, calculate the transform from the right edge of the tablist so that resizing the window doesn't break the Tabline position due to offsetLeft changes
|
|
273
|
-
let offset = direction === 'rtl' ? -1 * (selectedTab.offsetParent
|
|
274
|
+
let offset = direction === 'rtl' ? -1 * (((ref = selectedTab.offsetParent) === null || ref === void 0 ? void 0 : ref.offsetWidth) - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;
|
|
274
275
|
styleObj.transform = orientation === 'vertical' ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
|
|
275
276
|
if (orientation === 'horizontal') styleObj.width = `${selectedTab.offsetWidth}px`;
|
|
276
277
|
else styleObj.height = `${selectedTab.offsetHeight}px`;
|
|
@@ -284,29 +285,29 @@ function $41838ba3ee23d2b2$var$TabLine(props) {
|
|
|
284
285
|
scale,
|
|
285
286
|
selectedKey
|
|
286
287
|
]);
|
|
287
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
288
|
-
className: $
|
|
288
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement("div", {
|
|
289
|
+
className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-Tabs-selectionIndicator'),
|
|
289
290
|
role: "presentation",
|
|
290
291
|
style: style
|
|
291
292
|
}));
|
|
292
293
|
}
|
|
293
|
-
function $
|
|
294
|
-
const tabContext = $
|
|
294
|
+
function $4b5f7944b4795980$export$e51a686c67fdaa2d(props) {
|
|
295
|
+
const tabContext = $e7A5M$react.useContext($4b5f7944b4795980$var$TabContext);
|
|
295
296
|
const { refs: refs , tabState: tabState , tabProps: tabProps , tabPanelProps: tabPanelProps } = tabContext;
|
|
296
297
|
const { isQuiet: isQuiet , density: density , isDisabled: isDisabled , orientation: orientation } = tabProps;
|
|
297
298
|
const { selectedTab: selectedTab , collapse: collapse , setTabListState: setTabListState } = tabState;
|
|
298
299
|
const { tablistRef: tablistRef , wrapperRef: wrapperRef } = refs;
|
|
299
300
|
// Pass original Tab props but override children to create the collection.
|
|
300
|
-
const state = $
|
|
301
|
+
const state = $e7A5M$reactstatelytabs.useTabListState({
|
|
301
302
|
...tabProps,
|
|
302
303
|
children: props.children
|
|
303
304
|
});
|
|
304
|
-
let { styleProps: styleProps } = $
|
|
305
|
-
const { tabListProps: tabListProps } = $
|
|
305
|
+
let { styleProps: styleProps } = $e7A5M$reactspectrumutils.useStyleProps(props);
|
|
306
|
+
const { tabListProps: tabListProps } = $e7A5M$reactariatabs.useTabList({
|
|
306
307
|
...tabProps,
|
|
307
308
|
...props
|
|
308
309
|
}, state, tablistRef);
|
|
309
|
-
$
|
|
310
|
+
$e7A5M$react.useEffect(()=>{
|
|
310
311
|
// Passing back to root as useTabPanel needs the TabListState
|
|
311
312
|
setTabListState(state);
|
|
312
313
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -318,34 +319,34 @@ function $41838ba3ee23d2b2$export$e51a686c67fdaa2d(props) {
|
|
|
318
319
|
]);
|
|
319
320
|
let stylePropsForVertical = orientation === 'vertical' ? styleProps : {
|
|
320
321
|
};
|
|
321
|
-
let tabListclassName = $
|
|
322
|
-
const tabContent = /*#__PURE__*/ ($parcel$interopDefault($
|
|
322
|
+
let tabListclassName = $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-TabsPanel-tabs');
|
|
323
|
+
const tabContent = /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement("div", {
|
|
323
324
|
...stylePropsForVertical,
|
|
324
325
|
...tabListProps,
|
|
325
326
|
ref: tablistRef,
|
|
326
|
-
className: $
|
|
327
|
+
className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-Tabs', `spectrum-Tabs--${orientation}`, tabListclassName, {
|
|
327
328
|
'spectrum-Tabs--quiet': isQuiet,
|
|
328
329
|
['spectrum-Tabs--compact']: density === 'compact'
|
|
329
330
|
}, orientation === 'vertical' && styleProps.className)
|
|
330
331
|
}, [
|
|
331
332
|
...state.collection
|
|
332
|
-
].map((item)=>/*#__PURE__*/ ($parcel$interopDefault($
|
|
333
|
+
].map((item)=>/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($4b5f7944b4795980$var$Tab, {
|
|
333
334
|
key: item.key,
|
|
334
335
|
item: item,
|
|
335
336
|
state: state,
|
|
336
337
|
isDisabled: isDisabled,
|
|
337
338
|
orientation: orientation
|
|
338
339
|
})
|
|
339
|
-
), /*#__PURE__*/ ($parcel$interopDefault($
|
|
340
|
+
), /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($4b5f7944b4795980$var$TabLine, {
|
|
340
341
|
orientation: orientation,
|
|
341
342
|
selectedTab: selectedTab
|
|
342
343
|
}));
|
|
343
344
|
if (orientation === 'vertical') return tabContent;
|
|
344
|
-
else return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
345
|
+
else return(/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement("div", {
|
|
345
346
|
...styleProps,
|
|
346
347
|
ref: wrapperRef,
|
|
347
|
-
className: $
|
|
348
|
-
}, collapse ? /*#__PURE__*/ ($parcel$interopDefault($
|
|
348
|
+
className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-TabsPanel-collapseWrapper', styleProps.className)
|
|
349
|
+
}, collapse ? /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($4b5f7944b4795980$var$TabPicker, {
|
|
349
350
|
...props,
|
|
350
351
|
...tabProps,
|
|
351
352
|
id: tabPanelProps['aria-labelledby'],
|
|
@@ -353,46 +354,46 @@ function $41838ba3ee23d2b2$export$e51a686c67fdaa2d(props) {
|
|
|
353
354
|
className: tabListclassName
|
|
354
355
|
}) : tabContent));
|
|
355
356
|
}
|
|
356
|
-
function $
|
|
357
|
-
const { tabState: tabState , tabProps: tabProps } = $
|
|
357
|
+
function $4b5f7944b4795980$export$5dae8d435677f210(props) {
|
|
358
|
+
const { tabState: tabState , tabProps: tabProps } = $e7A5M$react.useContext($4b5f7944b4795980$var$TabContext);
|
|
358
359
|
const { tabListState: tabListState } = tabState;
|
|
359
|
-
const factory = (nodes)=>new $
|
|
360
|
+
const factory = (nodes)=>new $e7A5M$reactstatelylist.ListCollection(nodes)
|
|
360
361
|
;
|
|
361
|
-
const collection = $
|
|
362
|
+
const collection = $e7A5M$reactstatelycollections.useCollection({
|
|
362
363
|
items: tabProps.items,
|
|
363
364
|
...props
|
|
364
365
|
}, factory, {
|
|
365
366
|
suppressTextValueWarning: true
|
|
366
367
|
});
|
|
367
368
|
const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
|
|
368
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
369
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($4b5f7944b4795980$var$TabPanel, {
|
|
369
370
|
...props,
|
|
370
|
-
key: tabListState
|
|
371
|
+
key: tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey
|
|
371
372
|
}, selectedItem && selectedItem.props.children));
|
|
372
373
|
}
|
|
373
374
|
// @private
|
|
374
|
-
function $
|
|
375
|
-
const { tabState: tabState , tabPanelProps: ctxTabPanelProps } = $
|
|
375
|
+
function $4b5f7944b4795980$var$TabPanel(props) {
|
|
376
|
+
const { tabState: tabState , tabPanelProps: ctxTabPanelProps } = $e7A5M$react.useContext($4b5f7944b4795980$var$TabContext);
|
|
376
377
|
const { tabListState: tabListState } = tabState;
|
|
377
|
-
let ref = $
|
|
378
|
-
const { tabPanelProps: tabPanelProps } = $
|
|
379
|
-
let { styleProps: styleProps } = $
|
|
378
|
+
let ref = $e7A5M$react.useRef();
|
|
379
|
+
const { tabPanelProps: tabPanelProps } = $e7A5M$reactariatabs.useTabPanel(props, tabListState, ref);
|
|
380
|
+
let { styleProps: styleProps } = $e7A5M$reactspectrumutils.useStyleProps(props);
|
|
380
381
|
if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
|
|
381
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
382
|
-
focusRingClass: $
|
|
383
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
382
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($e7A5M$reactariafocus.FocusRing, {
|
|
383
|
+
focusRingClass: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'focus-ring')
|
|
384
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement("div", {
|
|
384
385
|
...styleProps,
|
|
385
386
|
...tabPanelProps,
|
|
386
387
|
ref: ref,
|
|
387
|
-
className: $
|
|
388
|
+
className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-TabsPanel-tabpanel', styleProps.className)
|
|
388
389
|
}, props.children)));
|
|
389
390
|
}
|
|
390
|
-
function $
|
|
391
|
+
function $4b5f7944b4795980$var$TabPicker(props) {
|
|
391
392
|
let { isDisabled: isDisabled , isQuiet: isQuiet , state: state , 'aria-labelledby': ariaLabeledBy , 'aria-label': ariaLabel , density: density , className: className , id: id } = props;
|
|
392
|
-
let ref = $
|
|
393
|
-
let [pickerNode, setPickerNode] = $
|
|
394
|
-
$
|
|
395
|
-
let node = $
|
|
393
|
+
let ref = $e7A5M$react.useRef();
|
|
394
|
+
let [pickerNode, setPickerNode] = $e7A5M$react.useState(null);
|
|
395
|
+
$e7A5M$react.useEffect(()=>{
|
|
396
|
+
let node = $e7A5M$reactspectrumutils.unwrapDOMRef(ref);
|
|
396
397
|
setPickerNode(node.current);
|
|
397
398
|
}, [
|
|
398
399
|
ref
|
|
@@ -410,22 +411,22 @@ function $41838ba3ee23d2b2$var$TabPicker(props) {
|
|
|
410
411
|
'aria-label': ariaLabel
|
|
411
412
|
};
|
|
412
413
|
// TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
|
|
413
|
-
return(/*#__PURE__*/ ($parcel$interopDefault($
|
|
414
|
-
className: $
|
|
414
|
+
return(/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement("div", {
|
|
415
|
+
className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
|
|
415
416
|
'spectrum-Tabs--quiet': isQuiet,
|
|
416
417
|
['spectrum-Tabs--compact']: density === 'compact'
|
|
417
418
|
}, className)
|
|
418
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
419
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($e7A5M$reactspectrumutils.SlotProvider, {
|
|
419
420
|
slots: {
|
|
420
421
|
icon: {
|
|
421
422
|
size: 'S',
|
|
422
|
-
UNSAFE_className: $
|
|
423
|
+
UNSAFE_className: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'spectrum-Icon')
|
|
423
424
|
},
|
|
424
425
|
button: {
|
|
425
|
-
focusRingClass: $
|
|
426
|
+
focusRingClass: $e7A5M$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($652630c2aefd3d05$exports)), 'focus-ring')
|
|
426
427
|
}
|
|
427
428
|
}
|
|
428
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($
|
|
429
|
+
}, /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($e7A5M$reactspectrumpicker.Picker, {
|
|
429
430
|
...pickerProps,
|
|
430
431
|
id: id,
|
|
431
432
|
items: items,
|
|
@@ -435,10 +436,10 @@ function $41838ba3ee23d2b2$var$TabPicker(props) {
|
|
|
435
436
|
selectedKey: state.selectedKey,
|
|
436
437
|
disabledKeys: state.disabledKeys,
|
|
437
438
|
onSelectionChange: state.setSelectedKey
|
|
438
|
-
}, (item)=>/*#__PURE__*/ ($parcel$interopDefault($
|
|
439
|
+
}, (item)=>/*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($e7A5M$reactspectrumpicker.Item, {
|
|
439
440
|
textValue: item.textValue
|
|
440
441
|
}, item.rendered)
|
|
441
|
-
), pickerNode && /*#__PURE__*/ ($parcel$interopDefault($
|
|
442
|
+
), pickerNode && /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).createElement($4b5f7944b4795980$var$TabLine, {
|
|
442
443
|
orientation: "horizontal",
|
|
443
444
|
selectedTab: pickerNode,
|
|
444
445
|
selectedKey: state.selectedKey
|
|
@@ -448,11 +449,11 @@ function $41838ba3ee23d2b2$var$TabPicker(props) {
|
|
|
448
449
|
* Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
|
|
449
450
|
*/ // forwardRef doesn't support generic parameters, so cast the result to the correct type
|
|
450
451
|
// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
|
|
451
|
-
const $
|
|
452
|
+
const $4b5f7944b4795980$export$b2539bed5023c21c = /*#__PURE__*/ ($parcel$interopDefault($e7A5M$react)).forwardRef($4b5f7944b4795980$var$Tabs);
|
|
452
453
|
|
|
453
454
|
|
|
454
455
|
|
|
455
|
-
$parcel$exportWildcard(module.exports, $
|
|
456
|
+
$parcel$exportWildcard(module.exports, $4b5f7944b4795980$exports);
|
|
456
457
|
|
|
457
458
|
|
|
458
459
|
//# sourceMappingURL=main.js.map
|