More control over Popover underlay

[ArrayKnight]

Provide a general summary of the feature here

The Popover underlay is fairly inaccessible, which makes adding props to it impossible.
https://github.com/adobe/react-spectrum/blob/main/packages/react-aria-components/src/Popover.tsx#L169

There's an existing issue that only addresses the styling aspect of this element:
#5231

But we'd like to expand beyond that scope to have a fuller set of props and use cases considered.

🤔 Expected Behavior?

Popover underlay is customizable like other RACs

😯 Current Behavior

Popover underlay doesn't receive any custom props

💁 Possible Solution

Considering the multiple requests, it feels necessary to turn the underlay into an official <Underlay /> component that consumes an UnderlayContext

From a composability perspective, it makes sense that <Popover /> would support the implementation of a custom <Underlay /> or add the default one if isNonModal is not true. <Popover /> can use useSlot to detect if a custom underlay has been supplied to not duplicate the underlay

Alternatively, but less desirable: allow underlayProps to be passed through <Popover /> and usePopover to the existing div

🔦 Context

We'd like to be able to bind to the onContextMenu event handler to disable the default browser context menu.

💻 Examples

Renders with default <Underlay />:

<Popover>
  // ...
</Popover>

Renders with no underlay:

<Popover isNonModal>
  // ...
</Popover>

<Popover isNonModal>
  <Underlay />
  // ...
</Popover>

Renders with custom(ized) <Underlay />:

<Popover>
  <Underlay className={myCustomStyles} onContextMenu={(e) => e.preventDefault()} />
  // ...
</Popover>

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response