@react-spectrum/s2 0.9.0 → 0.9.2
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/Accordion.cjs +2 -2
- package/dist/Accordion.css +2 -2
- package/dist/Accordion.mjs +2 -2
- package/dist/ActionBar.cjs +60 -60
- package/dist/ActionBar.css +59 -59
- package/dist/ActionBar.mjs +60 -60
- package/dist/ActionButton.cjs +187 -187
- package/dist/ActionButton.cjs.map +1 -1
- package/dist/ActionButton.css +134 -134
- package/dist/ActionButton.css.map +1 -1
- package/dist/ActionButton.mjs +187 -187
- package/dist/ActionButton.mjs.map +1 -1
- package/dist/ActionButtonGroup.cjs +15 -15
- package/dist/ActionButtonGroup.css +9 -9
- package/dist/ActionButtonGroup.mjs +15 -15
- package/dist/Add.cjs +10 -10
- package/dist/Add.css +6 -6
- package/dist/Add.mjs +10 -10
- package/dist/AlertDialog.cjs +3 -3
- package/dist/AlertDialog.css +3 -3
- package/dist/AlertDialog.mjs +3 -3
- package/dist/Asterisk.cjs +6 -6
- package/dist/Asterisk.css +4 -4
- package/dist/Asterisk.mjs +6 -6
- package/dist/Avatar.cjs +14 -14
- package/dist/Avatar.css +14 -14
- package/dist/Avatar.mjs +14 -14
- package/dist/AvatarGroup.cjs +120 -120
- package/dist/AvatarGroup.css +37 -37
- package/dist/AvatarGroup.mjs +120 -120
- package/dist/Badge.cjs +196 -196
- package/dist/Badge.css +129 -129
- package/dist/Badge.mjs +196 -196
- package/dist/Breadcrumbs.cjs +231 -231
- package/dist/Breadcrumbs.css +102 -102
- package/dist/Breadcrumbs.mjs +231 -231
- package/dist/Button.cjs +328 -328
- package/dist/Button.cjs.map +1 -1
- package/dist/Button.css +176 -176
- package/dist/Button.css.map +1 -1
- package/dist/Button.mjs +328 -328
- package/dist/Button.mjs.map +1 -1
- package/dist/ButtonGroup.cjs +20 -20
- package/dist/ButtonGroup.css +15 -15
- package/dist/ButtonGroup.mjs +20 -20
- package/dist/Card.cjs +294 -294
- package/dist/Card.css +205 -205
- package/dist/Card.mjs +294 -294
- package/dist/CardView.cjs +17 -17
- package/dist/CardView.css +17 -17
- package/dist/CardView.mjs +17 -17
- package/dist/CenterBaseline.cjs +1 -1
- package/dist/CenterBaseline.css +2 -2
- package/dist/CenterBaseline.mjs +1 -1
- package/dist/Checkbox.cjs +160 -160
- package/dist/Checkbox.css +94 -94
- package/dist/Checkbox.mjs +160 -160
- package/dist/CheckboxGroup.cjs +43 -43
- package/dist/CheckboxGroup.css +41 -41
- package/dist/CheckboxGroup.mjs +43 -43
- package/dist/Checkmark.cjs +12 -12
- package/dist/Checkmark.css +8 -8
- package/dist/Checkmark.mjs +12 -12
- package/dist/Chevron.cjs +12 -12
- package/dist/Chevron.css +10 -10
- package/dist/Chevron.mjs +12 -12
- package/dist/ClearButton.cjs +29 -29
- package/dist/ClearButton.css +29 -29
- package/dist/ClearButton.mjs +29 -29
- package/dist/CloseButton.cjs +54 -54
- package/dist/CloseButton.css +46 -46
- package/dist/CloseButton.mjs +54 -54
- package/dist/ColorArea.cjs +16 -16
- package/dist/ColorArea.css +16 -16
- package/dist/ColorArea.mjs +16 -16
- package/dist/ColorField.cjs +31 -31
- package/dist/ColorField.css +31 -31
- package/dist/ColorField.mjs +31 -31
- package/dist/ColorHandle.cjs +27 -27
- package/dist/ColorHandle.css +42 -42
- package/dist/ColorHandle.mjs +27 -27
- package/dist/ColorSlider.cjs +108 -108
- package/dist/ColorSlider.css +56 -56
- package/dist/ColorSlider.mjs +108 -108
- package/dist/ColorSwatch.cjs +29 -29
- package/dist/ColorSwatch.css +29 -29
- package/dist/ColorSwatch.mjs +29 -29
- package/dist/ColorSwatchPicker.cjs +27 -27
- package/dist/ColorSwatchPicker.css +46 -46
- package/dist/ColorSwatchPicker.mjs +27 -27
- package/dist/ColorWheel.cjs +26 -26
- package/dist/ColorWheel.css +17 -17
- package/dist/ColorWheel.mjs +26 -26
- package/dist/ComboBox.cjs +378 -376
- package/dist/ComboBox.cjs.map +1 -1
- package/dist/ComboBox.css +179 -179
- package/dist/ComboBox.css.map +1 -1
- package/dist/ComboBox.mjs +378 -376
- package/dist/ComboBox.mjs.map +1 -1
- package/dist/ContextualHelp.cjs +5 -5
- package/dist/ContextualHelp.cjs.map +1 -1
- package/dist/ContextualHelp.css +49 -49
- package/dist/ContextualHelp.css.map +1 -1
- package/dist/ContextualHelp.mjs +5 -5
- package/dist/ContextualHelp.mjs.map +1 -1
- package/dist/Cross.cjs +14 -14
- package/dist/Cross.css +10 -10
- package/dist/Cross.mjs +14 -14
- package/dist/CustomDialog.cjs +25 -25
- package/dist/CustomDialog.css +25 -25
- package/dist/CustomDialog.mjs +25 -25
- package/dist/Dash.cjs +10 -10
- package/dist/Dash.css +6 -6
- package/dist/Dash.mjs +10 -10
- package/dist/Dialog.cjs +17 -17
- package/dist/Dialog.css +70 -70
- package/dist/Dialog.mjs +17 -17
- package/dist/Disclosure.cjs +129 -129
- package/dist/Disclosure.css +104 -104
- package/dist/Disclosure.mjs +129 -129
- package/dist/Divider.cjs +25 -25
- package/dist/Divider.css +25 -25
- package/dist/Divider.mjs +25 -25
- package/dist/DropZone.cjs +58 -58
- package/dist/DropZone.css +54 -54
- package/dist/DropZone.mjs +58 -58
- package/dist/Field.cjs +340 -340
- package/dist/Field.cjs.map +1 -1
- package/dist/Field.css +144 -144
- package/dist/Field.mjs +340 -340
- package/dist/Field.mjs.map +1 -1
- package/dist/Form.cjs +9 -9
- package/dist/Form.css +9 -9
- package/dist/Form.mjs +9 -9
- package/dist/FullscreenDialog.cjs +5 -5
- package/dist/FullscreenDialog.css +79 -79
- package/dist/FullscreenDialog.mjs +5 -5
- package/dist/IllustratedMessage.cjs +219 -219
- package/dist/IllustratedMessage.css +74 -74
- package/dist/IllustratedMessage.mjs +219 -219
- package/dist/Image.cjs +14 -14
- package/dist/Image.cjs.map +1 -1
- package/dist/Image.css +14 -14
- package/dist/Image.css.map +1 -1
- package/dist/Image.mjs +14 -14
- package/dist/Image.mjs.map +1 -1
- package/dist/InlineAlert.cjs +108 -108
- package/dist/InlineAlert.css +90 -90
- package/dist/InlineAlert.mjs +108 -108
- package/dist/Link.cjs +49 -49
- package/dist/Link.css +41 -41
- package/dist/Link.mjs +49 -49
- package/dist/LinkOut.cjs +8 -8
- package/dist/LinkOut.css +8 -8
- package/dist/LinkOut.mjs +8 -8
- package/dist/Menu.cjs +422 -422
- package/dist/Menu.css +180 -180
- package/dist/Menu.mjs +422 -422
- package/dist/Meter.cjs +153 -153
- package/dist/Meter.css +95 -95
- package/dist/Meter.mjs +153 -153
- package/dist/Modal.cjs +58 -58
- package/dist/Modal.css +50 -50
- package/dist/Modal.mjs +58 -58
- package/dist/NotificationBadge.cjs +56 -56
- package/dist/NotificationBadge.css +51 -51
- package/dist/NotificationBadge.mjs +56 -56
- package/dist/NumberField.cjs +114 -118
- package/dist/NumberField.cjs.map +1 -1
- package/dist/NumberField.css +103 -103
- package/dist/NumberField.css.map +1 -1
- package/dist/NumberField.mjs +115 -119
- package/dist/NumberField.mjs.map +1 -1
- package/dist/Picker.cjs +273 -271
- package/dist/Picker.cjs.map +1 -1
- package/dist/Picker.css +169 -169
- package/dist/Picker.css.map +1 -1
- package/dist/Picker.mjs +273 -271
- package/dist/Picker.mjs.map +1 -1
- package/dist/Popover.cjs +85 -85
- package/dist/Popover.css +66 -66
- package/dist/Popover.mjs +85 -85
- package/dist/ProgressBar.cjs +163 -163
- package/dist/ProgressBar.css +103 -103
- package/dist/ProgressBar.mjs +163 -163
- package/dist/ProgressCircle.cjs +17 -17
- package/dist/ProgressCircle.css +17 -17
- package/dist/ProgressCircle.mjs +17 -17
- package/dist/Provider.cjs +10 -10
- package/dist/Provider.css +9 -9
- package/dist/Provider.mjs +10 -10
- package/dist/Radio.cjs +144 -144
- package/dist/Radio.css +81 -81
- package/dist/Radio.mjs +144 -144
- package/dist/RadioGroup.cjs +41 -41
- package/dist/RadioGroup.css +41 -41
- package/dist/RadioGroup.mjs +41 -41
- package/dist/SearchField.cjs +41 -41
- package/dist/SearchField.css +49 -49
- package/dist/SearchField.mjs +41 -41
- package/dist/SegmentedControl.cjs +171 -171
- package/dist/SegmentedControl.css +120 -120
- package/dist/SegmentedControl.mjs +171 -171
- package/dist/Slider.cjs +288 -288
- package/dist/Slider.css +152 -152
- package/dist/Slider.mjs +288 -288
- package/dist/StatusLight.cjs +115 -115
- package/dist/StatusLight.css +63 -63
- package/dist/StatusLight.mjs +115 -115
- package/dist/Switch.cjs +152 -152
- package/dist/Switch.css +76 -76
- package/dist/Switch.mjs +152 -152
- package/dist/TableView.cjs +310 -310
- package/dist/TableView.css +172 -172
- package/dist/TableView.mjs +310 -310
- package/dist/Tabs.cjs +113 -110
- package/dist/Tabs.cjs.map +1 -1
- package/dist/Tabs.css +92 -92
- package/dist/Tabs.css.map +1 -1
- package/dist/Tabs.mjs +113 -110
- package/dist/Tabs.mjs.map +1 -1
- package/dist/TabsPicker.cjs +123 -123
- package/dist/TabsPicker.css +112 -112
- package/dist/TabsPicker.mjs +123 -123
- package/dist/TagGroup.cjs +202 -202
- package/dist/TagGroup.cjs.map +1 -1
- package/dist/TagGroup.css +147 -147
- package/dist/TagGroup.css.map +1 -1
- package/dist/TagGroup.mjs +202 -202
- package/dist/TagGroup.mjs.map +1 -1
- package/dist/TextField.cjs +57 -57
- package/dist/TextField.css +57 -57
- package/dist/TextField.mjs +57 -57
- package/dist/Toast.cjs +118 -118
- package/dist/Toast.css +105 -105
- package/dist/Toast.mjs +118 -118
- package/dist/ToggleButton.cjs +3 -3
- package/dist/ToggleButton.css +12 -12
- package/dist/ToggleButton.mjs +3 -3
- package/dist/Tooltip.cjs +81 -81
- package/dist/Tooltip.css +68 -68
- package/dist/Tooltip.mjs +81 -81
- package/dist/TreeView.cjs +143 -149
- package/dist/TreeView.cjs.map +1 -1
- package/dist/TreeView.css +143 -143
- package/dist/TreeView.css.map +1 -1
- package/dist/TreeView.mjs +143 -149
- package/dist/TreeView.mjs.map +1 -1
- package/dist/types.d.ts +2 -2
- package/dist/types.d.ts.map +1 -1
- package/icons/Icon.cjs +10 -10
- package/icons/Icon.css +9 -9
- package/icons/Icon.mjs +10 -10
- package/icons/Skeleton.cjs +4 -3
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +6 -6
- package/icons/Skeleton.css.map +1 -1
- package/icons/Skeleton.mjs +4 -3
- package/icons/Skeleton.mjs.map +1 -1
- package/package.json +45 -26
- package/src/ActionButton.tsx +1 -1
- package/src/Button.tsx +3 -3
- package/src/ComboBox.tsx +3 -2
- package/src/ContextualHelp.tsx +2 -2
- package/src/Image.tsx +1 -1
- package/src/NumberField.tsx +0 -2
- package/src/Picker.tsx +3 -2
- package/src/Skeleton.tsx +2 -1
- package/src/Tabs.tsx +7 -5
- package/src/TagGroup.tsx +1 -1
- package/src/TreeView.tsx +1 -6
- package/style/__tests__/style-macro.test.js +56 -56
package/dist/Tabs.mjs
CHANGED
|
@@ -55,26 +55,26 @@ const $79e2b4a1b34d1592$var$tabs = function anonymous(props, overrides) {
|
|
|
55
55
|
if (p[1] === "_v") flexShrink = true;
|
|
56
56
|
rules += p[0];
|
|
57
57
|
}
|
|
58
|
-
if (!position) rules += '
|
|
59
|
-
rules += '
|
|
60
|
-
if (!flexShrink) rules += '
|
|
61
|
-
rules += '
|
|
62
|
-
rules += '
|
|
63
|
-
rules += '
|
|
64
|
-
rules += '
|
|
65
|
-
rules += '
|
|
66
|
-
rules += '
|
|
67
|
-
rules += '
|
|
68
|
-
rules += '
|
|
69
|
-
rules += '
|
|
70
|
-
rules += '
|
|
71
|
-
rules += '
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
74
|
-
rules += '
|
|
75
|
-
rules += '
|
|
76
|
-
rules += '
|
|
77
|
-
if (props.orientation === "horizontal") rules += '
|
|
58
|
+
if (!position) rules += ' _Pc91';
|
|
59
|
+
rules += ' sd91';
|
|
60
|
+
if (!flexShrink) rules += ' _va91';
|
|
61
|
+
rules += ' ug91';
|
|
62
|
+
rules += ' uch91';
|
|
63
|
+
rules += ' udi91';
|
|
64
|
+
rules += ' uea91';
|
|
65
|
+
rules += ' ugb91';
|
|
66
|
+
rules += ' uhd91';
|
|
67
|
+
rules += ' uje91';
|
|
68
|
+
rules += ' uic91';
|
|
69
|
+
rules += ' vd91';
|
|
70
|
+
rules += ' vsf91';
|
|
71
|
+
rules += ' wb91';
|
|
72
|
+
rules += ' xb91';
|
|
73
|
+
rules += ' _xa91';
|
|
74
|
+
rules += ' _Fa91';
|
|
75
|
+
rules += ' _Ffb91';
|
|
76
|
+
rules += ' pt91';
|
|
77
|
+
if (props.orientation === "horizontal") rules += ' _ta91';
|
|
78
78
|
return rules;
|
|
79
79
|
};
|
|
80
80
|
const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwardRef)(function Tabs(props, ref) {
|
|
@@ -114,26 +114,26 @@ const $79e2b4a1b34d1592$export$b2539bed5023c21c = /*#__PURE__*/ (0, $8bRfI$forwa
|
|
|
114
114
|
});
|
|
115
115
|
const $79e2b4a1b34d1592$var$tablist = function anonymous(props) {
|
|
116
116
|
let rules = " ";
|
|
117
|
-
rules += '
|
|
117
|
+
rules += ' sd91';
|
|
118
118
|
if (props.orientation === "horizontal") {
|
|
119
119
|
if (props.labelBehavior === "hide") {
|
|
120
|
-
if (props.density === "regular") rules += '
|
|
121
|
-
else if (props.density === "compact") rules += '
|
|
122
|
-
} else if (props.density === "regular") rules += '
|
|
123
|
-
else if (props.density === "compact") rules += '
|
|
120
|
+
if (props.density === "regular") rules += ' Uj91';
|
|
121
|
+
else if (props.density === "compact") rules += ' Ul91';
|
|
122
|
+
} else if (props.density === "regular") rules += ' Up91';
|
|
123
|
+
else if (props.density === "compact") rules += ' Uj91';
|
|
124
124
|
}
|
|
125
125
|
if (props.orientation === "horizontal") {
|
|
126
126
|
if (props.labelBehavior === "hide") {
|
|
127
|
-
if (props.density === "regular") rules += '
|
|
128
|
-
else if (props.density === "compact") rules += '
|
|
129
|
-
} else if (props.density === "regular") rules += '
|
|
130
|
-
else if (props.density === "compact") rules += '
|
|
127
|
+
if (props.density === "regular") rules += ' qj91';
|
|
128
|
+
else if (props.density === "compact") rules += ' ql91';
|
|
129
|
+
} else if (props.density === "regular") rules += ' qp91';
|
|
130
|
+
else if (props.density === "compact") rules += ' qj91';
|
|
131
131
|
}
|
|
132
|
-
if (props.orientation === "vertical") rules += '
|
|
133
|
-
if (props.orientation === "vertical") rules += '
|
|
134
|
-
if (props.orientation === "vertical") rules += '
|
|
135
|
-
rules += '
|
|
136
|
-
rules += '
|
|
132
|
+
if (props.orientation === "vertical") rules += ' _ta91';
|
|
133
|
+
if (props.orientation === "vertical") rules += ' Hz91';
|
|
134
|
+
if (props.orientation === "vertical") rules += ' Ix91';
|
|
135
|
+
rules += ' _va91';
|
|
136
|
+
rules += ' _sa91';
|
|
137
137
|
return rules;
|
|
138
138
|
};
|
|
139
139
|
function $79e2b4a1b34d1592$export$e51a686c67fdaa2d(props) {
|
|
@@ -167,7 +167,7 @@ function $79e2b4a1b34d1592$var$TabListInner(props1) {
|
|
|
167
167
|
if (p[1] === "_P") position = true;
|
|
168
168
|
rules += p[0];
|
|
169
169
|
}
|
|
170
|
-
if (!position) rules += '
|
|
170
|
+
if (!position) rules += ' _Pc91';
|
|
171
171
|
return rules;
|
|
172
172
|
}(null, props1.styles),
|
|
173
173
|
children: [
|
|
@@ -176,6 +176,7 @@ function $79e2b4a1b34d1592$var$TabListInner(props1) {
|
|
|
176
176
|
isDisabled: isDisabled,
|
|
177
177
|
selectedTab: selectedTab,
|
|
178
178
|
orientation: orientation,
|
|
179
|
+
tabList: props1,
|
|
179
180
|
density: density
|
|
180
181
|
}),
|
|
181
182
|
/*#__PURE__*/ (0, $8bRfI$jsx)((0, $8bRfI$TabList), {
|
|
@@ -194,6 +195,7 @@ function $79e2b4a1b34d1592$var$TabListInner(props1) {
|
|
|
194
195
|
isDisabled: isDisabled,
|
|
195
196
|
selectedTab: selectedTab,
|
|
196
197
|
orientation: orientation,
|
|
198
|
+
tabList: props1,
|
|
197
199
|
density: density
|
|
198
200
|
})
|
|
199
201
|
]
|
|
@@ -201,25 +203,25 @@ function $79e2b4a1b34d1592$var$TabListInner(props1) {
|
|
|
201
203
|
}
|
|
202
204
|
const $79e2b4a1b34d1592$var$selectedIndicator = function anonymous(props) {
|
|
203
205
|
let rules = " ";
|
|
204
|
-
rules += '
|
|
205
|
-
if (props.isDisabled) rules += '
|
|
206
|
-
else rules += '
|
|
207
|
-
if (props.isDisabled) rules += '
|
|
208
|
-
else rules += '
|
|
209
|
-
if (props.orientation === "horizontal") rules += '
|
|
210
|
-
if (props.orientation === "vertical") rules += '
|
|
211
|
-
if (props.orientation === "horizontal") rules += '
|
|
212
|
-
rules += '
|
|
213
|
-
rules += '
|
|
214
|
-
rules += '
|
|
215
|
-
rules += '
|
|
216
|
-
rules += '
|
|
217
|
-
rules += '
|
|
218
|
-
rules += '
|
|
206
|
+
rules += ' _Pa91';
|
|
207
|
+
if (props.isDisabled) rules += ' gH91';
|
|
208
|
+
else rules += ' g091';
|
|
209
|
+
if (props.isDisabled) rules += ' gld91';
|
|
210
|
+
else rules += ' gle91';
|
|
211
|
+
if (props.orientation === "horizontal") rules += ' FLvNfn91';
|
|
212
|
+
if (props.orientation === "vertical") rules += ' ZLvNfn91';
|
|
213
|
+
if (props.orientation === "horizontal") rules += ' _lr91';
|
|
214
|
+
rules += ' _je91';
|
|
215
|
+
rules += ' og91';
|
|
216
|
+
rules += ' ng91';
|
|
217
|
+
rules += ' kg91';
|
|
218
|
+
rules += ' jg91';
|
|
219
|
+
rules += ' Xa91';
|
|
220
|
+
rules += ' _2b91';
|
|
219
221
|
return rules;
|
|
220
222
|
};
|
|
221
223
|
function $79e2b4a1b34d1592$var$TabLine(props) {
|
|
222
|
-
let { disabledKeys: disabledKeys, isDisabled: isTabsDisabled, selectedTab: selectedTab, orientation: orientation, density: density } = props;
|
|
224
|
+
let { disabledKeys: disabledKeys, isDisabled: isTabsDisabled, selectedTab: selectedTab, orientation: orientation, tabList: tabList, density: density } = props;
|
|
223
225
|
let { direction: direction } = (0, $8bRfI$useLocale)();
|
|
224
226
|
let state = (0, $8bRfI$useContext)((0, $8bRfI$TabListStateContext));
|
|
225
227
|
// We want to add disabled styling to the selection indicator only if all the Tabs are disabled
|
|
@@ -265,7 +267,8 @@ function $79e2b4a1b34d1592$var$TabLine(props) {
|
|
|
265
267
|
state?.selectedItem?.key,
|
|
266
268
|
density,
|
|
267
269
|
direction,
|
|
268
|
-
orientation
|
|
270
|
+
orientation,
|
|
271
|
+
tabList
|
|
269
272
|
]);
|
|
270
273
|
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
|
|
271
274
|
style: {
|
|
@@ -287,49 +290,49 @@ const $79e2b4a1b34d1592$var$tab = function anonymous(props, overrides) {
|
|
|
287
290
|
if (p[1] === "_v") flexShrink = true;
|
|
288
291
|
rules += p[0];
|
|
289
292
|
}
|
|
290
|
-
if (props.isFocusVisible) rules += '
|
|
291
|
-
else rules += '
|
|
292
|
-
rules += '
|
|
293
|
-
rules += '
|
|
294
|
-
rules += '
|
|
295
|
-
rules += '
|
|
296
|
-
if (props.isDisabled) rules += '
|
|
293
|
+
if (props.isFocusVisible) rules += ' _Lf91';
|
|
294
|
+
else rules += ' _Le91';
|
|
295
|
+
rules += ' Oh91';
|
|
296
|
+
rules += ' _Mc91';
|
|
297
|
+
rules += ' _Kd91';
|
|
298
|
+
rules += ' sd91';
|
|
299
|
+
if (props.isDisabled) rules += ' pp91';
|
|
297
300
|
else if (props.isSelected) {
|
|
298
|
-
if (props.isPressed) rules += '
|
|
299
|
-
else if (props.isFocusVisible) rules += '
|
|
300
|
-
else if (props.isHovered) rules += '
|
|
301
|
-
else rules += '
|
|
301
|
+
if (props.isPressed) rules += ' po91';
|
|
302
|
+
else if (props.isFocusVisible) rules += ' po91';
|
|
303
|
+
else if (props.isHovered) rules += ' po91';
|
|
304
|
+
else rules += ' pt91';
|
|
302
305
|
} else {
|
|
303
|
-
if (props.isPressed) rules += '
|
|
304
|
-
else if (props.isFocusVisible) rules += '
|
|
305
|
-
else if (props.isHovered) rules += '
|
|
306
|
-
else rules += '
|
|
306
|
+
if (props.isPressed) rules += ' pt91';
|
|
307
|
+
else if (props.isFocusVisible) rules += ' pt91';
|
|
308
|
+
else if (props.isHovered) rules += ' pt91';
|
|
309
|
+
else rules += ' pv91';
|
|
307
310
|
}
|
|
308
|
-
if (props.isDisabled) rules += '
|
|
309
|
-
else if (props.isSelected) rules += '
|
|
310
|
-
rules += '
|
|
311
|
-
rules += '
|
|
312
|
-
rules += '
|
|
313
|
-
rules += '
|
|
314
|
-
rules += '
|
|
315
|
-
rules += '
|
|
316
|
-
rules += '
|
|
317
|
-
rules += '
|
|
318
|
-
if (props.density === "regular") rules += '
|
|
319
|
-
else if (props.density === "compact") rules += '
|
|
320
|
-
rules += '
|
|
321
|
-
if (!position) rules += '
|
|
322
|
-
rules += '
|
|
323
|
-
if (!flexShrink) rules += '
|
|
324
|
-
rules += '
|
|
325
|
-
rules += '
|
|
326
|
-
rules += '
|
|
327
|
-
if (props.labelBehavior === "hide") rules += '
|
|
328
|
-
if (props.labelBehavior === "hide") rules += '
|
|
329
|
-
rules += '
|
|
311
|
+
if (props.isDisabled) rules += ' plc91';
|
|
312
|
+
else if (props.isSelected) rules += ' pld91';
|
|
313
|
+
rules += ' oa91';
|
|
314
|
+
rules += ' na91';
|
|
315
|
+
rules += ' ka91';
|
|
316
|
+
rules += ' ja91';
|
|
317
|
+
rules += ' Uc91';
|
|
318
|
+
rules += ' Usd91';
|
|
319
|
+
rules += ' qc91';
|
|
320
|
+
rules += ' qsd91';
|
|
321
|
+
if (props.density === "regular") rules += ' Fz91';
|
|
322
|
+
else if (props.density === "compact") rules += ' Fx91';
|
|
323
|
+
rules += ' eb91';
|
|
324
|
+
if (!position) rules += ' _Pc91';
|
|
325
|
+
rules += ' ri91';
|
|
326
|
+
if (!flexShrink) rules += ' _va91';
|
|
327
|
+
rules += ' Yd91';
|
|
328
|
+
rules += ' Xb91';
|
|
329
|
+
rules += ' _2b91';
|
|
330
|
+
if (props.labelBehavior === "hide") rules += ' SssxDec91';
|
|
331
|
+
if (props.labelBehavior === "hide") rules += ' RssxDec91';
|
|
332
|
+
rules += ' __ca91';
|
|
330
333
|
return rules;
|
|
331
334
|
};
|
|
332
|
-
const $79e2b4a1b34d1592$var$icon = "
|
|
335
|
+
const $79e2b4a1b34d1592$var$icon = " sb91 _va91 -_8sjo0b-t5ZbAob91";
|
|
333
336
|
function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
|
|
334
337
|
let { density: density, labelBehavior: labelBehavior } = (0, $8bRfI$useContext)($79e2b4a1b34d1592$var$InternalTabsContext) ?? {};
|
|
335
338
|
let contentId = (0, $8bRfI$useId)();
|
|
@@ -356,8 +359,8 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
|
|
|
356
359
|
id: contentId,
|
|
357
360
|
styles: function anonymous(props) {
|
|
358
361
|
let rules = " ";
|
|
359
|
-
rules += '
|
|
360
|
-
if (props.labelBehavior === "hide") rules += '
|
|
362
|
+
rules += ' _Jb91';
|
|
363
|
+
if (props.labelBehavior === "hide") rules += ' sk91';
|
|
361
364
|
return rules;
|
|
362
365
|
}({
|
|
363
366
|
labelBehavior: labelBehavior
|
|
@@ -369,7 +372,7 @@ function $79e2b4a1b34d1592$export$3e41faf802a29e71(props1) {
|
|
|
369
372
|
{
|
|
370
373
|
render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
|
|
371
374
|
slot: 'icon',
|
|
372
|
-
styles: "
|
|
375
|
+
styles: " _Ja91"
|
|
373
376
|
}),
|
|
374
377
|
styles: $79e2b4a1b34d1592$var$icon
|
|
375
378
|
}
|
|
@@ -398,17 +401,17 @@ const $79e2b4a1b34d1592$var$tabPanel = function anonymous(props, overrides) {
|
|
|
398
401
|
if (p[1] === "N") minWidth = true;
|
|
399
402
|
rules += p[0];
|
|
400
403
|
}
|
|
401
|
-
if (props.isFocusVisible) rules += '
|
|
402
|
-
else rules += '
|
|
403
|
-
rules += '
|
|
404
|
-
rules += '
|
|
405
|
-
rules += '
|
|
406
|
-
if (!marginTop) rules += '
|
|
407
|
-
rules += '
|
|
408
|
-
if (!flexGrow) rules += '
|
|
409
|
-
if (!flexBasis) rules += '
|
|
410
|
-
if (!minHeight) rules += '
|
|
411
|
-
if (!minWidth) rules += '
|
|
404
|
+
if (props.isFocusVisible) rules += ' _Lf91';
|
|
405
|
+
else rules += ' _Le91';
|
|
406
|
+
rules += ' Oh91';
|
|
407
|
+
rules += ' _Mc91';
|
|
408
|
+
rules += ' _Kd91';
|
|
409
|
+
if (!marginTop) rules += ' Js91';
|
|
410
|
+
rules += ' pt91';
|
|
411
|
+
if (!flexGrow) rules += ' _ub91';
|
|
412
|
+
if (!flexBasis) rules += ' _sa91';
|
|
413
|
+
if (!minHeight) rules += ' Ma91';
|
|
414
|
+
if (!minWidth) rules += ' Na91';
|
|
412
415
|
return rules;
|
|
413
416
|
};
|
|
414
417
|
function $79e2b4a1b34d1592$export$3d96ec278d3efce4(props) {
|
|
@@ -459,7 +462,7 @@ let $79e2b4a1b34d1592$var$HiddenTabs = function(props) {
|
|
|
459
462
|
// @ts-ignore
|
|
460
463
|
inert: (0, $8bRfI$inertValue)(true),
|
|
461
464
|
ref: listRef,
|
|
462
|
-
className: "
|
|
465
|
+
className: " s40ub4c91 _t40ub4c91 U40ub4c91 q40ub4c91 _w40ub4c91 _Pa91 Wr91 _lr91 _Ar91 _zr91 _6b91 _Nc91 Pc91 _Ia91",
|
|
463
466
|
children: items.map((item)=>{
|
|
464
467
|
// pull off individual props as an allow list, don't want refs or other props getting through
|
|
465
468
|
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
|
|
@@ -500,11 +503,11 @@ let $79e2b4a1b34d1592$var$TabsMenu = (props1)=>{
|
|
|
500
503
|
return /*#__PURE__*/ (0, $8bRfI$jsx)("div", {
|
|
501
504
|
className: function anonymous(props) {
|
|
502
505
|
let rules = " ";
|
|
503
|
-
rules += '
|
|
504
|
-
rules += '
|
|
505
|
-
rules += '
|
|
506
|
-
if (props.density === "regular") rules += '
|
|
507
|
-
else if (props.density === "compact") rules += '
|
|
506
|
+
rules += ' sd91';
|
|
507
|
+
rules += ' _va91';
|
|
508
|
+
rules += ' eb91';
|
|
509
|
+
if (props.density === "regular") rules += ' Fz91';
|
|
510
|
+
else if (props.density === "compact") rules += ' Fx91';
|
|
508
511
|
return rules;
|
|
509
512
|
}({
|
|
510
513
|
density: density
|
package/dist/Tabs.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Tabs.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 {\n TabListProps as AriaTabListProps,\n TabPanel as AriaTabPanel,\n TabPanelProps as AriaTabPanelProps,\n TabProps as AriaTabProps,\n TabsProps as AriaTabsProps,\n ContextValue,\n Group,\n Provider,\n Tab as RACTab,\n TabList as RACTabList,\n Tabs as RACTabs,\n TabListStateContext,\n TabRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the tabs. */\n children: ReactNode,\n /**\n * The amount of space between the tabs.\n * @default 'regular'\n */\n density?: 'compact' | 'regular',\n /**\n * Defines if the text within the tabs should be hidden and only the icon should be shown.\n * The text is always visible when the item is collapsed into a picker.\n * @default 'show'\n */\n labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {\n /** The content to display in the tab. */\n children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {\n /** The content to display in the tablist. */\n children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the tab panels. */\n children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps>>({});\nconst CollapseContext = createContext({\n showTabs: true,\n menuId: '',\n valueId: ''\n});\n\nconst tabs = style({\n position: 'relative',\n display: 'flex',\n flexShrink: 0,\n font: 'ui',\n flexDirection: {\n orientation: {\n horizontal: 'column'\n }\n }\n}, getAllowedOverrides({height: true}));\n\n/**\n * 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.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n let {\n density = 'regular',\n isDisabled,\n disabledKeys,\n orientation = 'horizontal',\n labelBehavior = 'show'\n } = props;\n let domRef = useDOMRef(ref);\n let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n if (!props['aria-label'] && !props['aria-labelledby']) {\n throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n }\n\n return (\n <Provider\n values={[\n [InternalTabsContext, {\n density,\n isDisabled,\n orientation,\n disabledKeys,\n selectedKey: value,\n onSelectionChange: setValue,\n labelBehavior,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': props['aria-labelledby']\n }]\n ]}>\n <CollectionBuilder content={props.children}>\n {collection => (\n <CollapsingTabs\n {...props}\n selectedKey={value}\n onSelectionChange={setValue}\n collection={collection}\n containerRef={domRef} />\n )}\n </CollectionBuilder>\n </Provider>\n );\n});\n\nconst tablist = style({\n display: 'flex',\n gap: {\n orientation: {\n horizontal: {\n density: {\n compact: 24,\n regular: 32\n },\n labelBehavior: {\n hide: {\n density: {\n compact: 16,\n regular: 24\n }\n }\n }\n }\n }\n },\n flexDirection: {\n orientation: {\n vertical: 'column'\n }\n },\n marginEnd: {\n orientation: {\n vertical: 20\n }\n },\n marginStart: {\n orientation: {\n vertical: 12\n }\n },\n flexShrink: 0,\n flexBasis: '0%'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n let {showTabs} = useContext(CollapseContext) ?? {};\n\n if (showTabs) {\n return <TabListInner {...props} />;\n }\n return null;\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};\n let state = useContext(TabListStateContext);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n let tablistRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (tablistRef?.current) {\n let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n if (tab != null) {\n setSelectedTab(tab);\n }\n }\n }, [tablistRef, state?.selectedItem?.key]);\n\n return (\n <div\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n {orientation === 'vertical' &&\n <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n <RACTabList\n {...props}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n ref={tablistRef}\n className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n {orientation === 'horizontal' &&\n <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}\n </div>\n );\n}\n\ninterface TabLineProps {\n disabledKeys: Iterable<Key> | undefined,\n isDisabled: boolean | undefined,\n selectedTab: HTMLElement | undefined,\n orientation?: Orientation,\n density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n position: 'absolute',\n backgroundColor: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n height: {\n orientation: {\n horizontal: '[2px]'\n }\n },\n width: {\n orientation: {\n vertical: '[2px]'\n }\n },\n bottom: {\n orientation: {\n horizontal: 0\n }\n },\n borderStyle: 'none',\n borderRadius: 'full',\n transitionDuration: 130,\n transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine(props: TabLineProps) {\n let {\n disabledKeys,\n isDisabled: isTabsDisabled,\n selectedTab,\n orientation,\n density\n } = props;\n let {direction} = useLocale();\n let state = useContext(TabListStateContext);\n\n // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n let [isDisabled, setIsDisabled] = useState<boolean>(false);\n useEffect(() => {\n let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));\n setIsDisabled(isDisabled);\n }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n transform: undefined,\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n transform: undefined,\n width: undefined,\n height: undefined\n };\n\n // 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\n let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n styleObj.transform = orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, state?.selectedItem?.key, density, direction, orientation]);\n\n return (\n <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n );\n}\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({\n ...focusRing(),\n display: 'flex',\n color: {\n default: baseColor('neutral-subdued'),\n isSelected: baseColor('neutral'),\n isDisabled: 'disabled',\n forcedColors: {\n isSelected: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'sm',\n gap: 'text-to-visual',\n height: {\n density: {\n compact: 32,\n regular: 48\n }\n },\n alignItems: 'center',\n position: 'relative',\n cursor: 'default',\n flexShrink: 0,\n transition: 'default',\n paddingX: {\n labelBehavior: {\n hide: size(6)\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n display: 'block',\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};\n\n let contentId = useId();\n let ariaLabelledBy = props['aria-labelledby'] || '';\n return (\n <RACTab\n {...props}\n // @ts-ignore\n originalProps={props}\n aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>\n {({\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return props.children;\n } else {\n return (\n <Provider\n values={[\n [TextContext, {\n id: contentId,\n styles:\n style({\n order: 1,\n display: {\n labelBehavior: {\n hide: 'none'\n }\n }\n })({labelBehavior})\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: icon\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n );\n }\n }}\n </RACTab>\n );\n}\n\nconst tabPanel = style({\n ...focusRing(),\n marginTop: 4,\n color: 'gray-800',\n flexGrow: 1,\n flexBasis: '0%',\n minHeight: 0,\n minWidth: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n let {showTabs} = useContext(CollapseContext);\n let {selectedKey} = useContext(InternalTabsContext);\n if (showTabs) {\n return (\n <AriaTabPanel\n {...props}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n );\n }\n\n if (props.id !== selectedKey) {\n return null;\n }\n\n return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;\n let {menuId, valueId} = useContext(CollapseContext);\n let ref = useRef(null);\n let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n return (\n <Group\n {...otherProps}\n ref={ref}\n aria-labelledby={menuId + ' ' + valueId}\n tabIndex={tabIndex}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n let testKey: Key | null = null;\n if (collection && collection.size > 0) {\n testKey = collection.getFirstKey();\n\n let index = 0;\n while (testKey && index < collection.size) {\n // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n return false;\n }\n\n testKey = collection.getKeyAfter(testKey);\n index++;\n }\n return true;\n }\n return false;\n}\n\nlet HiddenTabs = function (props: {\n listRef: RefObject<HTMLDivElement | null>,\n items: Array<Node<any>>,\n size?: string,\n density?: 'compact' | 'regular'\n}) {\n let {listRef, items, size, density} = props;\n\n return (\n <div\n // @ts-ignore\n inert={inertValue(true)}\n ref={listRef}\n className={style({\n display: 'inherit',\n flexDirection: 'inherit',\n gap: 'inherit',\n flexWrap: 'inherit',\n position: 'absolute',\n inset: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-tab\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, density})}>\n {item.props.children({size, density})}\n </div>\n );\n })}\n </div>\n );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n let onSelectionChange = useCallback((key: Key | null) => {\n if (key != null) {\n _onSelectionChange?.(key);\n }\n }, [_onSelectionChange]);\n let state = useContext(TabListStateContext);\n let allKeysDisabled = useMemo(() => {\n return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n }, [state?.collection, disabledKeys]);\n let labelProps = useLabels({\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy\n });\n\n return (\n <div\n className={style({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n height: {\n density: {\n compact: 32,\n regular: 48\n }\n }})({density})}>\n <Picker\n id={id}\n valueId={valueId}\n {...labelProps}\n aria-describedby={props['aria-describedby']}\n aria-details={props['aria-details']}\n isDisabled={isDisabled || allKeysDisabled}\n density={density!}\n labelBehavior={labelBehavior}\n items={items}\n disabledKeys={disabledKeys}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}>\n {(item: Node<any>) => {\n return (\n <PickerItem\n {...item.props.originalProps}\n isDisabled={isDisabled || allKeysDisabled}\n key={item.key}>\n {item.props.children({density, isMenu: true})}\n </PickerItem>\n );\n }}\n </Picker>\n </div>\n );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;\n let [showItems, _setShowItems] = useState(true);\n showItems = orientation === 'vertical' ? true : showItems;\n let setShowItems = useCallback((value: boolean) => {\n if (orientation === 'vertical') {\n // if orientation is vertical, we always show the items\n _setShowItems(true);\n } else {\n _setShowItems(value);\n }\n }, [orientation]);\n\n let {direction} = useLocale();\n\n let children = useMemo(() => [...collection], [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useEffectEvent(() => {\n if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n return;\n }\n let container = listRef.current;\n let containerRect = container.getBoundingClientRect();\n let tabs = container.querySelectorAll('[data-hidden-tab]');\n let lastTab = tabs[tabs.length - 1];\n let lastTabRect = lastTab.getBoundingClientRect();\n if (direction === 'ltr') {\n setShowItems?.(lastTabRect.right <= containerRect.right);\n } else {\n setShowItems?.(lastTabRect.left >= containerRect.left);\n }\n });\n\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n // start with null so that the first render won't have a flicker\n let prevOrientation = useRef<Orientation | null>(null);\n useLayoutEffect(() => {\n if (collection.size > 0 && prevOrientation.current !== orientation) {\n updateOverflow();\n }\n prevOrientation.current = orientation;\n }, [collection.size, updateOverflow, orientation]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let menuId = useId();\n let valueId = useId();\n\n let contents: ReactNode;\n if (showItems) {\n contents = (\n <RACTabs\n {...props}\n style={{display: 'contents'}}>\n {props.children}\n </RACTabs>\n );\n } else {\n contents = (\n <>\n <TabsMenu\n id={menuId}\n valueId={valueId}\n items={children}\n onSelectionChange={onSelectionChange}\n aria-label={props['aria-label']}\n aria-describedby={props['aria-labelledby']} />\n <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>\n {props.children}\n </CollapseContext.Provider>\n </>\n );\n }\n\n return (\n <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n <div className={tablist({orientation, labelBehavior, density})}>\n <HiddenTabs items={children} density={density} listRef={listRef} />\n </div>\n <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>\n {contents}\n </CollapseContext.Provider>\n </div>\n );\n};\n"],"names":[],"version":3,"file":"Tabs.mjs.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Tabs.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 {\n TabListProps as AriaTabListProps,\n TabPanel as AriaTabPanel,\n TabPanelProps as AriaTabPanelProps,\n TabProps as AriaTabProps,\n TabsProps as AriaTabsProps,\n ContextValue,\n Group,\n Provider,\n Tab as RACTab,\n TabList as RACTabList,\n Tabs as RACTabs,\n TabListStateContext,\n TabRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {Collection, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';\nimport {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport {inertValue, useEffectEvent, useId, useLabels, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {Picker, PickerItem} from './TabsPicker';\nimport {Text, TextContext} from './Content';\nimport {useControlledState} from '@react-stately/utils';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useHasTabbableChild} from '@react-aria/focus';\nimport {useLocale} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the tabs. */\n children: ReactNode,\n /**\n * The amount of space between the tabs.\n * @default 'regular'\n */\n density?: 'compact' | 'regular',\n /**\n * Defines if the text within the tabs should be hidden and only the icon should be shown.\n * The text is always visible when the item is collapsed into a picker.\n * @default 'show'\n */\n labelBehavior?: 'show' | 'hide'\n}\n\nexport interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {\n /** The content to display in the tab. */\n children: ReactNode\n}\n\nexport interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {\n /** The content to display in the tablist. */\n children: ReactNode | ((item: T) => ReactNode)\n}\n\nexport interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the tab panels. */\n children: ReactNode\n}\n\nexport const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);\nconst InternalTabsContext = createContext<Partial<TabsProps>>({});\nconst CollapseContext = createContext({\n showTabs: true,\n menuId: '',\n valueId: ''\n});\n\nconst tabs = style({\n position: 'relative',\n display: 'flex',\n flexShrink: 0,\n font: 'ui',\n flexDirection: {\n orientation: {\n horizontal: 'column'\n }\n }\n}, getAllowedOverrides({height: true}));\n\n/**\n * 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.\n */\nexport const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, TabsContext);\n let {\n density = 'regular',\n isDisabled,\n disabledKeys,\n orientation = 'horizontal',\n labelBehavior = 'show'\n } = props;\n let domRef = useDOMRef(ref);\n let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);\n\n if (!props['aria-label'] && !props['aria-labelledby']) {\n throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');\n }\n\n return (\n <Provider\n values={[\n [InternalTabsContext, {\n density,\n isDisabled,\n orientation,\n disabledKeys,\n selectedKey: value,\n onSelectionChange: setValue,\n labelBehavior,\n 'aria-label': props['aria-label'],\n 'aria-labelledby': props['aria-labelledby']\n }]\n ]}>\n <CollectionBuilder content={props.children}>\n {collection => (\n <CollapsingTabs\n {...props}\n selectedKey={value}\n onSelectionChange={setValue}\n collection={collection}\n containerRef={domRef} />\n )}\n </CollectionBuilder>\n </Provider>\n );\n});\n\nconst tablist = style({\n display: 'flex',\n gap: {\n orientation: {\n horizontal: {\n density: {\n compact: 24,\n regular: 32\n },\n labelBehavior: {\n hide: {\n density: {\n compact: 16,\n regular: 24\n }\n }\n }\n }\n }\n },\n flexDirection: {\n orientation: {\n vertical: 'column'\n }\n },\n marginEnd: {\n orientation: {\n vertical: 20\n }\n },\n marginStart: {\n orientation: {\n vertical: 12\n }\n },\n flexShrink: 0,\n flexBasis: '0%'\n});\n\nexport function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {\n let {showTabs} = useContext(CollapseContext) ?? {};\n\n if (showTabs) {\n return <TabListInner {...props} />;\n }\n return null;\n}\n\nfunction TabListInner<T extends object>(props: TabListProps<T>) {\n let {density, isDisabled, disabledKeys, orientation, labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy} = useContext(InternalTabsContext) ?? {};\n let state = useContext(TabListStateContext);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);\n let tablistRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n if (tablistRef?.current) {\n let tab: HTMLElement | null = tablistRef.current.querySelector('[role=tab][data-selected=true]');\n\n if (tab != null) {\n setSelectedTab(tab);\n }\n }\n }, [tablistRef, state?.selectedItem?.key]);\n\n return (\n <div\n style={props.UNSAFE_style}\n className={(props.UNSAFE_className || '') + style({position: 'relative'}, getAllowedOverrides())(null, props.styles)}>\n {orientation === 'vertical' &&\n <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}\n <RACTabList\n {...props}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n ref={tablistRef}\n className={renderProps => tablist({...renderProps, labelBehavior, density})} />\n {orientation === 'horizontal' &&\n <TabLine disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} tabList={props} density={density} />}\n </div>\n );\n}\n\ninterface TabLineProps<T extends object> {\n disabledKeys: Iterable<Key> | undefined,\n isDisabled: boolean | undefined,\n selectedTab: HTMLElement | undefined,\n orientation?: Orientation,\n tabList: TabListProps<T>,\n density?: 'compact' | 'regular'\n}\n\nconst selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({\n position: 'absolute',\n backgroundColor: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n height: {\n orientation: {\n horizontal: '[2px]'\n }\n },\n width: {\n orientation: {\n vertical: '[2px]'\n }\n },\n bottom: {\n orientation: {\n horizontal: 0\n }\n },\n borderStyle: 'none',\n borderRadius: 'full',\n transitionDuration: 130,\n transitionTimingFunction: 'in-out'\n});\n\nfunction TabLine<T extends object>(props: TabLineProps<T>) {\n let {\n disabledKeys,\n isDisabled: isTabsDisabled,\n selectedTab,\n orientation,\n tabList,\n density\n } = props;\n let {direction} = useLocale();\n let state = useContext(TabListStateContext);\n\n // We want to add disabled styling to the selection indicator only if all the Tabs are disabled\n let [isDisabled, setIsDisabled] = useState<boolean>(false);\n useEffect(() => {\n let isDisabled = isTabsDisabled || isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set(null));\n setIsDisabled(isDisabled);\n }, [state?.collection, disabledKeys, isTabsDisabled, setIsDisabled]);\n\n let [style, setStyle] = useState<{transform: string | undefined, width: string | undefined, height: string | undefined}>({\n transform: undefined,\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: { transform: string | undefined, width: string | undefined, height: string | undefined } = {\n transform: undefined,\n width: undefined,\n height: undefined\n };\n\n // 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\n let offset = direction === 'rtl' ? -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;\n styleObj.transform = orientation === 'vertical'\n ? `translateY(${selectedTab.offsetTop}px)`\n : `translateX(${offset}px)`;\n\n if (orientation === 'horizontal') {\n styleObj.width = `${selectedTab.offsetWidth}px`;\n } else {\n styleObj.height = `${selectedTab.offsetHeight}px`;\n }\n setStyle(styleObj);\n }\n }, [direction, setStyle, selectedTab, orientation]);\n\n useLayoutEffect(() => {\n onResize();\n }, [onResize, state?.selectedItem?.key, density, direction, orientation, tabList]);\n\n return (\n <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />\n );\n}\n\nconst tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide'}>({\n ...focusRing(),\n display: 'flex',\n color: {\n default: baseColor('neutral-subdued'),\n isSelected: baseColor('neutral'),\n isDisabled: 'disabled',\n forcedColors: {\n isSelected: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n borderRadius: 'sm',\n gap: 'text-to-visual',\n height: {\n density: {\n compact: 32,\n regular: 48\n }\n },\n alignItems: 'center',\n position: 'relative',\n cursor: 'default',\n flexShrink: 0,\n transition: 'default',\n paddingX: {\n labelBehavior: {\n hide: size(6)\n }\n },\n disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst icon = style({\n display: 'block',\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\n\nexport function Tab(props: TabProps): ReactNode {\n let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};\n\n let contentId = useId();\n let ariaLabelledBy = props['aria-labelledby'] || '';\n return (\n <RACTab\n {...props}\n // @ts-ignore\n originalProps={props}\n aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior}, props.styles)}>\n {({\n // @ts-ignore\n isMenu\n }) => {\n if (isMenu) {\n return props.children;\n } else {\n return (\n <Provider\n values={[\n [TextContext, {\n id: contentId,\n styles:\n style({\n order: 1,\n display: {\n labelBehavior: {\n hide: 'none'\n }\n }\n })({labelBehavior})\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: icon\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n );\n }\n }}\n </RACTab>\n );\n}\n\nconst tabPanel = style({\n ...focusRing(),\n marginTop: 4,\n color: 'gray-800',\n flexGrow: 1,\n flexBasis: '0%',\n minHeight: 0,\n minWidth: 0\n}, getAllowedOverrides({height: true}));\n\nexport function TabPanel(props: TabPanelProps): ReactNode | null {\n let {showTabs} = useContext(CollapseContext);\n let {selectedKey} = useContext(InternalTabsContext);\n if (showTabs) {\n return (\n <AriaTabPanel\n {...props}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />\n );\n }\n\n if (props.id !== selectedKey) {\n return null;\n }\n\n return <CollapsedTabPanel {...props} />;\n}\n\nfunction CollapsedTabPanel(props: TabPanelProps) {\n let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;\n let {menuId, valueId} = useContext(CollapseContext);\n let ref = useRef(null);\n let tabIndex = useHasTabbableChild(ref) ? undefined : 0;\n\n return (\n <Group\n {...otherProps}\n ref={ref}\n aria-labelledby={menuId + ' ' + valueId}\n tabIndex={tabIndex}\n style={UNSAFE_style}\n className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />\n );\n}\n\nfunction isAllTabsDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {\n let testKey: Key | null = null;\n if (collection && collection.size > 0) {\n testKey = collection.getFirstKey();\n\n let index = 0;\n while (testKey && index < collection.size) {\n // We have to check if the item in the collection has a key in disabledKeys or has the isDisabled prop set directly on it\n if (!disabledKeys.has(testKey) && !collection.getItem(testKey)?.props?.isDisabled) {\n return false;\n }\n\n testKey = collection.getKeyAfter(testKey);\n index++;\n }\n return true;\n }\n return false;\n}\n\nlet HiddenTabs = function (props: {\n listRef: RefObject<HTMLDivElement | null>,\n items: Array<Node<any>>,\n size?: string,\n density?: 'compact' | 'regular'\n}) {\n let {listRef, items, size, density} = props;\n\n return (\n <div\n // @ts-ignore\n inert={inertValue(true)}\n ref={listRef}\n className={style({\n display: 'inherit',\n flexDirection: 'inherit',\n gap: 'inherit',\n flexWrap: 'inherit',\n position: 'absolute',\n inset: 0,\n visibility: 'hidden',\n overflow: 'hidden',\n opacity: 0\n })}>\n {items.map((item) => {\n // pull off individual props as an allow list, don't want refs or other props getting through\n return (\n <div\n data-hidden-tab\n style={item.props.UNSAFE_style}\n key={item.key}\n className={item.props.className({size, density})}>\n {item.props.children({size, density})}\n </div>\n );\n })}\n </div>\n );\n};\n\nlet TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {\n let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;\n let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);\n let onSelectionChange = useCallback((key: Key | null) => {\n if (key != null) {\n _onSelectionChange?.(key);\n }\n }, [_onSelectionChange]);\n let state = useContext(TabListStateContext);\n let allKeysDisabled = useMemo(() => {\n return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());\n }, [state?.collection, disabledKeys]);\n let labelProps = useLabels({\n id,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy\n });\n\n return (\n <div\n className={style({\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n height: {\n density: {\n compact: 32,\n regular: 48\n }\n }})({density})}>\n <Picker\n id={id}\n valueId={valueId}\n {...labelProps}\n aria-describedby={props['aria-describedby']}\n aria-details={props['aria-details']}\n isDisabled={isDisabled || allKeysDisabled}\n density={density!}\n labelBehavior={labelBehavior}\n items={items}\n disabledKeys={disabledKeys}\n selectedKey={selectedKey}\n onSelectionChange={onSelectionChange}>\n {(item: Node<any>) => {\n return (\n <PickerItem\n {...item.props.originalProps}\n isDisabled={isDisabled || allKeysDisabled}\n key={item.key}>\n {item.props.children({density, isMenu: true})}\n </PickerItem>\n );\n }}\n </Picker>\n </div>\n );\n};\n\nlet CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {\n let {density = 'regular', orientation = 'horizontal', labelBehavior = 'show', onSelectionChange} = props;\n let [showItems, _setShowItems] = useState(true);\n showItems = orientation === 'vertical' ? true : showItems;\n let setShowItems = useCallback((value: boolean) => {\n if (orientation === 'vertical') {\n // if orientation is vertical, we always show the items\n _setShowItems(true);\n } else {\n _setShowItems(value);\n }\n }, [orientation]);\n\n let {direction} = useLocale();\n\n let children = useMemo(() => [...collection], [collection]);\n\n let listRef = useRef<HTMLDivElement | null>(null);\n let updateOverflow = useEffectEvent(() => {\n if (orientation === 'vertical' || !listRef.current || !containerRef?.current) {\n return;\n }\n let container = listRef.current;\n let containerRect = container.getBoundingClientRect();\n let tabs = container.querySelectorAll('[data-hidden-tab]');\n let lastTab = tabs[tabs.length - 1];\n let lastTabRect = lastTab.getBoundingClientRect();\n if (direction === 'ltr') {\n setShowItems?.(lastTabRect.right <= containerRect.right);\n } else {\n setShowItems?.(lastTabRect.left >= containerRect.left);\n }\n });\n\n useResizeObserver({ref: containerRef, onResize: updateOverflow});\n\n useLayoutEffect(() => {\n if (collection.size > 0) {\n queueMicrotask(updateOverflow);\n }\n }, [collection.size, updateOverflow]);\n\n // start with null so that the first render won't have a flicker\n let prevOrientation = useRef<Orientation | null>(null);\n useLayoutEffect(() => {\n if (collection.size > 0 && prevOrientation.current !== orientation) {\n updateOverflow();\n }\n prevOrientation.current = orientation;\n }, [collection.size, updateOverflow, orientation]);\n\n useEffect(() => {\n // Recalculate visible tags when fonts are loaded.\n document.fonts?.ready.then(() => updateOverflow());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n let menuId = useId();\n let valueId = useId();\n\n let contents: ReactNode;\n if (showItems) {\n contents = (\n <RACTabs\n {...props}\n style={{display: 'contents'}}>\n {props.children}\n </RACTabs>\n );\n } else {\n contents = (\n <>\n <TabsMenu\n id={menuId}\n valueId={valueId}\n items={children}\n onSelectionChange={onSelectionChange}\n aria-label={props['aria-label']}\n aria-describedby={props['aria-labelledby']} />\n <CollapseContext.Provider value={{showTabs: false, menuId, valueId}}>\n {props.children}\n </CollapseContext.Provider>\n </>\n );\n }\n\n return (\n <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>\n <div className={tablist({orientation, labelBehavior, density})}>\n <HiddenTabs items={children} density={density} listRef={listRef} />\n </div>\n <CollapseContext.Provider value={{showTabs: true, menuId, valueId}}>\n {contents}\n </CollapseContext.Provider>\n </div>\n );\n};\n"],"names":[],"version":3,"file":"Tabs.mjs.map"}
|