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

[malik-jouda]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

• New Features
  • Added support for specifying reading direction (LTR/RTL) for popper components.
  • Popper positioning, transform origin and arrow alignment now adjust dynamically based on text direction to ensure correct placement in bidirectional and multilingual layouts.

📸 Screenshots (if appropriate)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds optional dir support to Popper: PopperContent now accepts/forwards a dir prop (via useDirection) and the transformOrigin middleware gained an optional dir parameter to compute direction-aware transform origins when arrow is hidden.

Changes

Cohort / File(s)	Summary
Popper Content packages/core/src/Popper/PopperContent.vue	Added optional dir?: Direction to PopperContentProps, derive reactive dir via useDirection, forward resolved dir to transformOrigin middleware and to the underlying Primitive element.
Transform Origin Middleware packages/core/src/Popper/utils.ts	transformOrigin accepts optional dir (`'ltr'

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I twitch my nose and mark the spot,
LTR or RTL—I'll find the plot.
A tiny dir, a subtle flip,
The popper pirouettes—hip, hip, hip! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a dir prop to the Popper component for RTL/LTR support, which aligns with the code changes adding direction awareness to PopperContent and transformOrigin utility.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@2610

commit: 72d56d8

[coderabbitai]

🧹 Nitpick comments (1)

packages/core/src/Popper/PopperContent.vue (1)

177-182: New dir prop wiring looks correct.

dir?: Direction is optional and correctly typed against the shared Direction alias. Pairing with useDirection(computed(() => props.dir)) at Line 233 properly falls back to ConfigProvider’s direction and finally 'ltr', preserving existing behavior for unset props.

One small note: the phrasing “when applicable” in the JSDoc is a bit vague — consider clarifying that the direction only affects the computed transform-origin (specifically the start/end alignment on top/bottom placements when the arrow is hidden), and does not automatically flip side. Users in RTL layouts who want side: 'right' to visually appear on the logical start still need to mirror side themselves.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/core/src/Popper/PopperContent.vue` around lines 177 - 182, Update
the JSDoc for the dir prop in PopperContent.vue to explicitly state that dir?:
Direction (wired to useDirection(computed(() => props.dir))) only affects
computed transform-origin (i.e., start/end alignment on top/bottom placements
when the arrow is hidden) and does not flip or remap the side prop — users must
mirror side themselves in RTL; make the wording concise and replace "when
applicable" with this specific behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/core/src/Popper/PopperContent.vue`:
- Around line 177-182: Update the JSDoc for the dir prop in PopperContent.vue to
explicitly state that dir?: Direction (wired to useDirection(computed(() =>
props.dir))) only affects computed transform-origin (i.e., start/end alignment
on top/bottom placements when the arrow is hidden) and does not flip or remap
the side prop — users must mirror side themselves in RTL; make the wording
concise and replace "when applicable" with this specific behavior.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6de00e3e-048d-4dbb-96dd-7ebbccc66361

📥 Commits

Reviewing files that changed from the base of the PR and between 78efcf9 and e498973.

📒 Files selected for processing (2)

• packages/core/src/Popper/PopperContent.vue
• packages/core/src/Popper/utils.ts