@react-spectrum/s2 0.10.0 → 0.11.0

package/dist/Tabs.cjs

@@ -53,7 +53,8 @@ const $b27519d6a701105b$var$InternalTabsContext = /*#__PURE__*/ (0, $5oxdw$react
 const $b27519d6a701105b$var$CollapseContext = /*#__PURE__*/ (0, $5oxdw$react.createContext)({
     showTabs: true,
     menuId: '',
-    valueId: ''
+    valueId: '',
+    tabs: []
 });
 const $b27519d6a701105b$var$tabs = function anonymous(props, overrides) {
     let rules = " ";
@@ -65,28 +66,28 @@ const $b27519d6a701105b$var$tabs = function anonymous(props, overrides) {
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (!position) rules += ' _Pc1';
-    rules += ' sd1';
-    if (!flexShrink) rules += ' _va1';
-    rules += ' uk1';
-    rules += ' uch1';
-    rules += ' udi1';
-    rules += ' uea1';
-    rules += ' ugb1';
-    rules += ' uhd1';
-    rules += ' uje1';
-    rules += ' u2NhKxcl1';
-    rules += ' uic1';
-    rules += ' -_6BNtrc-c1';
-    rules += ' vx1';
-    rules += ' wb1';
-    rules += ' xb1';
-    rules += ' _xa1';
-    rules += ' _Fd1';
-    rules += ' _FezxGHba1';
-    rules += ' _FnuYUweb1';
-    rules += ' pt1';
-    if (props.orientation === "horizontal") rules += ' _ta1';
+    if (!position) rules += ' _Pc11';
+    rules += ' sd11';
+    if (!flexShrink) rules += ' _va11';
+    rules += ' uk11';
+    rules += ' uch11';
+    rules += ' udi11';
+    rules += ' uea11';
+    rules += ' ugb11';
+    rules += ' uhd11';
+    rules += ' uje11';
+    rules += ' u2NhKxcl11';
+    rules += ' uic11';
+    rules += ' -_6BNtrc-c11';
+    rules += ' vx11';
+    rules += ' wb11';
+    rules += ' xb11';
+    rules += ' _xa11';
+    rules += ' _Fd11';
+    rules += ' _FezxGHba11';
+    rules += ' _FnuYUweb11';
+    rules += ' pt11';
+    if (props.orientation === "horizontal") rules += ' _ta11';
     return rules;
 };
 const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react.forwardRef)(function Tabs(props, ref) {
@@ -134,91 +135,132 @@ const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react
 });
 const $b27519d6a701105b$var$tablist = function anonymous(props) {
     let rules = " ";
-    rules += ' sd1';
+    rules += ' sd11';
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            if (props.density === "regular") rules += ' Uj1';
-            else if (props.density === "compact") rules += ' Ul1';
-        } else if (props.density === "regular") rules += ' Up1';
-        else if (props.density === "compact") rules += ' Uj1';
+            if (props.density === "regular") rules += ' Uj11';
+            else if (props.density === "compact") rules += ' Ul11';
+        } else if (props.density === "regular") rules += ' Up11';
+        else if (props.density === "compact") rules += ' Uj11';
     }
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            if (props.density === "regular") rules += ' qj1';
-            else if (props.density === "compact") rules += ' ql1';
-        } else if (props.density === "regular") rules += ' qp1';
-        else if (props.density === "compact") rules += ' qj1';
+            if (props.density === "regular") rules += ' qj11';
+            else if (props.density === "compact") rules += ' ql11';
+        } else if (props.density === "regular") rules += ' qp11';
+        else if (props.density === "compact") rules += ' qj11';
     }
