@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/Tabs.cjs

@@ -60,34 +60,34 @@ const $b27519d6a701105b$var$tabs = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
     let flexShrink = 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|F|M|K)[^\s]+/g);
+    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|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    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';
+    if (!position) rules += ' _Pc12';
+    rules += ' sd12';
+    if (!flexShrink) rules += ' _va12';
+    rules += ' uk12';
+    rules += ' uch12';
+    rules += ' udi12';
+    rules += ' uea12';
+    rules += ' ugb12';
+    rules += ' uhd12';
+    rules += ' uje12';
+    rules += ' u2NhKxcl12';
+    rules += ' uic12';
+    rules += ' -_6BNtrc-c12';
+    rules += ' vx12';
+    rules += ' wb12';
+    rules += ' xb12';
+    rules += ' _xa12';
+    rules += ' _Fd12';
+    rules += ' _FezxGHba12';
+    rules += ' _FnuYUweb12';
+    rules += ' pt12';
+    if (props.orientation === "horizontal") rules += ' _ta12';
     return rules;
 };
 const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react.forwardRef)(function Tabs(props, ref) {
@@ -97,11 +97,6 @@ const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react
     let [value, setValue] = (0, $5oxdw$reactstatelyutils.useControlledState)(props.selectedKey, props.defaultSelectedKey ?? null, props.onSelectionChange);
     if (!props['aria-label'] && !props['aria-labelledby']) throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');
     let tablistRef = (0, $5oxdw$react.useRef)(null);
-    let prevRef = (0, $5oxdw$react.useRef)(null);
-    let onChange = (0, $5oxdw$reactariautils.useEffectEvent)((val)=>{
-        if (tablistRef.current) prevRef.current = tablistRef.current.querySelector('[role=tab][data-selected=true]')?.getBoundingClientRect() ?? null;
-        setValue(val);
-    });
     return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.Provider), {
         values: [
             [
@@ -113,8 +108,7 @@ const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react
                     disabledKeys: disabledKeys,
                     selectedKey: value,
                     tablistRef: tablistRef,
-                    prevRef: prevRef,
-                    onSelectionChange: onChange,
+                    onSelectionChange: setValue,
                     labelBehavior: labelBehavior,
                     'aria-label': props['aria-label'],
                     'aria-labelledby': props['aria-labelledby']
@@ -126,7 +120,7 @@ const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react
             children: (collection)=>/*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$CollapsingTabs, {
                     ...props,
                     selectedKey: value,
-                    onSelectionChange: onChange,
+                    onSelectionChange: setValue,
                     collection: collection,
                     containerRef: domRef
                 })
@@ -135,25 +129,25 @@ const $b27519d6a701105b$export$b2539bed5023c21c = /*#__PURE__*/ (0, $5oxdw$react
 });
 const $b27519d6a701105b$var$tablist = function anonymous(props) {
     let rules = " ";
-    rules += ' sd11';
+    rules += ' sd12';
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            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.density === "regular") rules += ' Uj12';
+            else if (props.density === "compact") rules += ' Ul12';
+        } else if (props.density === "regular") rules += ' Up12';
+        else if (props.density === "compact") rules += ' Uj12';
     }
     if (props.orientation === "horizontal") {
         if (props.labelBehavior === "hide") {
-            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.density === "regular") rules += ' qj12';
+            else if (props.density === "compact") rules += ' ql12';
+        } else if (props.density === "regular") rules += ' qp12';
+        else if (props.density === "compact") rules += ' qj12';
     }
