style: fix arrow position in rtl direction (#831)

* style: fix arrow position in rtl direction

* fix test snapshot

Author: afc163

assets/index.less

@@ -404,14 +404,9 @@
   &-clear {
     position: absolute;
     top: 0;
-    right: 4px;
+    inset-inline-end: 4px;
     cursor: pointer;
 
-    .@{prefix-cls}-rtl & {
-      right: auto;
-      left: 4px;
-    }
-
     &-btn::after {
       content: '×';
     }
@@ -431,6 +426,10 @@
       display: none;
     }
 
+    &-rtl {
+      direction: rtl;
+    }
+
     // Panel
     @arrow-size: 10px;
 
@@ -456,25 +455,16 @@
       height: @arrow-size;
       transition: all 0.3s;
 
-      .@{prefix-cls}-dropdown-rtl& {
-        right: @arrow-size;
-        left: auto;
-        margin-right: 10px;
-        margin-left: 0;
-      }
-
       &::before,
       &::after {
         position: absolute;
         top: 50%;
-        left: 50%;
+        inset-inline-start: 50%;
         box-sizing: border-box;
         transform: translate(-50%, -50%);
         content: '';
 
         .@{prefix-cls}-dropdown-rtl& {
-          right: 50%;
-          left: auto;
           transform: translate(50%, -50%);
         }
       }

src/PickerInput/Popup/index.tsx

@@ -8,6 +8,7 @@ import type {
   ValueDate,
 } from '../../interface';
 import { toArray } from '../../utils/miscUtil';
+import { getRealPlacement, getoffsetUnit } from '../../utils/uiUtil';
 import PickerContext from '../context';
 import Footer, { type FooterProps } from './Footer';
 import PopupPanel, { type PopupPanelProps } from './PopupPanel';
@@ -208,8 +209,8 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
-    const placementRight = placement?.toLowerCase().endsWith('right');
-    const offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
+    const realPlacement = getRealPlacement(placement, rtl);
+    const offsetUnit = getoffsetUnit(realPlacement, rtl);
     renderNode = (
       <div
         ref={wrapperRef}

src/PickerInput/Selector/RangeSelector.tsx

@@ -8,6 +8,7 @@ import useInputProps from './hooks/useInputProps';
 import useRootProps from './hooks/useRootProps';
 import Icon, { ClearIcon } from './Icon';
 import Input, { type InputRef } from './Input';
+import { getoffsetUnit, getRealPlacement } from '../../utils/uiUtil';
 
 export type SelectorIdType =
   | string
@@ -170,26 +171,26 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const placementRight = placement?.toLowerCase().endsWith('right');
-  const offsetUnit = rtl ? 'insetInlineEnd' : 'insetInlineStart';
-
+  const realPlacement = getRealPlacement(placement, rtl);
+  const offsetUnit = getoffsetUnit(realPlacement, rtl);
+  const placementRight = realPlacement?.toLowerCase().endsWith('right');
   const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({
     position: 'absolute',
     width: 0,
-    [offsetUnit]: 0,
   });
 
   const syncActiveOffset = useEvent(() => {
     const input = getInput(activeIndex);
     if (input) {
       const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
       const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
+      const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft;
       setActiveBarStyle((ori) => ({
         ...ori,
         width: offsetWidth,
-        [offsetUnit]: offsetLeft,
+        [offsetUnit]: activeOffset,
       }));
-      onActiveOffset(placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft);
+      onActiveOffset(activeOffset);
     }
   });
 

src/PickerInput/Selector/util.ts

@@ -12,4 +12,4 @@ export function getMaskRange(key: string): [startVal: number, endVal: number, de
   };
 
   return PresetRange[key];
-}
+}

src/PickerTrigger/index.tsx

@@ -2,6 +2,7 @@ import Trigger from '@rc-component/trigger';
 import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
 import classNames from 'classnames';
 import * as React from 'react';
+import { getRealPlacement } from '../utils/uiUtil';
 import PickerContext from '../PickerInput/context';
 
 const BUILT_IN_PLACEMENTS = {
@@ -79,18 +80,13 @@ function PickerTrigger({
   const { prefixCls } = React.useContext(PickerContext);
   const dropdownPrefixCls = `${prefixCls}-dropdown`;
 
-  const mergedPlacement = React.useMemo(() => {
-    if (placement !== undefined) {
-      return placement;
-    }
-    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
-  }, [placement, direction]);
+  const realPlacement = getRealPlacement(placement, direction === 'rtl');
 
   return (
     <Trigger
       showAction={[]}
       hideAction={['click']}
-      popupPlacement={mergedPlacement}
+      popupPlacement={realPlacement}
       builtinPlacements={builtinPlacements}
       prefixCls={dropdownPrefixCls}
       popupTransitionName={transitionName}

src/utils/uiUtil.ts

@@ -187,3 +187,20 @@ export function elementsContains(
 ) {
   return elements.some((ele) => ele && ele.contains(target));
 }
+
+export function getRealPlacement(placement: string, rtl: boolean) {
+  if (placement !== undefined) {
+    return placement;
+  }
+  return rtl ? 'bottomRight' : 'bottomLeft';
+}
+
+export function getoffsetUnit(placement: string, rtl: boolean) {
+  const realPlacement = getRealPlacement(placement, rtl);
+  const placementRight = realPlacement?.toLowerCase().endsWith('right');
+  let offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart';
+  if (rtl) {
+    offsetUnit = ['insetInlineStart', 'insetInlineEnd'].find(unit => unit !== offsetUnit);
+  }
+  return offsetUnit;
+}

tests/__snapshots__/range.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`Picker.Range icon 1`] = `
     </div>
     <div
       class="rc-picker-active-bar"
-      style="position: absolute; width: 0px; inset-inline-start: 0;"
+      style="position: absolute; width: 0px;"
     />
     <span
       class="rc-picker-suffix"
@@ -89,7 +89,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in pla
     </div>
     <div
       class="rc-picker-active-bar"
-      style="position: absolute; width: 0px; inset-inline-start: 0;"
+      style="position: absolute; width: 0px; inset-inline-end: 0;"
     />
   </div>
 </div>
@@ -129,7 +129,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
     </div>
     <div
       class="rc-picker-active-bar"
-      style="position: absolute; width: 0px; inset-inline-end: 0;"
+      style="position: absolute; width: 0px;"
     />
   </div>
 </div>