Skip to content

Conversation

@ReemX
Copy link

@ReemX ReemX commented Nov 23, 2025

Implements full RTL layout support for Arabic, Hebrew, Persian, and other right-to-left languages, with automatic detection via Mantine's DirectionProvider.

Core changes:

  • Menu positioning: Appears left of cursor in RTL mode with proper viewport bounds
  • Submenu positioning: Opens to the left of parent items in RTL layouts
  • Text direction: Proper text alignment and reading direction
  • Icon spacing: Uses logical CSS properties (margin-inline-start/end) for automatic flipping
  • Submenu indicators: Arrow character automatically mirrors based on text direction

Technical implementation:

  • ContextMenuProvider: Detects direction using Mantine's useDirection hook
  • ContextMenu: Calculates RTL-aware position (x - width vs x + width)
  • ContextMenuItem: Sets dir attribute and uses logical margin properties
  • Prevents visual flash on mount by waiting for dimensions before showing
  • Maintains smooth repositionOnRepeat transitions while avoiding initial flash

Includes comprehensive example page with:

  • Interactive RTL/LTR toggle
  • Detailed explanations of RTL behavior
  • Code examples for proper DirectionProvider setup
  • Multi-level submenu demonstrations

icflorescu and others added 14 commits June 11, 2025 15:27
Minor docs website improvements
Update deps, changelog, license year
Update deps, changelog, bump version
Trying to update deployment workflow step versions
Implements full RTL layout support for Arabic, Hebrew, Persian, and other
right-to-left languages, with automatic detection via Mantine's DirectionProvider.

Core changes:
- Menu positioning: Appears left of cursor in RTL mode with proper viewport bounds
- Submenu positioning: Opens to the left of parent items in RTL layouts
- Text direction: Proper text alignment and reading direction
- Icon spacing: Uses logical CSS properties (margin-inline-start/end) for automatic flipping
- Submenu indicators: Arrow character automatically mirrors based on text direction

Technical implementation:
- ContextMenuProvider: Detects direction using Mantine's useDirection hook
- ContextMenu: Calculates RTL-aware position (x - width vs x + width)
- ContextMenuItem: Sets dir attribute and uses logical margin properties
- Prevents visual flash on mount by waiting for dimensions before showing
- Maintains smooth repositionOnRepeat transitions while avoiding initial flash

Includes comprehensive example page with:
- Interactive RTL/LTR toggle
- Detailed explanations of RTL behavior
- Code examples for proper DirectionProvider setup
- Multi-level submenu demonstrations
@codesandbox
Copy link

codesandbox bot commented Nov 23, 2025

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

@ReemX ReemX closed this Nov 23, 2025
@ReemX ReemX reopened this Nov 23, 2025
@ReemX
Copy link
Author

ReemX commented Nov 23, 2025

Would love for this to get merged as soon as possible :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants