npm - @react-spectrum/tabs - Versions diffs - 3.8.10-nightly.4623 → 3.8.10 - Mend

@react-spectrum/tabs 3.8.10-nightly.4623 → 3.8.10

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 (4) hide show

package/dist/Tabs.main.js CHANGED Viewed

@@ -53,7 +53,7 @@ $parcel$export(module.exports, "Tabs", () => $e8d58e7e32285ba6$export$b2539bed50
 const $e8d58e7e32285ba6$var$TabContext = /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createContext(null);
 function $e8d58e7e32285ba6$var$Tabs(props, ref) {
     props = (0, $31o9C$reactspectrumprovider.useProviderProps)(props);
-    let { orientation: orientation = "horizontal", density: density = "regular", children: children, ...otherProps } = props;
+    let { orientation: orientation = 'horizontal', density: density = 'regular', children: children, ...otherProps } = props;
     let domRef = (0, $31o9C$reactspectrumutils.useDOMRef)(ref);
     let tablistRef = (0, $31o9C$react.useRef)();
     let wrapperRef = (0, $31o9C$react.useRef)();
@@ -78,16 +78,16 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
         tablistRef
     ]);
     let checkShouldCollapse = (0, $31o9C$react.useCallback)(()=>{
-        if (wrapperRef.current && orientation !== "vertical") {
+        if (wrapperRef.current && orientation !== 'vertical') {
             let tabsComponent = wrapperRef.current;
             let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
             let tabDimensions = [
                 ...tabs
             ].map((tab)=>tab.getBoundingClientRect());
-            let end = direction === "rtl" ? "left" : "right";
+            let end = direction === 'rtl' ? 'left' : 'right';
             let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
             let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
-            let shouldCollapse = direction === "rtl" ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
+            let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
             setCollapsed(shouldCollapse);
             if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
                 var _prevTabPositions_current_index, _prevTabPositions_current_index1;
@@ -117,11 +117,11 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
         onResize: checkShouldCollapse
     });
     let tabPanelProps = {
-        "aria-labelledby": undefined
+        'aria-labelledby': undefined
     };
     // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
     let collapsibleTabListId = (0, $31o9C$reactariautils.useId)();
-    if (collapsed && orientation !== "vertical") tabPanelProps["aria-labelledby"] = collapsibleTabListId;
+    if (collapsed && orientation !== 'vertical') tabPanelProps['aria-labelledby'] = collapsibleTabListId;
     return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabContext.Provider, {
         value: {
             tabProps: {
@@ -146,7 +146,7 @@ function $e8d58e7e32285ba6$var$Tabs(props, ref) {
         ...(0, $31o9C$reactariautils.filterDOMProps)(otherProps),
         ...styleProps,
         ref: domRef,
-        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-TabsPanel", `spectrum-TabsPanel--${orientation}`, styleProps.className)
+        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel', `spectrum-TabsPanel--${orientation}`, styleProps.className)
     }, props.children));
 }
 // @private
@@ -160,28 +160,28 @@ function $e8d58e7e32285ba6$var$Tab(props) {
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $31o9C$reactariainteractions.useHover)({
         ...props
     });
-    let ElementType = item.props.href ? "a" : "div";
+    let ElementType = item.props.href ? 'a' : 'div';
     return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactariafocus.FocusRing), {
-        focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "focus-ring")
+        focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'focus-ring')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement(ElementType, {
         ...(0, $31o9C$reactariautils.mergeProps)(tabProps, hoverProps),
         ref: ref,
-        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Tabs-item", {
-            "is-selected": isSelected,
-            "is-disabled": isDisabled,
-            "is-hovered": isHovered
+        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-item', {
+            'is-selected': isSelected,
+            'is-disabled': isDisabled,
+            'is-hovered': isHovered
         })
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumutils.SlotProvider), {
         slots: {
             icon: {
-                size: "S",
-                UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Icon")
+                size: 'S',
+                UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Icon')
             },
             text: {
-                UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Tabs-itemLabel")
+                UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-itemLabel')
             }
         }
-    }, typeof rendered === "string" ? /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumtext.Text), null, rendered) : rendered)));
+    }, typeof rendered === 'string' ? /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumtext.Text), null, rendered) : rendered)));
 }
 // @private
 function $e8d58e7e32285ba6$var$TabLine(props) {
@@ -204,9 +204,9 @@ function $e8d58e7e32285ba6$var$TabLine(props) {
                 height: undefined
             };
             // 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
-            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;
-            styleObj.transform = orientation === "vertical" ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
-            if (orientation === "horizontal") styleObj.width = `${selectedTab.offsetWidth}px`;
+            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;
+            styleObj.transform = orientation === 'vertical' ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
+            if (orientation === 'horizontal') styleObj.width = `${selectedTab.offsetWidth}px`;
             else styleObj.height = `${selectedTab.offsetHeight}px`;
             setStyle(styleObj);
         }
