@react-spectrum/s2 0.11.2 → 0.12.0

package/dist/SegmentedControl.cjs

@@ -42,20 +42,20 @@ const $e33225559d5e019f$export$c083c44d8a07dd35 = /*#__PURE__*/ (0, $4JHQR$react
 const $e33225559d5e019f$var$segmentedControl = function anonymous(props, overrides) {
     let rules = " ";
     let width = 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] === "Z") width = true;
         rules += p[0];
     }
-    rules += ' sd112';
-    rules += ' Ub112';
-    rules += ' qb112';
-    rules += ' gH112';
-    rules += ' ob112';
-    rules += ' nb112';
-    rules += ' kb112';
-    rules += ' jb112';
-    if (!width) rules += ' ZJ112';
+    rules += ' sd12';
+    rules += ' Ub12';
+    rules += ' qb12';
+    rules += ' gH12';
+    rules += ' ob12';
+    rules += ' nb12';
+    rules += ' kb12';
+    rules += ' jb12';
+    if (!width) rules += ' ZJ12';
     return rules;
 };
 const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
@@ -66,7 +66,7 @@ const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
     let flexBasis = false;
     let flexShrink = false;
     let zIndex = 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] === "N") minWidth = true;
         if (p[1] === "_P") position = true;
@@ -76,215 +76,221 @@ const $e33225559d5e019f$var$controlItem = function anonymous(props, overrides) {
         if (p[1] === "_9") zIndex = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf112';
-    else rules += ' _Le112';
-    rules += ' Oh112';
-    rules += ' _Mc112';
-    rules += ' _Kd112';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    rules += ' Oh12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
     if (props.size === "XL") {
-        rules += ' uk112';
-        rules += ' uch112';
-        rules += ' udi112';
-        rules += ' uea112';
-        rules += ' ugb112';
-        rules += ' uhd112';
-        rules += ' uje112';
-        rules += ' u2NhKxcl112';
-        rules += ' uic112';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else if (props.size === "L") {
-        rules += ' uk112';
-        rules += ' uch112';
-        rules += ' udi112';
-        rules += ' uea112';
-        rules += ' ugb112';
-        rules += ' uhd112';
-        rules += ' uje112';
-        rules += ' u2NhKxcl112';
-        rules += ' uic112';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else if (props.size === "S") {
-        rules += ' uk112';
-        rules += ' uch112';
-        rules += ' udi112';
-        rules += ' uea112';
-        rules += ' ugb112';
-        rules += ' uhd112';
-        rules += ' uje112';
-        rules += ' u2NhKxcl112';
-        rules += ' uic112';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else if (props.size === "XS") {
-        rules += ' uk112';
-        rules += ' uch112';
-        rules += ' udi112';
-        rules += ' uea112';
-        rules += ' ugb112';
-        rules += ' uhd112';
-        rules += ' uje112';
-        rules += ' u2NhKxcl112';
-        rules += ' uic112';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else {
-        rules += ' uk112';
-        rules += ' uch112';
-        rules += ' udi112';
-        rules += ' uea112';
-        rules += ' ugb112';
-        rules += ' uhd112';
-        rules += ' uje112';
-        rules += ' u2NhKxcl112';
-        rules += ' uic112';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e112';
-        rules += ' vx112';
+        rules += ' -_6BNtrc-e12';
+        rules += ' vx12';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d112';
-        rules += ' vx112';
+        rules += ' -_6BNtrc-d12';
+        rules += ' vx12';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b112';
-        rules += ' vx112';
+        rules += ' -_6BNtrc-b12';
+        rules += ' vx12';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a112';
-        rules += ' vx112';
+        rules += ' -_6BNtrc-a12';
+        rules += ' vx12';
     } else {
-        rules += ' -_6BNtrc-c112';
-        rules += ' vx112';
+        rules += ' -_6BNtrc-c12';
+        rules += ' vx12';
     }
     if (props.size === "XL") {
-        rules += ' wb112';
-        rules += ' xb112';
-        rules += ' _xa112';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else if (props.size === "L") {
-        rules += ' wb112';
-        rules += ' xb112';
-        rules += ' _xa112';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else if (props.size === "S") {
-        rules += ' wb112';
-        rules += ' xb112';
-        rules += ' _xa112';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else if (props.size === "XS") {
-        rules += ' wb112';
-        rules += ' xb112';
-        rules += ' _xa112';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else {
-        rules += ' wb112';
-        rules += ' xb112';
-        rules += ' _xa112';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     }
     if (props.size === "XL") {
-        rules += ' _Fd112';
-        rules += ' _FezxGHba112';
-        rules += ' _FnuYUweb112';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else if (props.size === "L") {
-        rules += ' _Fd112';
-        rules += ' _FezxGHba112';
-        rules += ' _FnuYUweb112';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else if (props.size === "S") {
-        rules += ' _Fd112';
-        rules += ' _FezxGHba112';
-        rules += ' _FnuYUweb112';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else if (props.size === "XS") {
-        rules += ' _Fd112';
-        rules += ' _FezxGHba112';
-        rules += ' _FnuYUweb112';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else {
-        rules += ' _Fd112';
-        rules += ' _FezxGHba112';
-        rules += ' _FnuYUweb112';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     }
-    if (props.isDisabled) rules += ' pp112';
+    if (props.isDisabled) rules += ' pp12';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po112';
-        else if (props.isFocusVisible) rules += ' po112';
-        else if (props.isHovered) rules += ' po112';
-        else rules += ' pt112';
+        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 += ' pt112';
-        else if (props.isFocusVisible) rules += ' pt112';
-        else if (props.isHovered) rules += ' pt112';
-        else rules += ' pv112';
+        if (props.isPressed) rules += ' pt12';
+        else if (props.isFocusVisible) rules += ' pt12';
+        else if (props.isHovered) rules += ' pt12';
+        else rules += ' pv12';
     }
-    if (props.isSelected) rules += ' ple112';
-    else if (props.isDisabled) rules += ' plc112';
-    else rules += ' plb112';
-    rules += ' sd112';
-    rules += ' eb112';
-    rules += ' _oa112';
-    rules += ' Sv112';
-    rules += ' SgLWx3bd112';
-    rules += ' Rv112';
-    rules += ' RgLWx3bd112';
+    if (props.isSelected) rules += ' ple12';
+    else if (props.isDisabled) rules += ' plc12';
+    else rules += ' plb12';
+    rules += ' sd12';
+    rules += ' eb12';
+    rules += ' _oa12';
+    rules += ' Sv12';
+    rules += ' SgLWx3bd12';
+    rules += ' Rv12';
+    rules += ' RgLWx3bd12';
     if (props.size === "XL") {
-        if (!minWidth) rules += ' Nl112';
+        if (!minWidth) rules += ' Nl12';
     } else if (props.size === "L") {
-        if (!minWidth) rules += ' Nj112';
+        if (!minWidth) rules += ' Nj12';
     } else if (props.size === "S") {
-        if (!minWidth) rules += ' Nf112';
+        if (!minWidth) rules += ' Nf12';
     } else if (props.size === "XS") {
-        if (!minWidth) rules += ' Ne112';
-    } else if (!minWidth) rules += ' Nk112';
-    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec112';
-    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn112';
-    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b112';
-    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd112';
-    else rules += ' -SFnbic-_Jb112';
-    rules += ' -Bu7z1c-ob112';
-    rules += ' oj112';
-    rules += ' nj112';
-    rules += ' kj112';
-    rules += ' jj112';
-    rules += ' qc112';
-    rules += ' qsd112';
-    rules += ' -Qg41Lb-IAxCW0c112';
-    rules += ' -Qg41Lb-gLWx3bIy112';
-    rules += ' FRuFGYc112';
-    rules += ' _Ca112';
-    if (!position) rules += ' _Pc112';
-    rules += ' _yb112';
+        if (!minWidth) rules += ' Ne12';
+    } else if (!minWidth) rules += ' Nk12';
+    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec12';
+    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn12';
+    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b12';
+    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd12';
+    else rules += ' -SFnbic-_Jb12';
+    rules += ' -Bu7z1c-ob12';
+    rules += ' oj12';
+    rules += ' nj12';
+    rules += ' kj12';
+    rules += ' jj12';
+    rules += ' qc12';
+    rules += ' qsd12';
+    rules += ' -Qg41Lb-IAxCW0c12';
+    rules += ' -Qg41Lb-gLWx3bIy12';
+    rules += ' FRuFGYc12';
+    rules += ' _Ca12';
+    if (!position) rules += ' _Pc12';
+    rules += ' _yb12';
     if (props.isJustified) {
-        if (!flexGrow) rules += ' _ub112';
+        if (!flexGrow) rules += ' _ub12';
     }
     if (props.isJustified) {
-        if (!flexBasis) rules += ' _sb112';
+        if (!flexBasis) rules += ' _sb12';
     }
-    if (!flexShrink) rules += ' _va112';
-    rules += ' _7c112';
-    rules += ' __ca112';
-    rules += ' _4c112';
-    rules += ' g9112';
-    rules += ' _je112';
-    rules += ' -_8sjo0b-t5ZbAob112';
+    if (!flexShrink) rules += ' _va12';
+    rules += ' _7c12';
+    rules += ' __ca12';
+    rules += ' _4c12';
+    rules += ' g912';
+    rules += ' _je12';
+    rules += ' -_8sjo0b-t5ZbAob12';
     if (props.isSelected) {
-        if (!zIndex) rules += ' _9b112';
-    } else if (!zIndex) rules += ' _9c112';
-    if (props.size === "XL") rules += ' -F_-Fz112';
-    else if (props.size === "L") rules += ' -F_-Fv112';
-    else if (props.size === "S") rules += ' -F_-Fp112';
-    else if (props.size === "XS") rules += ' -F_-Fn112';
-    else rules += ' -F_-Fx112';
+        if (!zIndex) rules += ' _9b12';
+    } else if (!zIndex) rules += ' _9c12';
+    if (props.size === "XL") rules += ' -F_-Fz12';
+    else if (props.size === "L") rules += ' -F_-Fv12';
+    else if (props.size === "S") rules += ' -F_-Fp12';
+    else if (props.size === "XS") rules += ' -F_-Fn12';
+    else rules += ' -F_-Fx12';
     return rules;
 };
 const $e33225559d5e019f$var$slider = function anonymous(props) {
     let rules = " ";
-    rules += ' gX112';
-    if (props.isDisabled) rules += ' gld112';
-    else rules += ' gle112';
-    rules += ' _Er112';
-    rules += ' Za112';
-    rules += ' Fb112';
-    rules += ' _Pa112';
-    rules += ' _oa112';
-    rules += ' _jf112';
-    rules += ' _kc112';
-    rules += ' hc112';
-    rules += ' mc112';
-    rules += ' lc112';
-    if (props.isDisabled) rules += ' iq112';
-    else rules += ' in112';
-    if (props.isDisabled) rules += ' ilc112';
-    else rules += ' ild112';
-    rules += ' oc112';
-    rules += ' nc112';
-    rules += ' kc112';
-    rules += ' jc112';
+    rules += ' gX12';
+    if (props.isDisabled) rules += ' gld12';
+    else rules += ' gle12';
+    rules += ' Wr12';
+    rules += ' _Er12';
+    rules += ' Za12';
+    rules += ' Fb12';
+    rules += ' _qg12';
+    rules += ' Yx6BKnd12';
+    rules += ' Ydklsgce12';
+    rules += ' Xc12';
+    rules += ' _2a12';
+    rules += ' _Pa12';
+    rules += ' _oa12';
+    rules += ' _jf12';
+    rules += ' _kc12';
+    rules += ' hc12';
+    rules += ' mc12';
+    rules += ' lc12';
+    if (props.isDisabled) rules += ' iq12';
+    else rules += ' in12';
+    if (props.isDisabled) rules += ' ilc12';
+    else rules += ' ild12';
+    rules += ' oc12';
+    rules += ' nc12';
+    rules += ' kc12';
+    rules += ' jc12';
     return rules;
 };
 const $e33225559d5e019f$var$InternalSegmentedControlContext = /*#__PURE__*/ (0, $4JHQR$react.createContext)({});
@@ -292,10 +298,7 @@ const $e33225559d5e019f$export$668709c620d0b8e2 = /*#__PURE__*/ (0, $4JHQR$react
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $e33225559d5e019f$export$c083c44d8a07dd35);
     let { defaultSelectedKey: defaultSelectedKey, selectedKey: selectedKey, onSelectionChange: onSelectionChange } = props;
     let domRef = (0, $4JHQR$reactspectrumutils.useDOMRef)(ref);
-    let prevRef = (0, $4JHQR$react.useRef)(null);
-    let currentSelectedRef = (0, $4JHQR$react.useRef)(null);
     let onChange = (values)=>{
-        if (currentSelectedRef.current) prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
         if (onSelectionChange) {
             let firstKey = values.values().next().value;
             if (firstKey != null) onSelectionChange(firstKey);
@@ -319,8 +322,6 @@ const $e33225559d5e019f$export$668709c620d0b8e2 = /*#__PURE__*/ (0, $4JHQR$react
         children: /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)($e33225559d5e019f$var$DefaultSelectionTracker, {
             defaultValue: defaultSelectedKey,
             value: selectedKey,
-            prevRef: prevRef,
-            currentSelectedRef: currentSelectedRef,
             isJustified: props.isJustified,
             children: props.children
         })
@@ -343,8 +344,6 @@ function $e33225559d5e019f$var$DefaultSelectionTracker(props) {
                 $e33225559d5e019f$var$InternalSegmentedControlContext,
                 {
                     register: register,
-                    prevRef: props.prevRef,
-                    currentSelectedRef: props.currentSelectedRef,
                     isJustified: props.isJustified
                 }
             ]
@@ -355,42 +354,13 @@ function $e33225559d5e019f$var$DefaultSelectionTracker(props) {
 const $e33225559d5e019f$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $4JHQR$react.forwardRef)(function SegmentedControlItem(props, ref) {
     let domRef = (0, $4JHQR$reactspectrumutils.useFocusableRef)(ref);
     let divRef = (0, $4JHQR$react.useRef)(null);
-    let { register: register, prevRef: prevRef, currentSelectedRef: currentSelectedRef, isJustified: isJustified } = (0, $4JHQR$react.useContext)($e33225559d5e019f$var$InternalSegmentedControlContext);
-    let state = (0, $4JHQR$react.useContext)((0, $4JHQR$reactariacomponents.ToggleGroupStateContext));
-    let isSelected = state?.selectedKeys.has(props.id);
-    // do not apply animation if a user has the prefers-reduced-motion setting
-    let reduceMotion = (0, $4JHQR$reactspectrumutils.useMediaQuery)('(prefers-reduced-motion: reduce)');
+    let { register: register, isJustified: isJustified } = (0, $4JHQR$react.useContext)($e33225559d5e019f$var$InternalSegmentedControlContext);
     (0, $4JHQR$reactariautils.useLayoutEffect)(()=>{
         register?.(props.id);
     }, [
         register,
         props.id
     ]);
-    (0, $4JHQR$reactariautils.useLayoutEffect)(()=>{
-        if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
-            let currentItem = currentSelectedRef?.current.getBoundingClientRect();
-            let deltaX = prevRef?.current.left - currentItem?.left;
-            currentSelectedRef.current.animate([
-                {
-                    transform: `translateX(${deltaX}px)`,
-                    width: `${prevRef?.current.width}px`
-                },
-                {
-                    transform: 'translateX(0px)',
-                    width: `${currentItem.width}px`
-                }
-            ], {
-                duration: 200,
-                easing: 'ease-out'
-            });
-            prevRef.current = null;
-        }
-    }, [
-        isSelected,
-        reduceMotion,
-        prevRef,
-        currentSelectedRef
-    ]);
     return /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.ToggleButton), {
         ...props,
         ref: domRef,
@@ -399,13 +369,12 @@ const $e33225559d5e019f$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $4JHQR$react
                 ...renderProps,
                 isJustified: isJustified
             }, props.styles),
-        children: ({ isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsxs)((0, $4JHQR$reactjsxruntime.Fragment), {
+        children: ({ isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsxs)((0, $4JHQR$reactjsxruntime.Fragment), {
                 children: [
-                    isSelected && /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)("div", {
+                    /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.SelectionIndicator), {
                         className: $e33225559d5e019f$var$slider({
                             isDisabled: isDisabled
-                        }),
-                        ref: currentSelectedRef
+                        })
                     }),
                     /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $4JHQR$reactariacomponents.Provider), {
                         values: [
@@ -414,7 +383,7 @@ const $e33225559d5e019f$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $4JHQR$react
                                 {
                                     render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
                                         slot: 'icon',
-                                        styles: " _Ja112 _va112"
+                                        styles: " _Ja12 _va12"
                                     })
                                 }
                             ],
@@ -429,7 +398,7 @@ const $e33225559d5e019f$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $4JHQR$react
                             [
                                 (0, $6367bc87eb7d24ad$exports.TextContext),
                                 {
-                                    styles: " _Jb112 _Nc112 Pc112 _Yb112 _7c112"
+                                    styles: " _Jb12 _Nc12 Pc12 _Yb12 _7c12"
                                 }
                             ]
                         ],
@@ -438,7 +407,7 @@ const $e33225559d5e019f$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $4JHQR$react
                             style: (0, $2061c83559b50a66$exports.pressScale)(divRef)({
                                 isPressed: isPressed
                             }),
-                            className: " sd112 Uc112 Usd112 qc112 qsd112 Yd112 Xb112 _2b112 eb112 Na112",
+                            className: " sd12 Uc12 Usd12 qc12 qsd12 Yd12 Xb12 _2b12 eb12 Na12",
                             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $4JHQR$reactjsxruntime.jsx)((0, $6367bc87eb7d24ad$exports.Text), {
                                 children: props.children
                             }) : props.children

package/dist/SegmentedControl.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n\n    if (onSelectionChange) {\n      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\n    }\n  };\n\n  return (\n    <ToggleButtonGroup\n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}>\n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, [register, props.id]);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion, prevRef, currentSelectedRef]);\n\n  return (\n    <ToggleButton\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SelectionIndicator, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} from 'react';\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: 'full',\n  contain: 'strict',\n  transition: {\n    default: '[translate,width]',\n    '@media (prefers-reduced-motion: reduce)': 'none'\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: 'out',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let onChange = (values: Set<Key>) => {\n    if (onSelectionChange) {\n      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\n    }\n  };\n\n  return (\n    <ToggleButtonGroup\n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, isJustified: props.isJustified}]\n      ]}>\n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, isJustified} = useContext(InternalSegmentedControlContext);\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, [register, props.id]);\n\n  return (\n    <ToggleButton\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isPressed, isDisabled}) => (\n        <>\n          <SelectionIndicator className={slider({isDisabled})} />\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.cjs.map"}