fix(s2): Fix ColorLoupe position in ColorSlider for RTL locales (#8894)

* fix(s2): Fix ColorLoupe position in ColorSlider for RTL locales

* Fix ColorArea in RTL locales

Author: chirokas

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

@@ -13,7 +13,8 @@
 import {
   ColorArea as AriaColorArea,
   ColorAreaProps as AriaColorAreaProps,
-  ContextValue
+  ContextValue,
+  useLocale
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
 import {createContext, forwardRef} from 'react';
@@ -34,6 +35,7 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
   [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
+  let {direction} = useLocale();
   return (
     <AriaColorArea
       {...props}
@@ -67,7 +69,13 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
       {({state}) =>
         (<ColorHandle
           containerRef={containerRef}
-          getPosition={() => state.getThumbPosition()} />)
+          getPosition={() => {
+            let {x, y} = state.getThumbPosition();
+            return {
+              x: direction === 'ltr' ? x : 1 - x,
+              y
+            };
+          }} />)
       }
     </AriaColorArea>
   );

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

@@ -41,7 +41,7 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
   let trackRef = useRef(null);
-  let {locale} = useLocale();
+  let {direction, locale} = useLocale();
 
   return (
     <AriaColorSlider
@@ -133,7 +133,8 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
           <ColorHandle
             containerRef={trackRef}
             getPosition={() => {
-              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;
+              let thumbLeft = direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);
+              let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;
               let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);
               return {x, y};
             }} />