Inert in usePopover is set on all elements

[pan-alexey]

Provide a general summary of the issue here

In our project we use both Dialog and Popover. We predefine where the layers for our popover elements are rendered. The problem is that when a popover opens, there is no way to specify the parent element within which inert should be applied.

Looking at the React Aria hook, when a popover is shown, inert is applied to all elements in the body. This creates issues for us because we want inert to be scoped only to a specific container, not the entire document.

Is it possible to add a rootElement (or similar option) so that inert is applied only within that parent?

🤔 Expected Behavior?

It is possible to find out which parent to store the inert within

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts#L43C7-L43C11

😯 Current Behavior

inert is always set within the parent, and this parent is document.body

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/ariaHideOutside.ts#L43C7-L43C11

💁 Possible Solution

Add rootElementRef to popoverContainer

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePopover.ts#L23

🔦 Context

No response

🖥️ Steps to Reproduce

https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePopover.ts#L126

Version

3.43.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response