fix(s2): Fix Switch in RTL locales (#8534)

Author: chirokas

packages/@react-spectrum/s2/src/Switch.tsx

@@ -14,13 +14,14 @@ import {
   Switch as AriaSwitch,
   SwitchProps as AriaSwitchProps,
   ContextValue,
-  SwitchRenderProps
+  SwitchRenderProps,
+  useLocale
 } from 'react-aria-components';
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
-import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
+import {Direction, FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
@@ -124,7 +125,7 @@ const handle = style<RenderProps>({
 });
 
 // Use an inline style to calculate the transform so we can combine it with the press scale.
-const transformStyle = ({isSelected}: SwitchRenderProps) => ({
+const transformStyle = ({isSelected, direction}: SwitchRenderProps & {direction: Direction}) => {
   // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.
   // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,
   // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the
@@ -143,11 +144,15 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
   //
   //    defaultPerspective = trackHeight - 8px
   //    selectedPerspective = 2 * (trackHeight - 6px)
-  transform: isSelected
-    // The selected state also translates the X position to the end of the track (minus the borders).
-    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'
-    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
-});
+  const placement =
+    direction === 'ltr'
+      ? // The selected state also translates the X position to the end of the track (minus the borders).
+        'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'
+      : 'translateX(calc(100% - var(--trackWidth) + 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)';
+  return {
+    transform: isSelected ? placement : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
+  };
+};
 
 /**
  * Switches allow users to turn an individual option on or off.
@@ -160,6 +165,7 @@ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProp
   let domRef = useFocusableRef(ref, inputRef);
   let handleRef = useRef(null);
   let isInForm = !!useContext(FormContext);
+  let {direction} = useLocale();
   props = useFormProps(props);
   return (
     <AriaSwitch
@@ -179,7 +185,7 @@ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProp
               })}>
               <div
                 ref={handleRef}
-                style={pressScale(handleRef, transformStyle)(renderProps)}
+                style={pressScale(handleRef, transformStyle)({...renderProps, direction})}
                 className={handle(renderProps)} />
             </div>
           </CenterBaseline>