[PRO-518] Add closestChildFocusDirections for spatial navigation across containers

[oleksii-pylypenko]

Enables spatial (distance-based) child focusing when navigating between focusable containers.

When configured with closestChildFocusDirections, containers allow their children to participate in spatial navigation with siblings from other containers, enabling natural grid navigation patterns (e.g., navigating down from Row 1 Item 3 focuses Row 2 Item 3, not the first or last focused child).

[guilleccc]

LGTM, nice work @oleksii-pylypenko !

I am testing closestChildFocusDirections: ['up', 'down'] on the ContentRow from the demo App. And I see that pressing down:

• from asset1-row1 goes to asset1-row2
• from asset3-row1 goes to asset3-row2
• from asset5-row1 goes to asset5-row2

The natural grid navigation patterns you describe seem to be perfectly aligned with this.

However, in standard rows, with a horizontal scrollview, the asset5-row1 is located at the left edge of the screen, but moves down to the fifth asset, which doesn't seem to be the closest. Would it be better to focus on the first item in the following row (which seems to be the closest)?

Screen.Recording.2025-11-20.at.12.28.41.mov

[oleksii-pylypenko-noriginmedia]

Thank you for the feedback @guilleccc. This is a very valid comment.

I believe it is happening because the rows are moving and the coordinates of the elements are not getting updated. So for scenarios like this we would need to also have useGetBoundingClientRect enabled.

However, with useGetBoundingClientRect enabled the navigation in current example/demo page gets completely broken.

I'm working on a different PR in parallel where I'm updating the demo/examples. There I'm using transform: translate() instead of .scrollTo() to move the container while visually maintaining focus on the first element.

While I still think translate() is much better in terms of flexibility and performance I will try to create a few examples using the scrollTo approach as well.