@react-spectrum/tabs 3.7.3-nightly.4149 → 3.7.3-nightly.4157

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/module.js CHANGED
@@ -48,72 +48,84 @@ function $parcel$export(e, n, v, s) {
48
48
 
49
49
  var $32d597b82a7aad64$exports = {};
50
50
 
51
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel", () => $32d597b82a7aad64$export$34f1a65c57bb7bb, (v) => $32d597b82a7aad64$export$34f1a65c57bb7bb = v);
52
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--horizontal", () => $32d597b82a7aad64$export$778fb839eaa0528c, (v) => $32d597b82a7aad64$export$778fb839eaa0528c = v);
53
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--vertical", () => $32d597b82a7aad64$export$9a6e2fb72c648072, (v) => $32d597b82a7aad64$export$9a6e2fb72c648072 = v);
54
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs", () => $32d597b82a7aad64$export$35c105c0d9c8e56f, (v) => $32d597b82a7aad64$export$35c105c0d9c8e56f = v);
55
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-item", () => $32d597b82a7aad64$export$123e4c01a5440a3e, (v) => $32d597b82a7aad64$export$123e4c01a5440a3e = v);
51
+ $parcel$export($32d597b82a7aad64$exports, "focus-ring", () => $32d597b82a7aad64$export$f39a09f249340e2a, (v) => $32d597b82a7aad64$export$f39a09f249340e2a = v);
52
+ $parcel$export($32d597b82a7aad64$exports, "i18nFontFamily", () => $32d597b82a7aad64$export$8c4ee2c50c22c514, (v) => $32d597b82a7aad64$export$8c4ee2c50c22c514 = v);
56
53
  $parcel$export($32d597b82a7aad64$exports, "is-disabled", () => $32d597b82a7aad64$export$d35bc1e505d1ebbf, (v) => $32d597b82a7aad64$export$d35bc1e505d1ebbf = v);
54
+ $parcel$export($32d597b82a7aad64$exports, "is-hovered", () => $32d597b82a7aad64$export$b8813cd5d7824ce7, (v) => $32d597b82a7aad64$export$b8813cd5d7824ce7 = v);
55
+ $parcel$export($32d597b82a7aad64$exports, "is-selected", () => $32d597b82a7aad64$export$1e0fb04f31d3c22a, (v) => $32d597b82a7aad64$export$1e0fb04f31d3c22a = v);
56
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing-ring", () => $32d597b82a7aad64$export$4109102f950813a6, (v) => $32d597b82a7aad64$export$4109102f950813a6 = v);
57
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing", () => $32d597b82a7aad64$export$24c7f46a6e3605dd, (v) => $32d597b82a7aad64$export$24c7f46a6e3605dd = v);
58
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing--quiet", () => $32d597b82a7aad64$export$2927016961429360, (v) => $32d597b82a7aad64$export$2927016961429360 = v);
57
59
  $parcel$export($32d597b82a7aad64$exports, "spectrum-Icon", () => $32d597b82a7aad64$export$d374b04f30360026, (v) => $32d597b82a7aad64$export$d374b04f30360026 = v);
58
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-itemLabel", () => $32d597b82a7aad64$export$1f253edac4b98526, (v) => $32d597b82a7aad64$export$1f253edac4b98526 = v);
59
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-selectionIndicator", () => $32d597b82a7aad64$export$a115f9117a19563e, (v) => $32d597b82a7aad64$export$a115f9117a19563e = v);
60
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--horizontal", () => $32d597b82a7aad64$export$229f1ac4d3d38f0e, (v) => $32d597b82a7aad64$export$229f1ac4d3d38f0e = v);
60
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs", () => $32d597b82a7aad64$export$35c105c0d9c8e56f, (v) => $32d597b82a7aad64$export$35c105c0d9c8e56f = v);
61
61
  $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--compact", () => $32d597b82a7aad64$export$e15c78184ee03abe, (v) => $32d597b82a7aad64$export$e15c78184ee03abe = v);
62
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--emphasized", () => $32d597b82a7aad64$export$87b15021e28e067a, (v) => $32d597b82a7aad64$export$87b15021e28e067a = v);
63
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--horizontal", () => $32d597b82a7aad64$export$229f1ac4d3d38f0e, (v) => $32d597b82a7aad64$export$229f1ac4d3d38f0e = v);
62
64
  $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--isCollapsed", () => $32d597b82a7aad64$export$ea514cd060922d6b, (v) => $32d597b82a7aad64$export$ea514cd060922d6b = v);
63
65
  $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--quiet", () => $32d597b82a7aad64$export$831e830d5828d42b, (v) => $32d597b82a7aad64$export$831e830d5828d42b = v);
64
66
  $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--vertical", () => $32d597b82a7aad64$export$e415005be3957065, (v) => $32d597b82a7aad64$export$e415005be3957065 = v);
67
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-item", () => $32d597b82a7aad64$export$123e4c01a5440a3e, (v) => $32d597b82a7aad64$export$123e4c01a5440a3e = v);
68
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-itemLabel", () => $32d597b82a7aad64$export$1f253edac4b98526, (v) => $32d597b82a7aad64$export$1f253edac4b98526 = v);
69
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-picker", () => $32d597b82a7aad64$export$12dc6b25c6dddfc1, (v) => $32d597b82a7aad64$export$12dc6b25c6dddfc1 = v);
70
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-selectionIndicator", () => $32d597b82a7aad64$export$a115f9117a19563e, (v) => $32d597b82a7aad64$export$a115f9117a19563e = v);
71
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel", () => $32d597b82a7aad64$export$34f1a65c57bb7bb, (v) => $32d597b82a7aad64$export$34f1a65c57bb7bb = v);
72
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--horizontal", () => $32d597b82a7aad64$export$778fb839eaa0528c, (v) => $32d597b82a7aad64$export$778fb839eaa0528c = v);
73
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--vertical", () => $32d597b82a7aad64$export$9a6e2fb72c648072, (v) => $32d597b82a7aad64$export$9a6e2fb72c648072 = v);
65
74
  $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-collapseWrapper", () => $32d597b82a7aad64$export$e09869956b4c96f2, (v) => $32d597b82a7aad64$export$e09869956b4c96f2 = v);
66
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-tabs", () => $32d597b82a7aad64$export$4a157a691c854e23, (v) => $32d597b82a7aad64$export$4a157a691c854e23 = v);
67
75
  $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-tabpanel", () => $32d597b82a7aad64$export$acb5da0970288266, (v) => $32d597b82a7aad64$export$acb5da0970288266 = v);
68
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-picker", () => $32d597b82a7aad64$export$12dc6b25c6dddfc1, (v) => $32d597b82a7aad64$export$12dc6b25c6dddfc1 = v);
69
- $parcel$export($32d597b82a7aad64$exports, "focus-ring", () => $32d597b82a7aad64$export$f39a09f249340e2a, (v) => $32d597b82a7aad64$export$f39a09f249340e2a = v);
70
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--emphasized", () => $32d597b82a7aad64$export$87b15021e28e067a, (v) => $32d597b82a7aad64$export$87b15021e28e067a = v);
71
- $parcel$export($32d597b82a7aad64$exports, "is-hovered", () => $32d597b82a7aad64$export$b8813cd5d7824ce7, (v) => $32d597b82a7aad64$export$b8813cd5d7824ce7 = v);
72
- $parcel$export($32d597b82a7aad64$exports, "is-selected", () => $32d597b82a7aad64$export$1e0fb04f31d3c22a, (v) => $32d597b82a7aad64$export$1e0fb04f31d3c22a = v);
73
- var $32d597b82a7aad64$export$34f1a65c57bb7bb;
74
- var $32d597b82a7aad64$export$778fb839eaa0528c;
75
- var $32d597b82a7aad64$export$9a6e2fb72c648072;
76
- var $32d597b82a7aad64$export$35c105c0d9c8e56f;
77
- var $32d597b82a7aad64$export$123e4c01a5440a3e;
76
+ $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-tabs", () => $32d597b82a7aad64$export$4a157a691c854e23, (v) => $32d597b82a7aad64$export$4a157a691c854e23 = v);
77
+ var $32d597b82a7aad64$export$f39a09f249340e2a;
78
+ var $32d597b82a7aad64$export$8c4ee2c50c22c514;
78
79
  var $32d597b82a7aad64$export$d35bc1e505d1ebbf;
80
+ var $32d597b82a7aad64$export$b8813cd5d7824ce7;
81
+ var $32d597b82a7aad64$export$1e0fb04f31d3c22a;
82
+ var $32d597b82a7aad64$export$4109102f950813a6;
83
+ var $32d597b82a7aad64$export$24c7f46a6e3605dd;
84
+ var $32d597b82a7aad64$export$2927016961429360;
79
85
  var $32d597b82a7aad64$export$d374b04f30360026;
80
- var $32d597b82a7aad64$export$1f253edac4b98526;
81
- var $32d597b82a7aad64$export$a115f9117a19563e;
82
- var $32d597b82a7aad64$export$229f1ac4d3d38f0e;
86
+ var $32d597b82a7aad64$export$35c105c0d9c8e56f;
83
87
  var $32d597b82a7aad64$export$e15c78184ee03abe;
88
+ var $32d597b82a7aad64$export$87b15021e28e067a;
89
+ var $32d597b82a7aad64$export$229f1ac4d3d38f0e;
84
90
  var $32d597b82a7aad64$export$ea514cd060922d6b;
85
91
  var $32d597b82a7aad64$export$831e830d5828d42b;
86
92
  var $32d597b82a7aad64$export$e415005be3957065;
93
+ var $32d597b82a7aad64$export$123e4c01a5440a3e;
94
+ var $32d597b82a7aad64$export$1f253edac4b98526;
95
+ var $32d597b82a7aad64$export$12dc6b25c6dddfc1;
96
+ var $32d597b82a7aad64$export$a115f9117a19563e;
97
+ var $32d597b82a7aad64$export$34f1a65c57bb7bb;
98
+ var $32d597b82a7aad64$export$778fb839eaa0528c;
99
+ var $32d597b82a7aad64$export$9a6e2fb72c648072;
87
100
  var $32d597b82a7aad64$export$e09869956b4c96f2;
88
- var $32d597b82a7aad64$export$4a157a691c854e23;
89
101
  var $32d597b82a7aad64$export$acb5da0970288266;
90
- var $32d597b82a7aad64$export$12dc6b25c6dddfc1;
91
- var $32d597b82a7aad64$export$f39a09f249340e2a;
92
- var $32d597b82a7aad64$export$87b15021e28e067a;
93
- var $32d597b82a7aad64$export$b8813cd5d7824ce7;
94
- var $32d597b82a7aad64$export$1e0fb04f31d3c22a;
95
- $32d597b82a7aad64$export$34f1a65c57bb7bb = "spectrum-TabsPanel_3e140b";
96
- $32d597b82a7aad64$export$778fb839eaa0528c = "spectrum-TabsPanel--horizontal_3e140b";
97
- $32d597b82a7aad64$export$9a6e2fb72c648072 = "spectrum-TabsPanel--vertical_3e140b";
98
- $32d597b82a7aad64$export$35c105c0d9c8e56f = "spectrum-Tabs_3e140b";
99
- $32d597b82a7aad64$export$123e4c01a5440a3e = "spectrum-Tabs-item_3e140b";
100
- $32d597b82a7aad64$export$d35bc1e505d1ebbf = "is-disabled_3e140b";
101
- $32d597b82a7aad64$export$d374b04f30360026 = "spectrum-Icon_3e140b";
102
- $32d597b82a7aad64$export$1f253edac4b98526 = "spectrum-Tabs-itemLabel_3e140b";
103
- $32d597b82a7aad64$export$a115f9117a19563e = "spectrum-Tabs-selectionIndicator_3e140b";
104
- $32d597b82a7aad64$export$229f1ac4d3d38f0e = "spectrum-Tabs--horizontal_3e140b";
105
- $32d597b82a7aad64$export$e15c78184ee03abe = "spectrum-Tabs--compact_3e140b";
106
- $32d597b82a7aad64$export$ea514cd060922d6b = "spectrum-Tabs--isCollapsed_3e140b";
107
- $32d597b82a7aad64$export$831e830d5828d42b = "spectrum-Tabs--quiet_3e140b";
108
- $32d597b82a7aad64$export$e415005be3957065 = "spectrum-Tabs--vertical_3e140b";
109
- $32d597b82a7aad64$export$e09869956b4c96f2 = "spectrum-TabsPanel-collapseWrapper_3e140b";
110
- $32d597b82a7aad64$export$4a157a691c854e23 = "spectrum-TabsPanel-tabs_3e140b";
111
- $32d597b82a7aad64$export$acb5da0970288266 = "spectrum-TabsPanel-tabpanel_3e140b";
112
- $32d597b82a7aad64$export$12dc6b25c6dddfc1 = "spectrum-Tabs-picker_3e140b";
113
- $32d597b82a7aad64$export$f39a09f249340e2a = "focus-ring_3e140b";
114
- $32d597b82a7aad64$export$87b15021e28e067a = "spectrum-Tabs--emphasized_3e140b";
115
- $32d597b82a7aad64$export$b8813cd5d7824ce7 = "is-hovered_3e140b";
116
- $32d597b82a7aad64$export$1e0fb04f31d3c22a = "is-selected_3e140b";
102
+ var $32d597b82a7aad64$export$4a157a691c854e23;
103
+ $32d597b82a7aad64$export$f39a09f249340e2a = `FzVSrW_focus-ring`;
104
+ $32d597b82a7aad64$export$8c4ee2c50c22c514 = `FzVSrW_i18nFontFamily`;
105
+ $32d597b82a7aad64$export$d35bc1e505d1ebbf = `FzVSrW_is-disabled`;
106
+ $32d597b82a7aad64$export$b8813cd5d7824ce7 = `FzVSrW_is-hovered`;
107
+ $32d597b82a7aad64$export$1e0fb04f31d3c22a = `FzVSrW_is-selected`;
108
+ $32d597b82a7aad64$export$4109102f950813a6 = `FzVSrW_spectrum-FocusRing-ring`;
109
+ $32d597b82a7aad64$export$24c7f46a6e3605dd = `FzVSrW_spectrum-FocusRing ${$32d597b82a7aad64$export$4109102f950813a6}`;
110
+ $32d597b82a7aad64$export$2927016961429360 = `FzVSrW_spectrum-FocusRing--quiet`;
111
+ $32d597b82a7aad64$export$d374b04f30360026 = `FzVSrW_spectrum-Icon`;
112
+ $32d597b82a7aad64$export$35c105c0d9c8e56f = `FzVSrW_spectrum-Tabs`;
113
+ $32d597b82a7aad64$export$e15c78184ee03abe = `FzVSrW_spectrum-Tabs--compact`;
114
+ $32d597b82a7aad64$export$87b15021e28e067a = `FzVSrW_spectrum-Tabs--emphasized`;
115
+ $32d597b82a7aad64$export$229f1ac4d3d38f0e = `FzVSrW_spectrum-Tabs--horizontal`;
116
+ $32d597b82a7aad64$export$ea514cd060922d6b = `FzVSrW_spectrum-Tabs--isCollapsed`;
117
+ $32d597b82a7aad64$export$831e830d5828d42b = `FzVSrW_spectrum-Tabs--quiet`;
118
+ $32d597b82a7aad64$export$e415005be3957065 = `FzVSrW_spectrum-Tabs--vertical`;
119
+ $32d597b82a7aad64$export$123e4c01a5440a3e = `FzVSrW_spectrum-Tabs-item`;
120
+ $32d597b82a7aad64$export$1f253edac4b98526 = `FzVSrW_spectrum-Tabs-itemLabel`;
121
+ $32d597b82a7aad64$export$12dc6b25c6dddfc1 = `FzVSrW_spectrum-Tabs-picker`;
122
+ $32d597b82a7aad64$export$a115f9117a19563e = `FzVSrW_spectrum-Tabs-selectionIndicator`;
123
+ $32d597b82a7aad64$export$34f1a65c57bb7bb = `FzVSrW_spectrum-TabsPanel`;
124
+ $32d597b82a7aad64$export$778fb839eaa0528c = `FzVSrW_spectrum-TabsPanel--horizontal`;
125
+ $32d597b82a7aad64$export$9a6e2fb72c648072 = `FzVSrW_spectrum-TabsPanel--vertical`;
126
+ $32d597b82a7aad64$export$e09869956b4c96f2 = `FzVSrW_spectrum-TabsPanel-collapseWrapper`;
127
+ $32d597b82a7aad64$export$acb5da0970288266 = `FzVSrW_spectrum-TabsPanel-tabpanel`;
128
+ $32d597b82a7aad64$export$4a157a691c854e23 = `FzVSrW_spectrum-TabsPanel-tabs`;
117
129
 
118
130
 
119
131
 
@@ -126,12 +138,12 @@ $32d597b82a7aad64$export$1e0fb04f31d3c22a = "is-selected_3e140b";
126
138
  const $65ab70ddbed1564b$var$TabContext = /*#__PURE__*/ (0, $cLzzU$react).createContext(null);
127
139
  function $65ab70ddbed1564b$var$Tabs(props, ref) {
128
140
  props = (0, $cLzzU$useProviderProps)(props);
129
- let { orientation: orientation = "horizontal" , density: density = "regular" , children: children , ...otherProps } = props;
141
+ let { orientation: orientation = "horizontal", density: density = "regular", children: children, ...otherProps } = props;
130
142
  let domRef = (0, $cLzzU$useDOMRef)(ref);
131
143
  let tablistRef = (0, $cLzzU$useRef)();
132
144
  let wrapperRef = (0, $cLzzU$useRef)();
133
- let { direction: direction } = (0, $cLzzU$useLocale)();
134
- let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(otherProps);
145
+ let { direction: direction } = (0, $cLzzU$useLocale)();
146
+ let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(otherProps);
135
147
  let [collapsed, setCollapsed] = (0, $cLzzU$useState)(false);
136
148
  let [selectedTab, setSelectedTab] = (0, $cLzzU$useState)();
137
149
  const [tabListState, setTabListState] = (0, $cLzzU$useState)(null);
@@ -223,24 +235,20 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
223
235
  }
224
236
  // @private
225
237
  function $65ab70ddbed1564b$var$Tab(props) {
226
- let { item: item , state: state } = props;
227
- let { key: key , rendered: rendered } = item;
238
+ let { item: item, state: state } = props;
239
+ let { key: key, rendered: rendered } = item;
228
240
  let ref = (0, $cLzzU$useRef)();
229
- let { tabProps: tabProps , isSelected: isSelected , isDisabled: isDisabled } = (0, $cLzzU$useTab)({
241
+ let { tabProps: tabProps, isSelected: isSelected, isDisabled: isDisabled } = (0, $cLzzU$useTab)({
230
242
  key: key
231
243
  }, state, ref);
232
- let { hoverProps: hoverProps , isHovered: isHovered } = (0, $cLzzU$useHover)({
244
+ let { hoverProps: hoverProps, isHovered: isHovered } = (0, $cLzzU$useHover)({
233
245
  ...props
234
246
  });
235
247
  let ElementType = item.props.href ? "a" : "div";
236
- let domProps = (0, $cLzzU$filterDOMProps)(item.props, {
237
- isLink: !!item.props.href
238
- });
239
- delete domProps.id;
240
248
  return /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$FocusRing), {
241
249
  focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
242
250
  }, /*#__PURE__*/ (0, $cLzzU$react).createElement(ElementType, {
243
- ...(0, $cLzzU$mergeProps)(tabProps, hoverProps, domProps),
251
+ ...(0, $cLzzU$mergeProps)(tabProps, hoverProps),
244
252
  ref: ref,
245
253
  className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-item", {
246
254
  "is-selected": isSelected,
@@ -261,12 +269,12 @@ function $65ab70ddbed1564b$var$Tab(props) {
261
269
  }
262
270
  // @private
263
271
  function $65ab70ddbed1564b$var$TabLine(props) {
264
- let { orientation: orientation , selectedTab: // Is either the tab node (non-collapsed) or the picker node (collapsed)
265
- selectedTab , selectedKey: // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change
266
- selectedKey } = props;
267
- let { direction: direction } = (0, $cLzzU$useLocale)();
268
- let { scale: scale } = (0, $cLzzU$useProvider)();
269
- let { tabLineState: tabLineState } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
272
+ let { orientation: orientation, selectedTab: // Is either the tab node (non-collapsed) or the picker node (collapsed)
273
+ selectedTab, selectedKey: // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change
274
+ selectedKey } = props;
275
+ let { direction: direction } = (0, $cLzzU$useLocale)();
276
+ let { scale: scale } = (0, $cLzzU$useProvider)();
277
+ let { tabLineState: tabLineState } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
270
278
  let [style, setStyle] = (0, $cLzzU$useState)({
271
279
  width: undefined,
272
280
  height: undefined
@@ -308,17 +316,17 @@ function $65ab70ddbed1564b$var$TabLine(props) {
308
316
  }
309
317
  function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
310
318
  const tabContext = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
311
- const { refs: refs , tabState: tabState , tabProps: tabProps , tabPanelProps: tabPanelProps } = tabContext;
312
- const { isQuiet: isQuiet , density: density , isEmphasized: isEmphasized , orientation: orientation } = tabProps;
313
- const { selectedTab: selectedTab , collapsed: collapsed , setTabListState: setTabListState } = tabState;
314
- const { tablistRef: tablistRef , wrapperRef: wrapperRef } = refs;
319
+ const { refs: refs, tabState: tabState, tabProps: tabProps, tabPanelProps: tabPanelProps } = tabContext;
320
+ const { isQuiet: isQuiet, density: density, isEmphasized: isEmphasized, orientation: orientation } = tabProps;
321
+ const { selectedTab: selectedTab, collapsed: collapsed, setTabListState: setTabListState } = tabState;
322
+ const { tablistRef: tablistRef, wrapperRef: wrapperRef } = refs;
315
323
  // Pass original Tab props but override children to create the collection.
316
324
  const state = (0, $cLzzU$useTabListState)({
317
325
  ...tabProps,
318
326
  children: props.children
319
327
  });
320
- let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
321
- const { tabListProps: tabListProps } = (0, $cLzzU$useTabList)({
328
+ let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
329
+ const { tabListProps: tabListProps } = (0, $cLzzU$useTabList)({
322
330
  ...tabProps,
323
331
  ...props
324
332
  }, state, tablistRef);
@@ -380,8 +388,8 @@ function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
380
388
  }), tabContent);
381
389
  }
382
390
  function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
383
- const { tabState: tabState , tabProps: tabProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
384
- const { tabListState: tabListState } = tabState;
391
+ const { tabState: tabState, tabProps: tabProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
392
+ const { tabListState: tabListState } = tabState;
385
393
  const factory = (0, $cLzzU$useCallback)((nodes)=>new (0, $cLzzU$ListCollection)(nodes), []);
386
394
  const collection = (0, $cLzzU$useCollection)({
387
395
  items: tabProps.items,
@@ -397,11 +405,11 @@ function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
397
405
  }
398
406
  // @private
399
407
  function $65ab70ddbed1564b$var$TabPanel(props) {
400
- const { tabState: tabState , tabPanelProps: ctxTabPanelProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
401
- const { tabListState: tabListState } = tabState;
408
+ const { tabState: tabState, tabPanelProps: ctxTabPanelProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
409
+ const { tabListState: tabListState } = tabState;
402
410
  let ref = (0, $cLzzU$useRef)();
403
- const { tabPanelProps: tabPanelProps } = (0, $cLzzU$useTabPanel)(props, tabListState, ref);
404
- let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
411
+ const { tabPanelProps: tabPanelProps } = (0, $cLzzU$useTabPanel)(props, tabListState, ref);
412
+ let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
405
413
  if (ctxTabPanelProps["aria-labelledby"]) tabPanelProps["aria-labelledby"] = ctxTabPanelProps["aria-labelledby"];
406
414
  return /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$FocusRing), {
407
415
  focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
@@ -413,7 +421,7 @@ function $65ab70ddbed1564b$var$TabPanel(props) {
413
421
  }, props.children));
414
422
  }
415
423
  function $65ab70ddbed1564b$var$TabPicker(props) {
416
- let { isDisabled: isDisabled , isEmphasized: isEmphasized , isQuiet: isQuiet , state: state , "aria-labelledby": ariaLabeledBy , "aria-label": ariaLabel , density: density , className: className , id: id , visible: visible } = props;
424
+ let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, "aria-labelledby": ariaLabeledBy, "aria-label": ariaLabel, density: density, className: className, id: id, visible: visible } = props;
417
425
  let ref = (0, $cLzzU$useRef)();
418
426
  let [pickerNode, setPickerNode] = (0, $cLzzU$useState)(null);
419
427
  (0, $cLzzU$useEffect)(()=>{
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/tabs/src/index.ts","packages/@react-spectrum/tabs/src/Tabs.tsx","packages/@adobe/spectrum-css-temp/components/tabs/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TabList, TabPanels, Tabs} from './Tabs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';\n","/*\n * Copyright 2020 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 {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\nimport {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Node, Orientation, StyleProps} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport React, {\n Key,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from '@react-stately/tabs';\nimport {Text} from '@react-spectrum/text';\nimport {useCollection} from '@react-stately/collections';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useTab, useTabList, useTabPanel} from '@react-aria/tabs';\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>,\n tabState: {\n tabListState: TabListState<T>,\n setTabListState: (state: TabListState<T>) => void,\n selectedTab: HTMLElement,\n collapsed: boolean\n },\n refs: {\n wrapperRef: MutableRefObject<HTMLDivElement>,\n tablistRef: MutableRefObject<HTMLDivElement>\n },\n tabPanelProps: {\n 'aria-labelledby': string\n },\n tabLineState: Array<DOMRect>\n}\n\nconst TabContext = React.createContext<TabsContext<any>>(null);\n\nfunction Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>();\n let wrapperRef = useRef<HTMLDivElement>();\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement>();\n const [tabListState, setTabListState] = useState<TabListState<T>>(null);\n let [tabPositions, setTabPositions] = useState([]);\n let prevTabPositions = useRef(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key=\"${tabListState?.selectedKey}\"]`);\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs = tablistRef.current.querySelectorAll('[role=\"tab\"]');\n let tabDimensions = [...tabs].map(tab => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);\n\n useEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>,\n state: TabListState<T>,\n isDisabled?: boolean,\n orientation?: Orientation\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>();\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n let domProps = filterDOMProps(item.props as any, {isLink: !!item.props.href});\n delete domProps.id;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps, domProps)}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Tabs-item',\n {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n }\n )}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation,\n selectedTab?: HTMLElement,\n selectedKey?: Key\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext);\n\n let [style, setStyle] = useState({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj = {transform: undefined, width: undefined, height: undefined};\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, scale, selectedKey, tabLineState]);\n\n return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role=\"presentation\" style={style} />;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>) {\n const tabContext = useContext(TabContext);\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )\n }>\n {[...state.collection].map((item) => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel-collapseWrapper',\n styleProps.className\n )}>\n <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />\n {tabContent}\n </div>\n );\n }\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab.\n * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {\n const {tabState, tabProps} = useContext(TabContext);\n const {tabListState} = tabState;\n\n const factory = useCallback(nodes => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});\n const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);\n const {tabListState} = tabState;\n let ref = useRef();\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {\n density?: 'compact' | 'regular',\n isEmphasized?: boolean,\n state: TabListState<T>,\n className?: string,\n visible: boolean\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef();\n let [pickerNode, setPickerNode] = useState(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={state.setSelectedKey}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && <TabLine orientation=\"horizontal\" selectedTab={pickerNode} selectedKey={state.selectedKey} />}\n </SlotProvider>\n </div>\n );\n}\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 */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Tabs = React.forwardRef(Tabs) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Tabs as Tabs};\n","/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C;ACZ1C;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACVD,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAzBA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAgC,CAAC,kBAAkB,CAAC;AACpD,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,0CAA0C,CAAC;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAkC,CAAC,oBAAoB,CAAC;AACxD,4CAAkC,CAAC,oBAAoB,CAAC;AACxD,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA+C,CAAC,iCAAiC,CAAC;AAClF,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,yBAAyB,CAAC;AAClE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAAqD,CAAC,uCAAuC,CAAC;AAC9F,2CAAuC,CAAC,yBAAyB,CAAC;AAClE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAAuD,CAAC,yCAAyC,CAAC;AAClG,4CAAgD,CAAC,kCAAkC,CAAC;AACpF,4CAA4C,CAAC,8BAA8B,CAAC;;;;;;;;;;ADiC5E,MAAM,iDAAa,CAAA,GAAA,YAAI,EAAE,cAAgC;AAEzD,SAAS,2BAAuB,KAA2B,EAAE,GAA2B;IACtF,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,IAAI,eACF,cAAc,uBACd,UAAU,qBACV,QAAQ,EACR,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,aAAK;IACtB,IAAI,aAAa,CAAA,GAAA,aAAK;IAEtB,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,eAAO,EAAE;IACzC,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,eAAO;IAC3C,MAAM,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAAmB;IAClE,IAAI,CAAC,cAAc,gBAAgB,GAAG,CAAA,GAAA,eAAO,EAAE,EAAE;IACjD,IAAI,mBAAmB,CAAA,GAAA,aAAK,EAAE;IAE9B,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,WAAW,SAAS;YACtB,IAAI,cAA2B,WAAW,QAAQ,cAAc,CAAC,WAAW,EAAE,yBAAA,0BAAA,KAAA,IAAA,aAAc,YAAY,EAAE,CAAC;YAE3G,IAAI,eAAe,MACjB,eAAe;QAEnB;IACA,qFAAqF;IACvF,GAAG;QAAC;QAAU,yBAAA,0BAAA,KAAA,IAAA,aAAc;QAAa;QAAW;KAAW;IAE/D,IAAI,sBAAsB,CAAA,GAAA,kBAAU,EAAE;QACpC,IAAI,WAAW,WAAW,gBAAgB,YAAY;YACpD,IAAI,gBAAgB,WAAW;YAC/B,IAAI,OAAO,WAAW,QAAQ,iBAAiB;YAC/C,IAAI,gBAAgB;mBAAI;aAAK,CAAC,IAAI,CAAA,MAAO,IAAI;YAE7C,IAAI,MAAM,cAAc,QAAQ,SAAS;YACzC,IAAI,iBAAiB,cAAc,uBAAuB,CAAC,IAAI;YAC/D,IAAI,iBAAiB,aAAa,CAAC,cAAc,SAAS,EAAE,CAAC,IAAI;YACjE,IAAI,iBAAiB,cAAc,QAAQ,iBAAiB,iBAAiB,iBAAiB;YAC9F,aAAa;YACb,IAAI,cAAc,WAAW,iBAAiB,QAAQ,UAAU,cAAc,KAAK,CAAC,KAAK;oBAAwB,iCAAwD;gBAAtE,OAAA,CAAA,gBAAA,iBAAA,KAAA,IAAA,IAAK,IAAG,MAAM,CAAA,CAAA,kCAAA,iBAAiB,OAAO,CAAC,MAAM,cAA/B,6CAAA,KAAA,IAAA,gCAAiC,IAAG,KAAK,CAAA,gBAAA,iBAAA,KAAA,IAAA,IAAK,KAAI,MAAM,CAAA,CAAA,mCAAA,iBAAiB,OAAO,CAAC,MAAM,cAA/B,8CAAA,KAAA,IAAA,iCAAiC,KAAI;gBAAI;gBAChN,gBAAgB;gBAChB,iBAAiB,UAAU;YAC7B;QACF;IACF,GAAG;QAAC;QAAY;QAAY;QAAW;QAAa;QAAc;QAAkB;KAAgB;IAEpG,CAAA,GAAA,gBAAQ,EAAE;QACR;IACF,GAAG;QAAC;QAAU;KAAoB;IAElC,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAY,UAAU;IAAmB;IAEjE,IAAI,gBAAgB;QAClB,mBAAmB;IACrB;IAEA,6FAA6F;IAC7F,IAAI,uBAAuB,CAAA,GAAA,YAAI;IAC/B,IAAI,aAAa,gBAAgB,YAC/B,aAAa,CAAC,kBAAkB,GAAG;IAErC,qBACE,gCAAC,iCAAW;QACV,OAAO;YACL,UAAU;gBAAC,GAAG,KAAK;6BAAE;yBAAa;YAAO;YACzC,UAAU;8BAAC;iCAAc;6BAAiB;2BAAa;YAAS;YAChE,MAAM;4BAAC;4BAAY;YAAU;2BAC7B;YACA,cAAc;QAChB;qBACA,gCAAC;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC7B,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,gEAAK,GACL,sBACA,CAAC,oBAAoB,EAAE,YAAY,CAAC,EACpC,WAAW;OAEZ,MAAM;AAIf;AASA,WAAW;AACX,SAAS,0BAAO,KAAkB;IAChC,IAAI,QAAC,IAAI,SAAE,KAAK,EAAC,GAAG;IACpB,IAAI,OAAC,GAAG,YAAE,QAAQ,EAAC,GAAG;IAEtB,IAAI,MAAM,CAAA,GAAA,aAAK;IACf,IAAI,YAAC,QAAQ,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,aAAK,EAAE;aAAC;IAAG,GAAG,OAAO;IAE9D,IAAI,cAAC,UAAU,aAAE,SAAS,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACrC,GAAG,KAAK;IACV;IACA,IAAI,cAAiC,KAAK,MAAM,OAAO,MAAM;IAE7D,qBACE,gCAAC,CAAA,GAAA,gBAAQ;QAAE,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;qBAC5C,gCAAC;QACE,GAAG,CAAA,GAAA,iBAAS,EAAE,UAAU,WAAW;QACpC,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,gEAAK,GACL,sBACA;YACE,eAAe;YACf,eAAe;YACf,cAAc;QAChB;qBAEF,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;YACvC;YACA,MAAM;gBACJ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;YACvC;QACF;OACC,OAAO,aAAa,yBACjB,gCAAC,CAAA,GAAA,WAAG,SAAG,YACP;AAKd;AAQA,WAAW;AACX,SAAS,8BAAQ,KAAmB;IAClC,IAAI,eACF,WAAW,eACX,wEAAwE;IACxE,WAAW,eACX,4HAA4H;IAC5H,WAAW,EACZ,GAAG;IAEJ,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,gBAAQ;IAC1B,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IACxB,IAAI,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IAEhC,IAAI,CAAC,OAAO,SAAS,GAAG,CAAA,GAAA,eAAO,EAAE;QAC/B,OAAO;QACP,QAAQ;IACV;IAEA,IAAI,WAAW,CAAA,GAAA,kBAAU,EAAE;QACzB,IAAI,aAAa;gBAG2B;YAF1C,IAAI,WAAW;gBAAC,WAAW;gBAAW,OAAO;gBAAW,QAAQ;YAAS;YACzE,8JAA8J;YAC9J,IAAI,SAAS,cAAc,QAAQ,KAAM,CAAA,CAAA,CAAC,4BAAA,YAAY,0BAAZ,uCAAD,KAAA,IAAC,0BAA0C,WAAU,IAAI,YAAY,cAAc,YAAY,UAAS,IAAK,YAAY;YAClK,SAAS,YAAY,gBAAgB,aACjC,CAAC,WAAW,EAAE,YAAY,UAAU,GAAG,CAAC,GACxC,CAAC,WAAW,EAAE,OAAO,GAAG,CAAC;YAE7B,IAAI,gBAAgB,cAClB,SAAS,QAAQ,CAAC,EAAE,YAAY,YAAY,EAAE,CAAC;iBAE/C,SAAS,SAAS,CAAC,EAAE,YAAY,aAAa,EAAE,CAAC;YAEnD,SAAS;QACX;IACF,GAAG;QAAC;QAAW;QAAU;QAAa;KAAY;IAElD,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;QAAU;QAAO;QAAa;KAAa;IAE/C,qBAAO,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;QAAqC,MAAK;QAAe,OAAO;;AAC5G;AAMO,SAAS,0CAAW,KAA8B;IACvD,MAAM,aAAa,CAAA,GAAA,iBAAS,EAAE;IAC9B,MAAM,QAAC,IAAI,YAAE,QAAQ,YAAE,QAAQ,iBAAE,aAAa,EAAC,GAAG;IAClD,MAAM,WAAC,OAAO,WAAE,OAAO,gBAAE,YAAY,eAAE,WAAW,EAAC,GAAG;IACtD,MAAM,eAAC,WAAW,aAAE,SAAS,mBAAE,eAAe,EAAC,GAAG;IAClD,MAAM,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG;IACjC,0EAA0E;IAC1E,MAAM,QAAQ,CAAA,GAAA,sBAAc,EAAE;QAAC,GAAG,QAAQ;QAAE,UAAU,MAAM;IAAQ;IAEpE,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IACjC,MAAM,gBAAC,YAAY,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;QAAC,GAAG,QAAQ;QAAE,GAAG,KAAK;IAAA,GAAG,OAAO;IAElE,CAAA,GAAA,gBAAQ,EAAE;QACR,6DAA6D;QAC7D,gBAAgB;IAChB,uDAAuD;IACzD,GAAG;QAAC,MAAM;QAAc,MAAM;QAAc,MAAM;QAAa,MAAM;KAAS;IAE9E,IAAI,gBAAsC,aAAa,gBAAgB,aAAa;QAAC,UAAU;QAAoB,UAAU;QAAU,YAAY;QAAU,UAAU;IAAU,IAAI;QAAC,UAAU;IAAkB;IAClN,IAAI,kBAAkB,gBAAgB,aAAa,aAAa;QAAC,OAAO;IAAa;IAErF,IAAI,aAAa,gBAAgB,YAC/B,YAAY,CAAC,cAAc,GAAG;IAGhC,IAAI,mBAAmB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;IAE1C,MAAM,2BACJ,gCAAC;QACE,GAAG,eAAe;QAClB,GAAG,YAAY;QAChB,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,gEAAK,GACL,iBACA,CAAC,eAAe,EAAE,YAAY,CAAC,EAC/B,kBACA;YACE,wBAAwB;YACxB,6BAA6B;YAC7B,CAAC,yBAAyB,EAAE,YAAY;QAC1C,GACA,gBAAgB,cAAc,WAAW;OAG1C;WAAI,MAAM;KAAW,CAAC,IAAI,CAAC,qBAC1B,gCAAC;YAAI,KAAK,KAAK;YAAK,MAAM;YAAM,OAAO;YAAO,aAAa;2BAE7D,gCAAC;QAAQ,aAAa;QAAa,aAAa;;IAKpD,IAAI,gBAAgB,YAClB,OAAO;SAEP,qBACE,gCAAC;QACE,GAAG,UAAU;QACd,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,gEAAK,GACL,sCACA,WAAW;qBAEb,gCAAC;QAAW,GAAG,KAAK;QAAG,GAAG,QAAQ;QAAE,SAAS;QAAW,IAAI,aAAa,CAAC,kBAAkB;QAAE,OAAO;QAAO,WAAW;QACtH;AAIT;AAMO,SAAS,0CAAa,KAAgC;IAC3D,MAAM,YAAC,QAAQ,YAAE,QAAQ,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IACxC,MAAM,gBAAC,YAAY,EAAC,GAAG;IAEvB,MAAM,UAAU,CAAA,GAAA,kBAAU,EAAE,CAAA,QAAS,IAAI,CAAA,GAAA,qBAAa,EAAE,QAAQ,EAAE;IAClE,MAAM,aAAa,CAAA,GAAA,oBAAY,EAAE;QAAC,OAAO,SAAS;QAAO,GAAG,KAAK;IAAA,GAAG,SAAS;QAAC,0BAA0B;IAAI;IAC5G,MAAM,eAAe,eAAe,WAAW,QAAQ,aAAa,eAAe;IAEnF,qBACE,gCAAC;QAAU,GAAG,KAAK;QAAE,KAAK,yBAAA,0BAAA,KAAA,IAAA,aAAc;OACrC,gBAAgB,aAAa,MAAM;AAG1C;AAMA,WAAW;AACX,SAAS,+BAAS,KAAoB;IACpC,MAAM,YAAC,QAAQ,EAAE,eAAe,gBAAgB,EAAC,GAAG,CAAA,GAAA,iBAAS,EAAE;IAC/D,MAAM,gBAAC,YAAY,EAAC,GAAG;IACvB,IAAI,MAAM,CAAA,GAAA,aAAK;IACf,MAAM,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,kBAAU,EAAE,OAAO,cAAc;IACzD,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,IAAI,gBAAgB,CAAC,kBAAkB,EACrC,aAAa,CAAC,kBAAkB,GAAG,gBAAgB,CAAC,kBAAkB;IAGxE,qBACE,gCAAC,CAAA,GAAA,gBAAQ;QAAE,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;qBAC5C,gCAAC;QAAK,GAAG,UAAU;QAAG,GAAG,aAAa;QAAE,KAAK;QAAK,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG,+BAA+B,WAAW;OACvH,MAAM;AAIf;AAUA,SAAS,gCAAa,KAAwB;IAC5C,IAAI,cACF,UAAU,gBACV,YAAY,WACZ,OAAO,SACP,KAAK,EACL,mBAAmB,aAAa,EAChC,cAAc,SAAS,WACvB,OAAO,aACP,SAAS,MACT,EAAE,WACF,OAAO,EACR,GAAG;IAEJ,IAAI,MAAM,CAAA,GAAA,aAAK;IACf,IAAI,CAAC,YAAY,cAAc,GAAG,CAAA,GAAA,eAAO,EAAE;IAE3C,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,OAAO,CAAA,GAAA,mBAAW,EAAE;QACxB,cAAc,KAAK;IACrB,GAAG;QAAC;KAAI;IAER,IAAI,QAAQ;WAAI,MAAM;KAAW;IACjC,IAAI,cAAc;QAChB,mBAAmB;QACnB,cAAc;IAChB;IAEA,MAAM,QAA8B,UAAU,CAAC,IAAI;QAAC,YAAY;QAAU,UAAU;IAAU;IAE9F,iFAAiF;IACjF,qBACE,gCAAC;QACC,WAAW,CAAA,GAAA,iBAAS,EAClB,CAAA,GAAA,gEAAK,GACL,iBACA,6BACA,8BACA;YACE,wBAAwB;YACxB,CAAC,yBAAyB,EAAE,YAAY;YACxC,6BAA6B;QAC/B,GACA;QAEF,OAAO;QACP,eAAa,UAAU,YAAY;qBACnC,gCAAC,CAAA,GAAA,mBAAW;QACV,OAAO;YACL,MAAM;gBACJ,MAAM;gBACN,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;YACvC;YACA,QAAQ;gBACN,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;YACrC;QACF;qBACA,gCAAC,CAAA,GAAA,aAAK;QACH,GAAG,WAAW;QACf,IAAI;QACJ,OAAO;QACP,KAAK;QACL,SAAA;QACA,YAAY,CAAC,WAAW;QACxB,aAAa,MAAM;QACnB,cAAc,MAAM;QACpB,mBAAmB,MAAM;QACzB,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;OACpC,CAAA,qBAAQ,gCAAC,CAAA,GAAA,WAAG,GAAM,KAAK,OAAQ,KAAK,YAEtC,4BAAc,gCAAC;QAAQ,aAAY;QAAa,aAAa;QAAY,aAAa,MAAM;;AAIrG;AAEA;;CAEC,GACD,wFAAwF;AACxF,2GAA2G;AAC3G,MAAM,0DAAQ,CAAA,GAAA,YAAI,EAAE,WAAW;","sources":["packages/@react-spectrum/tabs/src/index.ts","packages/@react-spectrum/tabs/src/Tabs.tsx","packages/@adobe/spectrum-css-temp/components/tabs/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TabList, TabPanels, Tabs} from './Tabs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';\n","/*\n * Copyright 2020 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 {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\nimport {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Node, Orientation, StyleProps} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useId, useLayoutEffect, useResizeObserver} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport React, {\n Key,\n MutableRefObject,\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';\nimport {TabListState, useTabListState} from '@react-stately/tabs';\nimport {Text} from '@react-spectrum/text';\nimport {useCollection} from '@react-stately/collections';\nimport {useHover} from '@react-aria/interactions';\nimport {useLocale} from '@react-aria/i18n';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\nimport {useTab, useTabList, useTabPanel} from '@react-aria/tabs';\n\ninterface TabsContext<T> {\n tabProps: SpectrumTabsProps<T>,\n tabState: {\n tabListState: TabListState<T>,\n setTabListState: (state: TabListState<T>) => void,\n selectedTab: HTMLElement,\n collapsed: boolean\n },\n refs: {\n wrapperRef: MutableRefObject<HTMLDivElement>,\n tablistRef: MutableRefObject<HTMLDivElement>\n },\n tabPanelProps: {\n 'aria-labelledby': string\n },\n tabLineState: Array<DOMRect>\n}\n\nconst TabContext = React.createContext<TabsContext<any>>(null);\n\nfunction Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDivElement>) {\n props = useProviderProps(props);\n let {\n orientation = 'horizontal' as Orientation,\n density = 'regular',\n children,\n ...otherProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let tablistRef = useRef<HTMLDivElement>();\n let wrapperRef = useRef<HTMLDivElement>();\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement>();\n const [tabListState, setTabListState] = useState<TabListState<T>>(null);\n let [tabPositions, setTabPositions] = useState([]);\n let prevTabPositions = useRef(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement = tablistRef.current.querySelector(`[data-key=\"${tabListState?.selectedKey}\"]`);\n\n if (selectedTab != null) {\n setSelectedTab(selectedTab);\n }\n }\n // collapse is in the dep array so selectedTab can be updated for TabLine positioning\n }, [children, tabListState?.selectedKey, collapsed, tablistRef]);\n\n let checkShouldCollapse = useCallback(() => {\n if (wrapperRef.current && orientation !== 'vertical') {\n let tabsComponent = wrapperRef.current;\n let tabs = tablistRef.current.querySelectorAll('[role=\"tab\"]');\n let tabDimensions = [...tabs].map(tab => tab.getBoundingClientRect());\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {\n setTabPositions(tabDimensions);\n prevTabPositions.current = tabDimensions;\n }\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);\n\n useEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps = {\n 'aria-labelledby': undefined\n };\n\n // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.\n let collapsibleTabListId = useId();\n if (collapsed && orientation !== 'vertical') {\n tabPanelProps['aria-labelledby'] = collapsibleTabListId;\n }\n return (\n <TabContext.Provider\n value={{\n tabProps: {...props, orientation, density},\n tabState: {tabListState, setTabListState, selectedTab, collapsed},\n refs: {tablistRef, wrapperRef},\n tabPanelProps,\n tabLineState: tabPositions\n }}>\n <div\n {...filterDOMProps(otherProps)}\n {...styleProps}\n ref={domRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel',\n `spectrum-TabsPanel--${orientation}`,\n styleProps.className\n )}>\n {props.children}\n </div>\n </TabContext.Provider>\n );\n}\n\ninterface TabProps<T> extends DOMProps {\n item: Node<T>,\n state: TabListState<T>,\n isDisabled?: boolean,\n orientation?: Orientation\n}\n\n// @private\nfunction Tab<T>(props: TabProps<T>) {\n let {item, state} = props;\n let {key, rendered} = item;\n\n let ref = useRef<any>();\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let ElementType: React.ElementType = item.props.href ? 'a' : 'div';\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <ElementType\n {...mergeProps(tabProps, hoverProps)}\n ref={ref}\n className={classNames(\n styles,\n 'spectrum-Tabs-item',\n {\n 'is-selected': isSelected,\n 'is-disabled': isDisabled,\n 'is-hovered': isHovered\n }\n )}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n text: {\n UNSAFE_className: classNames(styles, 'spectrum-Tabs-itemLabel')\n }\n }}>\n {typeof rendered === 'string'\n ? <Text>{rendered}</Text>\n : rendered}\n </SlotProvider>\n </ElementType>\n </FocusRing>\n );\n}\n\ninterface TabLineProps {\n orientation?: Orientation,\n selectedTab?: HTMLElement,\n selectedKey?: Key\n}\n\n// @private\nfunction TabLine(props: TabLineProps) {\n let {\n orientation,\n // Is either the tab node (non-collapsed) or the picker node (collapsed)\n selectedTab,\n // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change\n selectedKey\n } = props;\n\n let {direction} = useLocale();\n let {scale} = useProvider();\n let {tabLineState} = useContext(TabContext);\n\n let [style, setStyle] = useState({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj = {transform: undefined, width: undefined, height: undefined};\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, scale, selectedKey, tabLineState]);\n\n return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role=\"presentation\" style={style} />;\n}\n\n/**\n * A TabList is used within Tabs to group tabs that a user can switch between.\n * The keys of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.\n */\nexport function TabList<T>(props: SpectrumTabListProps<T>) {\n const tabContext = useContext(TabContext);\n const {refs, tabState, tabProps, tabPanelProps} = tabContext;\n const {isQuiet, density, isEmphasized, orientation} = tabProps;\n const {selectedTab, collapsed, setTabListState} = tabState;\n const {tablistRef, wrapperRef} = refs;\n // Pass original Tab props but override children to create the collection.\n const state = useTabListState({...tabProps, children: props.children});\n\n let {styleProps} = useStyleProps(props);\n const {tabListProps} = useTabList({...tabProps, ...props}, state, tablistRef);\n\n useEffect(() => {\n // Passing back to root as useTabPanel needs the TabListState\n setTabListState(state);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.disabledKeys, state.selectedItem, state.selectedKey, props.children]);\n\n let collapseStyle : React.CSSProperties = collapsed && orientation !== 'vertical' ? {maxWidth: 'calc(100% + 1px)', overflow: 'hidden', visibility: 'hidden', position: 'absolute'} : {maxWidth: 'calc(100% + 1px)'};\n let stylePropsFinal = orientation === 'vertical' ? styleProps : {style: collapseStyle};\n\n if (collapsed && orientation !== 'vertical') {\n tabListProps['aria-hidden'] = true;\n }\n\n let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');\n\n const tabContent = (\n <div\n {...stylePropsFinal}\n {...tabListProps}\n ref={tablistRef}\n className={classNames(\n styles,\n 'spectrum-Tabs',\n `spectrum-Tabs--${orientation}`,\n tabListclassName,\n {\n 'spectrum-Tabs--quiet': isQuiet,\n 'spectrum-Tabs--emphasized': isEmphasized,\n ['spectrum-Tabs--compact']: density === 'compact'\n },\n orientation === 'vertical' && styleProps.className\n )\n }>\n {[...state.collection].map((item) => (\n <Tab key={item.key} item={item} state={state} orientation={orientation} />\n ))}\n <TabLine orientation={orientation} selectedTab={selectedTab} />\n </div>\n );\n\n\n if (orientation === 'vertical') {\n return tabContent;\n } else {\n return (\n <div\n {...styleProps}\n ref={wrapperRef}\n className={classNames(\n styles,\n 'spectrum-TabsPanel-collapseWrapper',\n styleProps.className\n )}>\n <TabPicker {...props} {...tabProps} visible={collapsed} id={tabPanelProps['aria-labelledby']} state={state} className={tabListclassName} />\n {tabContent}\n </div>\n );\n }\n}\n\n/**\n * TabPanels is used within Tabs as a container for the content of each tab.\n * The keys of the items within the <TabPanels> must match up with a corresponding item inside the <TabList>.\n */\nexport function TabPanels<T>(props: SpectrumTabPanelsProps<T>) {\n const {tabState, tabProps} = useContext(TabContext);\n const {tabListState} = tabState;\n\n const factory = useCallback(nodes => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});\n const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;\n\n return (\n <TabPanel {...props} key={tabListState?.selectedKey}>\n {selectedItem && selectedItem.props.children}\n </TabPanel>\n );\n}\n\ninterface TabPanelProps extends AriaTabPanelProps, StyleProps {\n children?: ReactNode\n}\n\n// @private\nfunction TabPanel(props: TabPanelProps) {\n const {tabState, tabPanelProps: ctxTabPanelProps} = useContext(TabContext);\n const {tabListState} = tabState;\n let ref = useRef();\n const {tabPanelProps} = useTabPanel(props, tabListState, ref);\n let {styleProps} = useStyleProps(props);\n\n if (ctxTabPanelProps['aria-labelledby']) {\n tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];\n }\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div {...styleProps} {...tabPanelProps} ref={ref} className={classNames(styles, 'spectrum-TabsPanel-tabpanel', styleProps.className)}>\n {props.children}\n </div>\n </FocusRing>\n );\n}\n\ninterface TabPickerProps<T> extends Omit<SpectrumPickerProps<T>, 'children'> {\n density?: 'compact' | 'regular',\n isEmphasized?: boolean,\n state: TabListState<T>,\n className?: string,\n visible: boolean\n}\n\nfunction TabPicker<T>(props: TabPickerProps<T>) {\n let {\n isDisabled,\n isEmphasized,\n isQuiet,\n state,\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel,\n density,\n className,\n id,\n visible\n } = props;\n\n let ref = useRef();\n let [pickerNode, setPickerNode] = useState(null);\n\n useEffect(() => {\n let node = unwrapDOMRef(ref);\n setPickerNode(node.current);\n }, [ref]);\n\n let items = [...state.collection];\n let pickerProps = {\n 'aria-labelledby': ariaLabeledBy,\n 'aria-label': ariaLabel\n };\n\n const style : React.CSSProperties = visible ? {} : {visibility: 'hidden', position: 'absolute'};\n\n // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it\n return (\n <div\n className={classNames(\n styles,\n 'spectrum-Tabs',\n 'spectrum-Tabs--horizontal',\n 'spectrum-Tabs--isCollapsed',\n {\n 'spectrum-Tabs--quiet': isQuiet,\n ['spectrum-Tabs--compact']: density === 'compact',\n 'spectrum-Tabs--emphasized': isEmphasized\n },\n className\n )}\n style={style}\n aria-hidden={visible ? undefined : true}>\n <SlotProvider\n slots={{\n icon: {\n size: 'S',\n UNSAFE_className: classNames(styles, 'spectrum-Icon')\n },\n button: {\n focusRingClass: classNames(styles, 'focus-ring')\n }\n }}>\n <Picker\n {...pickerProps}\n id={id}\n items={items}\n ref={ref}\n isQuiet\n isDisabled={!visible || isDisabled}\n selectedKey={state.selectedKey}\n disabledKeys={state.disabledKeys}\n onSelectionChange={state.setSelectedKey}\n UNSAFE_className={classNames(styles, 'spectrum-Tabs-picker')}>\n {item => <Item {...item.props}>{item.rendered}</Item>}\n </Picker>\n {pickerNode && <TabLine orientation=\"horizontal\" selectedTab={pickerNode} selectedKey={state.selectedKey} />}\n </SlotProvider>\n </div>\n );\n}\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 */\n// forwardRef doesn't support generic parameters, so cast the result to the correct type\n// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref\nconst _Tabs = React.forwardRef(Tabs) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\nexport {_Tabs as Tabs};\n","/*\n * Copyright 2020 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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"module.js.map"}
@@ -1 +1 @@
1
- {"mappings":";;;AA+PA;;;GAGG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,qBAsExD;AAED;;;GAGG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,qBAa5D;AA+GD;;GAEG;AAGH,OAAA,MAAM;UAA2E,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;ACjc1H,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAE,sBAAsB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/Tabs.tsx","packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/index.ts","packages/@react-spectrum/tabs/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TabList, TabPanels, Tabs} from './Tabs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
1
+ {"mappings":";;;AA6PA;;;GAGG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,qBAsExD;AAED;;;GAGG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,qBAa5D;AA+GD;;GAEG;AAGH,OAAA,MAAM;UAA2E,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;AC/b1H,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAChD,YAAY,EAAC,iBAAiB,EAAE,oBAAoB,EAAE,sBAAsB,EAAC,MAAM,mBAAmB,CAAC","sources":["packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/Tabs.tsx","packages/@react-spectrum/tabs/src/packages/@react-spectrum/tabs/src/index.ts","packages/@react-spectrum/tabs/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 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\n/// <reference types=\"css-module-types\" />\n\nexport {TabList, TabPanels, Tabs} from './Tabs';\nexport {Item} from '@react-stately/collections';\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/tabs",
3
- "version": "3.7.3-nightly.4149+a399db1e3",
3
+ "version": "3.7.3-nightly.4157+633bb4fb6",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,27 +36,27 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/focus": "3.0.0-nightly.2440+a399db1e3",
40
- "@react-aria/i18n": "3.0.0-nightly.2440+a399db1e3",
41
- "@react-aria/interactions": "3.0.0-nightly.2440+a399db1e3",
42
- "@react-aria/tabs": "3.7.1-nightly.4149+a399db1e3",
43
- "@react-aria/utils": "3.0.0-nightly.2440+a399db1e3",
44
- "@react-spectrum/button": "3.0.0-nightly.2440+a399db1e3",
45
- "@react-spectrum/menu": "3.14.1-nightly.4149+a399db1e3",
46
- "@react-spectrum/picker": "3.12.1-nightly.4149+a399db1e3",
47
- "@react-spectrum/text": "3.4.6-nightly.4149+a399db1e3",
48
- "@react-spectrum/utils": "3.0.0-nightly.2440+a399db1e3",
49
- "@react-stately/collections": "3.0.0-nightly.2440+a399db1e3",
50
- "@react-stately/list": "3.9.3-nightly.4149+a399db1e3",
51
- "@react-stately/tabs": "3.0.0-nightly.2440+a399db1e3",
52
- "@react-types/select": "3.8.4-nightly.4149+a399db1e3",
53
- "@react-types/shared": "3.0.0-nightly.2440+a399db1e3",
54
- "@react-types/tabs": "3.3.3-nightly.4149+a399db1e3",
55
- "@spectrum-icons/workflow": "3.0.0-nightly.2440+a399db1e3",
39
+ "@react-aria/focus": "3.0.0-nightly.2448+633bb4fb6",
40
+ "@react-aria/i18n": "3.0.0-nightly.2448+633bb4fb6",
41
+ "@react-aria/interactions": "3.0.0-nightly.2448+633bb4fb6",
42
+ "@react-aria/tabs": "3.7.1-nightly.4157+633bb4fb6",
43
+ "@react-aria/utils": "3.0.0-nightly.2448+633bb4fb6",
44
+ "@react-spectrum/button": "3.0.0-nightly.2448+633bb4fb6",
45
+ "@react-spectrum/menu": "3.14.1-nightly.4157+633bb4fb6",
46
+ "@react-spectrum/picker": "3.12.1-nightly.4157+633bb4fb6",
47
+ "@react-spectrum/text": "3.4.6-nightly.4157+633bb4fb6",
48
+ "@react-spectrum/utils": "3.0.0-nightly.2448+633bb4fb6",
49
+ "@react-stately/collections": "3.0.0-nightly.2448+633bb4fb6",
50
+ "@react-stately/list": "3.9.3-nightly.4157+633bb4fb6",
51
+ "@react-stately/tabs": "3.0.0-nightly.2448+633bb4fb6",
52
+ "@react-types/select": "3.8.4-nightly.4157+633bb4fb6",
53
+ "@react-types/shared": "3.0.0-nightly.2448+633bb4fb6",
54
+ "@react-types/tabs": "3.3.3-nightly.4157+633bb4fb6",
55
+ "@spectrum-icons/workflow": "3.0.0-nightly.2448+633bb4fb6",
56
56
  "@swc/helpers": "^0.5.0"
57
57
  },
58
58
  "devDependencies": {
59
- "@adobe/spectrum-css-temp": "3.0.0-nightly.2440+a399db1e3"
59
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.2448+633bb4fb6"
60
60
  },
61
61
  "peerDependencies": {
62
62
  "@react-spectrum/provider": "^3.0.0",
@@ -66,5 +66,5 @@
66
66
  "publishConfig": {
67
67
  "access": "public"
68
68
  },
69
- "gitHead": "a399db1e314243a023f7b5c95e319eba4496604c"
69
+ "gitHead": "633bb4fb6cc205b9911a21fb81a7a70c662ec0ce"
70
70
  }
package/src/Tabs.tsx CHANGED
@@ -167,13 +167,11 @@ function Tab<T>(props: TabProps<T>) {
167
167
  ...props
168
168
  });
169
169
  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
170
- let domProps = filterDOMProps(item.props as any, {isLink: !!item.props.href});
171
- delete domProps.id;
172
170
 
173
171
  return (
174
172
  <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
175
173
  <ElementType
176
- {...mergeProps(tabProps, hoverProps, domProps)}
174
+ {...mergeProps(tabProps, hoverProps)}
177
175
  ref={ref}
178
176
  className={classNames(
179
177
  styles,