@react-spectrum/s2 3.0.0-nightly-b0f156972-241202 → 3.0.0-nightly-e94e36431-241203

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