@@ -225,7 +225,7 @@ function $e8d58e7e32285ba6$var$TabLine(props) {
         tabLineState
     ]);
     return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
-        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Tabs-selectionIndicator"),
+        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-selectionIndicator'),
         role: "presentation",
         style: style
     });
@@ -256,28 +256,28 @@ function $e8d58e7e32285ba6$export$e51a686c67fdaa2d(props) {
         state.selectedKey,
         props.children
     ]);
-    let collapseStyle = collapsed && orientation !== "vertical" ? {
-        maxWidth: "calc(100% + 1px)",
-        overflow: "hidden",
-        visibility: "hidden",
-        position: "absolute"
+    let collapseStyle = collapsed && orientation !== 'vertical' ? {
+        maxWidth: 'calc(100% + 1px)',
+        overflow: 'hidden',
+        visibility: 'hidden',
+        position: 'absolute'
     } : {
-        maxWidth: "calc(100% + 1px)"
+        maxWidth: 'calc(100% + 1px)'
     };
-    let stylePropsFinal = orientation === "vertical" ? styleProps : {
+    let stylePropsFinal = orientation === 'vertical' ? styleProps : {
         style: collapseStyle
     };
-    if (collapsed && orientation !== "vertical") tabListProps["aria-hidden"] = true;
-    let tabListclassName = (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-TabsPanel-tabs");
+    if (collapsed && orientation !== 'vertical') tabListProps['aria-hidden'] = true;
+    let tabListclassName = (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel-tabs');
     const tabContent = /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
         ...stylePropsFinal,
         ...tabListProps,
         ref: tablistRef,
-        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Tabs", `spectrum-Tabs--${orientation}`, tabListclassName, {
-            "spectrum-Tabs--quiet": isQuiet,
-            "spectrum-Tabs--emphasized": isEmphasized,
-            ["spectrum-Tabs--compact"]: density === "compact"
-        }, orientation === "vertical" && styleProps.className)
+        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs', `spectrum-Tabs--${orientation}`, tabListclassName, {
+            'spectrum-Tabs--quiet': isQuiet,
+            'spectrum-Tabs--emphasized': isEmphasized,
+            ['spectrum-Tabs--compact']: density === 'compact'
+        }, orientation === 'vertical' && styleProps.className)
     }, [
         ...state.collection
     ].map((item)=>/*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$Tab, {
@@ -289,16 +289,16 @@ function $e8d58e7e32285ba6$export$e51a686c67fdaa2d(props) {
         orientation: orientation,
         selectedTab: selectedTab
     }));
-    if (orientation === "vertical") return tabContent;
+    if (orientation === 'vertical') return tabContent;
     else return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
         ...styleProps,
         ref: wrapperRef,
-        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-TabsPanel-collapseWrapper", styleProps.className)
+        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel-collapseWrapper', styleProps.className)
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement($e8d58e7e32285ba6$var$TabPicker, {
         ...props,
         ...tabProps,
         visible: collapsed,
-        id: tabPanelProps["aria-labelledby"],
+        id: tabPanelProps['aria-labelledby'],
         state: state,
         className: tabListclassName
     }), tabContent);
@@ -326,18 +326,18 @@ function $e8d58e7e32285ba6$var$TabPanel(props) {
     let ref = (0, $31o9C$react.useRef)();
     const { tabPanelProps: tabPanelProps } = (0, $31o9C$reactariatabs.useTabPanel)(props, tabListState, ref);
     let { styleProps: styleProps } = (0, $31o9C$reactspectrumutils.useStyleProps)(props);
-    if (ctxTabPanelProps["aria-labelledby"]) tabPanelProps["aria-labelledby"] = ctxTabPanelProps["aria-labelledby"];
+    if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
     return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactariafocus.FocusRing), {
-        focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "focus-ring")
+        focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'focus-ring')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
         ...styleProps,
         ...tabPanelProps,
         ref: ref,
-        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-TabsPanel-tabpanel", styleProps.className)
+        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-TabsPanel-tabpanel', styleProps.className)
     }, props.children));
 }
 function $e8d58e7e32285ba6$var$TabPicker(props) {
-    let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, "aria-labelledby": ariaLabeledBy, "aria-label": ariaLabel, density: density, className: className, id: id, visible: visible } = props;
+    let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, 'aria-labelledby': ariaLabeledBy, 'aria-label': ariaLabel, density: density, className: className, id: id, visible: visible } = props;
     let ref = (0, $31o9C$react.useRef)();
     let [pickerNode, setPickerNode] = (0, $31o9C$react.useState)(null);
     (0, $31o9C$react.useEffect)(()=>{
@@ -350,30 +350,30 @@ function $e8d58e7e32285ba6$var$TabPicker(props) {
         ...state.collection
     ];
     let pickerProps = {
-        "aria-labelledby": ariaLabeledBy,
-        "aria-label": ariaLabel
+        'aria-labelledby': ariaLabeledBy,
+        'aria-label': ariaLabel
     };
     const style = visible ? {} : {
-        visibility: "hidden",
-        position: "absolute"
+        visibility: 'hidden',
+        position: 'absolute'
     };
     // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
     return /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement("div", {
-        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Tabs", "spectrum-Tabs--horizontal", "spectrum-Tabs--isCollapsed", {
-            "spectrum-Tabs--quiet": isQuiet,
-            ["spectrum-Tabs--compact"]: density === "compact",
-            "spectrum-Tabs--emphasized": isEmphasized
+        className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
+            'spectrum-Tabs--quiet': isQuiet,
+            ['spectrum-Tabs--compact']: density === 'compact',
+            'spectrum-Tabs--emphasized': isEmphasized
         }, className),
         style: style,
         "aria-hidden": visible ? undefined : true
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumutils.SlotProvider), {
         slots: {
             icon: {
-                size: "S",
-                UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Icon")
+                size: 'S',
+                UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Icon')
             },
             button: {
-                focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "focus-ring")
+                focusRingClass: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'focus-ring')
             }
         }
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($31o9C$react))).createElement((0, $31o9C$reactspectrumpicker.Picker), {
@@ -386,7 +386,7 @@ function $e8d58e7e32285ba6$var$TabPicker(props) {
         selectedKey: state.selectedKey,
         disabledKeys: state.disabledKeys,
         onSelectionChange: state.setSelectedKey,
-        UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), "spectrum-Tabs-picker")
+        UNSAFE_className: (0, $31o9C$reactspectrumutils.classNames)((0, ($parcel$interopDefault($29add1fad43dc941$exports))), 'spectrum-Tabs-picker')
     }, (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, {
         orientation: "horizontal",
         selectedTab: pickerNode,

package/dist/Tabs.mjs CHANGED Viewed

@@ -45,7 +45,7 @@ function $parcel$interopDefault(a) {
 const $65ab70ddbed1564b$var$TabContext = /*#__PURE__*/ (0, $14nVg$react).createContext(null);
 function $65ab70ddbed1564b$var$Tabs(props, ref) {
     props = (0, $14nVg$useProviderProps)(props);
-    let { orientation: orientation = "horizontal", density: density = "regular", children: children, ...otherProps } = props;
+    let { orientation: orientation = 'horizontal', density: density = 'regular', children: children, ...otherProps } = props;
     let domRef = (0, $14nVg$useDOMRef)(ref);
     let tablistRef = (0, $14nVg$useRef)();
     let wrapperRef = (0, $14nVg$useRef)();
@@ -70,16 +70,16 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
         tablistRef
     ]);
     let checkShouldCollapse = (0, $14nVg$useCallback)(()=>{
-        if (wrapperRef.current && orientation !== "vertical") {
+        if (wrapperRef.current && orientation !== 'vertical') {
             let tabsComponent = wrapperRef.current;
             let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
             let tabDimensions = [
                 ...tabs
             ].map((tab)=>tab.getBoundingClientRect());
-            let end = direction === "rtl" ? "left" : "right";
+            let end = direction === 'rtl' ? 'left' : 'right';
             let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
             let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
-            let shouldCollapse = direction === "rtl" ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
+            let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
             setCollapsed(shouldCollapse);
             if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
                 var _prevTabPositions_current_index, _prevTabPositions_current_index1;
@@ -109,11 +109,11 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
         onResize: checkShouldCollapse
     });
     let tabPanelProps = {
-        "aria-labelledby": undefined
+        'aria-labelledby': undefined
     };
     // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
     let collapsibleTabListId = (0, $14nVg$useId)();
-    if (collapsed && orientation !== "vertical") tabPanelProps["aria-labelledby"] = collapsibleTabListId;
+    if (collapsed && orientation !== 'vertical') tabPanelProps['aria-labelledby'] = collapsibleTabListId;
     return /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabContext.Provider, {
         value: {
             tabProps: {
@@ -138,7 +138,7 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
         ...(0, $14nVg$filterDOMProps)(otherProps),
         ...styleProps,
         ref: domRef,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel", `spectrum-TabsPanel--${orientation}`, styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel', `spectrum-TabsPanel--${orientation}`, styleProps.className)
     }, props.children));
 }
 // @private
@@ -152,28 +152,28 @@ function $65ab70ddbed1564b$var$Tab(props) {
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $14nVg$useHover)({
         ...props
     });
-    let ElementType = item.props.href ? "a" : "div";
+    let ElementType = item.props.href ? 'a' : 'div';
     return /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$FocusRing), {
-        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "focus-ring")
+        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'focus-ring')
     }, /*#__PURE__*/ (0, $14nVg$react).createElement(ElementType, {
         ...(0, $14nVg$mergeProps)(tabProps, hoverProps),
         ref: ref,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-item", {
-            "is-selected": isSelected,
-            "is-disabled": isDisabled,
-            "is-hovered": isHovered
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-item', {
+            'is-selected': isSelected,
+            'is-disabled': isDisabled,
+            'is-hovered': isHovered
         })
     }, /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$SlotProvider), {
         slots: {
             icon: {
-                size: "S",
-                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Icon")
+                size: 'S',
+                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Icon')
             },
             text: {
-                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-itemLabel")
+                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-itemLabel')
             }
         }
-    }, typeof rendered === "string" ? /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Text), null, rendered) : rendered)));
+    }, typeof rendered === 'string' ? /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Text), null, rendered) : rendered)));
 }
 // @private
 function $65ab70ddbed1564b$var$TabLine(props) {
@@ -196,9 +196,9 @@ function $65ab70ddbed1564b$var$TabLine(props) {
                 height: undefined
             };
             // 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
-            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;
-            styleObj.transform = orientation === "vertical" ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
-            if (orientation === "horizontal") styleObj.width = `${selectedTab.offsetWidth}px`;
+            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;
+            styleObj.transform = orientation === 'vertical' ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
+            if (orientation === 'horizontal') styleObj.width = `${selectedTab.offsetWidth}px`;
             else styleObj.height = `${selectedTab.offsetHeight}px`;
             setStyle(styleObj);
         }
@@ -217,7 +217,7 @@ function $65ab70ddbed1564b$var$TabLine(props) {
         tabLineState
     ]);
     return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-selectionIndicator"),
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-selectionIndicator'),
         role: "presentation",
         style: style
     });
@@ -248,28 +248,28 @@ function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
         state.selectedKey,
         props.children
     ]);
-    let collapseStyle = collapsed && orientation !== "vertical" ? {
-        maxWidth: "calc(100% + 1px)",
-        overflow: "hidden",
-        visibility: "hidden",
-        position: "absolute"
+    let collapseStyle = collapsed && orientation !== 'vertical' ? {
+        maxWidth: 'calc(100% + 1px)',
+        overflow: 'hidden',
+        visibility: 'hidden',
+        position: 'absolute'
     } : {
-        maxWidth: "calc(100% + 1px)"
+        maxWidth: 'calc(100% + 1px)'
     };
-    let stylePropsFinal = orientation === "vertical" ? styleProps : {
+    let stylePropsFinal = orientation === 'vertical' ? styleProps : {
         style: collapseStyle
     };
-    if (collapsed && orientation !== "vertical") tabListProps["aria-hidden"] = true;
-    let tabListclassName = (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel-tabs");
+    if (collapsed && orientation !== 'vertical') tabListProps['aria-hidden'] = true;
+    let tabListclassName = (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel-tabs');
     const tabContent = /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
         ...stylePropsFinal,
         ...tabListProps,
         ref: tablistRef,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs", `spectrum-Tabs--${orientation}`, tabListclassName, {
-            "spectrum-Tabs--quiet": isQuiet,
-            "spectrum-Tabs--emphasized": isEmphasized,
-            ["spectrum-Tabs--compact"]: density === "compact"
-        }, orientation === "vertical" && styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs', `spectrum-Tabs--${orientation}`, tabListclassName, {
+            'spectrum-Tabs--quiet': isQuiet,
+            'spectrum-Tabs--emphasized': isEmphasized,
+            ['spectrum-Tabs--compact']: density === 'compact'
+        }, orientation === 'vertical' && styleProps.className)
     }, [
         ...state.collection
     ].map((item)=>/*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$Tab, {
@@ -281,16 +281,16 @@ function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
         orientation: orientation,
         selectedTab: selectedTab
     }));
-    if (orientation === "vertical") return tabContent;
+    if (orientation === 'vertical') return tabContent;
     else return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
         ...styleProps,
         ref: wrapperRef,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel-collapseWrapper", styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel-collapseWrapper', styleProps.className)
     }, /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabPicker, {
         ...props,
         ...tabProps,
         visible: collapsed,
-        id: tabPanelProps["aria-labelledby"],
+        id: tabPanelProps['aria-labelledby'],
         state: state,
         className: tabListclassName
     }), tabContent);
@@ -318,18 +318,18 @@ function $65ab70ddbed1564b$var$TabPanel(props) {
     let ref = (0, $14nVg$useRef)();
     const { tabPanelProps: tabPanelProps } = (0, $14nVg$useTabPanel)(props, tabListState, ref);
     let { styleProps: styleProps } = (0, $14nVg$useStyleProps)(props);
-    if (ctxTabPanelProps["aria-labelledby"]) tabPanelProps["aria-labelledby"] = ctxTabPanelProps["aria-labelledby"];
+    if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
     return /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$FocusRing), {
-        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "focus-ring")
+        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'focus-ring')
     }, /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
         ...styleProps,
         ...tabPanelProps,
         ref: ref,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel-tabpanel", styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel-tabpanel', styleProps.className)
     }, props.children));
 }
 function $65ab70ddbed1564b$var$TabPicker(props) {
-    let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, "aria-labelledby": ariaLabeledBy, "aria-label": ariaLabel, density: density, className: className, id: id, visible: visible } = props;
+    let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, 'aria-labelledby': ariaLabeledBy, 'aria-label': ariaLabel, density: density, className: className, id: id, visible: visible } = props;
     let ref = (0, $14nVg$useRef)();
     let [pickerNode, setPickerNode] = (0, $14nVg$useState)(null);
     (0, $14nVg$useEffect)(()=>{
@@ -342,30 +342,30 @@ function $65ab70ddbed1564b$var$TabPicker(props) {
         ...state.collection
     ];
     let pickerProps = {
-        "aria-labelledby": ariaLabeledBy,
-        "aria-label": ariaLabel
+        'aria-labelledby': ariaLabeledBy,
+        'aria-label': ariaLabel
     };
     const style = visible ? {} : {
-        visibility: "hidden",
-        position: "absolute"
+        visibility: 'hidden',
+        position: 'absolute'
     };
     // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
     return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs", "spectrum-Tabs--horizontal", "spectrum-Tabs--isCollapsed", {
-            "spectrum-Tabs--quiet": isQuiet,
-            ["spectrum-Tabs--compact"]: density === "compact",
-            "spectrum-Tabs--emphasized": isEmphasized
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
+            'spectrum-Tabs--quiet': isQuiet,
+            ['spectrum-Tabs--compact']: density === 'compact',
+            'spectrum-Tabs--emphasized': isEmphasized
         }, className),
         style: style,
         "aria-hidden": visible ? undefined : true
     }, /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$SlotProvider), {
         slots: {
             icon: {
-                size: "S",
-                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Icon")
+                size: 'S',
+                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Icon')
             },
             button: {
-                focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "focus-ring")
+                focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'focus-ring')
             }
         }
     }, /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Picker), {
@@ -378,7 +378,7 @@ function $65ab70ddbed1564b$var$TabPicker(props) {
         selectedKey: state.selectedKey,
         disabledKeys: state.disabledKeys,
         onSelectionChange: state.setSelectedKey,
-        UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-picker")
+        UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-picker')
     }, (item)=>/*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Item), item.props, item.rendered)), pickerNode && /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabLine, {
         orientation: "horizontal",
         selectedTab: pickerNode,

package/dist/Tabs.module.js CHANGED Viewed

@@ -45,7 +45,7 @@ function $parcel$interopDefault(a) {
 const $65ab70ddbed1564b$var$TabContext = /*#__PURE__*/ (0, $14nVg$react).createContext(null);
 function $65ab70ddbed1564b$var$Tabs(props, ref) {
     props = (0, $14nVg$useProviderProps)(props);
-    let { orientation: orientation = "horizontal", density: density = "regular", children: children, ...otherProps } = props;
+    let { orientation: orientation = 'horizontal', density: density = 'regular', children: children, ...otherProps } = props;
     let domRef = (0, $14nVg$useDOMRef)(ref);
     let tablistRef = (0, $14nVg$useRef)();
     let wrapperRef = (0, $14nVg$useRef)();
@@ -70,16 +70,16 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
         tablistRef
     ]);
     let checkShouldCollapse = (0, $14nVg$useCallback)(()=>{
-        if (wrapperRef.current && orientation !== "vertical") {
+        if (wrapperRef.current && orientation !== 'vertical') {
             let tabsComponent = wrapperRef.current;
             let tabs = tablistRef.current.querySelectorAll('[role="tab"]');
             let tabDimensions = [
                 ...tabs
             ].map((tab)=>tab.getBoundingClientRect());
-            let end = direction === "rtl" ? "left" : "right";
+            let end = direction === 'rtl' ? 'left' : 'right';
             let farEdgeTabList = tabsComponent.getBoundingClientRect()[end];
             let farEdgeLastTab = tabDimensions[tabDimensions.length - 1][end];
-            let shouldCollapse = direction === "rtl" ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
+            let shouldCollapse = direction === 'rtl' ? farEdgeLastTab < farEdgeTabList : farEdgeTabList < farEdgeLastTab;
             setCollapsed(shouldCollapse);
             if (tabDimensions.length !== prevTabPositions.current.length || tabDimensions.some((box, index)=>{
                 var _prevTabPositions_current_index, _prevTabPositions_current_index1;
@@ -109,11 +109,11 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
         onResize: checkShouldCollapse
     });
     let tabPanelProps = {
-        "aria-labelledby": undefined
+        'aria-labelledby': undefined
     };
     // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
     let collapsibleTabListId = (0, $14nVg$useId)();
-    if (collapsed && orientation !== "vertical") tabPanelProps["aria-labelledby"] = collapsibleTabListId;
+    if (collapsed && orientation !== 'vertical') tabPanelProps['aria-labelledby'] = collapsibleTabListId;
     return /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabContext.Provider, {
         value: {
             tabProps: {
@@ -138,7 +138,7 @@ function $65ab70ddbed1564b$var$Tabs(props, ref) {
         ...(0, $14nVg$filterDOMProps)(otherProps),
         ...styleProps,
         ref: domRef,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel", `spectrum-TabsPanel--${orientation}`, styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel', `spectrum-TabsPanel--${orientation}`, styleProps.className)
     }, props.children));
 }
 // @private
@@ -152,28 +152,28 @@ function $65ab70ddbed1564b$var$Tab(props) {
     let { hoverProps: hoverProps, isHovered: isHovered } = (0, $14nVg$useHover)({
         ...props
     });
-    let ElementType = item.props.href ? "a" : "div";
+    let ElementType = item.props.href ? 'a' : 'div';
     return /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$FocusRing), {
-        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "focus-ring")
+        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'focus-ring')
     }, /*#__PURE__*/ (0, $14nVg$react).createElement(ElementType, {
         ...(0, $14nVg$mergeProps)(tabProps, hoverProps),
         ref: ref,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-item", {
-            "is-selected": isSelected,
-            "is-disabled": isDisabled,
-            "is-hovered": isHovered
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-item', {
+            'is-selected': isSelected,
+            'is-disabled': isDisabled,
+            'is-hovered': isHovered
         })
     }, /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$SlotProvider), {
         slots: {
             icon: {
-                size: "S",
-                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Icon")
+                size: 'S',
+                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Icon')
             },
             text: {
-                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-itemLabel")
+                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-itemLabel')
             }
         }
-    }, typeof rendered === "string" ? /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Text), null, rendered) : rendered)));
+    }, typeof rendered === 'string' ? /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Text), null, rendered) : rendered)));
 }
 // @private
 function $65ab70ddbed1564b$var$TabLine(props) {
@@ -196,9 +196,9 @@ function $65ab70ddbed1564b$var$TabLine(props) {
                 height: undefined
             };
             // 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
-            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;
-            styleObj.transform = orientation === "vertical" ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
-            if (orientation === "horizontal") styleObj.width = `${selectedTab.offsetWidth}px`;
+            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;
+            styleObj.transform = orientation === 'vertical' ? `translateY(${selectedTab.offsetTop}px)` : `translateX(${offset}px)`;
+            if (orientation === 'horizontal') styleObj.width = `${selectedTab.offsetWidth}px`;
             else styleObj.height = `${selectedTab.offsetHeight}px`;
             setStyle(styleObj);
         }
