@react-spectrum/s2 0.9.0 → 0.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/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 +13 -13
- package/dist/Image.css +14 -14
- package/dist/Image.mjs +13 -13
- 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 -114
- package/dist/NumberField.css +103 -103
- package/dist/NumberField.mjs +114 -114
- 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 +2 -2
- package/icons/Skeleton.cjs.map +1 -1
- package/icons/Skeleton.css +6 -6
- package/icons/Skeleton.mjs +2 -2
- 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/Picker.tsx +3 -2
- 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.cjs
CHANGED
|
@@ -65,26 +65,26 @@ const $b27519d6a701105b$var$tabs = function anonymous(props, overrides) {
|
|
|
65
65
|
if (p[1] === "_v") flexShrink = true;
|
|
66
66
|
rules += p[0];
|
|
67
67
|
}
|
|
68
|
-
if (!position) rules += '
|
|
69
|
-
rules += '
|
|
70
|
-
if (!flexShrink) rules += '
|
|
71
|
-
rules += '
|
|
72
|
-
rules += '
|
|
73
|
-
rules += '
|
|
74
|
-
rules += '
|
|
75
|
-
rules += '
|
|
76
|
-
rules += '
|
|
77
|
-
rules += '
|
|
78
|
-
rules += '
|
|
79
|
-
rules += '
|
|
80
|
-
rules += '
|
|
81
|
-
rules += '
|
|
82
|
-
rules += '
|
|
83
|
-
rules += '
|
|
84
|
-
rules += '
|
|
85
|
-
rules += '
|
|
86
|
-
rules += '
|
|
87
|
-
if (props.orientation === "horizontal") rules += '
|
|
68
|
+
if (!position) rules += ' _Pc91';
|
|
69
|
+
rules += ' sd91';
|
|
70
|
+
if (!flexShrink) rules += ' _va91';
|
|
71
|
+
rules += ' ug91';
|
|
72
|
+
rules += ' uch91';
|
|
73
|
+
rules += ' udi91';
|
|
74
|
+
rules += ' uea91';
|
|
75
|
+
rules += ' ugb91';
|
|
76
|
+
rules += ' uhd91';
|
|
77
|
+
rules += ' uje91';
|
|
78
|
+
rules += ' uic91';
|
|
79
|
+
rules += ' vd91';
|
|
80
|
+
rules += ' vsf91';
|
|
81
|
+
rules += ' wb91';
|
|
82
|
+
rules += ' xb91';
|
|
83
|
+
rules += ' _xa91';
|
|
84
|
+
rules += ' _Fa91';
|
|
85
|
+
rules += ' _Ffb91';
|
|
86
|
+
rules += ' pt91';
|
|
87
|
+
if (props.orientation === "horizontal") rules += ' _ta91';
|
|
88
88
|
return rules;
|
|
89
89
|
};
|
|
90
90
|
const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react.forwardRef)(function Tabs(props, ref) {
|
|
@@ -124,26 +124,26 @@ const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react
|
|
|
124
124
|
});
|
|
125
125
|
const $b27519d6a701105b$var$tablist = function anonymous(props) {
|
|
126
126
|
let rules = " ";
|
|
127
|
-
rules += '
|
|
127
|
+
rules += ' sd91';
|
|
128
128
|
if (props.orientation === "horizontal") {
|
|
129
129
|
if (props.labelBehavior === "hide") {
|
|
130
|
-
if (props.density === "regular") rules += '
|
|
131
|
-
else if (props.density === "compact") rules += '
|
|
132
|
-
} else if (props.density === "regular") rules += '
|
|
133
|
-
else if (props.density === "compact") rules += '
|
|
130
|
+
if (props.density === "regular") rules += ' Uj91';
|
|
131
|
+
else if (props.density === "compact") rules += ' Ul91';
|
|
132
|
+
} else if (props.density === "regular") rules += ' Up91';
|
|
133
|
+
else if (props.density === "compact") rules += ' Uj91';
|
|
134
134
|
}
|
|
135
135
|
if (props.orientation === "horizontal") {
|
|
136
136
|
if (props.labelBehavior === "hide") {
|
|
137
|
-
if (props.density === "regular") rules += '
|
|
138
|
-
else if (props.density === "compact") rules += '
|
|
139
|
-
} else if (props.density === "regular") rules += '
|
|
140
|
-
else if (props.density === "compact") rules += '
|
|
137
|
+
if (props.density === "regular") rules += ' qj91';
|
|
138
|
+
else if (props.density === "compact") rules += ' ql91';
|
|
139
|
+
} else if (props.density === "regular") rules += ' qp91';
|
|
140
|
+
else if (props.density === "compact") rules += ' qj91';
|
|
141
141
|
}
|
|
142
|
-
if (props.orientation === "vertical") rules += '
|
|
143
|
-
if (props.orientation === "vertical") rules += '
|
|
144
|
-
if (props.orientation === "vertical") rules += '
|
|
145
|
-
rules += '
|
|
146
|
-
rules += '
|
|
142
|
+
if (props.orientation === "vertical") rules += ' _ta91';
|
|
143
|
+
if (props.orientation === "vertical") rules += ' Hz91';
|
|
144
|
+
if (props.orientation === "vertical") rules += ' Ix91';
|
|
145
|
+
rules += ' _va91';
|
|
146
|
+
rules += ' _sa91';
|
|
147
147
|
return rules;
|
|
148
148
|
};
|
|
149
149
|
function $b27519d6a701105b$export$e51a686c67fdaa2d(props) {
|
|
@@ -177,7 +177,7 @@ function $b27519d6a701105b$var$TabListInner(props1) {
|
|
|
177
177
|
if (p[1] === "_P") position = true;
|
|
178
178
|
rules += p[0];
|
|
179
179
|
}
|
|
180
|
-
if (!position) rules += '
|
|
180
|
+
if (!position) rules += ' _Pc91';
|
|
181
181
|
return rules;
|
|
182
182
|
}(null, props1.styles),
|
|
183
183
|
children: [
|
|
@@ -186,6 +186,7 @@ function $b27519d6a701105b$var$TabListInner(props1) {
|
|
|
186
186
|
isDisabled: isDisabled,
|
|
187
187
|
selectedTab: selectedTab,
|
|
188
188
|
orientation: orientation,
|
|
189
|
+
tabList: props1,
|
|
189
190
|
density: density
|
|
190
191
|
}),
|
|
191
192
|
/*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.TabList), {
|
|
@@ -204,6 +205,7 @@ function $b27519d6a701105b$var$TabListInner(props1) {
|
|
|
204
205
|
isDisabled: isDisabled,
|
|
205
206
|
selectedTab: selectedTab,
|
|
206
207
|
orientation: orientation,
|
|
208
|
+
tabList: props1,
|
|
207
209
|
density: density
|
|
208
210
|
})
|
|
209
211
|
]
|
|
@@ -211,25 +213,25 @@ function $b27519d6a701105b$var$TabListInner(props1) {
|
|
|
211
213
|
}
|
|
212
214
|
const $b27519d6a701105b$var$selectedIndicator = function anonymous(props) {
|
|
213
215
|
let rules = " ";
|
|
214
|
-
rules += '
|
|
215
|
-
if (props.isDisabled) rules += '
|
|
216
|
-
else rules += '
|
|
217
|
-
if (props.isDisabled) rules += '
|
|
218
|
-
else rules += '
|
|
219
|
-
if (props.orientation === "horizontal") rules += '
|
|
220
|
-
if (props.orientation === "vertical") rules += '
|
|
221
|
-
if (props.orientation === "horizontal") rules += '
|
|
222
|
-
rules += '
|
|
223
|
-
rules += '
|
|
224
|
-
rules += '
|
|
225
|
-
rules += '
|
|
226
|
-
rules += '
|
|
227
|
-
rules += '
|
|
228
|
-
rules += '
|
|
216
|
+
rules += ' _Pa91';
|
|
217
|
+
if (props.isDisabled) rules += ' gH91';
|
|
218
|
+
else rules += ' g091';
|
|
219
|
+
if (props.isDisabled) rules += ' gld91';
|
|
220
|
+
else rules += ' gle91';
|
|
221
|
+
if (props.orientation === "horizontal") rules += ' FLvNfn91';
|
|
222
|
+
if (props.orientation === "vertical") rules += ' ZLvNfn91';
|
|
223
|
+
if (props.orientation === "horizontal") rules += ' _lr91';
|
|
224
|
+
rules += ' _je91';
|
|
225
|
+
rules += ' og91';
|
|
226
|
+
rules += ' ng91';
|
|
227
|
+
rules += ' kg91';
|
|
228
|
+
rules += ' jg91';
|
|
229
|
+
rules += ' Xa91';
|
|
230
|
+
rules += ' _2b91';
|
|
229
231
|
return rules;
|
|
230
232
|
};
|
|
231
233
|
function $b27519d6a701105b$var$TabLine(props) {
|
|
232
|
-
let { disabledKeys: disabledKeys, isDisabled: isTabsDisabled, selectedTab: selectedTab, orientation: orientation, density: density } = props;
|
|
234
|
+
let { disabledKeys: disabledKeys, isDisabled: isTabsDisabled, selectedTab: selectedTab, orientation: orientation, tabList: tabList, density: density } = props;
|
|
233
235
|
let { direction: direction } = (0, $5oxdw$reactariai18n.useLocale)();
|
|
234
236
|
let state = (0, $5oxdw$react.useContext)((0, $5oxdw$reactariacomponents.TabListStateContext));
|
|
235
237
|
// We want to add disabled styling to the selection indicator only if all the Tabs are disabled
|
|
@@ -275,7 +277,8 @@ function $b27519d6a701105b$var$TabLine(props) {
|
|
|
275
277
|
state?.selectedItem?.key,
|
|
276
278
|
density,
|
|
277
279
|
direction,
|
|
278
|
-
orientation
|
|
280
|
+
orientation,
|
|
281
|
+
tabList
|
|
279
282
|
]);
|
|
280
283
|
return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
|
|
281
284
|
style: {
|
|
@@ -297,49 +300,49 @@ const $b27519d6a701105b$var$tab = function anonymous(props, overrides) {
|
|
|
297
300
|
if (p[1] === "_v") flexShrink = true;
|
|
298
301
|
rules += p[0];
|
|
299
302
|
}
|
|
300
|
-
if (props.isFocusVisible) rules += '
|
|
301
|
-
else rules += '
|
|
302
|
-
rules += '
|
|
303
|
-
rules += '
|
|
304
|
-
rules += '
|
|
305
|
-
rules += '
|
|
306
|
-
if (props.isDisabled) rules += '
|
|
303
|
+
if (props.isFocusVisible) rules += ' _Lf91';
|
|
304
|
+
else rules += ' _Le91';
|
|
305
|
+
rules += ' Oh91';
|
|
306
|
+
rules += ' _Mc91';
|
|
307
|
+
rules += ' _Kd91';
|
|
308
|
+
rules += ' sd91';
|
|
309
|
+
if (props.isDisabled) rules += ' pp91';
|
|
307
310
|
else if (props.isSelected) {
|
|
308
|
-
if (props.isPressed) rules += '
|
|
309
|
-
else if (props.isFocusVisible) rules += '
|
|
310
|
-
else if (props.isHovered) rules += '
|
|
311
|
-
else rules += '
|
|
311
|
+
if (props.isPressed) rules += ' po91';
|
|
312
|
+
else if (props.isFocusVisible) rules += ' po91';
|
|
313
|
+
else if (props.isHovered) rules += ' po91';
|
|
314
|
+
else rules += ' pt91';
|
|
312
315
|
} else {
|
|
313
|
-
if (props.isPressed) rules += '
|
|
314
|
-
else if (props.isFocusVisible) rules += '
|
|
315
|
-
else if (props.isHovered) rules += '
|
|
316
|
-
else rules += '
|
|
316
|
+
if (props.isPressed) rules += ' pt91';
|
|
317
|
+
else if (props.isFocusVisible) rules += ' pt91';
|
|
318
|
+
else if (props.isHovered) rules += ' pt91';
|
|
319
|
+
else rules += ' pv91';
|
|
317
320
|
}
|
|
318
|
-
if (props.isDisabled) rules += '
|
|
319
|
-
else if (props.isSelected) rules += '
|
|
320
|
-
rules += '
|
|
321
|
-
rules += '
|
|
322
|
-
rules += '
|
|
323
|
-
rules += '
|
|
324
|
-
rules += '
|
|
325
|
-
rules += '
|
|
326
|
-
rules += '
|
|
327
|
-
rules += '
|
|
328
|
-
if (props.density === "regular") rules += '
|
|
329
|
-
else if (props.density === "compact") rules += '
|
|
330
|
-
rules += '
|
|
331
|
-
if (!position) rules += '
|
|
332
|
-
rules += '
|
|
333
|
-
if (!flexShrink) rules += '
|
|
334
|
-
rules += '
|
|
335
|
-
rules += '
|
|
336
|
-
rules += '
|
|
337
|
-
if (props.labelBehavior === "hide") rules += '
|
|
338
|
-
if (props.labelBehavior === "hide") rules += '
|
|
339
|
-
rules += '
|
|
321
|
+
if (props.isDisabled) rules += ' plc91';
|
|
322
|
+
else if (props.isSelected) rules += ' pld91';
|
|
323
|
+
rules += ' oa91';
|
|
324
|
+
rules += ' na91';
|
|
325
|
+
rules += ' ka91';
|
|
326
|
+
rules += ' ja91';
|
|
327
|
+
rules += ' Uc91';
|
|
328
|
+
rules += ' Usd91';
|
|
329
|
+
rules += ' qc91';
|
|
330
|
+
rules += ' qsd91';
|
|
331
|
+
if (props.density === "regular") rules += ' Fz91';
|
|
332
|
+
else if (props.density === "compact") rules += ' Fx91';
|
|
333
|
+
rules += ' eb91';
|
|
334
|
+
if (!position) rules += ' _Pc91';
|
|
335
|
+
rules += ' ri91';
|
|
336
|
+
if (!flexShrink) rules += ' _va91';
|
|
337
|
+
rules += ' Yd91';
|
|
338
|
+
rules += ' Xb91';
|
|
339
|
+
rules += ' _2b91';
|
|
340
|
+
if (props.labelBehavior === "hide") rules += ' SssxDec91';
|
|
341
|
+
if (props.labelBehavior === "hide") rules += ' RssxDec91';
|
|
342
|
+
rules += ' __ca91';
|
|
340
343
|
return rules;
|
|
341
344
|
};
|
|
342
|
-
const $b27519d6a701105b$var$icon = "
|
|
345
|
+
const $b27519d6a701105b$var$icon = " sb91 _va91 -_8sjo0b-t5ZbAob91";
|
|
343
346
|
function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
|
|
344
347
|
let { density: density, labelBehavior: labelBehavior } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
|
|
345
348
|
let contentId = (0, $5oxdw$reactariautils.useId)();
|
|
@@ -366,8 +369,8 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
|
|
|
366
369
|
id: contentId,
|
|
367
370
|
styles: function anonymous(props) {
|
|
368
371
|
let rules = " ";
|
|
369
|
-
rules += '
|
|
370
|
-
if (props.labelBehavior === "hide") rules += '
|
|
372
|
+
rules += ' _Jb91';
|
|
373
|
+
if (props.labelBehavior === "hide") rules += ' sk91';
|
|
371
374
|
return rules;
|
|
372
375
|
}({
|
|
373
376
|
labelBehavior: labelBehavior
|
|
@@ -379,7 +382,7 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
|
|
|
379
382
|
{
|
|
380
383
|
render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
|
|
381
384
|
slot: 'icon',
|
|
382
|
-
styles: "
|
|
385
|
+
styles: " _Ja91"
|
|
383
386
|
}),
|
|
384
387
|
styles: $b27519d6a701105b$var$icon
|
|
385
388
|
}
|
|
@@ -408,17 +411,17 @@ const $b27519d6a701105b$var$tabPanel = function anonymous(props, overrides) {
|
|
|
408
411
|
if (p[1] === "N") minWidth = true;
|
|
409
412
|
rules += p[0];
|
|
410
413
|
}
|
|
411
|
-
if (props.isFocusVisible) rules += '
|
|
412
|
-
else rules += '
|
|
413
|
-
rules += '
|
|
414
|
-
rules += '
|
|
415
|
-
rules += '
|
|
416
|
-
if (!marginTop) rules += '
|
|
417
|
-
rules += '
|
|
418
|
-
if (!flexGrow) rules += '
|
|
419
|
-
if (!flexBasis) rules += '
|
|
420
|
-
if (!minHeight) rules += '
|
|
421
|
-
if (!minWidth) rules += '
|
|
414
|
+
if (props.isFocusVisible) rules += ' _Lf91';
|
|
415
|
+
else rules += ' _Le91';
|
|
416
|
+
rules += ' Oh91';
|
|
417
|
+
rules += ' _Mc91';
|
|
418
|
+
rules += ' _Kd91';
|
|
419
|
+
if (!marginTop) rules += ' Js91';
|
|
420
|
+
rules += ' pt91';
|
|
421
|
+
if (!flexGrow) rules += ' _ub91';
|
|
422
|
+
if (!flexBasis) rules += ' _sa91';
|
|
423
|
+
if (!minHeight) rules += ' Ma91';
|
|
424
|
+
if (!minWidth) rules += ' Na91';
|
|
422
425
|
return rules;
|
|
423
426
|
};
|
|
424
427
|
function $b27519d6a701105b$export$3d96ec278d3efce4(props) {
|
|
@@ -469,7 +472,7 @@ let $b27519d6a701105b$var$HiddenTabs = function(props) {
|
|
|
469
472
|
// @ts-ignore
|
|
470
473
|
inert: (0, $5oxdw$reactariautils.inertValue)(true),
|
|
471
474
|
ref: listRef,
|
|
472
|
-
className: "
|
|
475
|
+
className: " s40ub4c91 _t40ub4c91 U40ub4c91 q40ub4c91 _w40ub4c91 _Pa91 Wr91 _lr91 _Ar91 _zr91 _6b91 _Nc91 Pc91 _Ia91",
|
|
473
476
|
children: items.map((item)=>{
|
|
474
477
|
// pull off individual props as an allow list, don't want refs or other props getting through
|
|
475
478
|
return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
|
|
@@ -510,11 +513,11 @@ let $b27519d6a701105b$var$TabsMenu = (props1)=>{
|
|
|
510
513
|
return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
|
|
511
514
|
className: function anonymous(props) {
|
|
512
515
|
let rules = " ";
|
|
513
|
-
rules += '
|
|
514
|
-
rules += '
|
|
515
|
-
rules += '
|
|
516
|
-
if (props.density === "regular") rules += '
|
|
517
|
-
else if (props.density === "compact") rules += '
|
|
516
|
+
rules += ' sd91';
|
|
517
|
+
rules += ' _va91';
|
|
518
|
+
rules += ' eb91';
|
|
519
|
+
if (props.density === "regular") rules += ' Fz91';
|
|
520
|
+
else if (props.density === "compact") rules += ' Fx91';
|
|
518
521
|
return rules;
|
|
519
522
|
}({
|
|
520
523
|
density: density
|
package/dist/Tabs.cjs.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.cjs.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.cjs.map"}
|