Support for `data-focus-within` in RAC

[jaknas]

Provide a general summary of the feature here

Originally opened in the discussion: #4849 (comment)

For all grid components that support interactive children, I'd like to have possibility to style the <Item/> component based on whether the focus is contained in the descendant of this <Item/>.

For example:
My solution requires to style a <Row/> component when it's being interacted with. Currently, this can be done with using data-hovered or data-focus-visible selectors. However, when my focus moves to one of the interactive children, there's no attribute on the <Row/> component I could use, that I could use to apply the same styles as e.g data-hovered (that'd signify that this row is being interacted with)

🤔 Expected Behavior?

Additional prop/data-attribute that would be enabled once the focus is on the element's descendants. Best candidate seems to be using focus-within selector, but I'm open to hear about drawbacks of this or some other ideas.

😯 Current Behavior

No way of knowing that focus is contained in the element's descendants.

💁 Possible Solution

Possibly adding the useFocusWithin hook to the TableRow component.

🔦 Context

I'd like to style a grid role="row" element based on whether any of the descendants is currently focused.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

Let's just start with adding this to GridList Items and Table Rows for now. In addition to including focus-within, we may also want to consider focus-visible-within.

[LFDanLu]

Just to add to @reidbarber comment, we'd also want to add focus-within tracking to Cell as well

[sookmax]

Hello guys, do we want to add a separate data-focus-within and leave the existing data-focused intact, or is it okay to just enhance data-focused to remain activated even when the focus shifts to one of its children?

I might be missing some details here, but if the latter is okay then I think this can be solved as simple as changing useFocusRing() in TableRow to useFocusRing({ within: true }), and in the case of GridList, it seems this is already handled by useGridListItem() and useSelectableItem() within it:

react-spectrum/packages/@react-aria/gridlist/src/useGridListItem.ts

Lines 62 to 71 in d2049a5

	let focus = () => {
	// Don't shift focus to the row if the active element is a element within the row already
	// (e.g. clicking on a row button)
	if (
	(keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
	!ref.current.contains(document.activeElement)
	) {
	focusSafely(ref.current);
	}
	};

If what we want is the former.. then a little more guidance would be of great help 🙏

Update

Sorry, I just realized data-focused in TableRow does not use the return value of useFocusRing() 😅. Rather it seems the TableRow uses isFocused from useSelectableItem(). I should look into this hook a little deeper.