Support rtl in floating.tsx

[omerman]

What is it?

• Feature / enhancement
• Bug
• Docs / tests
• Other

Why is it needed?

Support RTL layouts for all the floating elements, tooltips/popovers/dropdown etc..

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have ran pnpm change and documented my changes
• I have add necessary docs (if needed)
• Added new tests to cover the fix / functionality

[changeset-bot]

🦋 Changeset detected

Latest commit: 8b88984

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@qwik-ui/headless	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

[omerman]

I didnt yet add rtl support for the arrow but it doesnt seem to be working as expected with arrows at the given moment or at least didnt see a working example, so I ignored it atm.

[omerman]

I have read the CLA Document and I hereby sign the CLA

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/qwikifiers/qwik-ui@1109

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/headless@1109

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/styled@1109

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/utils@1109

commit: 8b88984

[maiieul]

Hey @omerman thanks for the PR. How do you recommend setting up rtl with Qwik? If I add dir="rtl" directly on the body tag, your approach doesn't work.

[omerman]

Hey @omerman thanks for the PR. How do you recommend setting up rtl with Qwik? If I add dir="rtl" directly on the body tag, your approach doesn't work.

I added the dir: rtl directly to the html tag (containerAttributes) and then it works well

[maiieul]

Have you been able to make it work on Qwik UI too? Even with dir="rtl" on the html, I still get the wrong positioning.

[omerman]

Yes 😅