@react-spectrum/tabs 3.8.3-nightly.4295 → 3.8.3

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.
Files changed (2) hide show
  1. package/package.json +17 -17
  2. package/dist/import.mjs +0 -493
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-spectrum/tabs",
3
- "version": "3.8.3-nightly.4295+f600fdfa2",
3
+ "version": "3.8.3",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -36,24 +36,24 @@
36
36
  "url": "https://github.com/adobe/react-spectrum"
37
37
  },
38
38
  "dependencies": {
39
- "@react-aria/focus": "3.0.0-nightly.2584+f600fdfa2",
40
- "@react-aria/i18n": "3.0.0-nightly.2584+f600fdfa2",
41
- "@react-aria/interactions": "3.0.0-nightly.2584+f600fdfa2",
42
- "@react-aria/tabs": "3.8.3-nightly.4295+f600fdfa2",
43
- "@react-aria/utils": "3.0.0-nightly.2584+f600fdfa2",
44
- "@react-spectrum/picker": "3.13.1-nightly.4295+f600fdfa2",
45
- "@react-spectrum/text": "3.5.1-nightly.4295+f600fdfa2",
46
- "@react-spectrum/utils": "3.0.0-nightly.2584+f600fdfa2",
47
- "@react-stately/collections": "3.0.0-nightly.2584+f600fdfa2",
48
- "@react-stately/list": "3.10.2-nightly.4295+f600fdfa2",
49
- "@react-stately/tabs": "3.0.0-nightly.2584+f600fdfa2",
50
- "@react-types/select": "3.9.1-nightly.4295+f600fdfa2",
51
- "@react-types/shared": "3.0.0-nightly.2584+f600fdfa2",
52
- "@react-types/tabs": "3.3.5-nightly.4295+f600fdfa2",
39
+ "@react-aria/focus": "^3.15.0",
40
+ "@react-aria/i18n": "^3.9.0",
41
+ "@react-aria/interactions": "^3.20.0",
42
+ "@react-aria/tabs": "^3.8.2",
43
+ "@react-aria/utils": "^3.22.0",
44
+ "@react-spectrum/picker": "^3.13.1",
45
+ "@react-spectrum/text": "^3.5.0",
46
+ "@react-spectrum/utils": "^3.11.2",
47
+ "@react-stately/collections": "^3.10.3",
48
+ "@react-stately/list": "^3.10.1",
49
+ "@react-stately/tabs": "^3.6.2",
50
+ "@react-types/select": "^3.9.0",
51
+ "@react-types/shared": "^3.22.0",
52
+ "@react-types/tabs": "^3.3.4",
53
53
  "@swc/helpers": "^0.5.0"
54
54
  },
55
55
  "devDependencies": {
56
- "@adobe/spectrum-css-temp": "3.0.0-nightly.2584+f600fdfa2"
56
+ "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
57
57
  },
58
58
  "peerDependencies": {
59
59
  "@react-spectrum/provider": "^3.0.0",
@@ -63,5 +63,5 @@
63
63
  "publishConfig": {
64
64
  "access": "public"
65
65
  },
66
- "gitHead": "f600fdfa2af9f3131b34b1536a790aa1bb348151"
66
+ "gitHead": "4a7ee6fc93e00a34d4cdad26d48439f8dabee88b"
67
67
  }
