[Fabric] Get Modal to host RN components in new hwnd #13500

TatianaKapos · 2024-07-25T23:58:44Z

Description

Adds a very basic Modal that can host UI.

Limitations/Future Work (will make a separate issue for each bullet):

Modal works with a View that sets a height/width but gets funky with padding/flex styling. Need to figure out a better way to implement layout (this may involve splitting RNW Island into two different classes if layout diverges too much)
Brainstorm how we want Modal to behave with user-resizing
Implement a way to disable main hwnd for true modality
Move RNW Modal implementation to use new IXP DesktopPopupSiteBridge API (work item 54612062 on ADO)
Modal is still missing onDismiss/onShow events
Need to implement closing Modal with window's "X" button
Figure out the x/y positions of where we want Modal to popup (possibly a windows-specific property)
Test if jest can handle multiple windows to develop e2etests for Modal
Continue to implement Modal properties

Screenshot

Modal in rnTester

…indows into tk-ModalHosting

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

…indows into tk-ModalHosting

…ct-native-windows into tk-ModalHosting

…indows into tk-ModalHosting

…purposes

…indows into tk-ModalHosting

vnext/Microsoft.ReactNative/ReactNativeIsland.idl

…indows into tk-ModalHosting

acoates-ms · 2024-10-11T23:44:23Z

Another question, I don't see anything in here that actually disables the outer window. So, this isn't really a modal dialog at all, but just a window? This probably needs more thought too.

We likely need some kind of notification back to the app so that they can disable any other windows that they own if they want to.

chrisglein · 2024-10-12T01:06:13Z

Another question, I don't see anything in here that actually disables the outer window. So, this isn't really a modal dialog at all, but just a window? This probably needs more thought too.

We likely need some kind of notification back to the app so that they can disable any other windows that they own if they want to.

My memory from when we looked at the RN core expectations around Modal is that it's not a true modal in that sense. It's just a layering mechanism. I think for deep Win32 clients there is more we can/should do here. But for a first pass on compatibility with the cross-platform expectation... UI in another window is the bar?

…indows into tk-ModalHosting

TatianaKapos · 2024-10-23T20:53:03Z

@acoates-ms should be ready for another review! I added some updated screenshot to the PR description and listed out some future work for Modal. Let me know what you think!

acoates-ms · 2024-10-29T17:41:52Z

For the modal sizing, I was thinking more along the lines of where we would control the size of the modal dialog window based on the size of the content within the dialog.

See m_sizeToContent in Playground-Composition.cpp. (You can turn on this mode in the settings dialog of the playground app). Having said that, it maybe that we need both options. Providing an initial size on the show modal call, and having an option to instead size the modal based on content.

We can probably hold off on doing the 2nd on for an initial checkin.

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp

vnext/Microsoft.ReactNative/Fabric/Composition/ReactNativeIsland.cpp

…indows into tk-ModalHosting

