reka-ui 2.9.9 → 2.10.0

package/src/Drawer/utils.ts

@@ -0,0 +1,205 @@
+// packages/core/src/Drawer/utils.ts
+
+export type SwipeDirection = 'up' | 'down' | 'left' | 'right'
+export type DrawerSnapPoint = number | string
+
+export const DRAWER_CSS_VARS = {
+  swipeMovementX: '--drawer-swipe-movement-x',
+  swipeMovementY: '--drawer-swipe-movement-y',
+  snapPointOffset: '--drawer-snap-point-offset',
+  height: '--drawer-height',
+  frontmostHeight: '--drawer-frontmost-height',
+  swipeProgress: '--drawer-swipe-progress',
+  swipeStrength: '--drawer-swipe-strength',
+  nestedDrawers: '--nested-drawers',
+} as const
+
+export interface NestedSwipeProgressStore {
+  getSnapshot: () => number
+  subscribe: (listener: () => void) => () => void
+}
+
+export function createNestedSwipeProgressStore(): NestedSwipeProgressStore & {
+  set: (progress: number) => void
+} {
+  let progress = 0
+  const listeners = new Set<() => void>()
+  return {
+    getSnapshot: () => progress,
+    subscribe(listener) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    set(next: number) {
+      if (next !== progress) {
+        progress = next
+        listeners.forEach(l => l())
+      }
+    },
+  }
+}
+
+export function getDisplacement(
+  direction: SwipeDirection,
+  deltaX: number,
+  deltaY: number,
+): number {
+  switch (direction) {
+    case 'up': return -deltaY
+    case 'down': return deltaY
+    case 'left': return -deltaX
+    case 'right': return deltaX
+    default: return 0
+  }
+}
+
+// BaseUI swipe release scalar constants (DrawerViewport.tsx:41-46)
+const MIN_SWIPE_RELEASE_VELOCITY = 0.2
+const MAX_SWIPE_RELEASE_VELOCITY = 4
+const MIN_SWIPE_RELEASE_DURATION_MS = 80
+const MAX_SWIPE_RELEASE_DURATION_MS = 360
+const MIN_SWIPE_RELEASE_SCALAR = 0.1
+const MAX_SWIPE_RELEASE_SCALAR = 1
+
+function clamp(v: number, lo: number, hi: number): number {
+  return Math.max(lo, Math.min(hi, v))
+}
+
+/**
+ * Computes a 0.1 - 1.0 scalar for the `--drawer-swipe-strength` CSS var.
+ * Ported from BaseUI `DrawerViewport.tsx:resolveSwipeRelease` (lines 243-337).
+ *
+ * The scalar is derived from how much further the drawer still has to travel
+ * vs how fast the user flung it. A short remaining distance with high velocity
+ * → near-zero scalar (fast release). A long distance / low velocity → near-1
+ * (default release).
+ *
+ * Returns `null` when the formula is degenerate (no velocity, no distance, or
+ * moving in the wrong direction).
+ */
+export function computeSwipeReleaseScalar(params: {
+  direction: SwipeDirection
+  size: number
+  axisDelta: number
+  snapPointOffset: number
+  releaseVelocity: number
+}): number | null {
+  const { direction, size, axisDelta, snapPointOffset, releaseVelocity } = params
+  if (!Number.isFinite(size) || size <= 0)
+    return null
+
+  // Seed the translation with the active snap offset along the dismiss axis so
+  // horizontal drawers honor snap points too: down/right collapse toward
+  // positive translation, up/left toward negative.
+  let baseOffset = 0
+  if (direction === 'down' || direction === 'right')
+    baseOffset = snapPointOffset
+  else if (direction === 'up' || direction === 'left')
+    baseOffset = -snapPointOffset
+
+  const translation = baseOffset + axisDelta
+  const translationAlongDirection
+    = (direction === 'left' || direction === 'up') ? -translation : translation
+  const remainingDistance = Math.max(0, size - translationAlongDirection)
+  if (!Number.isFinite(remainingDistance) || remainingDistance <= 0)
+    return null
+
+  const directionalVelocity
+    = (direction === 'left' || direction === 'up') ? -releaseVelocity : releaseVelocity
+  if (!Number.isFinite(directionalVelocity) || directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY)
+    return null
+
+  const clampedVelocity = clamp(
+    directionalVelocity,
+    MIN_SWIPE_RELEASE_VELOCITY,
+    MAX_SWIPE_RELEASE_VELOCITY,
+  )
+  const durationMs = clamp(
+    remainingDistance / clampedVelocity,
+    MIN_SWIPE_RELEASE_DURATION_MS,
+    MAX_SWIPE_RELEASE_DURATION_MS,
+  )
+  if (!Number.isFinite(durationMs))
+    return null
+
+  const normalized
+    = (durationMs - MIN_SWIPE_RELEASE_DURATION_MS)
+      / (MAX_SWIPE_RELEASE_DURATION_MS - MIN_SWIPE_RELEASE_DURATION_MS)
+  const scalar = clamp(
+    MIN_SWIPE_RELEASE_SCALAR + normalized * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR),
+    MIN_SWIPE_RELEASE_SCALAR,
+    MAX_SWIPE_RELEASE_SCALAR,
+  )
+  if (!Number.isFinite(scalar) || scalar <= 0)
+    return null
+  return scalar
+}
+
+const MATRIX_RE = /matrix(?:3d)?\(([^)]+)\)/
+
+export function getElementTransform(element: HTMLElement): {
+  x: number
+  y: number
+  scale: number
+} {
+  const style = window.getComputedStyle(element)
+  const transform = style.transform
+  let x = 0
+  let y = 0
+  let scale = 1
+  if (transform && transform !== 'none') {
+    const matrix = transform.match(MATRIX_RE)
+    if (matrix) {
+      const v = matrix[1].split(', ').map(Number)
+      if (v.length === 6) {
+        x = v[4]
+        y = v[5]
+        scale = Math.sqrt(v[0] * v[0] + v[1] * v[1])
+      }
+      else if (v.length === 16) {
+        x = v[12]
+        y = v[13]
+        scale = v[0]
+      }
+    }
+  }
+  return { x, y, scale }
+}
+
+let drawerCssVarsRegistered = false
+
+/**
+ * Removes CSS variable inheritance for high-frequency drawer swipe vars.
+ * Uses proper syntax types matching BaseUI:
+ * - Length vars (<length>) with initialValue '0px' for use in calc()/translateY()
+ * - Number vars (<number>) for opacity/strength scalars
+ */
+export function registerDrawerCssProperties() {
+  if (drawerCssVarsRegistered || typeof CSS === 'undefined' || !CSS.registerProperty)
+    return
+
+  const lengthVars = [
+    DRAWER_CSS_VARS.swipeMovementX,
+    DRAWER_CSS_VARS.swipeMovementY,
+    DRAWER_CSS_VARS.snapPointOffset,
+  ]
+  for (const name of lengthVars) {
+    try {
+      CSS.registerProperty({ name, syntax: '<length>', inherits: false, initialValue: '0px' })
+    }
+    catch {}
+  }
+
+  const numberVars = [
+    { name: DRAWER_CSS_VARS.swipeProgress, initialValue: '0' },
+    { name: DRAWER_CSS_VARS.swipeStrength, initialValue: '1' },
+  ]
+  for (const { name, initialValue } of numberVars) {
+    try {
+      CSS.registerProperty({ name, syntax: '<number>', inherits: false, initialValue })
+    }
+    catch {}
+  }
+
+  drawerCssVarsRegistered = true
+}

package/src/FocusScope/FocusScope.vue

@@ -30,12 +30,22 @@ export interface FocusScopeProps extends PrimitiveProps {
    * @defaultValue false
    */
   trapped?: boolean
+
+  /**
+   * Whether the scope is currently visible. Lets a consumer keep the scope
+   * mounted but hidden (e.g. `display: none`) and still get correct auto-focus:
+   * the mount auto-focus is skipped while not present, and re-runs when it
+   * becomes present again. Defaults to `true` so consumers that mount the scope
+   * only while visible are unaffected.
+   * @defaultValue true
+   */
+  present?: boolean
 }
 </script>
 
 <script setup lang="ts">
 import { isClient } from '@vueuse/shared'
-import { nextTick, reactive, ref, watchEffect } from 'vue'
+import { nextTick, reactive, ref, watch, watchEffect } from 'vue'
 import { Primitive } from '@/Primitive'
 import { createFocusScopesStack } from './stack'
 import {
@@ -149,35 +159,51 @@ watchEffect((cleanupFn) => {
   })
 })
 
+// Dispatch the mount auto-focus event and move focus to the first tabbable
+// candidate (or the container as a fallback). Shared by the physical-mount path
+// and the visibility path below so both behave identically. Consumers (e.g.
+// Dialog's `openAutoFocus`) may `preventDefault()` to opt out of default focus.
+function dispatchMountAutoFocus(container: HTMLElement, previouslyFocusedElement: HTMLElement | null) {
+  const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
+  const handleMountAutoFocus = (ev: Event) => emits('mountAutoFocus', ev)
+  container.addEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
+  container.dispatchEvent(mountEvent)
+  container.removeEventListener(AUTOFOCUS_ON_MOUNT, handleMountAutoFocus)
+
+  if (!mountEvent.defaultPrevented) {
+    focusFirst(getTabbableCandidates(container), { select: true })
+    if (getActiveElement() === previouslyFocusedElement)
+      focus(container)
+  }
+}
+
 watchEffect(async (cleanupFn) => {
   const container = currentElement.value
 
   await nextTick()
   if (!container)
     return
-  focusScopesStack.add(focusScope)
+  // A scope that mounts hidden (`present: false`, e.g. a closed Dialog with
+  // `unmountOnHide: false`) must stay out of the scope stack: adding it would
+  // pause the currently active scope and break its focus trap. The `present`
+  // watcher below adds/removes it as it becomes visible.
+  if (props.present !== false)
+    focusScopesStack.add(focusScope)
   const previouslyFocusedElement = getActiveElement() as HTMLElement | null
   const hasFocusedCandidate = container.contains(previouslyFocusedElement)
 
-  if (!hasFocusedCandidate) {
-    const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS)
-    container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
-      emits('mountAutoFocus', ev))
-    container.dispatchEvent(mountEvent)
-
-    if (!mountEvent.defaultPrevented) {
-      focusFirst(getTabbableCandidates(container), {
-        select: true,
-      })
-      if (getActiveElement() === previouslyFocusedElement)
-        focus(container)
-    }
-  }
+  // When force-mounted while closed (e.g. Dialog `unmountOnHide: false`), the
+  // consumer keeps the scope mounted but flags it as not present. Skip the
+  // mount auto-focus in that case, otherwise it fires `mountAutoFocus` and
+  // steals focus into a hidden scope. The `present` watcher below re-runs the
+  // auto-focus once the scope becomes present again.
+  // NOTE: `props.present` must stay read *after* the `await` above so this
+  // effect does not track it — re-running on `present` changes would dispatch
+  // the unmount auto-focus cleanup below on every close.
+  if (!hasFocusedCandidate && props.present !== false)
+    dispatchMountAutoFocus(container, previouslyFocusedElement)
 
   cleanupFn(() => {
-    container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
-      emits('mountAutoFocus', ev))
-
     const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS)
     const unmountEventHandler = (ev: Event) => {
       emits('unmountAutoFocus', ev)
@@ -202,6 +228,37 @@ watchEffect(async (cleanupFn) => {
   })
 })
 
