feat(Popper): add dir prop for RTL/LTR support

packages/core/src/Popper/PopperContent.vue

@@ -10,7 +10,8 @@ import type {
   Side,
 } from './utils'
 import type { PrimitiveProps } from '@/Primitive'
-import { createContext, useForwardExpose, useSize } from '@/shared'
+import type { Direction } from '@/shared/types'
+import { createContext, useDirection, useForwardExpose, useSize } from '@/shared'
 
 export const PopperContentPropsDefaultValue = {
   side: 'bottom' as Side,
@@ -173,6 +174,11 @@ export interface PopperContentProps extends PrimitiveProps {
    *  If provided, it will replace the default anchor element.
    */
   reference?: ReferenceElement
+
+  /**
+   * The reading direction of the popper content when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
+   */
+  dir?: Direction
 }
 
 export interface PopperContentContext {
@@ -224,6 +230,7 @@ const emits = defineEmits<{
 
 const rootContext = injectPopperRootContext()
 const { forwardRef, currentElement: contentElement } = useForwardExpose()
+const dir = useDirection(computed(() => props.dir))
 
 const floatingRef = ref<HTMLElement>()
 
@@ -317,6 +324,7 @@ const computedMiddleware = computedEager(() => {
     transformOrigin({
       arrowWidth: arrowWidth.value,
       arrowHeight: arrowHeight.value,
+      dir: dir.value,
     }),
     props.hideWhenDetached
     && hide({ strategy: 'referenceHidden', ...detectOverflowOptions.value }),
@@ -408,6 +416,7 @@ providePopperContentContext({
       :as="as"
       :data-side="placedSide"
       :data-align="placedAlign"
+      :dir="dir"
       :style="{
         // if the PopperContent hasn't been placed yet (not all measurements done)
         // we prevent animations so that users's animation don't kick in too early referring wrong sides

packages/core/src/Popper/__snapshots__/Popper.test.ts.snap

@@ -17,6 +17,7 @@ exports[`give default Popper > should render correctly and match snapshot 1`] =
     <div
       data-align="center"
       data-side="bottom"
+      dir="ltr"
       style="animation: none;"
     >
 

packages/core/src/Popper/utils.ts

@@ -13,6 +13,7 @@ export function isNotNull<T>(value: T | null): value is T {
 export function transformOrigin(options: {
   arrowWidth: number
   arrowHeight: number
+  dir?: 'ltr' | 'rtl'
 }): Middleware {
   return {
     name: 'transformOrigin',
@@ -26,9 +27,17 @@ export function transformOrigin(options: {
       const arrowHeight = isArrowHidden ? 0 : options.arrowHeight
 
       const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement)
-      const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[
-        placedAlign
-      ]
+      const noArrowAlignX = {
+        start: options.dir === 'rtl' ? '100%' : '0%',
+        center: '50%',
+        end: options.dir === 'rtl' ? '0%' : '100%',
+      }[placedAlign]
+
+      const noArrowAlignY = {
+        start: '0%',
+        center: '50%',
+        end: '100%',
+      }[placedAlign]
 
       const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2
       const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2
@@ -37,20 +46,20 @@ export function transformOrigin(options: {
       let y = ''
 
       if (placedSide === 'bottom') {
-        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`
+        x = isArrowHidden ? noArrowAlignX : `${arrowXCenter}px`
         y = `${-arrowHeight}px`
       }
       else if (placedSide === 'top') {
-        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`
+        x = isArrowHidden ? noArrowAlignX : `${arrowXCenter}px`
         y = `${rects.floating.height + arrowHeight}px`
       }
       else if (placedSide === 'right') {
         x = `${-arrowHeight}px`
-        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`
+        y = isArrowHidden ? noArrowAlignY : `${arrowYCenter}px`
       }
       else if (placedSide === 'left') {
         x = `${rects.floating.width + arrowHeight}px`
-        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`
+        y = isArrowHidden ? noArrowAlignY : `${arrowYCenter}px`
       }
       return { data: { x, y } }
     },