* save state * add example * build but blank page still :( * clean up comments * visuals show up in new hwnd! * clean up code * better naming and unfork Modal examples * testing save state * Make the RN island a Modal member var * Failed attempt at skipping root view in CEH, leaving it for learning purposes * you can click on UI! * clean up code * Change files * save state * remove hardcoded rootTag * add width/height to example * add test * revert simple.tsx * remove test * update snapshot * feedback part 1: make Modal a RootComponentView * feedback part2: simplify MountChildren * fix deleting modal * feedback round2 * remove comment * remove imports * feedback part 3 * fix overrides * add simple layout - still has issues with padding/flex * feedback part4 * lint * update overrides * Change files * feedback --------- Co-authored-by: Daniel Ayala <[email protected]>

* [Fabric] Introducing autocapitalize prop in TextInput - Take 2 (#13343) * New implementation of autocapitalize! * Change files * Fixed bug for sentences scenario * Just keep characters mode for now * Revert "Just keep characters mode for now" This reverts commit 60ca1ce. * Re-apply changes minus packages.json.lock * The original js file was deleted, re-applying changes * Fixed snapshot and lint errors * Fix override mismatch, added comments * Remove stale test check * Minor changes * Update obsolete snapshot * Cleanup ReactNativeAppBuilder and ReactNativeWin32App (#13983) This PR simplifies and scopes down the API for `ReactNativeAppBuilder` and `ReactNativeWin32App`. - Bug fix (non-breaking change which fixes an issue) `ReactNativeAppBuilder`'s API surface made it too easy to call incorrectly and not realize it. Resolves #13946 There are a variety of changes to the API surface: * `ReactInstanceSettingsBuilder` deleted: not only are there are simply too many APIs that would need to be exposed to be useful, the very act of creating and replacing the app's `ReactNativeHost`'s `ReactInstanceSettings` with a new one is what caused the bug in #13946 in the first place * `ReactNativeAppBuilder` now only exposes APIs to specify the intial, non-ReactNative, WinAppSDK types, (i.e. `DispatcherQueueController`, `Compositor`, and `AppWindow`), objects the app developer may already have created for their existing app, and otherwise is only responsible for building a `ReactNativeWin32App` with those types properly pre-made * `ReactNativeWin32App::Start()` is now more responsible for the stitching together all of the relevant types to make a working Win32 fabric app * All WinRT APIs without an immediate use-case have been commented out until we are sure they are necessary and that it is safe to expose them * The template has been updated to follow the pattern of: * Use `ReactNativeAppBuilder` to get a `ReactNativeWin32` app with the base WinAppSDK types ready * Get and modify the types as necessary from the created app object (like the `ReactInstanceSettings` and the `AppWindow`) * Call `app.Start()` N/A Verified new apps and example apps in libraryes build and run properly. Should this change be included in the release notes: _yes_ Cleanup ReactNativeAppBuilder and ReactNativeWin32App * Update Guardrails on Provider Instantiation (#13961) * Update Provider Guardrails * Change files * Format * Update Snapshots * Add very basic box-shadow support (#14028) * Add very basic box-shadow support * Change files * Focus should notify island host when tab loop wraps to give host oportunity to take focus (#14026) * Focus should notify island host when tab loop wraps to give host oportunity to take focus * Change files * Default scroll to bring a component into view should have padding around the viewport (#14018) * Default scroll to bring a component into view should have padding around the viewport * Change files * Update focus visuals to use cornerRadius and inner/outer strokes (#14008) * Update focus visuals to use cornerRadius and inner/outer strokes. * Change files * Format * lint fix * Scale focus border for scaleFactor * [Fabric] Get Modal to host RN components in new hwnd (#13500) * save state * add example * build but blank page still :( * clean up comments * visuals show up in new hwnd! * clean up code * better naming and unfork Modal examples * testing save state * Make the RN island a Modal member var * Failed attempt at skipping root view in CEH, leaving it for learning purposes * you can click on UI! * clean up code * Change files * save state * remove hardcoded rootTag * add width/height to example * add test * revert simple.tsx * remove test * update snapshot * feedback part 1: make Modal a RootComponentView * feedback part2: simplify MountChildren * fix deleting modal * feedback round2 * remove comment * remove imports * feedback part 3 * fix overrides * add simple layout - still has issues with padding/flex * feedback part4 * lint * update overrides * Change files * feedback --------- Co-authored-by: Daniel Ayala <[email protected]> * Support accessibilityState 'checked' (#13962) * Implement accessibilityState checked * Change files * Add Testing * Format and Update Snapshots * Adjust Guardrails * Merge * Format * Format * Lint * Change files * Fix Merge Error * Fix issue with prop cloning with custom native props (#14061) * Fix issue with prop cloning with custom native props * format * prettier * Change files --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * change files * Build fixes * fix * fix * snapshot --------- Co-authored-by: Daniel Ayala <[email protected]> Co-authored-by: Jon Thysell <[email protected]> Co-authored-by: Chiara Mooney <[email protected]> Co-authored-by: Tatiana Kapos <[email protected]> Co-authored-by: React-Native-Windows Bot <[email protected]>

* save state * add example * build but blank page still :( * clean up comments * visuals show up in new hwnd! * clean up code * better naming and unfork Modal examples * testing save state * Make the RN island a Modal member var * Failed attempt at skipping root view in CEH, leaving it for learning purposes * you can click on UI! * clean up code * Change files * save state * remove hardcoded rootTag * add width/height to example * add test * revert simple.tsx * remove test * update snapshot * feedback part 1: make Modal a RootComponentView * feedback part2: simplify MountChildren * fix deleting modal * feedback round2 * remove comment * remove imports * feedback part 3 * fix overrides * add simple layout - still has issues with padding/flex * feedback part4 * lint * update overrides * Change files * feedback --------- Co-authored-by: Daniel Ayala <[email protected]>

* [Fabric] Introducing autocapitalize prop in TextInput - Take 2 (#13343) * New implementation of autocapitalize! * Change files * Fixed bug for sentences scenario * Just keep characters mode for now * Revert "Just keep characters mode for now" This reverts commit 60ca1ce. * Re-apply changes minus packages.json.lock * The original js file was deleted, re-applying changes * Fixed snapshot and lint errors * Fix override mismatch, added comments * Remove stale test check * Minor changes * Update obsolete snapshot * Cleanup ReactNativeAppBuilder and ReactNativeWin32App (#13983) This PR simplifies and scopes down the API for `ReactNativeAppBuilder` and `ReactNativeWin32App`. - Bug fix (non-breaking change which fixes an issue) `ReactNativeAppBuilder`'s API surface made it too easy to call incorrectly and not realize it. Resolves #13946 There are a variety of changes to the API surface: * `ReactInstanceSettingsBuilder` deleted: not only are there are simply too many APIs that would need to be exposed to be useful, the very act of creating and replacing the app's `ReactNativeHost`'s `ReactInstanceSettings` with a new one is what caused the bug in #13946 in the first place * `ReactNativeAppBuilder` now only exposes APIs to specify the intial, non-ReactNative, WinAppSDK types, (i.e. `DispatcherQueueController`, `Compositor`, and `AppWindow`), objects the app developer may already have created for their existing app, and otherwise is only responsible for building a `ReactNativeWin32App` with those types properly pre-made * `ReactNativeWin32App::Start()` is now more responsible for the stitching together all of the relevant types to make a working Win32 fabric app * All WinRT APIs without an immediate use-case have been commented out until we are sure they are necessary and that it is safe to expose them * The template has been updated to follow the pattern of: * Use `ReactNativeAppBuilder` to get a `ReactNativeWin32` app with the base WinAppSDK types ready * Get and modify the types as necessary from the created app object (like the `ReactInstanceSettings` and the `AppWindow`) * Call `app.Start()` N/A Verified new apps and example apps in libraryes build and run properly. Should this change be included in the release notes: _yes_ Cleanup ReactNativeAppBuilder and ReactNativeWin32App * Update Guardrails on Provider Instantiation (#13961) * Update Provider Guardrails * Change files * Format * Update Snapshots * Add very basic box-shadow support (#14028) * Add very basic box-shadow support * Change files * Focus should notify island host when tab loop wraps to give host oportunity to take focus (#14026) * Focus should notify island host when tab loop wraps to give host oportunity to take focus * Change files * Default scroll to bring a component into view should have padding around the viewport (#14018) * Default scroll to bring a component into view should have padding around the viewport * Change files * Update focus visuals to use cornerRadius and inner/outer strokes (#14008) * Update focus visuals to use cornerRadius and inner/outer strokes. * Change files * Format * lint fix * Scale focus border for scaleFactor * [Fabric] Get Modal to host RN components in new hwnd (#13500) * save state * add example * build but blank page still :( * clean up comments * visuals show up in new hwnd! * clean up code * better naming and unfork Modal examples * testing save state * Make the RN island a Modal member var * Failed attempt at skipping root view in CEH, leaving it for learning purposes * you can click on UI! * clean up code * Change files * save state * remove hardcoded rootTag * add width/height to example * add test * revert simple.tsx * remove test * update snapshot * feedback part 1: make Modal a RootComponentView * feedback part2: simplify MountChildren * fix deleting modal * feedback round2 * remove comment * remove imports * feedback part 3 * fix overrides * add simple layout - still has issues with padding/flex * feedback part4 * lint * update overrides * Change files * feedback --------- Co-authored-by: Daniel Ayala <[email protected]> * Support accessibilityState 'checked' (#13962) * Implement accessibilityState checked * Change files * Add Testing * Format and Update Snapshots * Adjust Guardrails * Merge * Format * Format * Lint * Change files * Fix Merge Error * Fix issue with prop cloning with custom native props (#14061) * Fix issue with prop cloning with custom native props * format * prettier * Change files --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * Export MS.RN.Color ctor in Office dll (#14082) * Export MS.RN.Color ctor in Office dll * Change files * Implement TxScreenToClient and TxClientToScreen * format --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * TextInput caret becomes visible on non-focused TextInputs on resize (#14091) * TextInput caret becomes visible on non-focused TextInputs on resize * Change files --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * Fix focus visuals being obscured by adjacent views (#14093) * Fix focus visuals being obscured by adjacent views * Change files * update snapshots * Fix uimplemented view * review feedback --------- Co-authored-by: React-Native-Windows Bot <[email protected]> * change files * Build fixes * fix * Update Test Website to dotnet8 * update snapshots * fix overrides --------- Co-authored-by: Daniel Ayala <[email protected]> Co-authored-by: Jon Thysell <[email protected]> Co-authored-by: Chiara Mooney <[email protected]> Co-authored-by: Tatiana Kapos <[email protected]> Co-authored-by: React-Native-Windows Bot <[email protected]>

TatianaKapos added 5 commits June 11, 2024 17:00

save state

d0da31e

add example

e3f75ed

build but blank page still :(

5b9120e

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

838f0cc

…indows into tk-ModalHosting

clean up comments

6bf40e5

TatianaKapos commented Jul 26, 2024

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp Outdated Show resolved Hide resolved

TatianaKapos commented Jul 26, 2024

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.h Outdated Show resolved Hide resolved

TatianaKapos added 4 commits July 30, 2024 15:41

visuals show up in new hwnd!

258eaf4

clean up code

a57fdb2

better naming and unfork Modal examples

0fc2952

Merge branch 'main' into tk-ModalHosting

700d3c1

TatianaKapos commented Aug 2, 2024

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp Outdated Show resolved Hide resolved

TatianaKapos and others added 14 commits August 21, 2024 13:46

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

cbd2eab

…indows into tk-ModalHosting

Merge branch 'tk-ModalHosting' of https://github.com/TatianaKapos/rea…

fa33925

…ct-native-windows into tk-ModalHosting

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

9c4428d

…indows into tk-ModalHosting

testing save state

216ea91

Make the RN island a Modal member var

568aab4

Failed attempt at skipping root view in CEH, leaving it for learning …

c71a292

…purposes

you can click on UI!

2528244

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

71e8e4c

…indows into tk-ModalHosting

clean up code

cf7497d

Change files

a68b564

save state

5a8bea9

remove hardcoded rootTag

05f0168

add width/height to example

4578981

add test

3fa6449

TatianaKapos changed the title ~~[Draft] [WIP] Get Modal to host RN components in new hwnd~~ Get Modal to host RN components in new hwnd Sep 20, 2024

TatianaKapos marked this pull request as ready for review September 20, 2024 23:34

TatianaKapos requested review from a team as code owners September 20, 2024 23:34

TatianaKapos requested a review from acoates-ms October 9, 2024 19:53

TatianaKapos added 2 commits October 10, 2024 12:07

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

3dd2a27

…indows into tk-ModalHosting

fix overrides

5d36cb6

acoates-ms reviewed Oct 10, 2024

View reviewed changes

vnext/Microsoft.ReactNative/ReactNativeIsland.idl Outdated Show resolved Hide resolved

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

1327a7e

…indows into tk-ModalHosting

TatianaKapos added 6 commits October 22, 2024 12:32

add simple layout - still has issues with padding/flex

96f1bb2

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

2a73dc0

…indows into tk-ModalHosting

feedback part4

bfaafce

lint

f86bf68

update overrides

d217fa4

Change files

2f378a6

TatianaKapos requested a review from acoates-ms October 23, 2024 20:49

acoates-ms reviewed Oct 29, 2024

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/Modal/WindowsModalHostViewComponentView.cpp Show resolved Hide resolved

jonthysell approved these changes Oct 29, 2024

View reviewed changes

TatianaKapos added 2 commits October 31, 2024 12:49

feedback

f3ab7ac

Merge branch 'main' of https://github.com/TatianaKapos/react-native-w…

3cb04af

…indows into tk-ModalHosting

TatianaKapos requested a review from acoates-ms October 31, 2024 20:35

acoates-ms approved these changes Oct 31, 2024

View reviewed changes

TatianaKapos merged commit 15e5afb into microsoft:main Nov 1, 2024
59 checks passed

TatianaKapos deleted the tk-ModalHosting branch November 1, 2024 20:43

acoates-ms mentioned this pull request Nov 2, 2024

[0.74] Cherry-pick changes #14072

Merged

acoates-ms mentioned this pull request Nov 12, 2024

[0.75] Cherry-pick fixes #14106

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fabric] Get Modal to host RN components in new hwnd #13500

[Fabric] Get Modal to host RN components in new hwnd #13500

TatianaKapos commented Jul 25, 2024 •

edited

Loading

acoates-ms commented Oct 11, 2024

chrisglein commented Oct 12, 2024

TatianaKapos commented Oct 23, 2024

acoates-ms commented Oct 29, 2024

[Fabric] Get Modal to host RN components in new hwnd #13500

[Fabric] Get Modal to host RN components in new hwnd #13500

Conversation

TatianaKapos commented Jul 25, 2024 • edited Loading

Description

Limitations/Future Work (will make a separate issue for each bullet):

Screenshot

acoates-ms commented Oct 11, 2024

chrisglein commented Oct 12, 2024

TatianaKapos commented Oct 23, 2024

acoates-ms commented Oct 29, 2024

TatianaKapos commented Jul 25, 2024 •

edited

Loading