-    if (props.orientation === "vertical") rules += ' _ta1';
-    if (props.orientation === "vertical") rules += ' Hz1';
-    if (props.orientation === "vertical") rules += ' Ix1';
-    rules += ' Nq1';
+    if (props.orientation === "vertical") rules += ' _ta11';
+    if (props.orientation === "vertical") rules += ' Hz11';
+    if (props.orientation === "vertical") rules += ' Ix11';
+    rules += ' Nq11';
+    return rules;
+};
+const $b27519d6a701105b$var$tablistWrapper = function anonymous(props, overrides) {
+    let rules = " ";
+    let position = false;
+    let minWidth = false;
+    let flexShrink = false;
+    let flexGrow = false;
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    for (let p of matches){
+        if (p[1] === "_P") position = true;
+        if (p[1] === "N") minWidth = true;
+        if (p[1] === "_v") flexShrink = true;
+        if (p[1] === "_u") flexGrow = true;
+        rules += p[0];
+    }
+    if (!position) rules += ' _Pc11';
+    if (!minWidth) rules += ' Na11';
+    if (!flexShrink) rules += ' _va11';
+    if (!flexGrow) rules += ' _ua11';
     return rules;
 };
 function $b27519d6a701105b$export$e51a686c67fdaa2d(props) {
-    let { showTabs: showTabs } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$CollapseContext) ?? {};
+    let { showTabs: showTabs, menuId: menuId, valueId: valueId, tabs: tabs, listRef: listRef, onSelectionChange: onSelectionChange, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$CollapseContext) ?? {};
+    let { density: density, orientation: orientation, labelBehavior: labelBehavior } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext);
     if (showTabs) return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$TabListInner, {
         ...props
     });
-    return null;
+    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)("div", {
+        className: $b27519d6a701105b$var$tablistWrapper(null, props.styles),
+        children: [
+            listRef && /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
+                className: $b27519d6a701105b$var$tablist({
+                    orientation: orientation,
+                    labelBehavior: labelBehavior,
+                    density: density
+                }),
+                children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$HiddenTabs, {
+                    items: tabs,
+                    density: density,
+                    listRef: listRef
+                })
+            }),
+            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$TabsMenu, {
+                id: menuId,
+                valueId: valueId,
+                items: tabs,
+                onSelectionChange: onSelectionChange,
+                "aria-label": ariaLabel,
+                "aria-describedby": ariaDescribedBy
+            })
+        ]
+    });
 }
