@react-spectrum/tabs 3.8.29 → 3.9.0

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/import.mjs CHANGED
@@ -1,5 +1,5 @@
1
- import {TabList as $65ab70ddbed1564b$export$e51a686c67fdaa2d, TabPanels as $65ab70ddbed1564b$export$5dae8d435677f210, Tabs as $65ab70ddbed1564b$export$b2539bed5023c21c} from "./Tabs.mjs";
2
- import {Item as $7e899e8977e9ac07$re_export$Item} from "@react-stately/collections";
1
+ import {TabList as $d4989ab26053454b$re_export$TabList, TabPanels as $d4989ab26053454b$re_export$TabPanels, Tabs as $d4989ab26053454b$re_export$Tabs} from "@adobe/react-spectrum/Tabs";
2
+ import {Item as $d4989ab26053454b$re_export$Item} from "react-stately/Item";
3
3
 
4
4
  /*
5
5
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,5 +16,5 @@ import {Item as $7e899e8977e9ac07$re_export$Item} from "@react-stately/collectio
16
16
 
17
17
 
18
18
 
19
- export {$65ab70ddbed1564b$export$e51a686c67fdaa2d as TabList, $65ab70ddbed1564b$export$5dae8d435677f210 as TabPanels, $65ab70ddbed1564b$export$b2539bed5023c21c as Tabs, $7e899e8977e9ac07$re_export$Item as Item};
19
+ export {$d4989ab26053454b$re_export$TabList as TabList, $d4989ab26053454b$re_export$TabPanels as TabPanels, $d4989ab26053454b$re_export$Tabs as Tabs, $d4989ab26053454b$re_export$Item as Item};
20
20
  //# sourceMappingURL=module.js.map
package/dist/main.js CHANGED
@@ -1,15 +1,15 @@
1
- var $e8d58e7e32285ba6$exports = require("./Tabs.main.js");
2
- var $8zXxA$reactstatelycollections = require("@react-stately/collections");
1
+ var $cwccF$adobereactspectrumTabs = require("@adobe/react-spectrum/Tabs");
2
+ var $cwccF$reactstatelyItem = require("react-stately/Item");
3
3
 
4
4
 
5
5
  function $parcel$export(e, n, v, s) {
6
6
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
7
7
  }
8
8
 
9
- $parcel$export(module.exports, "TabList", () => $e8d58e7e32285ba6$exports.TabList);
10
- $parcel$export(module.exports, "TabPanels", () => $e8d58e7e32285ba6$exports.TabPanels);
11
- $parcel$export(module.exports, "Tabs", () => $e8d58e7e32285ba6$exports.Tabs);
12
- $parcel$export(module.exports, "Item", () => $8zXxA$reactstatelycollections.Item);
9
+ $parcel$export(module.exports, "TabList", function () { return $cwccF$adobereactspectrumTabs.TabList; });
10
+ $parcel$export(module.exports, "TabPanels", function () { return $cwccF$adobereactspectrumTabs.TabPanels; });
11
+ $parcel$export(module.exports, "Tabs", function () { return $cwccF$adobereactspectrumTabs.Tabs; });
12
+ $parcel$export(module.exports, "Item", function () { return $cwccF$reactstatelyItem.Item; });
13
13
  /*
14
14
  * Copyright 2020 Adobe. All rights reserved.
15
15
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C","sources":["packages/@react-spectrum/tabs/src/index.ts"],"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"],"names":[],"version":3,"file":"main.js.map"}
1
+ {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C","sources":["packages/@react-spectrum/tabs/src/index.ts"],"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 '@adobe/react-spectrum/Tabs';\n\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@adobe/react-spectrum/Tabs';\nexport {Item} from 'react-stately/Item';\n"],"names":[],"version":3,"file":"main.js.map"}
package/dist/module.js CHANGED
@@ -1,5 +1,5 @@
1
- import {TabList as $65ab70ddbed1564b$export$e51a686c67fdaa2d, TabPanels as $65ab70ddbed1564b$export$5dae8d435677f210, Tabs as $65ab70ddbed1564b$export$b2539bed5023c21c} from "./Tabs.module.js";
2
- import {Item as $7e899e8977e9ac07$re_export$Item} from "@react-stately/collections";
1
+ import {TabList as $d4989ab26053454b$re_export$TabList, TabPanels as $d4989ab26053454b$re_export$TabPanels, Tabs as $d4989ab26053454b$re_export$Tabs} from "@adobe/react-spectrum/Tabs";
2
+ import {Item as $d4989ab26053454b$re_export$Item} from "react-stately/Item";
3
3
 
4
4
  /*
5
5
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,5 +16,5 @@ import {Item as $7e899e8977e9ac07$re_export$Item} from "@react-stately/collectio
16
16
 
17
17
 
18
18
 
19
- export {$65ab70ddbed1564b$export$e51a686c67fdaa2d as TabList, $65ab70ddbed1564b$export$5dae8d435677f210 as TabPanels, $65ab70ddbed1564b$export$b2539bed5023c21c as Tabs, $7e899e8977e9ac07$re_export$Item as Item};
19
+ export {$d4989ab26053454b$re_export$TabList as TabList, $d4989ab26053454b$re_export$TabPanels as TabPanels, $d4989ab26053454b$re_export$Tabs as Tabs, $d4989ab26053454b$re_export$Item as Item};
20
20
  //# sourceMappingURL=module.js.map
@@ -1 +1 @@
1
- {"mappings":";;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C","sources":["packages/@react-spectrum/tabs/src/index.ts"],"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"],"names":[],"version":3,"file":"module.js.map"}
1
+ {"mappings":";;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C","sources":["packages/@react-spectrum/tabs/src/index.ts"],"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 '@adobe/react-spectrum/Tabs';\n\nexport type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@adobe/react-spectrum/Tabs';\nexport {Item} from 'react-stately/Item';\n"],"names":[],"version":3,"file":"module.js.map"}
@@ -0,0 +1,3 @@
1
+ export { TabList, TabPanels, Tabs } from '@adobe/react-spectrum/Tabs';
2
+ export type { SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps } from '@adobe/react-spectrum/Tabs';
3
+ export { Item } from 'react-stately/Item';
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "@react-spectrum/tabs",
3
- "version": "3.8.29",
3
+ "version": "3.9.0",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
7
7
  "module": "dist/module.js",
8
8
  "exports": {
9
- "source": "./src/index.ts",
10
- "types": [
11
- "./dist/types.d.ts",
12
- "./src/index.ts"
13
- ],
14
- "import": "./dist/import.mjs",
15
- "require": "./dist/main.js"
9
+ ".": {
10
+ "source": "./src/index.ts",
11
+ "types": "./dist/types/src/index.d.ts",
12
+ "import": "./dist/import.mjs",
13
+ "require": "./dist/main.js"
14
+ },
15
+ "./package.json": "./package.json"
16
16
  },
17
- "types": "dist/types.d.ts",
17
+ "types": "dist/types/src/index.d.ts",
18
18
  "source": "src/index.ts",
19
19
  "files": [
20
20
  "dist",
@@ -24,48 +24,23 @@
24
24
  "*.css"
25
25
  ],
26
26
  "targets": {
27
- "main": {
28
- "includeNodeModules": [
29
- "@adobe/spectrum-css-temp"
30
- ]
31
- },
32
- "module": {
33
- "includeNodeModules": [
34
- "@adobe/spectrum-css-temp"
35
- ]
36
- }
27
+ "types": false
37
28
  },
38
29
  "repository": {
39
30
  "type": "git",
40
31
  "url": "https://github.com/adobe/react-spectrum"
41
32
  },
42
33
  "dependencies": {
43
- "@react-aria/focus": "^3.21.4",
44
- "@react-aria/i18n": "^3.12.15",
45
- "@react-aria/interactions": "^3.27.0",
46
- "@react-aria/tabs": "^3.11.0",
47
- "@react-aria/utils": "^3.33.0",
48
- "@react-spectrum/picker": "^3.16.6",
49
- "@react-spectrum/text": "^3.5.24",
50
- "@react-spectrum/utils": "^3.12.11",
51
- "@react-stately/collections": "^3.12.9",
52
- "@react-stately/list": "^3.13.3",
53
- "@react-stately/tabs": "^3.8.8",
54
- "@react-types/select": "^3.12.1",
55
- "@react-types/shared": "^3.33.0",
56
- "@react-types/tabs": "^3.3.21",
57
- "@swc/helpers": "^0.5.0"
58
- },
59
- "devDependencies": {
60
- "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
34
+ "@adobe/react-spectrum": "3.47.0",
35
+ "@swc/helpers": "^0.5.0",
36
+ "react-stately": "3.46.0"
61
37
  },
62
38
  "peerDependencies": {
63
- "@react-spectrum/provider": "^3.0.0",
64
39
  "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
65
40
  "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
66
41
  },
67
42
  "publishConfig": {
68
43
  "access": "public"
69
44
  },
70
- "gitHead": "66e51757606b43a89ed02c574ca24517323a2ab9"
45
+ "gitHead": "a6999bdf494a2e9c0381a5881908328bdd22ddae"
71
46
  }
package/src/index.ts CHANGED
@@ -12,6 +12,7 @@
12
12
 
13
13
  /// <reference types="css-module-types" />
14
14
 
15
- export {TabList, TabPanels, Tabs} from './Tabs';
16
- export {Item} from '@react-stately/collections';
17
- export type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@react-types/tabs';
15
+ export {TabList, TabPanels, Tabs} from '@adobe/react-spectrum/Tabs';
16
+
17
+ export type {SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps} from '@adobe/react-spectrum/Tabs';
18
+ export {Item} from 'react-stately/Item';
package/dist/Tabs.main.js DELETED
@@ -1,402 +0,0 @@
1
- require("./tabs.a87f78a9.css");
2
- var $29add1fad43dc941$exports = require("./tabs_vars_css.main.js");
3
- var $31o9C$reactspectrumutils = require("@react-spectrum/utils");
4
- var $31o9C$reactariautils = require("@react-aria/utils");
5
- var $31o9C$reactariafocus = require("@react-aria/focus");
6
- var $31o9C$reactspectrumpicker = require("@react-spectrum/picker");
7
- var $31o9C$reactstatelylist = require("@react-stately/list");
8
- var $31o9C$react = require("react");
9
- var $31o9C$reactstatelytabs = require("@react-stately/tabs");
10
- var $31o9C$reactspectrumtext = require("@react-spectrum/text");
11
- var $31o9C$reactstatelycollections = require("@react-stately/collections");
12
- var $31o9C$reactariainteractions = require("@react-aria/interactions");
13
- var $31o9C$reactariai18n = require("@react-aria/i18n");
14
- var $31o9C$reactspectrumprovider = require("@react-spectrum/provider");
15
- var $31o9C$reactariatabs = require("@react-aria/tabs");
16
-
17
-
18
- function $parcel$interopDefault(a) {
19
- return a && a.__esModule ? a.default : a;
20
- }
21
-
22
- function $parcel$export(e, n, v, s) {
23
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
24
- }
25
-
26
- $parcel$export(module.exports, "Tabs", () => $e8d58e7e32285ba6$export$b2539bed5023c21c);
27
- $parcel$export(module.exports, "TabList", () => $e8d58e7e32285ba6$export$e51a686c67fdaa2d);
28
- $parcel$export(module.exports, "TabPanels", () => $e8d58e7e32285ba6$export$5dae8d435677f210);
29
- /*
30
- * Copyright 2020 Adobe. All rights reserved.
31
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
32
- * you may not use this file except in compliance with the License. You may obtain a copy
33
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
34
- *
35
- * Unless required by applicable law or agreed to in writing, software distributed under
36
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
37
- * OF ANY KIND, either express or implied. See the License for the specific language
38
- * governing permissions and limitations under the License.
39
- */
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
- const $e8d58e7e32285ba6$var$TabContext = /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createContext(null);
54
- const $e8d58e7e32285ba6$export$b2539bed5023c21c = /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).forwardRef(function Tabs(props, ref) {
55
- props = (0, $31o9C$reactspectrumprovider.useProviderProps)(props);
56
- let { orientation: orientation = 'horizontal', density: density = 'regular', children: children, ...otherProps } = props;
57
- let domRef = (0, $31o9C$reactspectrumutils.useDOMRef)(ref);
58
- let tablistRef = (0, $31o9C$react.useRef)(null);
59
- let wrapperRef = (0, $31o9C$react.useRef)(null);
60
- let { direction: direction } = (0, $31o9C$reactariai18n.useLocale)();
61
- let { styleProps: styleProps } = (0, $31o9C$reactspectrumutils.useStyleProps)(otherProps);
62
- let [collapsed, setCollapsed] = (0, $31o9C$react.useState)(false);
63
- let [selectedTab, setSelectedTab] = (0, $31o9C$react.useState)(null);
64
- const [tabListState, setTabListState] = (0, $31o9C$react.useState)(null);
65
- let [tabPositions, setTabPositions] = (0, $31o9C$react.useState)([]);
66
- let prevTabPositions = (0, $31o9C$react.useRef)(tabPositions);
67
- (0, $31o9C$react.useEffect)(()=>{
68
- if (tablistRef.current) {
69
- var _tabListState_selectedKey;
70
- var _tabListState_selectedKey_toString;
71
- let selectedTab = tablistRef.current.querySelector(`[data-key="${CSS.escape((_tabListState_selectedKey_toString = tabListState === null || tabListState === void 0 ? void 0 : (_tabListState_selectedKey = tabListState.selectedKey) === null || _tabListState_selectedKey === void 0 ? void 0 : _tabListState_selectedKey.toString()) !== null && _tabListState_selectedKey_toString !== void 0 ? _tabListState_selectedKey_toString : '')}"]`);
72
- if (selectedTab != null) setSelectedTab(selectedTab);
73
- }
74
- // collapse is in the dep array so selectedTab can be updated for TabLine positioning
75
- }, [
76
- children,
77
- tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey,
78
- collapsed,
79
- tablistRef
80
- ]);
81
- let checkShouldCollapse = (0, $31o9C$react.useCallback)(()=>{
82
- if (wrapperRef.current && orientation !== 'vertical') {
83
- var _tablistRef_current;
84
- let tabsComponent = wrapperRef.current;
85
- var _tablistRef_current_querySelectorAll;
86
- let tabs = (_tablistRef_current_querySelectorAll = (_tablistRef_current = tablistRef.current) === null || _tablistRef_current === void 0 ? void 0 : _tablistRef_current.querySelectorAll('[role="tab"]')) !== null && _tablistRef_current_querySelectorAll !== void 0 ? _tablistRef_current_querySelectorAll : new NodeList();
87
- let tabDimensions = [
88
- ...tabs
89
- ].map((tab)=>tab.getBoundingClientRect());
90
- let end = direction === 'rtl' ? 'left' : 'right';
91
- let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
92
- let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
93
- let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
94
- setCollapsed(shouldCollapse);
95
- if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
96
- var _prevTabPositions_current_index, _prevTabPositions_current_index1;
97
- 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);
98
- })) {
99
- setTabPositions(tabDimensions);
100
- prevTabPositions.current = tabDimensions;
101
- }
102
- }
103
- }, [
104
- tablistRef,
105
- wrapperRef,
106
- direction,
107
- orientation,
108
- setCollapsed,
109
- prevTabPositions,
110
- setTabPositions
111
- ]);
112
- (0, $31o9C$reactariautils.useLayoutEffect)(()=>{
113
- checkShouldCollapse();
114
- }, [
115
- children,
116
- checkShouldCollapse
117
- ]);
118
- (0, $31o9C$reactariautils.useResizeObserver)({
119
- ref: wrapperRef,
120
- onResize: checkShouldCollapse
121
- });
122
- let tabPanelProps = {
123
- 'aria-labelledby': undefined
124
- };
125
- // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
126
- let collapsibleTabListId = (0, $31o9C$reactariautils.useId)();
127
- if (collapsed && orientation !== 'vertical') tabPanelProps['aria-labelledby'] = collapsibleTabListId;
128
- return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabContext.Provider, {
129
- value: {
130
- tabProps: {
131
- ...props,
132
- orientation: orientation,
133
- density: density
134
- },
135
- tabState: {
136
- tabListState: tabListState,
137
- setTabListState: setTabListState,
138
- selectedTab: selectedTab,
139
- collapsed: collapsed
140
- },
141
- refs: {
142
- tablistRef: tablistRef,
143
- wrapperRef: wrapperRef
144
- },
145
- tabPanelProps: tabPanelProps,
146
- tabLineState: tabPositions
147
- }
148
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
149
- ...(0, $31o9C$reactariautils.filterDOMProps)(otherProps),
150
- ...styleProps,
151
- ref: domRef,
152
- className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel', `spectrum-TabsPanel--${orientation}`, styleProps.className)
153
- }, props.children));
154
- });
155
- // @private
156
- function $e8d58e7e32285ba6$var$Tab(props) {
157
- let { item: item, state: state } = props;
158
- let { key: key, rendered: rendered } = item;
159
- let ref = (0, $31o9C$react.useRef)(undefined);
160
- let { tabProps: tabProps, isSelected: isSelected, isDisabled: isDisabled } = (0, $31o9C$reactariatabs.useTab)({
161
- key: key
162
- }, state, ref);
163
- let { hoverProps: hoverProps, isHovered: isHovered } = (0, $31o9C$reactariainteractions.useHover)({
164
- ...props
165
- });
166
- let ElementType = item.props.href ? 'a' : 'div';
167
- return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactariafocus.FocusRing), {
168
- focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'focus-ring')
169
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement(ElementType, {
170
- ...(0, $31o9C$reactariautils.mergeProps)(tabProps, hoverProps),
171
- ref: ref,
172
- className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-item', {
173
- 'is-selected': isSelected,
174
- 'is-disabled': isDisabled,
175
- 'is-hovered': isHovered
176
- })
177
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumutils.SlotProvider), {
178
- slots: {
179
- icon: {
180
- size: 'S',
181
- UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Icon')
182
- },
183
- text: {
184
- UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-itemLabel')
185
- }
186
- }
187
- }, typeof rendered === 'string' ? /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumtext.Text), null, rendered) : rendered)));
188
- }
189
- // @private
190
- function $e8d58e7e32285ba6$var$TabLine(props) {
191
- let { orientation: orientation, selectedTab: // Is either the tab node (non-collapsed) or the picker node (collapsed)
192
- selectedTab, selectedKey: // selectedKey is provided so that the TabLine styles are updated when the TabPicker's width updates from a selection change
193
- selectedKey } = props;
194
- let { direction: direction } = (0, $31o9C$reactariai18n.useLocale)();
195
- let { scale: scale } = (0, $31o9C$reactspectrumprovider.useProvider)();
196
- let { tabLineState: tabLineState } = (0, $31o9C$react.useContext)($e8d58e7e32285ba6$var$TabContext);
197
- let [style, setStyle] = (0, $31o9C$react.useState)({
198
- width: undefined,
199
- height: undefined
200
- });
201
- let onResize = (0, $31o9C$react.useCallback)(()=>{
202
- if (selectedTab) {
203
- var _selectedTab_offsetParent;
204
- let styleObj = {
205
- transform: undefined,
206
- width: undefined,
207
- height: undefined
208
- };
209
- // 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
210
- 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;
211
- styleObj.transform = orientation === 'vertical' ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
212
- if (orientation === 'horizontal') styleObj.width = `${selectedTab.offsetWidth}px`;
213
- else styleObj.height = `${selectedTab.offsetHeight}px`;
214
- setStyle(styleObj);
215
- }
216
- }, [
217
- direction,
218
- setStyle,
219
- selectedTab,
220
- orientation
221
- ]);
222
- (0, $31o9C$reactariautils.useLayoutEffect)(()=>{
223
- onResize();
224
- }, [
225
- onResize,
226
- scale,
227
- selectedKey,
228
- tabLineState
229
- ]);
230
- return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
231
- className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-selectionIndicator'),
232
- role: "presentation",
233
- style: style
234
- });
235
- }
236
- function $e8d58e7e32285ba6$export$e51a686c67fdaa2d(props) {
237
- const tabContext = (0, $31o9C$react.useContext)($e8d58e7e32285ba6$var$TabContext);
238
- const { refs: refs, tabState: tabState, tabProps: tabProps, tabPanelProps: tabPanelProps } = tabContext;
239
- const { isQuiet: isQuiet, density: density, isEmphasized: isEmphasized, orientation: orientation } = tabProps;
240
- const { selectedTab: selectedTab, collapsed: collapsed, setTabListState: setTabListState } = tabState;
241
- const { tablistRef: tablistRef, wrapperRef: wrapperRef } = refs;
242
- // Pass original Tab props but override children to create the collection.
243
- const state = (0, $31o9C$reactstatelytabs.useTabListState)({
244
- ...tabProps,
245
- children: props.children
246
- });
247
- let { styleProps: styleProps } = (0, $31o9C$reactspectrumutils.useStyleProps)(props);
248
- const { tabListProps: tabListProps } = (0, $31o9C$reactariatabs.useTabList)({
249
- ...tabProps,
250
- ...props
251
- }, state, tablistRef);
252
- (0, $31o9C$react.useEffect)(()=>{
253
- // Passing back to root as useTabPanel needs the TabListState
254
- setTabListState(state);
255
- // eslint-disable-next-line react-hooks/exhaustive-deps
256
- }, [
257
- state.disabledKeys,
258
- state.selectedItem,
259
- state.selectedKey,
260
- props.children
261
- ]);
262
- let collapseStyle = collapsed && orientation !== 'vertical' ? {
263
- maxWidth: 'calc(100% + 1px)',
264
- overflow: 'hidden',
265
- visibility: 'hidden',
266
- position: 'absolute'
267
- } : {
268
- maxWidth: 'calc(100% + 1px)'
269
- };
270
- let stylePropsFinal = orientation === 'vertical' ? styleProps : {
271
- style: collapseStyle
272
- };
273
- if (collapsed && orientation !== 'vertical') tabListProps['aria-hidden'] = true;
274
- let tabListclassName = (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel-tabs');
275
- const tabContent = /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
276
- ...stylePropsFinal,
277
- ...tabListProps,
278
- ref: tablistRef,
279
- className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs', `spectrum-Tabs--${orientation}`, tabListclassName, {
280
- 'spectrum-Tabs--quiet': isQuiet,
281
- 'spectrum-Tabs--emphasized': isEmphasized,
282
- ['spectrum-Tabs--compact']: density === 'compact'
283
- }, orientation === 'vertical' && styleProps.className)
284
- }, [
285
- ...state.collection
286
- ].map((item)=>/*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$Tab, {
287
- key: item.key,
288
- item: item,
289
- state: state,
290
- orientation: orientation
291
- })), /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabLine, {
292
- orientation: orientation,
293
- selectedTab: selectedTab
294
- }));
295
- if (orientation === 'vertical') return tabContent;
296
- else return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
297
- ...styleProps,
298
- ref: wrapperRef,
299
- className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel-collapseWrapper', styleProps.className)
300
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabPicker, {
301
- ...props,
302
- ...tabProps,
303
- visible: collapsed,
304
- id: tabPanelProps['aria-labelledby'],
305
- state: state,
306
- className: tabListclassName
307
- }), tabContent);
308
- }
309
- function $e8d58e7e32285ba6$export$5dae8d435677f210(props) {
310
- const { tabState: tabState, tabProps: tabProps } = (0, $31o9C$react.useContext)($e8d58e7e32285ba6$var$TabContext);
311
- const { tabListState: tabListState } = tabState;
312
- const factory = (0, $31o9C$react.useCallback)((nodes)=>new (0, $31o9C$reactstatelylist.ListCollection)(nodes), []);
313
- const collection = (0, $31o9C$reactstatelycollections.useCollection)({
314
- items: tabProps.items,
315
- ...props
316
- }, factory, {
317
- suppressTextValueWarning: true
318
- });
319
- const selectedItem = tabListState && tabListState.selectedKey != null ? collection.getItem(tabListState.selectedKey) : null;
320
- return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabPanel, {
321
- ...props,
322
- key: tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey
323
- }, selectedItem && selectedItem.props.children);
324
- }
325
- // @private
326
- function $e8d58e7e32285ba6$var$TabPanel(props) {
327
- const { tabState: tabState, tabPanelProps: ctxTabPanelProps } = (0, $31o9C$react.useContext)($e8d58e7e32285ba6$var$TabContext);
328
- const { tabListState: tabListState } = tabState;
329
- let ref = (0, $31o9C$react.useRef)(null);
330
- const { tabPanelProps: tabPanelProps } = (0, $31o9C$reactariatabs.useTabPanel)(props, tabListState, ref);
331
- let { styleProps: styleProps } = (0, $31o9C$reactspectrumutils.useStyleProps)(props);
332
- if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
333
- return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactariafocus.FocusRing), {
334
- focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'focus-ring')
335
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
336
- ...styleProps,
337
- ...tabPanelProps,
338
- ref: ref,
339
- className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel-tabpanel', styleProps.className)
340
- }, props.children));
341
- }
342
- function $e8d58e7e32285ba6$var$TabPicker(props) {
343
- let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, 'aria-labelledby': ariaLabeledBy, 'aria-label': ariaLabel, density: density, className: className, id: id, visible: visible } = props;
344
- let ref = (0, $31o9C$react.useRef)(null);
345
- let [pickerNode, setPickerNode] = (0, $31o9C$react.useState)(null);
346
- (0, $31o9C$react.useEffect)(()=>{
347
- let node = (0, $31o9C$reactspectrumutils.unwrapDOMRef)(ref);
348
- setPickerNode(node.current);
349
- }, [
350
- ref
351
- ]);
352
- let items = [
353
- ...state.collection
354
- ];
355
- let pickerProps = {
356
- 'aria-labelledby': ariaLabeledBy,
357
- 'aria-label': ariaLabel
358
- };
359
- const style = visible ? {} : {
360
- visibility: 'hidden',
361
- position: 'absolute'
362
- };
363
- return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
364
- className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
365
- 'spectrum-Tabs--quiet': isQuiet,
366
- ['spectrum-Tabs--compact']: density === 'compact',
367
- 'spectrum-Tabs--emphasized': isEmphasized
368
- }, className),
369
- style: style,
370
- "aria-hidden": visible ? undefined : true
371
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumutils.SlotProvider), {
372
- slots: {
373
- icon: {
374
- size: 'S',
375
- UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Icon')
376
- },
377
- button: {
378
- focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'focus-ring')
379
- }
380
- }
381
- }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumpicker.Picker), {
382
- ...pickerProps,
383
- id: id,
384
- items: items,
385
- ref: ref,
386
- isQuiet: true,
387
- isDisabled: !visible || isDisabled,
388
- selectedKey: state.selectedKey,
389
- disabledKeys: state.disabledKeys,
390
- onSelectionChange: (key)=>{
391
- if (key != null) state.setSelectedKey(key);
392
- },
393
- UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-picker')
394
- }, (item)=>/*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumpicker.Item), item.props, item.rendered)), pickerNode && /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabLine, {
395
- orientation: "horizontal",
396
- selectedTab: pickerNode,
397
- selectedKey: state.selectedKey
398
- })));
399
- }
400
-
401
-
402
- //# sourceMappingURL=Tabs.main.js.map
@@ -1 +0,0 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/tabs/src/Tabs.tsx"],"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\nimport {AriaTabPanelProps, SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\nimport {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, DOMRefValue, Key, Node, Orientation, RefObject, 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 CSSProperties,\n HTMLAttributes,\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> | null,\n setTabListState: (state: TabListState<T>) => void,\n selectedTab: HTMLElement | null,\n collapsed: boolean\n },\n refs: {\n wrapperRef: RefObject<HTMLDivElement | null>,\n tablistRef: RefObject<HTMLDivElement | null>\n },\n tabPanelProps: HTMLAttributes<HTMLElement>,\n tabLineState: Array<DOMRect>\n}\n\nconst TabContext = React.createContext<TabsContext<any> | null>(null);\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\nexport const Tabs = React.forwardRef(function 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>(null);\n let wrapperRef = useRef<HTMLDivElement>(null);\n\n let {direction} = useLocale();\n let {styleProps} = useStyleProps(otherProps);\n let [collapsed, setCollapsed] = useState(false);\n let [selectedTab, setSelectedTab] = useState<HTMLElement | null>(null);\n const [tabListState, setTabListState] = useState<TabListState<T> | null>(null);\n let [tabPositions, setTabPositions] = useState<DOMRect[]>([]);\n let prevTabPositions = useRef<DOMRect[]>(tabPositions);\n\n useEffect(() => {\n if (tablistRef.current) {\n let selectedTab: HTMLElement | null = tablistRef.current.querySelector(`[data-key=\"${CSS.escape(tabListState?.selectedKey?.toString() ?? '')}\"]`);\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: NodeListOf<Element> = tablistRef.current?.querySelectorAll('[role=\"tab\"]') ?? new NodeList() as NodeListOf<Element>;\n let tabDimensions = [...tabs].map((tab: Element) => 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\n || 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 useLayoutEffect(() => {\n checkShouldCollapse();\n }, [children, checkShouldCollapse]);\n\n useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});\n\n let tabPanelProps: HTMLAttributes<HTMLElement> = {\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}) as <T>(props: SpectrumTabsProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;\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>(undefined);\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 | null,\n selectedKey?: Key | null\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<CSSProperties>({\n width: undefined,\n height: undefined\n });\n\n let onResize = useCallback(() => {\n if (selectedTab) {\n let styleObj: CSSProperties = {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' ?\n -1 * ((selectedTab.offsetParent as HTMLElement)?.offsetWidth - selectedTab.offsetWidth - selectedTab.offsetLeft) :\n 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>): ReactElement {\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 extends object>(props: SpectrumTabPanelsProps<T>): ReactElement {\n const {tabState, tabProps} = useContext(TabContext)!;\n const {tabListState} = tabState;\n\n const factory = useCallback((nodes: Iterable<Node<T>>) => new ListCollection(nodes), []);\n const collection = useCollection({items: tabProps.items, ...props}, factory, {suppressTextValueWarning: true});\n const selectedItem = tabListState && tabListState.selectedKey != null ? 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<HTMLDivElement | null>(null);\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' | 'onSelectionChange'> {\n density?: 'compact' | 'regular',\n isEmphasized?: boolean,\n state: TabListState<T>,\n className?: string,\n visible: boolean,\n onSelectionChange?: (key: Key) => void\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<DOMRefValue<HTMLDivElement>>(null);\n let [pickerNode, setPickerNode] = useState<HTMLElement | null>(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 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={key => {\n if (key != null) {\n state.setSelectedKey(key);\n }\n }}\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"],"names":[],"version":3,"file":"Tabs.main.js.map"}