[Modal] Normalize the component & usage across all products

[mnajdova]

This issue will serve as an umbrella for all issues (inconsistencies) found around the modal vs non-modal features noticed on all different products.

• Material UI - we are missing a non-modal dialog demo. We technically have the hideBackdrop prop that makes this possible, but we are not educating people about this. The docs states "A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.", but there are also non-modal dialogs scenarios, that should likely support, for e.g. check https://accessuse.eu/en/non-modal-dialogs.html#:~:text=A%20non%2Dmodal%20dialog%20pops,partly%20covered%20by%20the%20dialog. This page has great examples of both use-cases https://www.nngroup.com/articles/modal-nonmodal-dialog/
• Joy UI - we are missing a page for the Dialog, the only demo we have lives on the modal's page, it may not be straight forward to find it - https://mui.com/joy-ui/react-modal/#modal-dialog. The modal should be treated as a utility component, used in different components, we should not educate people to use it directly, but have components for the most common use-cases it is associated with, like dialogs, drawers etc.
• Inconsistencies between using modal vs non-modal popups in some components. For e.g. on the Select component, Material UI uses a modal element for the options list - this means that when the select is open, users cannot directly take different action by clicking on an element outside of the list. For example try this demo - https://cml5vj.csb.app/ (open the select and try clicking on the button while it is opened). While this works great for mobile, the behavior is a bit odd on desktop, as you can likely find a spot to click in order to close the select without taking unintended action. On the contrast Base UI (and Joy UI) offer only the non-modal option, which works great on desktop, but could be problematic on mobile devices, where you may not have an available space to tab in order to close the select without taking an action. In my opinion we should support both of these scenarios in all libraries.

Issues

• [material-next] Support modal and non-modal option for components #38756

[mnajdova]

Joy UI - we are missing a page for the Dialog, the only demo we have lives on the modal's page, it may not be straight forward to find it - https://mui.com/joy-ui/react-modal/#modal-dialog. The modal should be treated as a utility component, used in different components, we should not educate people to use it directly, but have components for the most common use-cases it is associated with, like dialogs, drawers etc.

@siriwatknp for this one, I will start with moving the demos to a different page only. Long term, in my opinion we should have a Dialog component in Joy UI that should have both modal & non-modal version.