[Feature]: Dialog - add imperative API for setting virtual parent

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

In this example: https://codesandbox.io/s/determined-aj-h8g7vh?file=/example.tsx

PopoverSurface contains a Button that opens Dialog. Dialog is not children of PopoverSurface in the react tree, and therefore not its virtual child. So when clicking 'close' button to close Dialog, Popover closes as well.
The codesandbox sets Dialog to be the virtual child of PopoverSurface by calling setVirtualParent. So when Dialog closes, Popover can remain open.

What about having a more user friendly API on Dialog that sets the virtual parent? Maybe something like:

  React.useEffect(() => {
    if (dialogOpen) {
      dialogSurfaceRef.current?.setVirtualParent(parentNode);
    }
  }, [dialogOpen]);

Have you discussed this feature with our team

No response

Additional context

Please note that this is a new feature request. Fluent v0 does not handle this out of the box either: https://codesandbox.io/s/fluent-ui-example-forked-lqde9t?file=/example.js

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Start with the linked CodeSandbox example and inspect how Dialog currently uses setVirtualParent to preserve the PopoverSurface relationship. Review the React Components / v9 Dialog and Popover behavior, then define and test a user-friendly Dialog API that keeps the Popover open when Dialog closes.