[Modal]: separate hide outside and prevent scroll behavior from modal prop of overlay components

[fabien-ml]

Is your feature request related to a problem? Please describe.
Separate hide outside and prevent scroll behaviors from modal prop of overlay components (Dialog, Popover, Menu, Select...)

Describe the solution you'd like
Split the modal prop in two props:

• modal: aria-hide outside elements and disable pointer outside where needed.
• preventScroll: lock body scroll.

[katywings]

@fabien-ml Thank you for creating this 😊

[fabien-ml]

Most of the time the modal behavior should be what it is actually. Sine your use case is an edge case and to avoid breaking changes I'm thinking about doing it like this:

• modal: stay the same
• preventScroll: only prevent scroll.

In your component you disable the modal mode and only enable scroll lock:

<Dialog.Root modal={false} preventScroll />

Scroll will be lock if either one of the prop is true.

Also I don't think the other possible case, only wanting the "hide outside" and not the scroll lock is a valid use case tbh.

[katywings]

Most of the time the modal behavior should be what it is actually
Indeed.

I appreciate your detailed answer, ty! That preventScroll prop would help a lot. If you are interested I can create a PR.