@react-spectrum/tabs 3.4.2-nightly.3660 → 3.4.2-nightly.3665

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 (7) hide show
  1. package/dist/main.js +28 -7
  2. package/dist/main.js.map +1 -1
  3. package/dist/module.js +28 -7
  4. package/dist/module.js.map +1 -1
  5. package/dist/types.d.ts.map +1 -1
  6. package/package.json +20 -20
  7. package/src/Tabs.tsx +30 -8
package/dist/main.js CHANGED
@@ -142,6 +142,8 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
142
142
  let [collapsed, setCollapsed] = (0, $8zXxA$react.useState)(false);
143
143
  let [selectedTab, setSelectedTab] = (0, $8zXxA$react.useState)();
144
144
  const [tabListState, setTabListState] = (0, $8zXxA$react.useState)(null);
145
+ let [tabPositions, setTabPositions] = (0, $8zXxA$react.useState)([]);
146
+ let prevTabPositions = (0, $8zXxA$react.useRef)(tabPositions);
145
147
  (0, $8zXxA$react.useEffect)(()=>{
146
148
  if (tablistRef.current) {
147
149
  let selectedTab = tablistRef.current.querySelector(`[data-key="${tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey}"]`);
@@ -158,19 +160,30 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
158
160
  if (wrapperRef.current && orientation !== "vertical") {
159
161
  let tabsComponent = wrapperRef.current;
160
162
  let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
161
- let lastTab = tabs[tabs.length - 1];
163
+ let tabDimensions = [
164
+ ...tabs
165
+ ].map((tab)=>tab.getBoundingClientRect());
162
166
  let end = direction === "rtl" ? "left" : "right";
163
167
  let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
164
- let farEdgeLastTab = lastTab === null || lastTab === void 0 ? void 0 : lastTab.getBoundingClientRect()[end];
168
+ let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
165
169
  let shouldCollapse = direction === "rtl" ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
166
170
  setCollapsed(shouldCollapse);
171
+ if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
172
+ var _prevTabPositions_current_index, _prevTabPositions_current_index1;
173
+ 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);
174
+ })) {
175
+ setTabPositions(tabDimensions);
176
+ prevTabPositions.current = tabDimensions;
177
+ }
167
178
  }
168
179
  }, [
169
180
  tablistRef,
170
181
  wrapperRef,
171
182
  direction,
172
183
  orientation,
173
- setCollapsed
184
+ setCollapsed,
185
+ prevTabPositions,
186
+ setTabPositions
174
187
  ]);
175
188
  (0, $8zXxA$react.useEffect)(()=>{
176
189
  checkShouldCollapse();
@@ -205,7 +218,8 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
205
218
  tablistRef: tablistRef,
206
219
  wrapperRef: wrapperRef
207
220
  },
208
- tabPanelProps: tabPanelProps
221
+ tabPanelProps: tabPanelProps,
222
+ tabLineState: tabPositions
209
223
  }
