[Feature]: For Mac, allow apps that use BaseButton's menus, to configure a property that makes the context menu modal

Library

React / v8 (@fluentui/react)

Describe the feature that you would like added

When the context menu is up is should behave as a modal div for Mac apps:
(1) Hovering on the app surface outside the context menu should not interact with the app surface.
(2) Clicking in the app surface should only dismiss the context menu and not perform any action like selecting an object on the app surface.

Have you discussed this feature with our team

No.

Additional context

Here's my current implementation at my app:

      const menuWrapperElement: HTMLElement | null = document.querySelector(
        ".ms-Callout-container"

      );
      if (!!menuWrapperElement) {
        menuWrapperElement.style.width = "100vw";
        menuWrapperElement.style.height = "100vh";
        menuWrapperElement.addEventListener("click", (e) => {
          if (e?.target === menuWrapperElement) {
            this.onDismiss();
          }
        });
      }
    }

Validations

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

Priority

Normal

Start by tracing how BaseButton creates and dismisses its context menu, then review the surrounding menu and callout behavior for Mac apps. Define where a configurable modal property would be exposed and add coverage for hover and click interactions outside the menu. Done means the option prevents outside interaction while allowing an outside click to dismiss the menu.