fix(GridLayout): support RTL direction for drop target positioning (#9848)
* fix(GridLayout): support RTL direction for drop target positioning
GridLayout.getDropTargetFromPoint() computes 'before'/'after' drop positions
using x-coordinates, but has no awareness of layout direction. In RTL locales,
the Virtualizer positions items using CSS 'right' with the layout rect's x
value as the right-offset, while pointer coordinates remain in visual
(left-origin) space. This mismatch causes drop targets to be inverted —
dragging an item to the right of another shows a 'before' indicator instead
of 'after'.
This commit adds an optional 'direction' property to GridLayoutOptions.
When set to 'rtl', getDropTargetFromPoint flips the x-coordinate to match
the layout coordinate system before computing drop positions.
Consumers can pass direction via useLayoutOptions() in a GridLayout subclass:
class LocaleAwareGridLayout extends GridLayout {
useLayoutOptions() {
const { direction } = useLocale();
return { direction };
}
}
* test(GridLayout): add unit tests for RTL drop target positioning
Tests getDropTargetFromPoint with both LTR and RTL directions to verify
that drop targets (before/after) are computed correctly in multi-column
grids. Also tests that single-column layouts are unaffected by direction
and that empty layouts return a root drop target.
* fix(GridLayout): auto-determine direction via useLocale() in RAC wrapper
Instead of requiring consumers to subclass GridLayout and pass direction
manually, create a RAC wrapper (like TableLayout) that calls useLocale()
internally via useLayoutOptions(). The base layout in react-stately still
accepts direction as an explicit option for non-RAC consumers.
* fix: use public GridLayout import
* add test story
* fix tests, missing size mock
* chore: apply oxfmt formatting
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* fix formatting
---------
Co-authored-by: Daniel Lu <dl1644@gmail.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> M
Miguel Calderón committed
092229c62c070e6405d4b6d74bb27f328508e781
Parent: 6d4afb9
Committed by GitHub <noreply@github.com>
on 5/15/2026, 11:07:27 PM