@@ -217,7 +217,7 @@ function $65ab70ddbed1564b$var$TabLine(props) {
         tabLineState
     ]);
     return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-selectionIndicator"),
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-selectionIndicator'),
         role: "presentation",
         style: style
     });
@@ -248,28 +248,28 @@ function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
         state.selectedKey,
         props.children
     ]);
-    let collapseStyle = collapsed && orientation !== "vertical" ? {
-        maxWidth: "calc(100% + 1px)",
-        overflow: "hidden",
-        visibility: "hidden",
-        position: "absolute"
+    let collapseStyle = collapsed && orientation !== 'vertical' ? {
+        maxWidth: 'calc(100% + 1px)',
+        overflow: 'hidden',
+        visibility: 'hidden',
+        position: 'absolute'
     } : {
-        maxWidth: "calc(100% + 1px)"
+        maxWidth: 'calc(100% + 1px)'
     };
-    let stylePropsFinal = orientation === "vertical" ? styleProps : {
+    let stylePropsFinal = orientation === 'vertical' ? styleProps : {
         style: collapseStyle
     };
-    if (collapsed && orientation !== "vertical") tabListProps["aria-hidden"] = true;
-    let tabListclassName = (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel-tabs");
+    if (collapsed && orientation !== 'vertical') tabListProps['aria-hidden'] = true;
+    let tabListclassName = (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel-tabs');
     const tabContent = /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
         ...stylePropsFinal,
         ...tabListProps,
         ref: tablistRef,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs", `spectrum-Tabs--${orientation}`, tabListclassName, {
-            "spectrum-Tabs--quiet": isQuiet,
-            "spectrum-Tabs--emphasized": isEmphasized,
-            ["spectrum-Tabs--compact"]: density === "compact"
-        }, orientation === "vertical" && styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs', `spectrum-Tabs--${orientation}`, tabListclassName, {
+            'spectrum-Tabs--quiet': isQuiet,
+            'spectrum-Tabs--emphasized': isEmphasized,
+            ['spectrum-Tabs--compact']: density === 'compact'
+        }, orientation === 'vertical' && styleProps.className)
     }, [
         ...state.collection
     ].map((item)=>/*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$Tab, {
@@ -281,16 +281,16 @@ function $65ab70ddbed1564b$export$e51a686c67fdaa2d(props) {
         orientation: orientation,
         selectedTab: selectedTab
     }));
-    if (orientation === "vertical") return tabContent;
+    if (orientation === 'vertical') return tabContent;
     else return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
         ...styleProps,
         ref: wrapperRef,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel-collapseWrapper", styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel-collapseWrapper', styleProps.className)
     }, /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabPicker, {
         ...props,
         ...tabProps,
         visible: collapsed,
-        id: tabPanelProps["aria-labelledby"],
+        id: tabPanelProps['aria-labelledby'],
         state: state,
         className: tabListclassName
     }), tabContent);
@@ -318,18 +318,18 @@ function $65ab70ddbed1564b$var$TabPanel(props) {
     let ref = (0, $14nVg$useRef)();
     const { tabPanelProps: tabPanelProps } = (0, $14nVg$useTabPanel)(props, tabListState, ref);
     let { styleProps: styleProps } = (0, $14nVg$useStyleProps)(props);
-    if (ctxTabPanelProps["aria-labelledby"]) tabPanelProps["aria-labelledby"] = ctxTabPanelProps["aria-labelledby"];
+    if (ctxTabPanelProps['aria-labelledby']) tabPanelProps['aria-labelledby'] = ctxTabPanelProps['aria-labelledby'];
     return /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$FocusRing), {
-        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "focus-ring")
+        focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'focus-ring')
     }, /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
         ...styleProps,
         ...tabPanelProps,
         ref: ref,
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-TabsPanel-tabpanel", styleProps.className)
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-TabsPanel-tabpanel', styleProps.className)
     }, props.children));
 }
 function $65ab70ddbed1564b$var$TabPicker(props) {
-    let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, "aria-labelledby": ariaLabeledBy, "aria-label": ariaLabel, density: density, className: className, id: id, visible: visible } = props;
+    let { isDisabled: isDisabled, isEmphasized: isEmphasized, isQuiet: isQuiet, state: state, 'aria-labelledby': ariaLabeledBy, 'aria-label': ariaLabel, density: density, className: className, id: id, visible: visible } = props;
     let ref = (0, $14nVg$useRef)();
     let [pickerNode, setPickerNode] = (0, $14nVg$useState)(null);
     (0, $14nVg$useEffect)(()=>{
@@ -342,30 +342,30 @@ function $65ab70ddbed1564b$var$TabPicker(props) {
         ...state.collection
     ];
     let pickerProps = {
-        "aria-labelledby": ariaLabeledBy,
-        "aria-label": ariaLabel
+        'aria-labelledby': ariaLabeledBy,
+        'aria-label': ariaLabel
     };
     const style = visible ? {} : {
-        visibility: "hidden",
-        position: "absolute"
+        visibility: 'hidden',
+        position: 'absolute'
     };
     // TODO: Figure out if tabListProps should go onto the div here, v2 doesn't do it
     return /*#__PURE__*/ (0, $14nVg$react).createElement("div", {
-        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs", "spectrum-Tabs--horizontal", "spectrum-Tabs--isCollapsed", {
-            "spectrum-Tabs--quiet": isQuiet,
-            ["spectrum-Tabs--compact"]: density === "compact",
-            "spectrum-Tabs--emphasized": isEmphasized
+        className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs', 'spectrum-Tabs--horizontal', 'spectrum-Tabs--isCollapsed', {
+            'spectrum-Tabs--quiet': isQuiet,
+            ['spectrum-Tabs--compact']: density === 'compact',
+            'spectrum-Tabs--emphasized': isEmphasized
         }, className),
         style: style,
         "aria-hidden": visible ? undefined : true
     }, /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$SlotProvider), {
         slots: {
             icon: {
-                size: "S",
-                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Icon")
+                size: 'S',
+                UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Icon')
             },
             button: {
-                focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "focus-ring")
+                focusRingClass: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'focus-ring')
             }
         }
     }, /*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Picker), {
@@ -378,7 +378,7 @@ function $65ab70ddbed1564b$var$TabPicker(props) {
         selectedKey: state.selectedKey,
         disabledKeys: state.disabledKeys,
         onSelectionChange: state.setSelectedKey,
-        UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), "spectrum-Tabs-picker")
+        UNSAFE_className: (0, $14nVg$classNames)((0, ($parcel$interopDefault($14nVg$tabs_vars_cssmodulejs))), 'spectrum-Tabs-picker')
     }, (item)=>/*#__PURE__*/ (0, $14nVg$react).createElement((0, $14nVg$Item), item.props, item.rendered)), pickerNode && /*#__PURE__*/ (0, $14nVg$react).createElement($65ab70ddbed1564b$var$TabLine, {
         orientation: "horizontal",
         selectedTab: pickerNode,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/tabs",
-  "version": "3.8.10-nightly.4623+b294de874",
+  "version": "3.8.10",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,24 +36,24 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "3.0.0-nightly.2911+b294de874",
-    "@react-aria/i18n": "3.0.0-nightly.2911+b294de874",
-    "@react-aria/interactions": "3.0.0-nightly.2911+b294de874",
-    "@react-aria/tabs": "3.9.1-nightly.4623+b294de874",
-    "@react-aria/utils": "3.0.0-nightly.2911+b294de874",
-    "@react-spectrum/picker": "3.14.5-nightly.4623+b294de874",
-    "@react-spectrum/text": "3.5.5-nightly.4623+b294de874",
-    "@react-spectrum/utils": "3.0.0-nightly.2911+b294de874",
-    "@react-stately/collections": "3.0.0-nightly.2911+b294de874",
-    "@react-stately/list": "3.10.5-nightly.4623+b294de874",
-    "@react-stately/tabs": "3.0.0-nightly.2911+b294de874",
-    "@react-types/select": "3.9.4-nightly.4623+b294de874",
-    "@react-types/shared": "3.0.0-nightly.2911+b294de874",
-    "@react-types/tabs": "3.3.7-nightly.4623+b294de874",
+    "@react-aria/focus": "^3.17.1",
+    "@react-aria/i18n": "^3.11.1",
+    "@react-aria/interactions": "^3.21.3",
+    "@react-aria/tabs": "^3.9.1",
+    "@react-aria/utils": "^3.24.1",
+    "@react-spectrum/picker": "^3.14.5",
+    "@react-spectrum/text": "^3.5.5",
+    "@react-spectrum/utils": "^3.11.7",
+    "@react-stately/collections": "^3.10.7",
+    "@react-stately/list": "^3.10.5",
+    "@react-stately/tabs": "^3.6.6",
+    "@react-types/select": "^3.9.4",
+    "@react-types/shared": "^3.23.1",
+    "@react-types/tabs": "^3.3.7",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.2911+b294de874"
+    "@adobe/spectrum-css-temp": "3.0.0-alpha.1"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -63,5 +63,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b294de874c16fad64bc4b930ccee1c9ffeb1c20f"
+  "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
 }