+// Force-mounted scopes (e.g. Dialog `unmountOnHide: false`) stay mounted across
+// open/close and toggle `present` instead of unmounting, so mount/unmount-keyed
+// behavior must be re-keyed on `present`: stack membership (which pauses other
+// scopes' traps) and the mount auto-focus (which only fires on physical mount).
+// Awaiting `nextTick` lets the consumer's visibility change (e.g. `v-show`)
+// apply first, so the focus targets exist. Consumers that don't pass `present`
+// never hit this — it stays `undefined`.
+watch(() => props.present, async (present, prevPresent) => {
+  if (!isClient)
+    return
+
+  if (present === false && prevPresent === true) {
+    focusScopesStack.remove(focusScope)
+    return
+  }
+
+  if (present !== true || prevPresent !== false)
+    return
+
+  focusScopesStack.add(focusScope)
+
+  await nextTick()
+  const container = currentElement.value
+  if (!container)
+    return
+
+  const previouslyFocusedElement = getActiveElement() as HTMLElement | null
+  if (!container.contains(previouslyFocusedElement))
+    dispatchMountAutoFocus(container, previouslyFocusedElement)
+})
+
 function handleKeyDown(event: KeyboardEvent) {
   if (!props.loop && !props.trapped)
     return

package/src/HoverCard/HoverCardRoot.vue

@@ -11,6 +11,8 @@ export interface HoverCardRootProps {
   openDelay?: number
   /** The duration from when the mouse leaves the trigger or content until the hover card closes. */
   closeDelay?: number
+  /** When `true`, tapping the trigger on touch devices toggles the hover card open/closed. By default touch interactions are ignored to match pointer hover semantics. */
+  enableTouch?: boolean
 }
 export type HoverCardRootEmits = {
   /** Event handler called when the open state of the hover card changes. */
@@ -27,6 +29,7 @@ export interface HoverCardRootContext {
   isPointerDownOnContentRef: Ref<boolean>
   isPointerInTransitRef: Ref<boolean>
   triggerElement: Ref<HTMLElement | undefined>
+  enableTouch: Ref<boolean>
 }
 
 export const [injectHoverCardRootContext, provideHoverCardRootContext]
@@ -43,6 +46,7 @@ const props = withDefaults(defineProps<HoverCardRootProps>(), {
   open: undefined,
   openDelay: 700,
   closeDelay: 300,
+  enableTouch: false,
 })
 const emit = defineEmits<HoverCardRootEmits>()
 
@@ -53,7 +57,7 @@ defineSlots<{
   }) => any
 }>()
 