210
224
  }, /*#__PURE__*/ (0, ($parcel$interopDefault($8zXxA$react))).createElement("div", {
211
225
  ...(0, $8zXxA$reactariautils.filterDOMProps)(otherProps),
@@ -256,11 +270,12 @@ function $e8d58e7e32285ba6$var$TabLine(props) {
256
270
  selectedKey } = props;
257
271
  let { direction: direction } = (0, $8zXxA$reactariai18n.useLocale)();
258
272
  let { scale: scale } = (0, $8zXxA$reactspectrumprovider.useProvider)();
273
+ let { tabLineState: tabLineState } = (0, $8zXxA$react.useContext)($e8d58e7e32285ba6$var$TabContext);
259
274
  let [style, setStyle] = (0, $8zXxA$react.useState)({
260
275
  width: undefined,
261
276
  height: undefined
262
277
  });
263
- (0, $8zXxA$reactariautils.useLayoutEffect)(()=>{
278
+ let onResize = (0, $8zXxA$react.useCallback)(()=>{
264
279
  if (selectedTab) {
265
280
  var _selectedTab_offsetParent;
266
281
  let styleObj = {
@@ -279,9 +294,15 @@ function $e8d58e7e32285ba6$var$TabLine(props) {
279
294
  direction,
280
295
  setStyle,
281
296
  selectedTab,
282
- orientation,
297
+ orientation
298
+ ]);
299
+ (0, $8zXxA$reactariautils.useLayoutEffect)(()=>{
300
+ onResize();
301
+ }, [
302
+ onResize,
283
303
  scale,
284
- selectedKey
304
+ selectedKey,
305
+ tabLineState
285
306
  ]);
286
307
  return /*#__PURE__*/ (0, ($parcel$interopDefault($8zXxA$react))).createElement("div", {
287
308
  className: (0, $8zXxA$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Tabs-selectionIndicator"),
package/dist/main.js.map CHANGED
@@ -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 {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';\nimport React, {Key, MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\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 {useResizeObserver} from '@react-aria/utils';\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}\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\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 lastTab = tabs[tabs.length - 1];\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = lastTab?.getBoundingClientRect()[end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed]);\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 }}>\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<HTMLDivElement>();\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\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 </div>\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\n let [style, setStyle] = useState({\n width: undefined,\n height: undefined\n });\n\n useLayoutEffect(() => {\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\n }, [direction, setStyle, selectedTab, orientation, scale, selectedKey]);\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 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 = 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\n// @private\nfunction TabPanel<T>(props: SpectrumTabPanelsProps<T>) {\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].map((item) => ({\n rendered: item.rendered,\n textValue: item.textValue,\n id: item.key\n }));\n\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 textValue={item.textValue}>{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":"main.js.map"}
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 {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';\nimport React, {\n Key,\n MutableRefObject,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\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 {useResizeObserver} from '@react-aria/utils';\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<HTMLDivElement>();\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\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 </div>\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 = 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\n// @private\nfunction TabPanel<T>(props: SpectrumTabPanelsProps<T>) {\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].map((item) => ({\n rendered: item.rendered,\n textValue: item.textValue,\n id: item.key\n }));\n\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 textValue={item.textValue}>{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":"main.js.map"}
package/dist/module.js CHANGED
@@ -137,6 +137,8 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
137
137
  let [collapsed, setCollapsed] = (0, $cLzzU$useState)(false);
138
138
  let [selectedTab, setSelectedTab] = (0, $cLzzU$useState)();
139
139
  const [tabListState, setTabListState] = (0, $cLzzU$useState)(null);
140
+ let [tabPositions, setTabPositions] = (0, $cLzzU$useState)([]);
141
+ let prevTabPositions = (0, $cLzzU$useRef)(tabPositions);
140
142
  (0, $cLzzU$useEffect)(()=>{
141
143
  if (tablistRef.current) {
142
144
  let selectedTab = tablistRef.current.querySelector(`[data-key="${tabListState === null || tabListState === void 0 ? void 0 : tabListState.selectedKey}"]`);
@@ -153,19 +155,30 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
153
155
  if (wrapperRef.current && orientation !== "vertical") {
154
156
  let tabsComponent = wrapperRef.current;
155
157
  let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
156
- let lastTab = tabs[tabs.length - 1];
158
+ let tabDimensions = [
159
+ ...tabs
160
+ ].map((tab)=>tab.getBoundingClientRect());
157
161
  let end = direction === "rtl" ? "left" : "right";
158
162
  let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
159
- let farEdgeLastTab = lastTab === null || lastTab === void 0 ? void 0 : lastTab.getBoundingClientRect()[end];
163
+ let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
160
164
  let shouldCollapse = direction === "rtl" ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
161
165
  setCollapsed(shouldCollapse);
166
+ if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
167
+ var _prevTabPositions_current_index, _prevTabPositions_current_index1;
168
+ 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);
169
+ })) {
170
+ setTabPositions(tabDimensions);
171
+ prevTabPositions.current = tabDimensions;
172
+ }
162
173
  }
163
174
  }, [
164
175
  tablistRef,
165
176
  wrapperRef,
166
177
  direction,
167
178
  orientation,
168
- setCollapsed
179
+ setCollapsed,
180
+ prevTabPositions,
181
+ setTabPositions
169
182
  ]);
170
183
  (0, $cLzzU$useEffect)(()=>{
171
184
  checkShouldCollapse();
@@ -200,7 +213,8 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
200
213
  tablistRef: tablistRef,
201
214
  wrapperRef: wrapperRef
202
215
  },
203
- tabPanelProps: tabPanelProps
216
+ tabPanelProps: tabPanelProps,
217
+ tabLineState: tabPositions
204
218
  }
205
219
  }, /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
206
220
  ...(0, $cLzzU$filterDOMProps)(otherProps),
@@ -251,11 +265,12 @@ function $65ab70ddbed1564b$var$TabLine(props) {
251
265
  selectedKey } = props;
252
266
  let { direction: direction } = (0, $cLzzU$useLocale)();
253
267
  let { scale: scale } = (0, $cLzzU$useProvider)();
268
+ let { tabLineState: tabLineState } = (0, $cLzzU$useContext)($65ab70ddbed1564b$var$TabContext);
254
269
  let [style, setStyle] = (0, $cLzzU$useState)({
255
270
  width: undefined,
256
271
  height: undefined
257
272
  });
258
- (0, $cLzzU$useLayoutEffect)(()=>{
273
+ let onResize = (0, $cLzzU$useCallback)(()=>{
259
274
  if (selectedTab) {
260
275
  var _selectedTab_offsetParent;
261
276
  let styleObj = {
@@ -274,9 +289,15 @@ function $65ab70ddbed1564b$var$TabLine(props) {
274
289
  direction,
275
290
  setStyle,
276
291
  selectedTab,
277
- orientation,
292
+ orientation
293
+ ]);
294
+ (0, $cLzzU$useLayoutEffect)(()=>{
295
+ onResize();
296
+ }, [
297
+ onResize,
278
298
  scale,
279
- selectedKey
299
+ selectedKey,
300
+ tabLineState
280
301
  ]);
281
302
  return /*#__PURE__*/ (0, $cLzzU$react).createElement("div", {
282
303
  className: (0, $cLzzU$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($32d597b82a7aad64$exports))), "spectrum-Tabs-selectionIndicator"),
package/dist/module.js.map CHANGED
@@ -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 {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';\nimport React, {Key, MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\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 {useResizeObserver} from '@react-aria/utils';\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}\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\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 lastTab = tabs[tabs.length - 1];\n\n let end = direction === 'rtl' ? 'left' : 'right';\n let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];\n let farEdgeLastTab = lastTab?.getBoundingClientRect()[end];\n let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;\n setCollapsed(shouldCollapse);\n }\n }, [tablistRef, wrapperRef, direction, orientation, setCollapsed]);\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 }}>\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<HTMLDivElement>();\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\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 </div>\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\n let [style, setStyle] = useState({\n width: undefined,\n height: undefined\n });\n\n useLayoutEffect(() => {\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\n }, [direction, setStyle, selectedTab, orientation, scale, selectedKey]);\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 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 = 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\n// @private\nfunction TabPanel<T>(props: SpectrumTabPanelsProps<T>) {\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].map((item) => ({\n rendered: item.rendered,\n textValue: item.textValue,\n id: item.key\n }));\n\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 textValue={item.textValue}>{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":"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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 {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport {DOMProps, DOMRef, Node, Orientation} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {FocusRing} from '@react-aria/focus';\nimport {Item, Picker} from '@react-spectrum/picker';\nimport {ListCollection} from '@react-stately/list';\nimport {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';\nimport React, {\n Key,\n MutableRefObject,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumPickerProps} from '@react-types/select';\nimport {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';\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 {useResizeObserver} from '@react-aria/utils';\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<HTMLDivElement>();\n let {tabProps, isSelected, isDisabled} = useTab({key}, state, ref);\n\n let {hoverProps, isHovered} = useHover({\n ...props\n });\n let domProps = filterDOMProps(item.props);\n delete domProps.id;\n\n return (\n <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>\n <div\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 </div>\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 = 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\n// @private\nfunction TabPanel<T>(props: SpectrumTabPanelsProps<T>) {\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].map((item) => ({\n rendered: item.rendered,\n textValue: item.textValue,\n id: item.key\n }));\n\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 textValue={item.textValue}>{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"}
package/dist/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"mappings":";;;AA0OA;;;GAGG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,eAqExD;AAED;;;GAGG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,eAa5D;AAgHD;;GAEG;AAGH,OAAA,MAAM;UAA2E,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;AC5a1H,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":";;;AA+PA;;;GAGG;AACH,wBAAwB,CAAC,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,eAsExD;AAED;;;GAGG;AACH,0BAA0B,CAAC,EAAE,KAAK,EAAE,uBAAuB,CAAC,CAAC,eAa5D;AAgHD;;GAEG;AAGH,OAAA,MAAM;UAA2E,OAAO,cAAc,CAAC;MAAM,YAAY,CAAC;AClc1H,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.4.2-nightly.3660+1ddcde7b4",
3
+ "version": "3.4.2-nightly.3665+c183944ce",
4
4
  "description": "Spectrum UI components in React",
5
5
  "license": "Apache-2.0",
6
6
  "main": "dist/main.js",
@@ -31,27 +31,27 @@
31
31
  "url": "https://github.com/adobe/react-spectrum"
32
32
  },
33
33
  "dependencies": {
34
- "@react-aria/focus": "3.0.0-nightly.1960+1ddcde7b4",
35
- "@react-aria/i18n": "3.0.0-nightly.1960+1ddcde7b4",
36
- "@react-aria/interactions": "3.0.0-nightly.1960+1ddcde7b4",
37
- "@react-aria/tabs": "3.3.5-nightly.3660+1ddcde7b4",
38
- "@react-aria/utils": "3.0.0-nightly.1960+1ddcde7b4",
39
- "@react-spectrum/button": "3.0.0-nightly.1960+1ddcde7b4",
40
- "@react-spectrum/menu": "3.9.3-nightly.3660+1ddcde7b4",
41
- "@react-spectrum/picker": "3.9.3-nightly.3660+1ddcde7b4",
42
- "@react-spectrum/text": "3.3.5-nightly.3660+1ddcde7b4",
43
- "@react-spectrum/utils": "3.0.0-nightly.1960+1ddcde7b4",
44
- "@react-stately/collections": "3.0.0-nightly.1960+1ddcde7b4",
45
- "@react-stately/list": "3.6.2-nightly.3660+1ddcde7b4",
46
- "@react-stately/tabs": "3.0.0-nightly.1960+1ddcde7b4",
47
- "@react-types/select": "3.6.6-nightly.3660+1ddcde7b4",
48
- "@react-types/shared": "3.0.0-nightly.1960+1ddcde7b4",
49
- "@react-types/tabs": "3.1.6-nightly.3660+1ddcde7b4",
50
- "@spectrum-icons/workflow": "3.0.0-nightly.1960+1ddcde7b4",
34
+ "@react-aria/focus": "3.0.0-nightly.1965+c183944ce",
35
+ "@react-aria/i18n": "3.0.0-nightly.1965+c183944ce",
36
+ "@react-aria/interactions": "3.0.0-nightly.1965+c183944ce",
37
+ "@react-aria/tabs": "3.3.5-nightly.3665+c183944ce",
38
+ "@react-aria/utils": "3.0.0-nightly.1965+c183944ce",
39
+ "@react-spectrum/button": "3.0.0-nightly.1965+c183944ce",
40
+ "@react-spectrum/menu": "3.9.3-nightly.3665+c183944ce",
41
+ "@react-spectrum/picker": "3.9.3-nightly.3665+c183944ce",
42
+ "@react-spectrum/text": "3.3.5-nightly.3665+c183944ce",
43
+ "@react-spectrum/utils": "3.0.0-nightly.1965+c183944ce",
44
+ "@react-stately/collections": "3.0.0-nightly.1965+c183944ce",
45
+ "@react-stately/list": "3.6.2-nightly.3665+c183944ce",
46
+ "@react-stately/tabs": "3.0.0-nightly.1965+c183944ce",
47
+ "@react-types/select": "3.6.6-nightly.3665+c183944ce",
48
+ "@react-types/shared": "3.0.0-nightly.1965+c183944ce",
49
+ "@react-types/tabs": "3.1.6-nightly.3665+c183944ce",
50
+ "@spectrum-icons/workflow": "3.0.0-nightly.1965+c183944ce",
51
51
  "@swc/helpers": "^0.4.14"
52
52
  },
53
53
  "devDependencies": {
54
- "@adobe/spectrum-css-temp": "3.0.0-nightly.1960+1ddcde7b4"
54
+ "@adobe/spectrum-css-temp": "3.0.0-nightly.1965+c183944ce"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@react-spectrum/provider": "^3.0.0",
@@ -61,5 +61,5 @@
61
61
  "publishConfig": {
62
62
  "access": "public"
63
63
  },
64
- "gitHead": "1ddcde7b4fef9af7f08e11bb78d71fe60bbcc64b"
64
+ "gitHead": "c183944ce6a8ca1cf280a1c7b88d2ba393dd0252"
65
65
  }
package/src/Tabs.tsx CHANGED
@@ -17,7 +17,16 @@ import {FocusRing} from '@react-aria/focus';
17
17
  import {Item, Picker} from '@react-spectrum/picker';
18
18
  import {ListCollection} from '@react-stately/list';
19
19
  import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
20
- import React, {Key, MutableRefObject, ReactElement, useCallback, useContext, useEffect, useRef, useState} from 'react';
20
+ import React, {
21
+ Key,
22
+ MutableRefObject,
23
+ ReactElement,
24
+ useCallback,
25
+ useContext,
26
+ useEffect,
27
+ useRef,
28
+ useState
29
+ } from 'react';
21
30
  import {SpectrumPickerProps} from '@react-types/select';
22
31
  import {SpectrumTabListProps, SpectrumTabPanelsProps, SpectrumTabsProps} from '@react-types/tabs';
23
32
  import styles from '@adobe/spectrum-css-temp/components/tabs/vars.css';
@@ -44,7 +53,8 @@ interface TabsContext<T> {
44
53
  },
45
54
  tabPanelProps: {
46
55
  'aria-labelledby': string
47
- }
56
+ },
57
+ tabLineState: Array<DOMRect>
48
58
  }
49
59
 
50
60
  const TabContext = React.createContext<TabsContext<any>>(null);
@@ -67,6 +77,8 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
67
77
  let [collapsed, setCollapsed] = useState(false);
68
78
  let [selectedTab, setSelectedTab] = useState<HTMLElement>();
69
79
  const [tabListState, setTabListState] = useState<TabListState<T>>(null);
80
+ let [tabPositions, setTabPositions] = useState([]);
81
+ let prevTabPositions = useRef(tabPositions);
70
82
 
71
83
  useEffect(() => {
72
84
  if (tablistRef.current) {
@@ -83,15 +95,19 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
83
95
  if (wrapperRef.current && orientation !== 'vertical') {
84
96
  let tabsComponent = wrapperRef.current;
85
97
  let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
86
- let lastTab = tabs[tabs.length - 1];
98
+ let tabDimensions = [...tabs].map(tab => tab.getBoundingClientRect());
87
99
 
88
100
  let end = direction === 'rtl' ? 'left' : 'right';
89
101
  let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
90
- let farEdgeLastTab = lastTab?.getBoundingClientRect()[end];
102
+ let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
91
103
  let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
92
104
  setCollapsed(shouldCollapse);
105
+ if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index) => box?.left !== prevTabPositions.current[index]?.left || box?.right !== prevTabPositions.current[index]?.right)) {
106
+ setTabPositions(tabDimensions);
107
+ prevTabPositions.current = tabDimensions;
108
+ }
93
109
  }
94
- }, [tablistRef, wrapperRef, direction, orientation, setCollapsed]);
110
+ }, [tablistRef, wrapperRef, direction, orientation, setCollapsed, prevTabPositions, setTabPositions]);
95
111
 
96
112
  useEffect(() => {
97
113
  checkShouldCollapse();
@@ -114,7 +130,8 @@ function Tabs<T extends object>(props: SpectrumTabsProps<T>, ref: DOMRef<HTMLDiv
114
130
  tabProps: {...props, orientation, density},
115
131
  tabState: {tabListState, setTabListState, selectedTab, collapsed},
116
132
  refs: {tablistRef, wrapperRef},
117
- tabPanelProps
133
+ tabPanelProps,
134
+ tabLineState: tabPositions
118
135
  }}>
119
136
  <div
120
137
  {...filterDOMProps(otherProps)}
@@ -204,13 +221,14 @@ function TabLine(props: TabLineProps) {
204
221
 
205
222
  let {direction} = useLocale();
206
223
  let {scale} = useProvider();
224
+ let {tabLineState} = useContext(TabContext);
207
225
 
208
226
  let [style, setStyle] = useState({
209
227
  width: undefined,
210
228
  height: undefined
211
229
  });
212
230
 
213
- useLayoutEffect(() => {
231
+ let onResize = useCallback(() => {
214
232
  if (selectedTab) {
215
233
  let styleObj = {transform: undefined, width: undefined, height: undefined};
216
234
  // 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
@@ -226,8 +244,11 @@ function TabLine(props: TabLineProps) {
226
244
  }
227
245
  setStyle(styleObj);
228
246
  }
247
+ }, [direction, setStyle, selectedTab, orientation]);
229
248
 
230
- }, [direction, setStyle, selectedTab, orientation, scale, selectedKey]);
249
+ useLayoutEffect(() => {
250
+ onResize();
251
+ }, [onResize, scale, selectedKey, tabLineState]);
231
252
 
232
253
  return <div className={classNames(styles, 'spectrum-Tabs-selectionIndicator')} role="presentation" style={style} />;
233
254
  }
@@ -262,6 +283,7 @@ export function TabList<T>(props: SpectrumTabListProps<T>) {
262
283
  }
263
284
 
264
285
  let tabListclassName = classNames(styles, 'spectrum-TabsPanel-tabs');
286
+
265
287
  const tabContent = (
266
288
  <div
267
289
  {...stylePropsFinal}