-function $b27519d6a701105b$var$TabListInner(props1) {
-    let { tablistRef: tablistRef, density: density, labelBehavior: labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
-    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
-        style: props1.UNSAFE_style,
-        className: (props1.UNSAFE_className || '') + function anonymous(props, overrides) {
-            let rules = " ";
-            let position = false;
-            let flexGrow = false;
-            let flexShrink = false;
-            let minWidth = false;
-            let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
-            for (let p of matches){
-                if (p[1] === "_P") position = true;
-                if (p[1] === "_u") flexGrow = true;
-                if (p[1] === "_v") flexShrink = true;
-                if (p[1] === "N") minWidth = true;
-                rules += p[0];
-            }
-            if (!position) rules += ' _Pc1';
-            if (!flexGrow) rules += ' _ua1';
-            if (!flexShrink) rules += ' _va1';
-            if (!minWidth) rules += ' Nq1';
-            return rules;
-        }(null, props1.styles),
-        children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.TabList), {
-            ...props1,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            ref: tablistRef,
-            className: (renderProps)=>$b27519d6a701105b$var$tablist({
-                    ...renderProps,
+function $b27519d6a701105b$var$TabListInner(props) {
+    let { tablistRef: tablistRef, orientation: orientation, density: density, labelBehavior: labelBehavior, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
+    let { tabs: tabs, listRef: listRef } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$CollapseContext) ?? {};
+    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)("div", {
+        style: props.UNSAFE_style,
+        className: (props.UNSAFE_className || '') + $b27519d6a701105b$var$tablistWrapper(null, props.styles),
+        children: [
+            listRef && /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
+                className: $b27519d6a701105b$var$tablist({
+                    orientation: orientation,
                     labelBehavior: labelBehavior,
                     density: density
+                }),
+                children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$HiddenTabs, {
+                    items: tabs,
+                    density: density,
+                    listRef: listRef
                 })
-        })
+            }),
+            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.TabList), {
+                ...props,
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                ref: tablistRef,
+                className: (renderProps)=>$b27519d6a701105b$var$tablist({
+                        ...renderProps,
+                        labelBehavior: labelBehavior,
+                        density: density
+                    })
+            })
+        ]
     });
 }
 const $b27519d6a701105b$var$selectedIndicator = function anonymous(props) {
     let rules = " ";
-    rules += ' _Pa1';
-    if (props.isDisabled) rules += ' gH1';
-    else rules += ' g01';
-    if (props.isDisabled) rules += ' gld1';
-    else rules += ' gle1';
-    if (props.orientation === "horizontal") rules += ' FLvNfn1';
-    else rules += ' Fb1';
-    if (props.orientation === "vertical") rules += ' ZLvNfn1';
-    else rules += ' Za1';
-    rules += ' _lr1';
-    if (props.orientation === "vertical") rules += ' Wr1';
-    if (props.orientation === "horizontal") rules += ' _Er1';
-    if (props.orientation === "vertical") rules += ' _Aa1';
-    rules += ' _je1';
-    rules += ' og1';
-    rules += ' ng1';
-    rules += ' kg1';
-    rules += ' jg1';
+    rules += ' _Pa11';
+    if (props.isDisabled) rules += ' gH11';
+    else rules += ' g011';
+    if (props.isDisabled) rules += ' gld11';
+    else rules += ' gle11';
+    if (props.orientation === "horizontal") rules += ' FLvNfn11';
+    else rules += ' Fb11';
+    if (props.orientation === "vertical") rules += ' ZLvNfn11';
+    else rules += ' Za11';
+    rules += ' _lr11';
+    if (props.orientation === "vertical") rules += ' Wr11';
+    if (props.orientation === "horizontal") rules += ' _Er11';
+    if (props.orientation === "vertical") rules += ' _Aa11';
+    rules += ' _je11';
+    rules += ' og11';
+    rules += ' ng11';
+    rules += ' kg11';
+    rules += ' jg11';
     return rules;
 };
 const $b27519d6a701105b$var$tab = function anonymous(props, overrides) {
@@ -231,55 +273,55 @@ const $b27519d6a701105b$var$tab = function anonymous(props, overrides) {
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf1';
-    else rules += ' _Le1';
-    rules += ' Oh1';
-    rules += ' _Mc1';
-    rules += ' _Kd1';
-    rules += ' sd1';
-    if (props.isDisabled) rules += ' pp1';
+    if (props.isFocusVisible) rules += ' _Lf11';
+    else rules += ' _Le11';
+    rules += ' Oh11';
+    rules += ' _Mc11';
+    rules += ' _Kd11';
+    rules += ' sd11';
+    if (props.isDisabled) rules += ' pp11';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po1';
-        else if (props.isFocusVisible) rules += ' po1';
-        else if (props.isHovered) rules += ' po1';
-        else rules += ' pt1';
+        if (props.isPressed) rules += ' po11';
+        else if (props.isFocusVisible) rules += ' po11';
+        else if (props.isHovered) rules += ' po11';
+        else rules += ' pt11';
     } else {
-        if (props.isPressed) rules += ' pt1';
-        else if (props.isFocusVisible) rules += ' pt1';
-        else if (props.isHovered) rules += ' pt1';
-        else rules += ' pv1';
+        if (props.isPressed) rules += ' pt11';
+        else if (props.isFocusVisible) rules += ' pt11';
+        else if (props.isHovered) rules += ' pt11';
+        else rules += ' pv11';
     }
-    if (props.isDisabled) rules += ' plc1';
-    else if (props.isSelected) rules += ' pld1';
-    rules += ' oa1';
-    rules += ' na1';
-    rules += ' ka1';
-    rules += ' ja1';
-    rules += ' Uc1';
-    rules += ' Usd1';
-    rules += ' qc1';
-    rules += ' qsd1';
+    if (props.isDisabled) rules += ' plc11';
+    else if (props.isSelected) rules += ' pld11';
+    rules += ' oa11';
+    rules += ' na11';
+    rules += ' ka11';
+    rules += ' ja11';
+    rules += ' Uc11';
+    rules += ' Usd11';
+    rules += ' qc11';
+    rules += ' qsd11';
     if (props.orientation === "horizontal") {
-        if (props.density === "regular") rules += ' Fz1';
-        else if (props.density === "compact") rules += ' Fx1';
+        if (props.density === "regular") rules += ' Fz11';
+        else if (props.density === "compact") rules += ' Fx11';
     }
     if (props.orientation === "vertical") {
-        if (props.density === "regular") rules += ' Mk1';
-        else if (props.density === "compact") rules += ' Mi1';
+        if (props.density === "regular") rules += ' Mk11';
+        else if (props.density === "compact") rules += ' Mi11';
     }
-    rules += ' eb1';
-    if (!position) rules += ' _Pc1';
-    rules += ' ri1';
-    if (!flexShrink) rules += ' _va1';
-    rules += ' Yd1';
-    rules += ' Xb1';
-    rules += ' _2b1';
-    if (props.labelBehavior === "hide") rules += ' SssxDec1';
-    if (props.labelBehavior === "hide") rules += ' RssxDec1';
-    rules += ' __ca1';
+    rules += ' eb11';
+    if (!position) rules += ' _Pc11';
+    rules += ' ri11';
+    if (!flexShrink) rules += ' _va11';
+    rules += ' Yd11';
+    rules += ' Xb11';
+    rules += ' _2b11';
+    if (props.labelBehavior === "hide") rules += ' SssxDec11';
+    if (props.labelBehavior === "hide") rules += ' RssxDec11';
+    rules += ' __ca11';
     return rules;
 };