-const { openDelay, closeDelay } = toRefs(props)
+const { openDelay, closeDelay, enableTouch } = toRefs(props)
 
 useForwardExpose()
 const open = useVModel(props, 'open', emit, {
@@ -80,6 +84,7 @@ function handleClose() {
 }
 
 function handleDismiss() {
+  clearTimeout(openTimerRef.value)
   open.value = false
 }
 
@@ -95,6 +100,7 @@ provideHoverCardRootContext({
   isPointerDownOnContentRef,
   isPointerInTransitRef,
   triggerElement,
+  enableTouch,
 })
 </script>
 

package/src/HoverCard/HoverCardTrigger.vue

@@ -25,6 +25,16 @@ function handleLeave() {
     }
   }, 0)
 }
+
+function handleTouch(event: PointerEvent) {
+  if (!rootContext.enableTouch.value || event.pointerType !== 'touch')
+    return
+
+  if (rootContext.open.value)
+    rootContext.onDismiss()
+  else
+    rootContext.onOpenChange(true)
+}
 </script>
 
 <template>
@@ -40,6 +50,7 @@ function handleLeave() {
       data-grace-area-trigger
       @pointerenter="excludeTouch(rootContext.onOpen)($event)"
       @pointerleave="excludeTouch(handleLeave)($event)"
+      @pointerup="handleTouch"
       @focus="rootContext.onOpen()"
       @blur="rootContext.onClose()"
     >

package/src/Listbox/ListboxRoot.vue

@@ -16,7 +16,7 @@ type ListboxRootContext<T> = {
   highlightOnHover: Ref<boolean>
   highlightedElement: Ref<HTMLElement | null>
   isVirtual: Ref<boolean>
-  virtualFocusHook: EventHook<Event | null | undefined>
+  virtualFocusHook: EventHook<{ event?: Event, scroll: boolean }>
   virtualKeydownHook: EventHook<KeyboardEvent>
   virtualHighlightHook: EventHook<any>
   by?: string | ((a: T, b: T) => boolean)
@@ -150,7 +150,7 @@ const highlightedElement = ref<HTMLElement | null>(null)
 const previousElement = ref<HTMLElement | null>(null)
 const isVirtual = ref(false)
 const isComposing = ref(false)
-const virtualFocusHook = createEventHook<Event | null | undefined>()
+const virtualFocusHook = createEventHook<{ event?: Event, scroll: boolean }>()
 const virtualKeydownHook = createEventHook<KeyboardEvent>()
 const virtualHighlightHook = createEventHook<T>()
 
@@ -333,8 +333,11 @@ async function highlightSelected(event?: Event, scroll = true) {
     return
   await nextTick()
   if (isVirtual.value) {
-    // Trigger on nextTick for Virtualizer to be mounted
-    virtualFocusHook.trigger(event)
+    // Trigger on nextTick for Virtualizer to be mounted.
+    // `scroll` is `false` on the initial mount highlight, so the virtualizer sets
+    // its roving-tabindex target without focusing/scrolling — otherwise a
+    // virtualized Listbox below the fold would pull the page to it on load.
+    virtualFocusHook.trigger({ event, scroll })
   }
   else {
     const collection = getCollectionItem()

package/src/Listbox/ListboxVirtualizer.vue

@@ -104,7 +104,11 @@ const virtualizedItems = computed(() => virtualizer.value.getVirtualItems().map(
   }
 }))
 
-rootContext.virtualFocusHook.on((event) => {
+rootContext.virtualFocusHook.on(({ event, scroll }) => {
+  // `scroll` is `false` only for the initial mount highlight. There we set the
+  // roving-tabindex target without focusing or scrolling, so a virtualized
+  // Listbox below the fold doesn't pull the page to it on load. User-driven
+  // highlights (keyboard, typeahead, select) keep scrolling as before.
   const index = props.options.findIndex((option) => {
     if (Array.isArray(rootContext.modelValue.value))
       return compare(option, rootContext.modelValue.value[0], rootContext.by)
@@ -114,19 +118,31 @@ rootContext.virtualFocusHook.on((event) => {
   if (index !== -1) {
     event?.preventDefault()
 
+    // Bringing the checked item into the (internal) scroll viewport is safe — it
+    // only scrolls the listbox container, never the page.
     virtualizer.value.scrollToIndex(index, { align: 'start' })
     requestAnimationFrame(() => {
       const item = queryCheckedElement(parentEl.value)
       if (item) {
-        rootContext.changeHighlight(item)
+        rootContext.changeHighlight(item, scroll, scroll ? undefined : false)
         if (event)
           item?.focus()
       }
     })
   }
-  else {
+  else if (scroll) {
     rootContext.highlightFirstItem()
   }
+  else {
+    // Mount highlight with no checked item: highlight the first enabled item only,
+    // mirroring the non-virtual path. `highlightFirstItem` is reserved for
+    // user-driven PageUp/Home navigation, which focuses and scrolls.
+    requestAnimationFrame(() => {
+      const item = getItems().find(i => i.ref.dataset.disabled !== '')?.ref
+      if (item)
+        rootContext.changeHighlight(item, false, false)
+    })
+  }
 })
 
 rootContext.virtualHighlightHook.on((value) => {

package/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,
@@ -32,6 +33,11 @@ export const PopperContentPropsDefaultValue = {
 }
 
 export interface PopperContentProps extends PrimitiveProps {
+  /**
+   * Reactive dependencies that should invalidate the memoized content subtree.
+   */
+  memoDependencies?: unknown[]
+
   /**
    * The preferred side of the trigger to render against when open.
    * Will be reversed when collisions occur and avoidCollisions
@@ -173,6 +179,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 {
@@ -199,7 +210,6 @@ import {
   size,
   useFloating,
 } from '@floating-ui/vue'
-import { computedEager } from '@vueuse/core'
 import { computed, ref, watchEffect, watchPostEffect } from 'vue'
 import {
   Primitive,
@@ -224,6 +234,7 @@ const emits = defineEmits<{
 
 const rootContext = injectPopperRootContext()
 const { forwardRef, currentElement: contentElement } = useForwardExpose()
+const dir = useDirection(computed(() => props.dir))
 
 const floatingRef = ref<HTMLElement>()
 
@@ -264,7 +275,7 @@ const flipOptions = computed(() => {
   }
 })
 
-const computedMiddleware = computedEager(() => {
+const computedMiddleware = computed(() => {
   return [
     offset({
       mainAxis: props.sideOffset + arrowHeight.value,
@@ -317,6 +328,7 @@ const computedMiddleware = computedEager(() => {
     transformOrigin({
       arrowWidth: arrowWidth.value,
       arrowHeight: arrowHeight.value,
+      dir: dir.value,
     }),
     props.hideWhenDetached
     && hide({ strategy: 'referenceHidden', ...detectOverflowOptions.value }),
@@ -382,6 +394,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
@@ -402,12 +415,40 @@ providePopperContentContext({
     }"
   >
     <Primitive
+      v-if="props.memoDependencies"
+      :ref="forwardRef"
+      v-memo="[
+        props.asChild,
+        props.as,
+        placedSide,
+        placedAlign,
+        isPositioned,
+        ...Object.values($attrs),
+        ...props.memoDependencies,
+      ]"
+      v-bind="$attrs"
+      :as-child="props.asChild"
+      :as="props.as"
+      :data-side="placedSide"
+      :data-align="placedAlign"
+      :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
+        animation: !isPositioned ? 'none' : undefined,
+      }"
+    >
+      <slot />
+    </Primitive>
+
+    <Primitive
+      v-else
       :ref="forwardRef"
       v-bind="$attrs"
       :as-child="props.asChild"
-      :as="as"
+      :as="props.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

package/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 } }
     },