package/dist/import.mjs DELETED
@@ -1,493 +0,0 @@
1
- import "./main.css";
2
- import {Item as $7e899e8977e9ac07$re_export$Item, useCollection as $cLzzU$useCollection} from "@react-stately/collections";
3
- import {useDOMRef as $cLzzU$useDOMRef, useStyleProps as $cLzzU$useStyleProps, classNames as $cLzzU$classNames, SlotProvider as $cLzzU$SlotProvider, unwrapDOMRef as $cLzzU$unwrapDOMRef} from "@react-spectrum/utils";
4
- import {useResizeObserver as $cLzzU$useResizeObserver, useId as $cLzzU$useId, filterDOMProps as $cLzzU$filterDOMProps, mergeProps as $cLzzU$mergeProps, useLayoutEffect as $cLzzU$useLayoutEffect} from "@react-aria/utils";
5
- import {FocusRing as $cLzzU$FocusRing} from "@react-aria/focus";
6
- import {Picker as $cLzzU$Picker, Item as $cLzzU$Item} from "@react-spectrum/picker";
7
- import {ListCollection as $cLzzU$ListCollection} from "@react-stately/list";
8
- import $cLzzU$react, {useRef as $cLzzU$useRef, useState as $cLzzU$useState, useEffect as $cLzzU$useEffect, useCallback as $cLzzU$useCallback, useContext as $cLzzU$useContext} from "react";
9
- import {useTabListState as $cLzzU$useTabListState} from "@react-stately/tabs";
10
- import {Text as $cLzzU$Text} from "@react-spectrum/text";
11
- import {useHover as $cLzzU$useHover} from "@react-aria/interactions";
12
- import {useLocale as $cLzzU$useLocale} from "@react-aria/i18n";
13
- import {useProviderProps as $cLzzU$useProviderProps, useProvider as $cLzzU$useProvider} from "@react-spectrum/provider";
14
- import {useTab as $cLzzU$useTab, useTabList as $cLzzU$useTabList, useTabPanel as $cLzzU$useTabPanel} from "@react-aria/tabs";
15
-
16
-
17
- function $parcel$interopDefault(a) {
18
- return a && a.__esModule ? a.default : a;
19
- }
20
-
21
- function $parcel$export(e, n, v, s) {
22
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
23
- }
24
- /*
25
- * Copyright 2020 Adobe. All rights reserved.
26
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
27
- * you may not use this file except in compliance with the License. You may obtain a copy
28
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
29
- *
30
- * Unless required by applicable law or agreed to in writing, software distributed under
31
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
32
- * OF ANY KIND, either express or implied. See the License for the specific language
33
- * governing permissions and limitations under the License.
34
- */ /// <reference types="css-module-types" />
35
- /*
36
- * Copyright 2020 Adobe. All rights reserved.
37
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
38
- * you may not use this file except in compliance with the License. You may obtain a copy
39
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
40
- *
41
- * Unless required by applicable law or agreed to in writing, software distributed under
42
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
43
- * OF ANY KIND, either express or implied. See the License for the specific language
44
- * governing permissions and limitations under the License.
45
- */
46
-
47
-
48
-
49
-
50
-
51
- var $32d597b82a7aad64$exports = {};
52
-
53
- $parcel$export($32d597b82a7aad64$exports, "focus-ring", () => $32d597b82a7aad64$export$f39a09f249340e2a, (v) => $32d597b82a7aad64$export$f39a09f249340e2a = v);
54
- $parcel$export($32d597b82a7aad64$exports, "i18nFontFamily", () => $32d597b82a7aad64$export$8c4ee2c50c22c514, (v) => $32d597b82a7aad64$export$8c4ee2c50c22c514 = v);
55
- $parcel$export($32d597b82a7aad64$exports, "is-disabled", () => $32d597b82a7aad64$export$d35bc1e505d1ebbf, (v) => $32d597b82a7aad64$export$d35bc1e505d1ebbf = v);
56
- $parcel$export($32d597b82a7aad64$exports, "is-hovered", () => $32d597b82a7aad64$export$b8813cd5d7824ce7, (v) => $32d597b82a7aad64$export$b8813cd5d7824ce7 = v);
57
- $parcel$export($32d597b82a7aad64$exports, "is-selected", () => $32d597b82a7aad64$export$1e0fb04f31d3c22a, (v) => $32d597b82a7aad64$export$1e0fb04f31d3c22a = v);
58
- $parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing-ring", () => $32d597b82a7aad64$export$4109102f950813a6, (v) => $32d597b82a7aad64$export$4109102f950813a6 = v);
59
- $parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing", () => $32d597b82a7aad64$export$24c7f46a6e3605dd, (v) => $32d597b82a7aad64$export$24c7f46a6e3605dd = v);
60
- $parcel$export($32d597b82a7aad64$exports, "spectrum-FocusRing--quiet", () => $32d597b82a7aad64$export$2927016961429360, (v) => $32d597b82a7aad64$export$2927016961429360 = v);
61
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Icon", () => $32d597b82a7aad64$export$d374b04f30360026, (v) => $32d597b82a7aad64$export$d374b04f30360026 = v);
62
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs", () => $32d597b82a7aad64$export$35c105c0d9c8e56f, (v) => $32d597b82a7aad64$export$35c105c0d9c8e56f = v);
63
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--compact", () => $32d597b82a7aad64$export$e15c78184ee03abe, (v) => $32d597b82a7aad64$export$e15c78184ee03abe = v);
64
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--emphasized", () => $32d597b82a7aad64$export$87b15021e28e067a, (v) => $32d597b82a7aad64$export$87b15021e28e067a = v);
65
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--horizontal", () => $32d597b82a7aad64$export$229f1ac4d3d38f0e, (v) => $32d597b82a7aad64$export$229f1ac4d3d38f0e = v);
66
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--isCollapsed", () => $32d597b82a7aad64$export$ea514cd060922d6b, (v) => $32d597b82a7aad64$export$ea514cd060922d6b = v);
67
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--quiet", () => $32d597b82a7aad64$export$831e830d5828d42b, (v) => $32d597b82a7aad64$export$831e830d5828d42b = v);
68
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs--vertical", () => $32d597b82a7aad64$export$e415005be3957065, (v) => $32d597b82a7aad64$export$e415005be3957065 = v);
69
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-item", () => $32d597b82a7aad64$export$123e4c01a5440a3e, (v) => $32d597b82a7aad64$export$123e4c01a5440a3e = v);
70
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-itemLabel", () => $32d597b82a7aad64$export$1f253edac4b98526, (v) => $32d597b82a7aad64$export$1f253edac4b98526 = v);
71
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-picker", () => $32d597b82a7aad64$export$12dc6b25c6dddfc1, (v) => $32d597b82a7aad64$export$12dc6b25c6dddfc1 = v);
72
- $parcel$export($32d597b82a7aad64$exports, "spectrum-Tabs-selectionIndicator", () => $32d597b82a7aad64$export$a115f9117a19563e, (v) => $32d597b82a7aad64$export$a115f9117a19563e = v);
73
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel", () => $32d597b82a7aad64$export$34f1a65c57bb7bb, (v) => $32d597b82a7aad64$export$34f1a65c57bb7bb = v);
74
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--horizontal", () => $32d597b82a7aad64$export$778fb839eaa0528c, (v) => $32d597b82a7aad64$export$778fb839eaa0528c = v);
75
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel--vertical", () => $32d597b82a7aad64$export$9a6e2fb72c648072, (v) => $32d597b82a7aad64$export$9a6e2fb72c648072 = v);
76
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-collapseWrapper", () => $32d597b82a7aad64$export$e09869956b4c96f2, (v) => $32d597b82a7aad64$export$e09869956b4c96f2 = v);
77
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-tabpanel", () => $32d597b82a7aad64$export$acb5da0970288266, (v) => $32d597b82a7aad64$export$acb5da0970288266 = v);
78
- $parcel$export($32d597b82a7aad64$exports, "spectrum-TabsPanel-tabs", () => $32d597b82a7aad64$export$4a157a691c854e23, (v) => $32d597b82a7aad64$export$4a157a691c854e23 = v);
79
- var $32d597b82a7aad64$export$f39a09f249340e2a;
80
- var $32d597b82a7aad64$export$8c4ee2c50c22c514;
81
- var $32d597b82a7aad64$export$d35bc1e505d1ebbf;
82
- var $32d597b82a7aad64$export$b8813cd5d7824ce7;
83
- var $32d597b82a7aad64$export$1e0fb04f31d3c22a;
84
- var $32d597b82a7aad64$export$4109102f950813a6;
85
- var $32d597b82a7aad64$export$24c7f46a6e3605dd;
86
- var $32d597b82a7aad64$export$2927016961429360;
87
- var $32d597b82a7aad64$export$d374b04f30360026;
88
- var $32d597b82a7aad64$export$35c105c0d9c8e56f;
89
- var $32d597b82a7aad64$export$e15c78184ee03abe;
90
- var $32d597b82a7aad64$export$87b15021e28e067a;
91
- var $32d597b82a7aad64$export$229f1ac4d3d38f0e;
92
- var $32d597b82a7aad64$export$ea514cd060922d6b;
93
- var $32d597b82a7aad64$export$831e830d5828d42b;
94
- var $32d597b82a7aad64$export$e415005be3957065;
95
- var $32d597b82a7aad64$export$123e4c01a5440a3e;
96
- var $32d597b82a7aad64$export$1f253edac4b98526;
97
- var $32d597b82a7aad64$export$12dc6b25c6dddfc1;
98
- var $32d597b82a7aad64$export$a115f9117a19563e;
99
- var $32d597b82a7aad64$export$34f1a65c57bb7bb;
100
- var $32d597b82a7aad64$export$778fb839eaa0528c;
101
- var $32d597b82a7aad64$export$9a6e2fb72c648072;
102
- var $32d597b82a7aad64$export$e09869956b4c96f2;
103
- var $32d597b82a7aad64$export$acb5da0970288266;
104
- var $32d597b82a7aad64$export$4a157a691c854e23;
105
- $32d597b82a7aad64$export$f39a09f249340e2a = `FzVSrW_focus-ring`;
106
- $32d597b82a7aad64$export$8c4ee2c50c22c514 = `FzVSrW_i18nFontFamily`;
107
- $32d597b82a7aad64$export$d35bc1e505d1ebbf = `FzVSrW_is-disabled`;
108
- $32d597b82a7aad64$export$b8813cd5d7824ce7 = `FzVSrW_is-hovered`;
109
- $32d597b82a7aad64$export$1e0fb04f31d3c22a = `FzVSrW_is-selected`;
110
- $32d597b82a7aad64$export$4109102f950813a6 = `FzVSrW_spectrum-FocusRing-ring`;
111
- $32d597b82a7aad64$export$24c7f46a6e3605dd = `FzVSrW_spectrum-FocusRing ${$32d597b82a7aad64$export$4109102f950813a6}`;
112
- $32d597b82a7aad64$export$2927016961429360 = `FzVSrW_spectrum-FocusRing--quiet`;
113
- $32d597b82a7aad64$export$d374b04f30360026 = `FzVSrW_spectrum-Icon`;
114
- $32d597b82a7aad64$export$35c105c0d9c8e56f = `FzVSrW_spectrum-Tabs`;
115
- $32d597b82a7aad64$export$e15c78184ee03abe = `FzVSrW_spectrum-Tabs--compact`;
116
- $32d597b82a7aad64$export$87b15021e28e067a = `FzVSrW_spectrum-Tabs--emphasized`;
117
- $32d597b82a7aad64$export$229f1ac4d3d38f0e = `FzVSrW_spectrum-Tabs--horizontal`;
118
- $32d597b82a7aad64$export$ea514cd060922d6b = `FzVSrW_spectrum-Tabs--isCollapsed`;
119
- $32d597b82a7aad64$export$831e830d5828d42b = `FzVSrW_spectrum-Tabs--quiet`;
120
- $32d597b82a7aad64$export$e415005be3957065 = `FzVSrW_spectrum-Tabs--vertical`;
121
- $32d597b82a7aad64$export$123e4c01a5440a3e = `FzVSrW_spectrum-Tabs-item`;
122
- $32d597b82a7aad64$export$1f253edac4b98526 = `FzVSrW_spectrum-Tabs-itemLabel`;
123
- $32d597b82a7aad64$export$12dc6b25c6dddfc1 = `FzVSrW_spectrum-Tabs-picker`;
124
- $32d597b82a7aad64$export$a115f9117a19563e = `FzVSrW_spectrum-Tabs-selectionIndicator`;
125
- $32d597b82a7aad64$export$34f1a65c57bb7bb = `FzVSrW_spectrum-TabsPanel`;
126
- $32d597b82a7aad64$export$778fb839eaa0528c = `FzVSrW_spectrum-TabsPanel--horizontal`;
127
- $32d597b82a7aad64$export$9a6e2fb72c648072 = `FzVSrW_spectrum-TabsPanel--vertical`;
128
- $32d597b82a7aad64$export$e09869956b4c96f2 = `FzVSrW_spectrum-TabsPanel-collapseWrapper`;
129
- $32d597b82a7aad64$export$acb5da0970288266 = `FzVSrW_spectrum-TabsPanel-tabpanel`;
130
- $32d597b82a7aad64$export$4a157a691c854e23 = `FzVSrW_spectrum-TabsPanel-tabs`;
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
- const $65ab70ddbed1564b$var$TabContext = /*#__PURE__*/ (0, $cLzzU$react).createContext(null);
141
- function $65ab70ddbed1564b$var$Tabs(props, ref) {
142
- props = (0, $cLzzU$useProviderProps)(props);
143
- let { orientation: orientation = "horizontal", density: density = "regular", children: children, ...otherProps } = props;
144
- let domRef = (0, $cLzzU$useDOMRef)(ref);
145
- let tablistRef = (0, $cLzzU$useRef)();
146
- let wrapperRef = (0, $cLzzU$useRef)();
147
- let { direction: direction } = (0, $cLzzU$useLocale)();
148
- let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(otherProps);
149
- let [collapsed, setCollapsed] = (0, $cLzzU$useState)(false);
150
- let [selectedTab, setSelectedTab] = (0, $cLzzU$useState)();
151
- const [tabListState, setTabListState] = (0, $cLzzU$useState)(null);
152
- let [tabPositions, setTabPositions] = (0, $cLzzU$useState)([]);
153
- let prevTabPositions = (0, $cLzzU$useRef)(tabPositions);
154
- (0, $cLzzU$useEffect)(()=>{
155
- if (tablistRef.current) {
156
- let selectedTab = tablistRef.current.querySelector(`[data-key="${tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey}"]`);
157
- if (selectedTab != null) setSelectedTab(selectedTab);
158
- }
159
- // collapse is in the dep array so selectedTab can be updated for TabLine positioning
160
- }, [
161
- children,
162
- tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey,
163
- collapsed,
164
- tablistRef
165
- ]);
166
- let checkShouldCollapse = (0, $cLzzU$useCallback)(()=>{
167
- if (wrapperRef.current && orientation !== "vertical") {
168
- let tabsComponent = wrapperRef.current;
169
- let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
170
- let tabDimensions = [
171
- ...tabs
172
- ].map((tab)=>tab.getBoundingClientRect());
173
- let end = direction === "rtl" ? "left" : "right";
174
- let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
175
- let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
176
- let shouldCollapse = direction === "rtl" ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
177
- setCollapsed(shouldCollapse);
178
- if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
179
- var _prevTabPositions_current_index, _prevTabPositions_current_index1;
180
- return (box === null || box === void 0 ? void 0 : box.left) !== ((_prevTabPositions_current_index = prevTabPositions.current[index]) === null || _prevTabPositions_current_index === void 0 ? void 0 : _prevTabPositions_current_index.left) || (box === null || box === void 0 ? void 0 : box.right) !== ((_prevTabPositions_current_index1 = prevTabPositions.current[index]) === null || _prevTabPositions_current_index1 === void 0 ? void 0 : _prevTabPositions_current_index1.right);
181
- })) {
182
- setTabPositions(tabDimensions);
183
- prevTabPositions.current = tabDimensions;
184
- }
185
- }
186
- }, [
187
- tablistRef,
188
- wrapperRef,
189
- direction,
190
- orientation,
191
- setCollapsed,
192
- prevTabPositions,
193
- setTabPositions
194
- ]);
195
- (0, $cLzzU$useEffect)(()=>{
196
- checkShouldCollapse();
197
- }, [
198
- children,
199
- checkShouldCollapse
200
- ]);
201
- (0, $cLzzU$useResizeObserver)({
202
- ref: wrapperRef,
203
- onResize: checkShouldCollapse
204
- });
205
- let tabPanelProps = {
206
- "aria-labelledby": undefined
207
- };
208
- // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
209
- let collapsibleTabListId = (0, $cLzzU$useId)();
210
- if (collapsed && orientation !== "vertical") tabPanelProps["aria-labelledby"] = collapsibleTabListId;
211
- return /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabContext.Provider, {
212
- value: {
213
- tabProps: {
214
- ...props,
215
- orientation: orientation,
216
- density: density
217
- },
218
- tabState: {
219
- tabListState: tabListState,
220
- setTabListState: setTabListState,
221
- selectedTab: selectedTab,
222
- collapsed: collapsed
223
- },
224
- refs: {
225
- tablistRef: tablistRef,
226
- wrapperRef: wrapperRef
227
- },
228
- tabPanelProps: tabPanelProps,
229
- tabLineState: tabPositions
230
- }
231
- }, /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
232
- ...(0, $cLzzU$filterDOMProps)(otherProps),
233
- ...styleProps,
234
- ref: domRef,
235
- className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel", `spectrum-TabsPanel--${orientation}`, styleProps.className)
236
- }, props.children));
237
- }
238
- // @private
239
- function $65ab70ddbed1564b$var$Tab(props) {
240
- let { item: item, state: state } = props;
241
- let { key: key, rendered: rendered } = item;
242
- let ref = (0, $cLzzU$useRef)();
243
- let { tabProps: tabProps, isSelected: isSelected, isDisabled: isDisabled } = (0, $cLzzU$useTab)({
244
- key: key
245
- }, state, ref);
246
- let { hoverProps: hoverProps, isHovered: isHovered } = (0, $cLzzU$useHover)({
247
- ...props
248
- });
249
- let ElementType = item.props.href ? "a" : "div";
250
- return /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$FocusRing), {
251
- focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
252
- }, /*#__PURE__*/ (0, $cLzzU$react).createElement(ElementType, {
253
- ...(0, $cLzzU$mergeProps)(tabProps, hoverProps),
254
- ref: ref,
255
- className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-item", {
256
- "is-selected": isSelected,
257
- "is-disabled": isDisabled,
258
- "is-hovered": isHovered
259
- })
260
- }, /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$SlotProvider), {
261
- slots: {
262
- icon: {
263
- size: "S",
264
- UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Icon")
265
- },
266
- text: {
267
- UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-itemLabel")
268
- }
269
- }
270
- }, typeof rendered === "string" ? /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$Text), null, rendered) : rendered)));
271
- }
272
- // @private
273
- function $65ab70ddbed1564b$var$TabLine(props) {
274
- let { orientation: orientation, selectedTab: // Is either the tab node (non-collapsed) or the picker node (collapsed)
275
- selectedTab, selectedKey: // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change
276
- selectedKey } = props;
277
- let { direction: direction } = (0, $cLzzU$useLocale)();
278
- let { scale: scale } = (0, $cLzzU$useProvider)();
279
- let { tabLineState: tabLineState } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
280
- let [style, setStyle] = (0, $cLzzU$useState)({
281
- width: undefined,
282
- height: undefined
283
- });
284
- let onResize = (0, $cLzzU$useCallback)(()=>{
285
- if (selectedTab) {
286
- var _selectedTab_offsetParent;
287
- let styleObj = {
288
- transform: undefined,
289
- width: undefined,
290
- height: undefined
291
- };
292
- // 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
293
- let offset = direction === "rtl" ? -1 * (((_selectedTab_offsetParent = selectedTab.offsetParent) === null || _selectedTab_offsetParent === void 0 ? void 0 : _selectedTab_offsetParent.offsetWidth) - selectedTab.offsetWidth - selectedTab.offsetLeft) : selectedTab.offsetLeft;
294
- styleObj.transform = orientation === "vertical" ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
295
- if (orientation === "horizontal") styleObj.width = `${selectedTab.offsetWidth}px`;
296
- else styleObj.height = `${selectedTab.offsetHeight}px`;
297
- setStyle(styleObj);
298
- }
299
- }, [
300
- direction,
301
- setStyle,
302
- selectedTab,
303
- orientation
304
- ]);
305
- (0, $cLzzU$useLayoutEffect)(()=>{
306
- onResize();
307
- }, [
308
- onResize,
309
- scale,
310
- selectedKey,
311
- tabLineState
312
- ]);
313
- return /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
314
- className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-selectionIndicator"),
315
- role: "presentation",
316
- style: style
317
- });
318
- }
319
- function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
320
- const tabContext = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
321
- const { refs: refs, tabState: tabState, tabProps: tabProps, tabPanelProps: tabPanelProps } = tabContext;
322
- const { isQuiet: isQuiet, density: density, isEmphasized: isEmphasized, orientation: orientation } = tabProps;
323
- const { selectedTab: selectedTab, collapsed: collapsed, setTabListState: setTabListState } = tabState;
324
- const { tablistRef: tablistRef, wrapperRef: wrapperRef } = refs;
325
- // Pass original Tab props but override children to create the collection.
326
- const state = (0, $cLzzU$useTabListState)({
327
- ...tabProps,
328
- children: props.children
329
- });
330
- let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
331
- const { tabListProps: tabListProps } = (0, $cLzzU$useTabList)({
332
- ...tabProps,
333
- ...props
334
- }, state, tablistRef);
335
- (0, $cLzzU$useEffect)(()=>{
336
- // Passing back to root as useTabPanel needs the TabListState
337
- setTabListState(state);
338
- // eslint-disable-next-line react-hooks/exhaustive-deps
339
- }, [
340
- state.disabledKeys,
341
- state.selectedItem,
342
- state.selectedKey,
343
- props.children
344
- ]);
345
- let collapseStyle = collapsed && orientation !== "vertical" ? {
346
- maxWidth: "calc(100% + 1px)",
347
- overflow: "hidden",
348
- visibility: "hidden",
349
- position: "absolute"
350
- } : {
351
- maxWidth: "calc(100% + 1px)"
352
- };
353
- let stylePropsFinal = orientation === "vertical" ? styleProps : {
354
- style: collapseStyle
355
- };
356
- if (collapsed && orientation !== "vertical") tabListProps["aria-hidden"] = true;
357
- let tabListclassName = (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel-tabs");
358
- const tabContent = /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
359
- ...stylePropsFinal,
360
- ...tabListProps,
361
- ref: tablistRef,
362
- className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs", `spectrum-Tabs--${orientation}`, tabListclassName, {
363
- "spectrum-Tabs--quiet": isQuiet,
364
- "spectrum-Tabs--emphasized": isEmphasized,
365
- ["spectrum-Tabs--compact"]: density === "compact"
366
- }, orientation === "vertical" && styleProps.className)
367
- }, [
368
- ...state.collection
369
- ].map((item)=>/*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$Tab, {
370
- key: item.key,
371
- item: item,
372
- state: state,
373
- orientation: orientation
374
- })), /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabLine, {
375
- orientation: orientation,
376
- selectedTab: selectedTab
377
- }));
378
- if (orientation === "vertical") return tabContent;
379
- else return /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
380
- ...styleProps,
381
- ref: wrapperRef,
382
- className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel-collapseWrapper", styleProps.className)
383
- }, /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabPicker, {
384
- ...props,
385
- ...tabProps,
386
- visible: collapsed,
387
- id: tabPanelProps["aria-labelledby"],
388
- state: state,
389
- className: tabListclassName
390
- }), tabContent);
391
- }
392
- function $65ab70ddbed1564b$export$5dae8d435677f210(props) {
393
- const { tabState: tabState, tabProps: tabProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
394
- const { tabListState: tabListState } = tabState;
395
- const factory = (0, $cLzzU$useCallback)((nodes)=>new (0, $cLzzU$ListCollection)(nodes), []);
396
- const collection = (0, $cLzzU$useCollection)({
397
- items: tabProps.items,
398
- ...props
399
- }, factory, {
400
- suppressTextValueWarning: true
401
- });
402
- const selectedItem = tabListState ? collection.getItem(tabListState.selectedKey) : null;
403
- return /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabPanel, {
404
- ...props,
405
- key: tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey
406
- }, selectedItem && selectedItem.props.children);
407
- }
408
- // @private
409
- function $65ab70ddbed1564b$var$TabPanel(props) {
410
- const { tabState: tabState, tabPanelProps: ctxTabPanelProps } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
411
- const { tabListState: tabListState } = tabState;
412
- let ref = (0, $cLzzU$useRef)();
413
- const { tabPanelProps: tabPanelProps } = (0, $cLzzU$useTabPanel)(props, tabListState, ref);
414
- let { styleProps: styleProps } = (0, $cLzzU$useStyleProps)(props);
415
- if (ctxTabPanelProps["aria-labelledby"]) tabPanelProps["aria-labelledby"] = ctxTabPanelProps["aria-labelledby"];
416
- return /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$FocusRing), {
417
- focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
418
- }, /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
419
- ...styleProps,
420
- ...tabPanelProps,
421
- ref: ref,
422
- className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-TabsPanel-tabpanel", styleProps.className)
423
- }, props.children));
424
- }
425
- function $65ab70ddbed1564b$var$TabPicker(props) {
426
- let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, "aria-labelledby": ariaLabeledBy, "aria-label": ariaLabel, density: density, className: className, id: id, visible: visible } = props;
427
- let ref = (0, $cLzzU$useRef)();
428
- let [pickerNode, setPickerNode] = (0, $cLzzU$useState)(null);
429
- (0, $cLzzU$useEffect)(()=>{
430
- let node = (0, $cLzzU$unwrapDOMRef)(ref);
431
- setPickerNode(node.current);
432
- }, [
433
- ref
434
- ]);
435
- let items = [
436
- ...state.collection
437
- ];
438
- let pickerProps = {
439
- "aria-labelledby": ariaLabeledBy,
440
- "aria-label": ariaLabel
441
- };
442
- const style = visible ? {} : {
443
- visibility: "hidden",
444
- position: "absolute"
445
- };
446
- // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
447
- return /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
448
- className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs", "spectrum-Tabs--horizontal", "spectrum-Tabs--isCollapsed", {
449
- "spectrum-Tabs--quiet": isQuiet,
450
- ["spectrum-Tabs--compact"]: density === "compact",
451
- "spectrum-Tabs--emphasized": isEmphasized
452
- }, className),
453
- style: style,
454
- "aria-hidden": visible ? undefined : true
455
- }, /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$SlotProvider), {
456
- slots: {
457
- icon: {
458
- size: "S",
459
- UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Icon")
460
- },
461
- button: {
462
- focusRingClass: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "focus-ring")
463
- }
464
- }
465
- }, /*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$Picker), {
466
- ...pickerProps,
467
- id: id,
468
- items: items,
469
- ref: ref,
470
- isQuiet: true,
471
- isDisabled: !visible || isDisabled,
472
- selectedKey: state.selectedKey,
473
- disabledKeys: state.disabledKeys,
474
- onSelectionChange: state.setSelectedKey,
475
- UNSAFE_className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-picker")
476
- }, (item)=>/*#__PURE__*/ (0, $cLzzU$react).createElement((0, $cLzzU$Item), item.props, item.rendered)), pickerNode && /*#__PURE__*/ (0, $cLzzU$react).createElement($65ab70ddbed1564b$var$TabLine, {
477
- orientation: "horizontal",
478
- selectedTab: pickerNode,
479
- selectedKey: state.selectedKey
480
- })));
481
- }
482
- /**
483
- * 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.
484
- */ // forwardRef doesn't support generic parameters, so cast the result to the correct type
485
- // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
486
- const $65ab70ddbed1564b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $cLzzU$react).forwardRef($65ab70ddbed1564b$var$Tabs);
487
-
488
-
489
-
490
-
491
-
492
- export {$65ab70ddbed1564b$export$e51a686c67fdaa2d as TabList, $65ab70ddbed1564b$export$5dae8d435677f210 as TabPanels, $65ab70ddbed1564b$export$b2539bed5023c21c as Tabs, $7e899e8977e9ac07$re_export$Item as Item};
493
- //# sourceMappingURL=module.js.map