Support automatic RTL detection in popover-based components

[ciampo]

Motivation

It would be great if popover-based elements could leverage floating ui's automatic detection of RTL writing direction and/or expose it via a dir prop (similarly to what done in Radix UI)

Usage example

<Menu dir="rtl" placement="right" />

should actually result in the floating element opening to the left

Requirements

• Affected components should automatically infer the dir if possible
• Otherwise, affected components should expose a dir props
• The components should internally leverage floating-ui's existing logic to flip placements as appropriate.

Workaround

https://github.com/ariakit/ariakit/issues/2930#issuecomment-1755593831

Possible implementations

No response

[diegohaz]

You can pass rtl: true to useMenuStore or MenuProvider:

useMenuStore({
  rtl: isRTL(),
  placement: isRTL() ? "left" : "right",
})

Or:

<MenuProvider
  rtl={isRTL()}
  placement={isRTL() ? "left" : "right"}
>

At present, we don't perform this check automatically. This is due to the potential performance impact for use cases not concerned with RTL.

[diegohaz]

We could automatically adjust the placement if rtl is set to true, but I don't believe right should switch to left and vice versa. right should always mean right.

However, we can support logical placements like block-start, inline-end, and so on, akin to CSS. But this would require a custom implementation as Floating UI doesn't support this. They only support logical alignments, translating into something like block-start-end, where block-start would be the base placement and -end would indicate the alignment.

[ciampo]

I think there's an opportunity for Ariakit to just use floating-ui's logic, which should filp the placement based on the dir HTML atttribute or the direction CSS property.

Relevant floating ui code, an example where the logic checks for the floating element to be RTL

https://github.com/floating-ui/floating-ui/blob/32826838b27e19e11fdcdea8cd9a4f9dfef2c372/packages/core/src/middleware/flip.ts#L103

https://github.com/floating-ui/floating-ui/blob/32826838b27e19e11fdcdea8cd9a4f9dfef2c372/packages/dom/src/platform/isRTL.ts#L3