-    if (props.orientation === "vertical") rules += ' _ta11';
-    if (props.orientation === "vertical") rules += ' Hz11';
-    if (props.orientation === "vertical") rules += ' Ix11';
-    rules += ' Nq11';
+    if (props.orientation === "vertical") rules += ' _ta12';
+    if (props.orientation === "vertical") rules += ' Hz12';
+    if (props.orientation === "vertical") rules += ' Ix12';
+    rules += ' Nq12';
     return rules;
 };
 const $b27519d6a701105b$var$tablistWrapper = function anonymous(props, overrides) {
@@ -162,7 +156,7 @@ const $b27519d6a701105b$var$tablistWrapper = function anonymous(props, overrides
     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);
+    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|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "N") minWidth = true;
@@ -170,10 +164,10 @@ const $b27519d6a701105b$var$tablistWrapper = function anonymous(props, overrides
         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';
+    if (!position) rules += ' _Pc12';
+    if (!minWidth) rules += ' Na12';
+    if (!flexShrink) rules += ' _va12';
+    if (!flexGrow) rules += ' _ua12';
     return rules;
 };
 function $b27519d6a701105b$export$e51a686c67fdaa2d(props) {
@@ -243,87 +237,93 @@ function $b27519d6a701105b$var$TabListInner(props) {
 }
 const $b27519d6a701105b$var$selectedIndicator = function anonymous(props) {
     let rules = " ";
-    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';
+    rules += ' _Pa12';
+    if (props.isDisabled) rules += ' gH12';
+    else rules += ' g012';
+    if (props.isDisabled) rules += ' gld12';
+    else rules += ' gle12';
+    if (props.orientation === "horizontal") rules += ' FLvNfn12';
+    else rules += ' Fb12';
+    if (props.orientation === "vertical") rules += ' ZLvNfn12';
+    else rules += ' Za12';
+    rules += ' _qg12';
+    rules += ' YIRyJjb12';
+    rules += ' Ydklsgce12';
+    rules += ' Xc12';
+    rules += ' _2a12';
+    rules += ' _lr12';
+    if (props.orientation === "vertical") rules += ' Wr12';
+    if (props.orientation === "horizontal") rules += ' _Er12';
+    if (props.orientation === "vertical") rules += ' _Aa12';
+    rules += ' _je12';
+    rules += ' og12';
+    rules += ' ng12';
+    rules += ' kg12';
+    rules += ' jg12';
     return rules;
 };
 const $b27519d6a701105b$var$tab = function anonymous(props, overrides) {
     let rules = " ";
     let position = false;
     let flexShrink = 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);
+    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|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "_P") position = true;
         if (p[1] === "_v") flexShrink = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf11';
-    else rules += ' _Le11';
-    rules += ' Oh11';
-    rules += ' _Mc11';
-    rules += ' _Kd11';
-    rules += ' sd11';
-    if (props.isDisabled) rules += ' pp11';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    rules += ' Oh12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
+    rules += ' sd12';
+    if (props.isDisabled) rules += ' pp12';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po11';
-        else if (props.isFocusVisible) rules += ' po11';
-        else if (props.isHovered) rules += ' po11';
-        else rules += ' pt11';
+        if (props.isPressed) rules += ' po12';
+        else if (props.isFocusVisible) rules += ' po12';
+        else if (props.isHovered) rules += ' po12';
+        else rules += ' pt12';
     } else {
-        if (props.isPressed) rules += ' pt11';
-        else if (props.isFocusVisible) rules += ' pt11';
-        else if (props.isHovered) rules += ' pt11';
-        else rules += ' pv11';
+        if (props.isPressed) rules += ' pt12';
+        else if (props.isFocusVisible) rules += ' pt12';
+        else if (props.isHovered) rules += ' pt12';
+        else rules += ' pv12';
     }
-    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.isDisabled) rules += ' plc12';
+    else if (props.isSelected) rules += ' pld12';
+    rules += ' oa12';
+    rules += ' na12';
+    rules += ' ka12';
+    rules += ' ja12';
+    rules += ' Uc12';
+    rules += ' Usd12';
+    rules += ' qc12';
+    rules += ' qsd12';
     if (props.orientation === "horizontal") {
-        if (props.density === "regular") rules += ' Fz11';
-        else if (props.density === "compact") rules += ' Fx11';
+        if (props.density === "regular") rules += ' Fz12';
+        else if (props.density === "compact") rules += ' Fx12';
     }
     if (props.orientation === "vertical") {
-        if (props.density === "regular") rules += ' Mk11';
-        else if (props.density === "compact") rules += ' Mi11';
+        if (props.density === "regular") rules += ' Mk12';
+        else if (props.density === "compact") rules += ' Mi12';
     }
