Flyout/Popup components for Fabric

[chrisglein]

Summary

On Paper, we have Flyout and Popup. Windows-only components, not part of RN core (and as such, not tracked here)

Notes from our discussion on "what to do with these on Fabric?":

• We didn't do Modal because XAML's modal is very particular (e.g. ContentDialog one at at time). We will still need a lighter weight flyout that can still extend beyond window bounds. Note that this is a Desktop-centric scenario, not a Mobile-centric scenario, and may be more appropriate outside of RNW core.
• We should find out what Messenger has done here. Office certainly has this scenario, but also has its own popup manager. We could try come up with a shared interface that meets the needs of these deep desktop apps and lets established needs like those of Office plug into an interface.
• Unclear on what the core RN Modal mean as far as disabling non-RN UI for the app. Is it solving those hard problems? Modal · React Native. True input modality is hard.

See the tracking issue for Modal on Fabric

Related issues for E2E testing:
#11279
#11102

And the overall proposal (on Paper) of "should these live here?"
#4343

All this to say, we need to figure out what happens to Flyout/Popup on Fabric. Do they come over? If so, how do they change. If not, how can Modal/community cover what they solved?

Flyout

Assuming we kept the same API surface as our Paper implementation of Flyout (not a given), these are the APIs:

• horizontalOffset
• verticalOffset
• isLightDismissEnabled
• isOverlayEnabled
• isOpen
• onDismiss
• target
• placement

Popup

Assuming we kept the same API surface as our Paper implementation of Popup (not a given), these are the APIs:

• isOpen
• isLightDismissEnabled
• horizonalOffset
• verticalOffset
• onDismiss
• target
• autoFocus

Motivation

Migration of Paper apps to Fabric who used Flyout or Popup

Basic Example

• https://github.com/microsoft/react-native-gallery/blob/main/src/examples/FlyoutExamplePage.tsx
• https://github.com/microsoft/react-native-gallery/blob/main/src/examples/PopupExamplePage.tsx