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

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

@@ -1,7 +1,12 @@
 import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
+import { defineComponent, h } from 'vue'
 import Popper from './_Popper.vue'
+import PopperAnchor from './PopperAnchor.vue'
+import PopperContent from './PopperContent.vue'
+import PopperRoot from './PopperRoot.vue'
+import { transformOrigin } from './utils'
 
 describe('give default Popper', async () => {
   let wrapper: VueWrapper<InstanceType<typeof Popper>>
@@ -19,3 +24,152 @@ describe('give default Popper', async () => {
     expect(wrapper.element).toMatchSnapshot()
   })
 })
+
+describe('transformOrigin direction-aware logic', () => {
+  async function run(
+    options: Parameters<typeof transformOrigin>[0],
+    placement: string,
+    arrowData?: { x?: number, y?: number, centerOffset?: number },
+  ) {
+    const result = await transformOrigin(options).fn({
+      placement,
+      rects: { floating: { width: 100, height: 50 } },
+      middlewareData: { arrow: arrowData },
+    } as any)
+    return result.data as { x: string, y: string }
+  }
+
+  const noArrow = { arrowWidth: 0, arrowHeight: 0 }
+
+  describe('bottom placement', () => {
+    it('rTL flips start origin to 100%', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'bottom-start')).x).toBe('100%')
+    })
+    it('lTR keeps start origin at 0%', async () => {
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'bottom-start')).x).toBe('0%')
+    })
+    it('rTL flips end origin to 0%', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'bottom-end')).x).toBe('0%')
+    })
+    it('lTR keeps end origin at 100%', async () => {
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'bottom-end')).x).toBe('100%')
+    })
+    it('center is unaffected by dir', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'bottom')).x).toBe('50%')
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'bottom')).x).toBe('50%')
+    })
+  })
+
+  describe('top placement', () => {
+    it('rTL flips start origin to 100%', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'top-start')).x).toBe('100%')
+    })
+    it('lTR keeps start origin at 0%', async () => {
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'top-start')).x).toBe('0%')
+    })
+    it('rTL flips end origin to 0%', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'top-end')).x).toBe('0%')
+    })
+    it('lTR keeps end origin at 100%', async () => {
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'top-end')).x).toBe('100%')
+    })
+  })
+
+  describe('left/right placements use Y-axis alignment, unaffected by dir', () => {
+    it('right-start: y origin is 0% for both RTL and LTR', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'right-start')).y).toBe('0%')
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'right-start')).y).toBe('0%')
+    })
+    it('right-end: y origin is 100% for both RTL and LTR', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'right-end')).y).toBe('100%')
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'right-end')).y).toBe('100%')
+    })
+    it('left-start: y origin is 0% for both RTL and LTR', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'left-start')).y).toBe('0%')
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'left-start')).y).toBe('0%')
+    })
+    it('left-end: y origin is 100% for both RTL and LTR', async () => {
+      expect((await run({ ...noArrow, dir: 'rtl' }, 'left-end')).y).toBe('100%')
+      expect((await run({ ...noArrow, dir: 'ltr' }, 'left-end')).y).toBe('100%')
+    })
+  })
+
+  describe('default dir (undefined)', () => {
+    it('bottom placement defaults to LTR: start → 0%, end → 100%', async () => {
+      expect((await run(noArrow, 'bottom-start')).x).toBe('0%')
+      expect((await run(noArrow, 'bottom-end')).x).toBe('100%')
+    })
+    it('top placement defaults to LTR: start → 0%, end → 100%', async () => {
+      expect((await run(noArrow, 'top-start')).x).toBe('0%')
+      expect((await run(noArrow, 'top-end')).x).toBe('100%')
+    })
+  })
+
+  describe('arrow-visible scenario: arrow-based x/y positioning is not affected by dir', () => {
+    // arrowXCenter = arrowData.x (20) + arrowWidth (10) / 2 = 25
+    // arrowYCenter = arrowData.y (15) + arrowHeight (5) / 2 = 17.5
+    const withArrow = { arrowWidth: 10, arrowHeight: 5 }
+    const arrowData = { x: 20, y: 15, centerOffset: 0 }
+
+    it('bottom placement uses arrow x center regardless of dir', async () => {
+      expect((await run({ ...withArrow, dir: 'rtl' }, 'bottom-start', arrowData)).x).toBe('25px')
+      expect((await run({ ...withArrow, dir: 'ltr' }, 'bottom-start', arrowData)).x).toBe('25px')
+    })
+    it('top placement uses arrow x center regardless of dir', async () => {
+      expect((await run({ ...withArrow, dir: 'rtl' }, 'top-end', arrowData)).x).toBe('25px')
+      expect((await run({ ...withArrow, dir: 'ltr' }, 'top-end', arrowData)).x).toBe('25px')
+    })
+    it('right placement uses arrow y center regardless of dir', async () => {
+      expect((await run({ ...withArrow, dir: 'rtl' }, 'right-start', arrowData)).y).toBe('17.5px')
+      expect((await run({ ...withArrow, dir: 'ltr' }, 'right-start', arrowData)).y).toBe('17.5px')
+    })
+    it('left placement uses arrow y center regardless of dir', async () => {
+      expect((await run({ ...withArrow, dir: 'rtl' }, 'left-end', arrowData)).y).toBe('17.5px')
+      expect((await run({ ...withArrow, dir: 'ltr' }, 'left-end', arrowData)).y).toBe('17.5px')
+    })
+  })
+})
+
+describe('popper wrapper dir attribute', () => {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+
+  it('sets dir on the floatingRef wrapper so placement and origin are consistent', async () => {
+    const RtlPopper = defineComponent({
+      setup() {
+        return () =>
+          h(PopperRoot, null, {
+            default: () => [
+              h(PopperAnchor, null, { default: () => 'Anchor' }),
+              h(PopperContent, { dir: 'rtl' }, { default: () => 'Content' }),
+            ],
+          })
+      },
+    })
+
+    const wrapper = mount(RtlPopper, { attachTo: document.body })
+    const wrapperDiv = wrapper.find('[data-reka-popper-content-wrapper]')
+    expect(wrapperDiv.attributes('dir')).toBe('rtl')
+  })
+
+  it('sets dir=ltr on the wrapper when explicitly passed', async () => {
+    const LtrPopper = defineComponent({
+      setup() {
+        return () =>
+          h(PopperRoot, null, {
+            default: () => [
+              h(PopperAnchor, null, { default: () => 'Anchor' }),
+              h(PopperContent, { dir: 'ltr' }, { default: () => 'Content' }),
+            ],
+          })
+      },
+    })
+
+    const wrapper = mount(LtrPopper, { attachTo: document.body })
+    const wrapperDiv = wrapper.find('[data-reka-popper-content-wrapper]')
+    expect(wrapperDiv.attributes('dir')).toBe('ltr')
+  })
+})

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 }),
@@ -382,6 +390,7 @@ providePopperContentContext({
   <div
     ref="floatingRef"
     data-reka-popper-content-wrapper=""
+    :dir="dir"
     :style="{
       ...floatingStyles,
       transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring
@@ -408,6 +417,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

@@ -12,11 +12,13 @@ exports[`give default Popper > should render correctly and match snapshot 1`] =
   </div>
   <div
     data-reka-popper-content-wrapper=""
+    dir="ltr"
     style="position: fixed; left: 0px; top: 0px; transform: translate(0, -200%); min-width: max-content;"
   >
     <div
       data-align="center"
       data-side="bottom"
+      dir="ltr"
       style="animation: none;"
     >
       

packages/core/src/Popper/utils.ts

@@ -1,4 +1,5 @@
 import type { Middleware, Placement } from '@floating-ui/vue'
+import type { Direction } from '@/shared/types'
 
 const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const
 const ALIGN_OPTIONS = ['start', 'center', 'end'] as const
@@ -13,6 +14,7 @@ export function isNotNull<T>(value: T | null): value is T {
 export function transformOrigin(options: {
   arrowWidth: number
   arrowHeight: number
+  dir?: Direction
 }): Middleware {
   return {
     name: 'transformOrigin',
@@ -26,9 +28,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 +47,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 } }
     },