-    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';
+    rules += ' eb12';
+    if (!position) rules += ' _Pc12';
+    rules += ' ri12';
+    rules += ' _Xa12';
+    if (!flexShrink) rules += ' _va12';
+    rules += ' Yd12';
+    rules += ' Xb12';
+    rules += ' _2b12';
+    if (props.labelBehavior === "hide") rules += ' SssxDec12';
+    if (props.labelBehavior === "hide") rules += ' RssxDec12';
+    rules += ' __ca12';
     return rules;
 };
-const $b27519d6a701105b$var$icon = " sb11 _va11 -_8sjo0b-t5ZbAob11";
+const $b27519d6a701105b$var$icon = " sb12 _va12 -_8sjo0b-t5ZbAob12";
 function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
-    let { density: density, orientation: orientation, labelBehavior: labelBehavior, prevRef: prevRef } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
+    let { density: density, orientation: orientation, labelBehavior: labelBehavior } = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$InternalTabsContext) ?? {};
     let contentId = (0, $5oxdw$reactariautils.useId)();
     let ariaLabelledBy = props1['aria-labelledby'] || '';
     return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.Tab), {
@@ -339,7 +339,7 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
                 orientation: orientation
             }, props1.styles),
         children: ({ isMenu: // @ts-ignore
-        isMenu, isSelected: isSelected, isDisabled: isDisabled })=>{
+        isMenu, isDisabled: isDisabled })=>{
             if (isMenu) return props1.children;
             else return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.Provider), {
                 values: [
@@ -349,8 +349,8 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
                             id: contentId,
                             styles: function anonymous(props) {
                                 let rules = " ";
-                                rules += ' _Jb11';
-                                if (props.labelBehavior === "hide") rules += ' sk11';
+                                rules += ' _Jb12';
+                                if (props.labelBehavior === "hide") rules += ' sk12';
                                 return rules;
                             }({
                                 labelBehavior: labelBehavior
@@ -362,17 +362,15 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
                         {
                             render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
                                 slot: 'icon',
-                                styles: " _Ja11"
+                                styles: " _Ja12"
                             }),
                             styles: $b27519d6a701105b$var$icon
                         }
                     ]
                 ],
                 children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$TabInner, {
-                    isSelected: isSelected,
                     orientation: orientation,
                     isDisabled: isDisabled,
-                    prevRef: prevRef,
                     children: typeof props1.children === 'string' ? /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
                         children: props1.children
                     }) : props1.children
@@ -381,54 +379,12 @@ function $b27519d6a701105b$export$3e41faf802a29e71(props1) {
         }
     });
 }
