@react-spectrum/s2 3.0.0-nightly-b0f156972-241202 → 3.0.0-nightly-e14088a7e-241204
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/Tabs.cjs +396 -175
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +200 -120
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +398 -177
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +364 -0
- package/dist/TabsPicker.cjs.map +1 -0
- package/dist/TabsPicker.css +416 -0
- package/dist/TabsPicker.css.map +1 -0
- package/dist/TabsPicker.mjs +358 -0
- package/dist/TabsPicker.mjs.map +1 -0
- package/dist/en-US.cjs +1 -0
- package/dist/en-US.cjs.map +1 -1
- package/dist/en-US.mjs +1 -0
- package/dist/en-US.mjs.map +1 -1
- package/dist/he-IL.cjs +1 -0
- package/dist/he-IL.cjs.map +1 -1
- package/dist/he-IL.mjs +1 -0
- package/dist/he-IL.mjs.map +1 -1
- package/dist/types.d.ts +9 -7
- package/dist/types.d.ts.map +1 -1
- package/package.json +18 -17
- package/src/Tabs.tsx +402 -155
- package/src/TabsPicker.tsx +321 -0
package/dist/Tabs.mjs
CHANGED
|
@@ -1,15 +1,22 @@
|
|
|
1
1
|
import "./Tabs.css";
|
|
2
2
|
import {centerBaseline as $1f4b04be3f24aae3$export$9d7e2342a7e53afa} from "./CenterBaseline.mjs";
|
|
3
3
|
import {IconContext as $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed} from "../icons/Icon.mjs";
|
|
4
|
+
import $8bRfI$intlStringsmjs from "./intlStrings.mjs";
|
|
5
|
+
import {Picker as $0067ea932a992b6a$export$ba25329847403e11, PickerItem as $0067ea932a992b6a$export$d601881f38163e28} from "./TabsPicker.mjs";
|
|
4
6
|
import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
|
|
5
7
|
import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
|
|
6
|
-
import {jsx as $8bRfI$jsx, jsxs as $8bRfI$jsxs} from "react/jsx-runtime";
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
8
|
+
import {jsx as $8bRfI$jsx, jsxs as $8bRfI$jsxs, Fragment as $8bRfI$Fragment} from "react/jsx-runtime";
|
|
9
|
+
import {createContext as $8bRfI$createContext, forwardRef as $8bRfI$forwardRef, useRef as $8bRfI$useRef, useContext as $8bRfI$useContext, useState as $8bRfI$useState, useMemo as $8bRfI$useMemo, useCallback as $8bRfI$useCallback, createElement as $8bRfI$createElement, useEffect as $8bRfI$useEffect, Fragment as $8bRfI$Fragment1} from "react";
|
|
10
|
+
import {Provider as $8bRfI$Provider, Tabs as $8bRfI$Tabs, TabListStateContext as $8bRfI$TabListStateContext, TabList as $8bRfI$TabList, Tab as $8bRfI$Tab, TabPanel as $8bRfI$TabPanel, UNSTABLE_CollectionRendererContext as $8bRfI$UNSTABLE_CollectionRendererContext, UNSTABLE_DefaultCollectionRenderer as $8bRfI$UNSTABLE_DefaultCollectionRenderer} from "react-aria-components";
|
|
11
|
+
import {useControlledState as $8bRfI$useControlledState} from "@react-stately/utils";
|
|
9
12
|
import {useDOMRef as $8bRfI$useDOMRef} from "@react-spectrum/utils";
|
|
10
|
-
import {useLayoutEffect as $8bRfI$useLayoutEffect} from "@react-aria/utils";
|
|
11
|
-
import {useLocale as $8bRfI$useLocale} from "@react-aria/i18n";
|
|
13
|
+
import {useLayoutEffect as $8bRfI$useLayoutEffect, useEffectEvent as $8bRfI$useEffectEvent, useResizeObserver as $8bRfI$useResizeObserver} from "@react-aria/utils";
|
|
14
|
+
import {useLocale as $8bRfI$useLocale, useLocalizedStringFormatter as $8bRfI$useLocalizedStringFormatter} from "@react-aria/i18n";
|
|
12
15
|
|
|
16
|
+
|
|
17
|
+
function $parcel$interopDefault(a) {
|
|
18
|
+
return a && a.__esModule ? a.default : a;
|
|
19
|
+
}
|
|
13
20
|
/*
|
|
14
21
|
* Copyright 2024 Adobe. All rights reserved.
|
|
15
22
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -30,135 +37,92 @@ import {useLocale as $8bRfI$useLocale} from "@react-aria/i18n";
|
|
|
30
37
|
|
|
31
38
|
|
|
32
39
|
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
33
43
|
const $79e2b4a1b34d1592$export$cfa7aa87c26e7d1f = /*#__PURE__*/ (0, $8bRfI$createContext)(null);
|
|
34
|
-
const $79e2b4a1b34d1592$var$
|
|
44
|
+
const $79e2b4a1b34d1592$var$InternalTabsContext = /*#__PURE__*/ (0, $8bRfI$createContext)({
|
|
45
|
+
onFocus: ()=>{}
|
|
46
|
+
});
|
|
47
|
+
const $79e2b4a1b34d1592$var$tabs = function anonymous(props, overrides) {
|
|
35
48
|
let rules = " .";
|
|
36
49
|
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
|
|
37
50
|
rules += matches.join('');
|
|
38
|
-
let $A = false;
|
|
39
|
-
let $_9 = false;
|
|
40
|
-
let $h = false;
|
|
41
|
-
let $o = false;
|
|
42
|
-
let $q = false;
|
|
43
|
-
for (let p of matches){
|
|
44
|
-
if (/^\s*A/.test(p)) $A = true;
|
|
45
|
-
if (/^\s*_9/.test(p)) $_9 = true;
|
|
46
|
-
if (/^\s*h/.test(p)) $h = true;
|
|
47
|
-
if (/^\s*o/.test(p)) $o = true;
|
|
48
|
-
if (/^\s*q/.test(p)) $q = true;
|
|
49
|
-
}
|
|
50
|
-
if (!$A) rules += ' Ac';
|
|
51
|
-
rules += ' an';
|
|
52
|
-
if (!$_9) rules += ' _9-3t1y';
|
|
53
|
-
if (!$h) rules += ' h-3hmsa';
|
|
54
|
-
if (!$o) rules += ' oo';
|
|
55
|
-
if (!$q) rules += ' qo';
|
|
56
|
-
return rules;
|
|
57
|
-
};
|
|
58
|
-
function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
|
|
59
|
-
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$TabPanel), {
|
|
60
|
-
...props,
|
|
61
|
-
style: props.UNSAFE_style,
|
|
62
|
-
className: (props.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tabPanel(null, props.styles)
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
|
|
66
|
-
let rules = " .";
|
|
67
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
|
|
68
|
-
rules += matches.join('');
|
|
69
|
-
let $U = false;
|
|
70
51
|
let $_8 = false;
|
|
71
|
-
for (let p of matches)
|
|
72
|
-
if (/^\s*U/.test(p)) $U = true;
|
|
73
|
-
if (/^\s*_8/.test(p)) $_8 = true;
|
|
74
|
-
}
|
|
75
|
-
if (props.isFocusVisible) rules += ' _Lb';
|
|
76
|
-
else rules += ' _La';
|
|
77
|
-
rules += ' da_____z';
|
|
78
|
-
rules += ' dx';
|
|
79
|
-
rules += ' _Nc';
|
|
80
|
-
rules += ' _M-3t1z';
|
|
52
|
+
for (let p of matches)if (/^\s*_8/.test(p)) $_8 = true;
|
|
81
53
|
rules += ' _Zd';
|
|
82
|
-
if (props.isDisabled) rules += ' aa_____B';
|
|
83
|
-
else if (props.isSelected) rules += ' aa_____z';
|
|
84
|
-
if (props.isDisabled) rules += ' aj';
|
|
85
|
-
else if (props.isHovered) {
|
|
86
|
-
if (props.isPressed) rules += ' an';
|
|
87
|
-
else if (props.isFocusVisible) rules += ' an';
|
|
88
|
-
else if (props.isHovered) rules += ' an';
|
|
89
|
-
else rules += ' am';
|
|
90
|
-
} else if (props.isSelected) {
|
|
91
|
-
if (props.isPressed) rules += ' ao';
|
|
92
|
-
else if (props.isFocusVisible) rules += ' ao';
|
|
93
|
-
else rules += ' an';
|
|
94
|
-
} else {
|
|
95
|
-
if (props.isPressed) rules += ' an';
|
|
96
|
-
else if (props.isFocusVisible) rules += ' an';
|
|
97
|
-
else rules += ' am';
|
|
98
|
-
}
|
|
99
|
-
rules += ' _vb';
|
|
100
|
-
rules += ' _wb';
|
|
101
|
-
rules += ' _xb';
|
|
102
|
-
rules += ' _yb';
|
|
103
|
-
rules += ' ibH';
|
|
104
|
-
rules += ' iG';
|
|
105
|
-
rules += ' jbH';
|
|
106
|
-
rules += ' jG';
|
|
107
|
-
if (props.density === "regular") rules += ' k_a';
|
|
108
|
-
else if (props.density === "compact") rules += ' kU';
|
|
109
|
-
rules += ' _1c';
|
|
110
|
-
if (!$U) rules += ' Uc';
|
|
111
|
-
rules += ' __Hb';
|
|
112
54
|
if (!$_8) rules += ' _8-3t1x';
|
|
113
|
-
rules += '
|
|
114
|
-
rules += '
|
|
115
|
-
rules += '
|
|
55
|
+
rules += ' _c-bc1l9oh';
|
|
56
|
+
rules += ' _c-1uotwbwg';
|
|
57
|
+
rules += ' _c-eo0c6sf';
|
|
58
|
+
rules += ' _c-enzzrge';
|
|
59
|
+
rules += ' _c-enzykdd';
|
|
60
|
+
rules += ' _c-enzwzjc';
|
|
61
|
+
rules += ' _c-enzrfpb';
|
|
62
|
+
rules += ' _ca';
|
|
63
|
+
rules += ' _dbf';
|
|
64
|
+
rules += ' _de';
|
|
65
|
+
rules += ' _eb';
|
|
66
|
+
rules += ' _f-1x99dlob';
|
|
67
|
+
rules += ' _fa';
|
|
68
|
+
rules += ' an';
|
|
69
|
+
if (props.orientation === "horizontal") rules += ' _6b';
|
|
116
70
|
return rules;
|
|
117
71
|
};
|
|
118
|
-
const $79e2b4a1b34d1592$
|
|
119
|
-
|
|
120
|
-
let { density: density
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
72
|
+
const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)(function Tabs(props, ref) {
|
|
73
|
+
[props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $79e2b4a1b34d1592$export$cfa7aa87c26e7d1f);
|
|
74
|
+
let { density: density = 'regular', isDisabled: isDisabled, disabledKeys: disabledKeys, orientation: orientation = 'horizontal', iconOnly: iconOnly = false } = props;
|
|
75
|
+
let domRef = (0, $8bRfI$useDOMRef)(ref);
|
|
76
|
+
let [value, setValue] = (0, $8bRfI$useControlledState)(props.selectedKey, props.defaultSelectedKey ?? null, props.onSelectionChange);
|
|
77
|
+
let pickerRef = (0, $8bRfI$useRef)(null);
|
|
78
|
+
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Provider), {
|
|
79
|
+
values: [
|
|
80
|
+
[
|
|
81
|
+
$79e2b4a1b34d1592$var$InternalTabsContext,
|
|
82
|
+
{
|
|
83
|
+
density: density,
|
|
84
|
+
isDisabled: isDisabled,
|
|
85
|
+
orientation: orientation,
|
|
86
|
+
disabledKeys: disabledKeys,
|
|
87
|
+
selectedKey: value,
|
|
88
|
+
onSelectionChange: setValue,
|
|
89
|
+
iconOnly: iconOnly,
|
|
90
|
+
onFocus: ()=>pickerRef.current?.focus(),
|
|
91
|
+
pickerRef: pickerRef
|
|
92
|
+
}
|
|
93
|
+
]
|
|
94
|
+
],
|
|
95
|
+
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapsingCollection, {
|
|
96
|
+
containerRef: domRef,
|
|
97
|
+
children: /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Tabs), {
|
|
98
|
+
...props,
|
|
99
|
+
ref: domRef,
|
|
100
|
+
selectedKey: value,
|
|
101
|
+
onSelectionChange: setValue,
|
|
102
|
+
style: props.UNSAFE_style,
|
|
103
|
+
className: (renderProps)=>(props.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tabs({
|
|
104
|
+
...renderProps
|
|
105
|
+
}, props.styles),
|
|
148
106
|
children: props.children
|
|
149
|
-
})
|
|
107
|
+
})
|
|
150
108
|
})
|
|
151
109
|
});
|
|
152
|
-
}
|
|
110
|
+
});
|
|
153
111
|
const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
|
|
154
112
|
let rules = " .";
|
|
155
113
|
rules += ' _Zd';
|
|
156
114
|
if (props.orientation === "horizontal") {
|
|
157
|
-
if (props.
|
|
115
|
+
if (props.isIconOnly) {
|
|
116
|
+
if (props.density === "regular") rules += ' ih';
|
|
117
|
+
else if (props.density === "compact") rules += ' if';
|
|
118
|
+
} else if (props.density === "regular") rules += ' ij';
|
|
158
119
|
else if (props.density === "compact") rules += ' ih';
|
|
159
120
|
}
|
|
160
121
|
if (props.orientation === "horizontal") {
|
|
161
|
-
if (props.
|
|
122
|
+
if (props.isIconOnly) {
|
|
123
|
+
if (props.density === "regular") rules += ' jh';
|
|
124
|
+
else if (props.density === "compact") rules += ' jf';
|
|
125
|
+
} else if (props.density === "regular") rules += ' jj';
|
|
162
126
|
else if (props.density === "compact") rules += ' jh';
|
|
163
127
|
}
|
|
164
128
|
if (props.orientation === "vertical") rules += ' _6b';
|
|
@@ -169,18 +133,32 @@ const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
|
|
|
169
133
|
return rules;
|
|
170
134
|
};
|
|
171
135
|
function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props1) {
|
|
172
|
-
let { density: density, isDisabled: isDisabled, disabledKeys: disabledKeys, orientation: orientation } = (0, $8bRfI$
|
|
136
|
+
let { density: density, isDisabled: isDisabled, disabledKeys: disabledKeys, orientation: orientation, iconOnly: iconOnly, onFocus: onFocus } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
|
|
137
|
+
let { showItems: showItems } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$CollapseContext) ?? {};
|
|
173
138
|
let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
|
|
174
139
|
let [selectedTab, setSelectedTab] = (0, $8bRfI$useState)(undefined);
|
|
175
140
|
let tablistRef = (0, $8bRfI$useRef)(null);
|
|
176
141
|
(0, $8bRfI$useLayoutEffect)(()=>{
|
|
177
|
-
if (tablistRef?.current) {
|
|
142
|
+
if (tablistRef?.current && showItems) {
|
|
178
143
|
let tab = tablistRef.current.querySelector('[role=tab][data-selected=true]');
|
|
179
144
|
if (tab != null) setSelectedTab(tab);
|
|
145
|
+
} else if (tablistRef?.current) {
|
|
146
|
+
let picker = tablistRef.current.querySelector('button');
|
|
147
|
+
if (picker != null) setSelectedTab(picker);
|
|
180
148
|
}
|
|
181
149
|
}, [
|
|
182
150
|
tablistRef,
|
|
183
|
-
state?.selectedItem?.key
|
|
151
|
+
state?.selectedItem?.key,
|
|
152
|
+
showItems
|
|
153
|
+
]);
|
|
154
|
+
let prevFocused = (0, $8bRfI$useRef)(false);
|
|
155
|
+
(0, $8bRfI$useLayoutEffect)(()=>{
|
|
156
|
+
if (!showItems && !prevFocused.current && state?.selectionManager.isFocused) onFocus();
|
|
157
|
+
prevFocused.current = state?.selectionManager.isFocused;
|
|
158
|
+
}, [
|
|
159
|
+
state?.selectionManager.isFocused,
|
|
160
|
+
state?.selectionManager.focusedKey,
|
|
161
|
+
showItems
|
|
184
162
|
]);
|
|
185
163
|
return /*#__PURE__*/ (0, $8bRfI$jsxs)("div", {
|
|
186
164
|
style: props1.UNSAFE_style,
|
|
@@ -194,7 +172,7 @@ function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props1) {
|
|
|
194
172
|
return rules;
|
|
195
173
|
}(null, props1.styles),
|
|
196
174
|
children: [
|
|
197
|
-
orientation === 'vertical' && /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabLine, {
|
|
175
|
+
showItems && orientation === 'vertical' && /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabLine, {
|
|
198
176
|
disabledKeys: disabledKeys,
|
|
199
177
|
isDisabled: isDisabled,
|
|
200
178
|
selectedTab: selectedTab,
|
|
@@ -206,10 +184,12 @@ function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props1) {
|
|
|
206
184
|
ref: tablistRef,
|
|
207
185
|
className: (renderProps)=>$79e2b4a1b34d1592$var$tablist({
|
|
208
186
|
...renderProps,
|
|
187
|
+
isIconOnly: iconOnly,
|
|
209
188
|
density: density
|
|
210
189
|
})
|
|
211
190
|
}),
|
|
212
191
|
orientation === 'horizontal' && /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabLine, {
|
|
192
|
+
showItems: showItems,
|
|
213
193
|
disabledKeys: disabledKeys,
|
|
214
194
|
isDisabled: isDisabled,
|
|
215
195
|
selectedTab: selectedTab,
|
|
@@ -219,21 +199,6 @@ function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props1) {
|
|
|
219
199
|
]
|
|
220
200
|
});
|
|
221
201
|
}
|
|
222
|
-
function $79e2b4a1b34d1592$var$isAllTabsDisabled(collection, disabledKeys) {
|
|
223
|
-
let testKey = null;
|
|
224
|
-
if (collection && collection.size > 0) {
|
|
225
|
-
testKey = collection.getFirstKey();
|
|
226
|
-
let index = 0;
|
|
227
|
-
while(testKey && index < collection.size){
|
|
228
|
-
// We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
|
|
229
|
-
if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) return false;
|
|
230
|
-
testKey = collection.getKeyAfter(testKey);
|
|
231
|
-
index++;
|
|
232
|
-
}
|
|
233
|
-
return true;
|
|
234
|
-
}
|
|
235
|
-
return false;
|
|
236
|
-
}
|
|
237
202
|
const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
|
|
238
203
|
let rules = " .";
|
|
239
204
|
rules += ' Ua';
|
|
@@ -262,16 +227,12 @@ function $79e2b4a1b34d1592$var$TabLine(props) {
|
|
|
262
227
|
let { disabledKeys: disabledKeys, isDisabled: isTabsDisabled, selectedTab: selectedTab, orientation: orientation, density: density } = props;
|
|
263
228
|
let { direction: direction } = (0, $8bRfI$useLocale)();
|
|
264
229
|
let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
(0, $8bRfI$useEffect)(()=>{
|
|
268
|
-
let isDisabled = isTabsDisabled || $79e2b4a1b34d1592$var$isAllTabsDisabled(state?.collection || null, disabledKeys ? new Set(disabledKeys) : new Set(null));
|
|
269
|
-
setIsDisabled(isDisabled);
|
|
230
|
+
let isDisabled = (0, $8bRfI$useMemo)(()=>{
|
|
231
|
+
return isTabsDisabled || $79e2b4a1b34d1592$var$isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
|
|
270
232
|
}, [
|
|
271
233
|
state?.collection,
|
|
272
234
|
disabledKeys,
|
|
273
|
-
isTabsDisabled
|
|
274
|
-
setIsDisabled
|
|
235
|
+
isTabsDisabled
|
|
275
236
|
]);
|
|
276
237
|
let [style, setStyle] = (0, $8bRfI$useState)({
|
|
277
238
|
transform: undefined,
|
|
@@ -317,54 +278,314 @@ function $79e2b4a1b34d1592$var$TabLine(props) {
|
|
|
317
278
|
})
|
|
318
279
|
});
|
|
319
280
|
}
|
|
320
|
-
const $79e2b4a1b34d1592$var$
|
|
281
|
+
const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
|
|
321
282
|
let rules = " .";
|
|
322
|
-
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r
|
|
283
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
|
|
323
284
|
rules += matches.join('');
|
|
285
|
+
let $U = false;
|
|
324
286
|
let $_8 = false;
|
|
325
|
-
for (let p of matches)
|
|
287
|
+
for (let p of matches){
|
|
288
|
+
if (/^\s*U/.test(p)) $U = true;
|
|
289
|
+
if (/^\s*_8/.test(p)) $_8 = true;
|
|
290
|
+
}
|
|
291
|
+
if (props.isFocusVisible) rules += ' _Lb';
|
|
292
|
+
else rules += ' _La';
|
|
293
|
+
rules += ' da_____z';
|
|
294
|
+
rules += ' dx';
|
|
295
|
+
rules += ' _Nc';
|
|
296
|
+
rules += ' _M-3t1z';
|
|
326
297
|
rules += ' _Zd';
|
|
298
|
+
if (props.isDisabled) rules += ' aa_____B';
|
|
299
|
+
else if (props.isSelected) rules += ' aa_____z';
|
|
300
|
+
if (props.isDisabled) rules += ' aj';
|
|
301
|
+
else if (props.isHovered) {
|
|
302
|
+
if (props.isPressed) rules += ' an';
|
|
303
|
+
else if (props.isFocusVisible) rules += ' an';
|
|
304
|
+
else if (props.isHovered) rules += ' an';
|
|
305
|
+
else rules += ' am';
|
|
306
|
+
} else if (props.isSelected) {
|
|
307
|
+
if (props.isPressed) rules += ' ao';
|
|
308
|
+
else if (props.isFocusVisible) rules += ' ao';
|
|
309
|
+
else rules += ' an';
|
|
310
|
+
} else {
|
|
311
|
+
if (props.isPressed) rules += ' an';
|
|
312
|
+
else if (props.isFocusVisible) rules += ' an';
|
|
313
|
+
else rules += ' am';
|
|
314
|
+
}
|
|
315
|
+
rules += ' _vb';
|
|
316
|
+
rules += ' _wb';
|
|
317
|
+
rules += ' _xb';
|
|
318
|
+
rules += ' _yb';
|
|
319
|
+
rules += ' ibH';
|
|
320
|
+
rules += ' iG';
|
|
321
|
+
rules += ' jbH';
|
|
322
|
+
rules += ' jG';
|
|
323
|
+
if (props.density === "regular") rules += ' k_a';
|
|
324
|
+
else if (props.density === "compact") rules += ' kU';
|
|
325
|
+
rules += ' _1c';
|
|
326
|
+
if (!$U) rules += ' Uc';
|
|
327
|
+
rules += ' __Hb';
|
|
327
328
|
if (!$_8) rules += ' _8-3t1x';
|
|
328
|
-
rules += '
|
|
329
|
-
rules += '
|
|
330
|
-
rules += '
|
|
331
|
-
rules += ' _c-enzzrge';
|
|
332
|
-
rules += ' _c-enzykdd';
|
|
333
|
-
rules += ' _c-enzwzjc';
|
|
334
|
-
rules += ' _c-enzrfpb';
|
|
335
|
-
rules += ' _ca';
|
|
336
|
-
rules += ' _eb';
|
|
337
|
-
if (props.orientation === "horizontal") rules += ' _6b';
|
|
329
|
+
rules += ' _Oa';
|
|
330
|
+
rules += ' _Q-375x7f';
|
|
331
|
+
rules += ' _Ra';
|
|
338
332
|
return rules;
|
|
339
333
|
};
|
|
340
|
-
const $79e2b4a1b34d1592$
|
|
341
|
-
|
|
342
|
-
let { density: density
|
|
343
|
-
|
|
344
|
-
|
|
334
|
+
const $79e2b4a1b34d1592$var$icon = " . _Za _8-3t1x -rwx0fg_e-b";
|
|
335
|
+
function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
|
|
336
|
+
let { density: density, iconOnly: iconOnly } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
|
|
337
|
+
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Tab), {
|
|
338
|
+
...props1,
|
|
339
|
+
// @ts-ignore
|
|
340
|
+
originalProps: props1,
|
|
341
|
+
style: props1.UNSAFE_style,
|
|
342
|
+
className: (renderProps)=>(props1.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tab({
|
|
343
|
+
...renderProps,
|
|
344
|
+
density: density
|
|
345
|
+
}, props1.styles),
|
|
346
|
+
children: ({ isMenu: // @ts-ignore
|
|
347
|
+
isMenu })=>{
|
|
348
|
+
if (isMenu) return props1.children;
|
|
349
|
+
else return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Provider), {
|
|
350
|
+
values: [
|
|
351
|
+
[
|
|
352
|
+
(0, $8e847109a6ab556d$export$9afb8bc826b033ea),
|
|
353
|
+
{
|
|
354
|
+
styles: function anonymous(props) {
|
|
355
|
+
let rules = " .";
|
|
356
|
+
rules += ' __A-3t1y';
|
|
357
|
+
if (props.isIconOnly) rules += ' _Zj';
|
|
358
|
+
return rules;
|
|
359
|
+
}({
|
|
360
|
+
isIconOnly: iconOnly
|
|
361
|
+
})
|
|
362
|
+
}
|
|
363
|
+
],
|
|
364
|
+
[
|
|
365
|
+
(0, $ac8c32e6775ddd1f$export$a49f528ae1a4d0ed),
|
|
366
|
+
{
|
|
367
|
+
render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
|
|
368
|
+
slot: 'icon',
|
|
369
|
+
styles: " . __A-3t1x"
|
|
370
|
+
}),
|
|
371
|
+
styles: $79e2b4a1b34d1592$var$icon
|
|
372
|
+
}
|
|
373
|
+
]
|
|
374
|
+
],
|
|
375
|
+
children: typeof props1.children === 'string' ? /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
|
|
376
|
+
children: props1.children
|
|
377
|
+
}) : props1.children
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
});
|
|
381
|
+
}
|
|
382
|
+
const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
|
|
383
|
+
let rules = " .";
|
|
384
|
+
let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r|k|o|p)[^\s]+/g) || [];
|
|
385
|
+
rules += matches.join('');
|
|
386
|
+
let $A = false;
|
|
387
|
+
let $_9 = false;
|
|
388
|
+
let $h = false;
|
|
389
|
+
let $o = false;
|
|
390
|
+
let $q = false;
|
|
391
|
+
for (let p of matches){
|
|
392
|
+
if (/^\s*A/.test(p)) $A = true;
|
|
393
|
+
if (/^\s*_9/.test(p)) $_9 = true;
|
|
394
|
+
if (/^\s*h/.test(p)) $h = true;
|
|
395
|
+
if (/^\s*o/.test(p)) $o = true;
|
|
396
|
+
if (/^\s*q/.test(p)) $q = true;
|
|
397
|
+
}
|
|
398
|
+
if (!$A) rules += ' Ac';
|
|
399
|
+
rules += ' an';
|
|
400
|
+
if (!$_9) rules += ' _9-3t1y';
|
|
401
|
+
if (!$h) rules += ' h-3hmsa';
|
|
402
|
+
if (!$o) rules += ' oo';
|
|
403
|
+
if (!$q) rules += ' qo';
|
|
404
|
+
return rules;
|
|
405
|
+
};
|
|
406
|
+
function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
|
|
407
|
+
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$TabPanel), {
|
|
345
408
|
...props,
|
|
346
|
-
ref: domRef,
|
|
347
409
|
style: props.UNSAFE_style,
|
|
348
|
-
className: (
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
410
|
+
className: (props.UNSAFE_className || '') + $79e2b4a1b34d1592$var$tabPanel(null, props.styles)
|
|
411
|
+
});
|
|
412
|
+
}
|
|
413
|
+
function $79e2b4a1b34d1592$var$isAllTabsDisabled(collection, disabledKeys) {
|
|
414
|
+
let testKey = null;
|
|
415
|
+
if (collection && collection.size > 0) {
|
|
416
|
+
testKey = collection.getFirstKey();
|
|
417
|
+
let index = 0;
|
|
418
|
+
while(testKey && index < collection.size){
|
|
419
|
+
// We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it
|
|
420
|
+
if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) return false;
|
|
421
|
+
testKey = collection.getKeyAfter(testKey);
|
|
422
|
+
index++;
|
|
423
|
+
}
|
|
424
|
+
return true;
|
|
425
|
+
}
|
|
426
|
+
return false;
|
|
427
|
+
}
|
|
428
|
+
let $79e2b4a1b34d1592$var$HiddenTabs = function(props) {
|
|
429
|
+
let { listRef: listRef, items: items, size: size, density: density } = props;
|
|
430
|
+
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
|
|
431
|
+
// @ts-ignore
|
|
432
|
+
inert: "true",
|
|
433
|
+
ref: listRef,
|
|
434
|
+
className: " . _Z-17zqamw _6-17zqamw i-17zqamw j-17zqamw _7-17zqamw Ua Xa Za Va Wa __Eb __vb __wb _K-3t1x",
|
|
435
|
+
children: items.map((item)=>{
|
|
436
|
+
// pull off individual props as an allow list, don't want refs or other props getting through
|
|
437
|
+
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
|
|
438
|
+
"data-hidden-tab": true,
|
|
439
|
+
style: item.props.UNSAFE_style,
|
|
440
|
+
className: item.props.className({
|
|
441
|
+
size: size,
|
|
442
|
+
density: density
|
|
443
|
+
}),
|
|
444
|
+
children: item.props.children({
|
|
445
|
+
size: size,
|
|
446
|
+
density: density
|
|
447
|
+
})
|
|
448
|
+
}, item.key);
|
|
449
|
+
})
|
|
450
|
+
});
|
|
451
|
+
};
|
|
452
|
+
let $79e2b4a1b34d1592$var$TabsMenu = (props1)=>{
|
|
453
|
+
let stringFormatter = (0, $8bRfI$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8bRfI$intlStringsmjs))), '@react-spectrum/s2');
|
|
454
|
+
let { items: items } = props1;
|
|
455
|
+
let { density: density, onSelectionChange: onSelectionChange, selectedKey: selectedKey, isDisabled: isDisabled, disabledKeys: disabledKeys, pickerRef: pickerRef } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext);
|
|
456
|
+
let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
|
|
457
|
+
let allKeysDisabled = (0, $8bRfI$useMemo)(()=>{
|
|
458
|
+
return $79e2b4a1b34d1592$var$isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
|
|
459
|
+
}, [
|
|
460
|
+
state?.collection,
|
|
461
|
+
disabledKeys
|
|
462
|
+
]);
|
|
463
|
+
return /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$UNSTABLE_CollectionRendererContext).Provider, {
|
|
464
|
+
value: (0, $8bRfI$UNSTABLE_DefaultCollectionRenderer),
|
|
465
|
+
children: /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
|
|
466
|
+
className: function anonymous(props) {
|
|
467
|
+
let rules = " .";
|
|
468
|
+
rules += ' _Zd';
|
|
469
|
+
rules += ' _1c';
|
|
470
|
+
if (props.density === "regular") rules += ' k_a';
|
|
471
|
+
else if (props.density === "compact") rules += ' kU';
|
|
472
|
+
return rules;
|
|
473
|
+
}({
|
|
474
|
+
density: density
|
|
475
|
+
}),
|
|
476
|
+
children: /*#__PURE__*/ (0, $8bRfI$jsx)((0, $0067ea932a992b6a$export$ba25329847403e11), {
|
|
477
|
+
ref: pickerRef ? pickerRef : undefined,
|
|
478
|
+
isDisabled: isDisabled || allKeysDisabled,
|
|
479
|
+
density: density,
|
|
480
|
+
items: items,
|
|
481
|
+
disabledKeys: disabledKeys,
|
|
482
|
+
selectedKey: selectedKey,
|
|
483
|
+
onSelectionChange: onSelectionChange,
|
|
484
|
+
"aria-label": stringFormatter.format('tabs.selectorLabel'),
|
|
485
|
+
children: (item)=>{
|
|
486
|
+
// need to determine the best way to handle icon only -> icon and text
|
|
487
|
+
// good enough to aria-label the picker item?
|
|
488
|
+
return /*#__PURE__*/ (0, $8bRfI$createElement)((0, $0067ea932a992b6a$export$d601881f38163e28), {
|
|
489
|
+
...item.props.originalProps,
|
|
490
|
+
isDisabled: isDisabled || allKeysDisabled,
|
|
491
|
+
key: item.key
|
|
492
|
+
}, item.props.children({
|
|
356
493
|
density: density,
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
]
|
|
362
|
-
],
|
|
363
|
-
children: props.children
|
|
494
|
+
isMenu: true
|
|
495
|
+
}));
|
|
496
|
+
}
|
|
497
|
+
})
|
|
364
498
|
})
|
|
365
499
|
});
|
|
366
|
-
}
|
|
500
|
+
};
|
|
501
|
+
// Context for passing the count for the custom renderer
|
|
502
|
+
let $79e2b4a1b34d1592$var$CollapseContext = /*#__PURE__*/ (0, $8bRfI$createContext)(null);
|
|
503
|
+
function $79e2b4a1b34d1592$var$CollapsingCollection({ children: children, containerRef: containerRef }) {
|
|
504
|
+
let [showItems, _setShowItems] = (0, $8bRfI$useState)(true);
|
|
505
|
+
let { orientation: orientation } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext);
|
|
506
|
+
let setShowItems = (0, $8bRfI$useCallback)((value)=>{
|
|
507
|
+
if (orientation === 'vertical') // if orientation is vertical, we always show the items
|
|
508
|
+
_setShowItems(true);
|
|
509
|
+
else _setShowItems(value);
|
|
510
|
+
}, [
|
|
511
|
+
orientation
|
|
512
|
+
]);
|
|
513
|
+
return /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$CollapseContext.Provider, {
|
|
514
|
+
value: {
|
|
515
|
+
containerRef: containerRef,
|
|
516
|
+
showItems: orientation === 'vertical' ? true : showItems,
|
|
517
|
+
setShowItems: setShowItems
|
|
518
|
+
},
|
|
519
|
+
children: /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$UNSTABLE_CollectionRendererContext).Provider, {
|
|
520
|
+
value: $79e2b4a1b34d1592$var$CollapsingCollectionRenderer,
|
|
521
|
+
children: children
|
|
522
|
+
})
|
|
523
|
+
});
|
|
524
|
+
}
|
|
525
|
+
let $79e2b4a1b34d1592$var$CollapsingCollectionRenderer = {
|
|
526
|
+
CollectionRoot ({ collection: collection }) {
|
|
527
|
+
return $79e2b4a1b34d1592$var$useCollectionRender(collection);
|
|
528
|
+
},
|
|
529
|
+
CollectionBranch ({ collection: collection }) {
|
|
530
|
+
return $79e2b4a1b34d1592$var$useCollectionRender(collection);
|
|
531
|
+
}
|
|
532
|
+
};
|
|
533
|
+
let $79e2b4a1b34d1592$var$useCollectionRender = (collection)=>{
|
|
534
|
+
let { containerRef: containerRef, showItems: showItems, setShowItems: setShowItems } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$CollapseContext) ?? {};
|
|
535
|
+
let { density: density = 'regular', orientation: orientation = 'horizontal', onSelectionChange: onSelectionChange } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext);
|
|
536
|
+
let { direction: direction } = (0, $8bRfI$useLocale)();
|
|
537
|
+
let children = (0, $8bRfI$useMemo)(()=>{
|
|
538
|
+
let result = [];
|
|
539
|
+
for (let key of collection.getKeys())result.push(collection.getItem(key));
|
|
540
|
+
return result;
|
|
541
|
+
}, [
|
|
542
|
+
collection
|
|
543
|
+
]);
|
|
544
|
+
let listRef = (0, $8bRfI$useRef)(null);
|
|
545
|
+
let updateOverflow = (0, $8bRfI$useEffectEvent)(()=>{
|
|
546
|
+
if (orientation === 'vertical' || !listRef.current || !containerRef?.current) return;
|
|
547
|
+
let container = listRef.current;
|
|
548
|
+
let containerRect = container.getBoundingClientRect();
|
|
549
|
+
let tabs = container.querySelectorAll('[data-hidden-tab]');
|
|
550
|
+
let lastTab = tabs[tabs.length - 1];
|
|
551
|
+
let lastTabRect = lastTab.getBoundingClientRect();
|
|
552
|
+
if (direction === 'ltr') setShowItems?.(lastTabRect.right <= containerRect.right);
|
|
553
|
+
else setShowItems?.(lastTabRect.left >= containerRect.left);
|
|
554
|
+
});
|
|
555
|
+
(0, $8bRfI$useResizeObserver)({
|
|
556
|
+
ref: containerRef,
|
|
557
|
+
onResize: updateOverflow
|
|
558
|
+
});
|
|
559
|
+
(0, $8bRfI$useLayoutEffect)(()=>{
|
|
560
|
+
if (collection.size > 0) queueMicrotask(updateOverflow);
|
|
561
|
+
}, [
|
|
562
|
+
collection.size,
|
|
563
|
+
updateOverflow
|
|
564
|
+
]);
|
|
565
|
+
(0, $8bRfI$useEffect)(()=>{
|
|
566
|
+
// Recalculate visible tags when fonts are loaded.
|
|
567
|
+
document.fonts?.ready.then(()=>updateOverflow());
|
|
568
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
569
|
+
}, []);
|
|
570
|
+
return /*#__PURE__*/ (0, $8bRfI$jsxs)((0, $8bRfI$Fragment), {
|
|
571
|
+
children: [
|
|
572
|
+
/*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$HiddenTabs, {
|
|
573
|
+
items: children,
|
|
574
|
+
density: density,
|
|
575
|
+
listRef: listRef
|
|
576
|
+
}),
|
|
577
|
+
showItems ? children.map((node)=>/*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Fragment1), {
|
|
578
|
+
children: node.render?.(node)
|
|
579
|
+
}, node.key)) : /*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$Fragment), {
|
|
580
|
+
children: /*#__PURE__*/ (0, $8bRfI$jsx)($79e2b4a1b34d1592$var$TabsMenu, {
|
|
581
|
+
items: children,
|
|
582
|
+
onSelectionChange: onSelectionChange
|
|
583
|
+
})
|
|
584
|
+
})
|
|
585
|
+
]
|
|
586
|
+
});
|
|
587
|
+
};
|
|
367
588
|
|
|
368
589
|
|
|
369
|
-
export {$79e2b4a1b34d1592$export$cfa7aa87c26e7d1f as TabsContext, $79e2b4a1b34d1592$export$
|
|
590
|
+
export {$79e2b4a1b34d1592$export$cfa7aa87c26e7d1f as TabsContext, $79e2b4a1b34d1592$export$b2539bed5023c21c as Tabs, $79e2b4a1b34d1592$export$e51a686c67fdaa2d as TabList, $79e2b4a1b34d1592$export$3e41faf802a29e71 as Tab, $79e2b4a1b34d1592$export$3d96ec278d3efce4 as TabPanel};
|
|
370
591
|
//# sourceMappingURL=Tabs.mjs.map
|