-const $b27519d6a701105b$var$icon = " sb1 _va1 -_8sjo0b-t5ZbAob1";
+const $b27519d6a701105b$var$icon = " sb11 _va11 -_8sjo0b-t5ZbAob11";
 function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
     let { density: density, orientation: orientation, labelBehavior: labelBehavior, prevRef: prevRef } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
     let contentId = (0, $5oxdw$reactariautils.useId)();
@@ -307,8 +349,8 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
                             id: contentId,
                             styles: function anonymous(props) {
                                 let rules = " ";
-                                rules += ' _Jb1';
-                                if (props.labelBehavior === "hide") rules += ' sk1';
+                                rules += ' _Jb11';
+                                if (props.labelBehavior === "hide") rules += ' sk11';
                                 return rules;
                             }({
                                 labelBehavior: labelBehavior
@@ -320,7 +362,7 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
                         {
                             render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
                                 slot: 'icon',
-                                styles: " _Ja1"
+                                styles: " _Ja11"
                             }),
                             styles: $b27519d6a701105b$var$icon
                         }
@@ -409,15 +451,15 @@ const $b27519d6a701105b$var$tabPanel = function anonymous(props, overrides) {
         if (p[1] === "M") minHeight = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf1';
-    else rules += ' _Le1';
-    rules += ' Oh1';
-    rules += ' _Mc1';
-    rules += ' _Kd1';
-    if (!marginTop) rules += ' Js1';
-    rules += ' pt1';
-    if (!flexGrow) rules += ' _ub1';
-    if (!minHeight) rules += ' Ma1';
+    if (props.isFocusVisible) rules += ' _Lf11';
+    else rules += ' _Le11';
+    rules += ' Oh11';
+    rules += ' _Mc11';
+    rules += ' _Kd11';
+    if (!marginTop) rules += ' Js11';
+    rules += ' pt11';
+    if (!flexGrow) rules += ' _ub11';
+    if (!minHeight) rules += ' Ma11';
     return rules;
 };
 function $b27519d6a701105b$export$3d96ec278d3efce4(props) {
@@ -464,12 +506,12 @@ function $b27519d6a701105b$var$isEveryTabDisabled(collection, disabledKeys) {
     return false;
 }
 let $b27519d6a701105b$var$HiddenTabs = function(props) {
-    let { listRef: listRef, items: items, size: size, density: density } = props;
+    let { listRef: listRef, items: items = [], size: size, density: density } = props;
     return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
         // @ts-ignore
         inert: (0, $5oxdw$reactariautils.inertValue)(true),
         ref: listRef,
-        className: " s40ub4c1 _t40ub4c1 U40ub4c1 q40ub4c1 _w40ub4c1 _Pa1 Wr1 _lr1 _Ar1 _zr1 _6b1 _Nc1 Pc1 _Ia1",
+        className: " s40ub4c11 _t40ub4c11 U40ub4c11 q40ub4c11 _w40ub4c11 _Pa11 Wr11 _lr11 _Ar11 _zr11 _6b11 _Nc11 Pc11 _Ia11",
         children: items.map((item)=>{
             // pull off individual props as an allow list, don't want refs or other props getting through
             return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
@@ -510,11 +552,11 @@ let $b27519d6a701105b$var$TabsMenu = (props1)=>{
     return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' sd1';
-            rules += ' _va1';
-            rules += ' eb1';
-            if (props.density === "regular") rules += ' Fz1';
-            else if (props.density === "compact") rules += ' Fx1';
+            rules += ' sd11';
+            rules += ' _va11';
+            rules += ' eb11';
+            if (props.density === "regular") rules += ' Fz11';
+            else if (props.density === "compact") rules += ' Fx11';
             return rules;
         }({
             density: density
@@ -546,7 +588,7 @@ let $b27519d6a701105b$var$TabsMenu = (props1)=>{
     });
 };
 let $b27519d6a701105b$var$CollapsingTabs = ({ collection: collection, containerRef: containerRef, ...props })=>{
-    let { density: density = 'regular', orientation: orientation = 'horizontal', labelBehavior: labelBehavior = 'show', onSelectionChange: onSelectionChange } = props;
+    let { orientation: orientation = 'horizontal', onSelectionChange: onSelectionChange } = props;
     let [showItems, _setShowItems] = (0, $5oxdw$react.useState)(true);
     showItems = orientation === 'vertical' ? true : showItems;
     let setShowItems = (0, $5oxdw$react.useCallback)((value)=>{
@@ -608,54 +650,37 @@ let $b27519d6a701105b$var$CollapsingTabs = ({ collection: collection, containerR
         },
         children: props.children
     });
-    else contents = /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)((0, $5oxdw$reactjsxruntime.Fragment), {
-        children: [
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$TabsMenu, {
-                id: menuId,
+    else contents = /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactjsxruntime.Fragment), {
+        children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
+            value: {
+                showTabs: false,
+                tabs: children,
+                menuId: menuId,
                 valueId: valueId,
-                items: children,
+                listRef: listRef,
                 onSelectionChange: onSelectionChange,
-                "aria-label": props['aria-label'],
-                "aria-describedby": props['aria-labelledby']
-            }),
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
-                value: {
-                    showTabs: false,
-                    menuId: menuId,
-                    valueId: valueId
-                },
-                children: props.children
-            })
-        ]
+                ariaLabel: props['aria-label'],
+                ariaDescribedBy: props['aria-labelledby']
+            },
+            children: props.children
+        })
     });
-    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)("div", {
+    return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
         style: props.UNSAFE_style,
         className: (props.UNSAFE_className || '') + $b27519d6a701105b$var$tabs({
             orientation: orientation
         }, props.styles),
         ref: containerRef,
-        children: [
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
-                className: $b27519d6a701105b$var$tablist({
-                    orientation: orientation,
-                    labelBehavior: labelBehavior,
-                    density: density
-                }),
-                children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$HiddenTabs, {
-                    items: children,
-                    density: density,
-                    listRef: listRef
-                })
-            }),
-            /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
-                value: {
-                    showTabs: true,
-                    menuId: menuId,
-                    valueId: valueId
-                },
-                children: contents
-            })
-        ]
+        children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapseContext.Provider, {
+            value: {
+                showTabs: true,
+                menuId: menuId,
+                valueId: valueId,
+                tabs: children,
+                listRef: listRef
+            },
+            children: contents
+        })
     });
 };