-function $b27519d6a701105b$var$TabInner({ isSelected: isSelected, isDisabled: isDisabled, orientation: orientation, children: children, prevRef: prevRef }) {
-    let reduceMotion = (0, $5oxdw$reactspectrumutils.useMediaQuery)('(prefers-reduced-motion: reduce)');
+function $b27519d6a701105b$var$TabInner({ isDisabled: isDisabled, orientation: orientation, children: children }) {
     let ref = (0, $5oxdw$react.useRef)(null);
-    (0, $5oxdw$reactariautils.useLayoutEffect)(()=>{
-        if (isSelected && prevRef?.current && ref?.current && !reduceMotion) {
-            let currentItem = ref?.current.getBoundingClientRect();
-            if (orientation === 'horizontal') {
-                let deltaX = prevRef.current.left - currentItem.left;
-                ref.current.animate([
-                    {
-                        transform: `translateX(${deltaX}px)`,
-                        width: `${prevRef.current.width}px`
-                    },
-                    {
-                        transform: 'translateX(0px)',
-                        width: '100%'
-                    }
-                ], {
-                    duration: 200,
-                    easing: 'ease-out'
-                });
-            } else {
-                let deltaY = prevRef.current.top - currentItem.top;
-                ref.current.animate([
-                    {
-                        transform: `translateY(${deltaY}px)`,
-                        height: `${prevRef.current.height}px`
-                    },
-                    {
-                        transform: 'translateY(0px)',
-                        height: '100%'
-                    }
-                ], {
-                    duration: 200,
-                    easing: 'ease-out'
-                });
-            }
-            prevRef.current = null;
-        }
-    }, [
-        isSelected,
-        reduceMotion,
-        prevRef,
-        orientation
-    ]);
+    let isHidden = (0, $5oxdw$react.useContext)($b27519d6a701105b$var$HiddenTabsContext);
     return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsxs)((0, $5oxdw$reactjsxruntime.Fragment), {
         children: [
-            isSelected && /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
+            !isHidden && /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)((0, $5oxdw$reactariacomponents.SelectionIndicator), {
                 ref: ref,
                 className: $b27519d6a701105b$var$selectedIndicator({
                     isDisabled: isDisabled,
@@ -444,22 +400,22 @@ const $b27519d6a701105b$var$tabPanel = function anonymous(props, overrides) {
     let marginTop = false;
     let flexGrow = false;
     let minHeight = 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|F|M|K)[^\s]+/g);
+    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|_6|Z|N|L|F|M|K)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "J") marginTop = true;
         if (p[1] === "_u") flexGrow = true;
         if (p[1] === "M") minHeight = true;
         rules += p[0];
     }
-    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';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    rules += ' Oh12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
+    if (!marginTop) rules += ' Js12';
+    rules += ' pt12';
+    if (!flexGrow) rules += ' _ub12';
+    if (!minHeight) rules += ' Ma12';
     return rules;
 };
 function $b27519d6a701105b$export$3d96ec278d3efce4(props) {
@@ -505,27 +461,31 @@ function $b27519d6a701105b$var$isEveryTabDisabled(collection, disabledKeys) {
     }
     return false;
 }
+const $b27519d6a701105b$var$HiddenTabsContext = /*#__PURE__*/ (0, $5oxdw$react.createContext)(false);
 let $b27519d6a701105b$var$HiddenTabs = function(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: " 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", {
-                "data-hidden-tab": true,
-                style: item.props.UNSAFE_style,
-                className: item.props.className({
-                    size: size,
-                    density: density
-                }),
-                children: item.props.children({
-                    size: size,
-                    density: density
-                })
-            }, item.key);
+        className: " s40ub4c12 _t40ub4c12 U40ub4c12 q40ub4c12 _w40ub4c12 _Pa12 Wr12 _lr12 _Ar12 _zr12 _6b12 _Nc12 Pc12 _Ia12",
+        children: /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)($b27519d6a701105b$var$HiddenTabsContext.Provider, {
+            value: true,
+            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", {
+                    "data-hidden-tab": true,
+                    style: item.props.UNSAFE_style,
+                    className: item.props.className({
+                        size: size,
+                        density: density
+                    }),
+                    children: item.props.children({
+                        size: size,
+                        density: density
+                    })
+                }, item.key);
+            })
         })
     });
 };
@@ -552,11 +512,11 @@ let $b27519d6a701105b$var$TabsMenu = (props1)=>{
     return /*#__PURE__*/ (0, $5oxdw$reactjsxruntime.jsx)("div", {
         className: function anonymous(props) {
             let rules = " ";
-            rules += ' sd11';
-            rules += ' _va11';
-            rules += ' eb11';
-            if (props.density === "regular") rules += ' Fz11';
-            else if (props.density === "compact") rules += ' Fx11';
+            rules += ' sd12';
+            rules += ' _va12';
+            rules += ' eb12';
+            if (props.density === "regular") rules += ' Fz12';
+            else if (props.density === "compact") rules += ' Fx12';
             return rules;
         }({
             density: density