react-native-windows 0.74.33 → 0.74.34

package/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp

@@ -11,12 +11,15 @@
 #include <UI.Xaml.Controls.h>
 #include <Utils/ValueUtils.h>
 #include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionContextHelper.h"
 #include "RootComponentView.h"
 
 #include "Composition.ContentIslandComponentView.g.cpp"
 
+#include "CompositionDynamicAutomationProvider.h"
+
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 ContentIslandComponentView::ContentIslandComponentView(
@@ -47,6 +50,22 @@ void ContentIslandComponentView::OnMounted() noexcept {
       winrt::Microsoft::ReactNative::Composition::Experimental::CompositionContextHelper::InnerVisual(Visual())
           .as<winrt::Microsoft::UI::Composition::ContainerVisual>());
   m_childSiteLink.ActualSize({m_layoutMetrics.frame.size.width, m_layoutMetrics.frame.size.height});
+
+  m_navigationHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteLink(m_childSiteLink);
+
+  m_navigationHostDepartFocusRequestedToken =
+      m_navigationHost.DepartFocusRequested([wkThis = get_weak()](const auto &, const auto &args) {
+        if (auto strongThis = wkThis.get()) {
+          const bool next = (args.Request().Reason() != winrt::Microsoft::UI::Input::FocusNavigationReason::Last);
+          strongThis->rootComponentView()->TryMoveFocus(next);
+          args.Result(winrt::Microsoft::UI::Input::FocusNavigationResult::Moved);
+        }
+      });
+
+  // We configure automation even if there's no UIA client at this point, because it's possible the first UIA
+  // request we'll get will be for a child of this island calling upward in the UIA tree.
+  ConfigureChildSiteLinkAutomation();
+
   if (m_islandToConnect) {
     m_childSiteLink.Connect(m_islandToConnect);
     m_islandToConnect = nullptr;
@@ -70,6 +89,12 @@ void ContentIslandComponentView::OnMounted() noexcept {
 
 void ContentIslandComponentView::OnUnmounted() noexcept {
   m_layoutMetricChangedRevokers.clear();
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_navigationHostDepartFocusRequestedToken && m_navigationHost) {
+    m_navigationHost.DepartFocusRequested(m_navigationHostDepartFocusRequestedToken);
+    m_navigationHostDepartFocusRequestedToken = {};
+  }
+#endif
 }
 
 void ContentIslandComponentView::ParentLayoutChanged() noexcept {
@@ -92,7 +117,79 @@ void ContentIslandComponentView::ParentLayoutChanged() noexcept {
 #endif
 }
 
+winrt::IInspectable ContentIslandComponentView::EnsureUiaProvider() noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_uiaProvider == nullptr) {
+    m_uiaProvider = winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>(
+        *get_strong(), m_childSiteLink);
+  }
+  return m_uiaProvider;
+#else
+  return Super::EnsureUiaProvider();
+#endif
+}
+
+bool ContentIslandComponentView::focusable() const noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  // We don't have a way to check to see if the ContentIsland has focusable content,
+  // so we'll always return true.  We'll have to handle the case where the content doesn't have
+  // focusable content in the OnGotFocus handler.
+  return true;
+#else
+  return Super::focusable();
+#endif
+}
+
+// Helper to convert a FocusNavigationDirection to a FocusNavigationReason.
+winrt::Microsoft::UI::Input::FocusNavigationReason GetFocusNavigationReason(
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction) noexcept {
+  switch (direction) {
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::First:
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::Next:
+      return winrt::Microsoft::UI::Input::FocusNavigationReason::First;
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::Last:
+    case winrt::Microsoft::ReactNative::FocusNavigationDirection::Previous:
+      return winrt::Microsoft::UI::Input::FocusNavigationReason::Last;
+  }
+  return winrt::Microsoft::UI::Input::FocusNavigationReason::Restore;
+}
+
+void ContentIslandComponentView::onGotFocus(
+    const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  auto gotFocusEventArgs = args.as<winrt::Microsoft::ReactNative::implementation::GotFocusEventArgs>();
+  const auto navigationReason = GetFocusNavigationReason(gotFocusEventArgs->Direction());
+  m_navigationHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(navigationReason));
+#else
+  return Super::onGotFocus(args);
+#endif // USE_EXPERIMENTAL_WINUI3
+}
+
 ContentIslandComponentView::~ContentIslandComponentView() noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+  if (m_navigationHostDepartFocusRequestedToken && m_navigationHost) {
+    m_navigationHost.DepartFocusRequested(m_navigationHostDepartFocusRequestedToken);
+    m_navigationHostDepartFocusRequestedToken = {};
+  }
+  if (m_childSiteLink) {
+    if (m_fragmentRootAutomationProviderRequestedToken) {
+      m_childSiteLink.FragmentRootAutomationProviderRequested(m_fragmentRootAutomationProviderRequestedToken);
+      m_fragmentRootAutomationProviderRequestedToken = {};
+    }
+    if (m_parentAutomationProviderRequestedToken) {
+      m_childSiteLink.ParentAutomationProviderRequested(m_parentAutomationProviderRequestedToken);
+      m_parentAutomationProviderRequestedToken = {};
+    }
+    if (m_nextSiblingAutomationProviderRequestedToken) {
+      m_childSiteLink.NextSiblingAutomationProviderRequested(m_nextSiblingAutomationProviderRequestedToken);
+      m_nextSiblingAutomationProviderRequestedToken = {};
+    }
+    if (m_previousSiblingAutomationProviderRequestedToken) {
+      m_childSiteLink.PreviousSiblingAutomationProviderRequested(m_previousSiblingAutomationProviderRequestedToken);
+      m_previousSiblingAutomationProviderRequestedToken = {};
+    }
+  }
+#endif // USE_EXPERIMENTAL_WINUI3
   if (m_islandToConnect) {
     m_islandToConnect.Close();
   }
@@ -132,11 +229,65 @@ void ContentIslandComponentView::Connect(const winrt::Microsoft::UI::Content::Co
   } else {
     m_islandToConnect = contentIsland;
   }
-#endif
+#endif // USE_EXPERIMENTAL_WINUI3
 }
 
 void ContentIslandComponentView::prepareForRecycle() noexcept {
   Super::prepareForRecycle();
 }
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+void ContentIslandComponentView::ConfigureChildSiteLinkAutomation() noexcept {
+  // This automation mode must be set before connecting the child ContentIsland.
+  // It puts the child content into a mode where it won't own its own framework root.  Instead, the child island's
+  // automation peers will use the same framework root as the automation peer of this ContentIslandComponentView.
+  m_childSiteLink.AutomationTreeOption(winrt::Microsoft::UI::Content::AutomationTreeOptions::FragmentBased);
+
+  // These events are raised in response to the child ContentIsland asking for providers.
+  // For example, the ContentIsland.FragmentRootAutomationProvider property will return
+  // the provider we provide here in FragmentRootAutomationProviderRequested.
+
+  // We capture "this" as a raw pointer because ContentIslandComponentView doesn't currently support weak ptrs.
+  // It's safe because we disconnect these events in the destructor.
+
+  m_fragmentRootAutomationProviderRequestedToken = m_childSiteLink.FragmentRootAutomationProviderRequested(
+      [this](
+          const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+          const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        // The child island's fragment tree doesn't have its own fragment root.
+        // Here's how we can provide the correct fragment root to the child's UIA logic.
+        winrt::com_ptr<IRawElementProviderFragmentRoot> fragmentRoot{nullptr};
+        auto uiaProvider = this->EnsureUiaProvider();
+        uiaProvider.as<IRawElementProviderFragment>()->get_FragmentRoot(fragmentRoot.put());
+        args.AutomationProvider(fragmentRoot.as<IInspectable>());
+        args.Handled(true);
+      });
+
+  m_parentAutomationProviderRequestedToken = m_childSiteLink.ParentAutomationProviderRequested(
+      [this](
+          const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+          const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        auto uiaProvider = this->EnsureUiaProvider();
+        args.AutomationProvider(uiaProvider);
+        args.Handled(true);
+      });
+
+  m_nextSiblingAutomationProviderRequestedToken = m_childSiteLink.NextSiblingAutomationProviderRequested(
+      [](const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+         const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        // The ContentIsland will always be the one and only child of this node, so it won't have siblings.
+        args.AutomationProvider(nullptr);
+        args.Handled(true);
+      });
+
+  m_previousSiblingAutomationProviderRequestedToken = m_childSiteLink.PreviousSiblingAutomationProviderRequested(
+      [](const winrt::Microsoft::UI::Content::IContentSiteAutomation &,
+         const winrt::Microsoft::UI::Content::ContentSiteAutomationProviderRequestedEventArgs &args) {
+        // The ContentIsland will always be the one and only child of this node, so it won't have siblings.
+        args.AutomationProvider(nullptr);
+        args.Handled(true);
+      });
+}
+#endif // USE_EXPERIMENTAL_WINUI3
+
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

package/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.h

@@ -8,6 +8,7 @@
 
 #include <Microsoft.ReactNative.Cxx/ReactContext.h>
 #include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
 #include <winrt/Windows.UI.Composition.h>
 #include "CompositionHelpers.h"
 #include "CompositionViewComponentView.h"
@@ -37,6 +38,12 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
 
   void prepareForRecycle() noexcept override;
 
+  bool focusable() const noexcept override;
+
+  winrt::IInspectable EnsureUiaProvider() noexcept override;
+
+  void onGotFocus(const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept override;
+
   ContentIslandComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
       facebook::react::Tag tag,
@@ -56,6 +63,15 @@ struct ContentIslandComponentView : ContentIslandComponentViewT<ContentIslandCom
   std::vector<winrt::Microsoft::ReactNative::ComponentView::LayoutMetricsChanged_revoker> m_layoutMetricChangedRevokers;
 #ifdef USE_EXPERIMENTAL_WINUI3
   winrt::Microsoft::UI::Content::ChildSiteLink m_childSiteLink{nullptr};
+  winrt::Microsoft::UI::Input::InputFocusNavigationHost m_navigationHost{nullptr};
+  winrt::event_token m_navigationHostDepartFocusRequestedToken{};
+
+  // Automation
+  void ConfigureChildSiteLinkAutomation() noexcept;
+  winrt::event_token m_fragmentRootAutomationProviderRequestedToken{};
+  winrt::event_token m_parentAutomationProviderRequestedToken{};
+  winrt::event_token m_nextSiblingAutomationProviderRequestedToken{};
+  winrt::event_token m_previousSiblingAutomationProviderRequestedToken{};
 #endif
 };
 

package/Microsoft.ReactNative/Fabric/Composition/FocusManager.cpp

@@ -14,8 +14,10 @@ int32_t LostFocusEventArgs::OriginalSource() noexcept {
   return m_originalSource;
 }
 
-GotFocusEventArgs::GotFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource)
-    : m_originalSource(originalSource ? originalSource.Tag() : -1) {}
+GotFocusEventArgs::GotFocusEventArgs(
+    const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+    winrt::Microsoft::ReactNative::FocusNavigationDirection direction)
+    : m_originalSource(originalSource ? originalSource.Tag() : -1), m_direction(direction) {}
 int32_t GotFocusEventArgs::OriginalSource() noexcept {
   return m_originalSource;
 }

package/Microsoft.ReactNative/Fabric/Composition/FocusManager.h

@@ -21,11 +21,19 @@ struct LostFocusEventArgs
 
 struct GotFocusEventArgs
     : winrt::implements<GotFocusEventArgs, winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs> {
-  GotFocusEventArgs(const winrt::Microsoft::ReactNative::ComponentView &originalSource);
+  GotFocusEventArgs(
+      const winrt::Microsoft::ReactNative::ComponentView &originalSource,
+      winrt::Microsoft::ReactNative::FocusNavigationDirection direction);
   int32_t OriginalSource() noexcept;
 
+  winrt::Microsoft::ReactNative::FocusNavigationDirection Direction() const noexcept {
+    return m_direction;
+  }
+
  private:
   const int32_t m_originalSource;
+  winrt::Microsoft::ReactNative::FocusNavigationDirection m_direction{
+      winrt::Microsoft::ReactNative::FocusNavigationDirection::None};
 };
 
 struct LosingFocusEventArgs

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

@@ -14,6 +14,24 @@
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
+struct ModalHostState
+    : winrt::implements<ModalHostState, winrt::Microsoft::ReactNative::Composition::IPortalStateData> {
+  ModalHostState(winrt::Microsoft::ReactNative::LayoutConstraints layoutConstraints, float scaleFactor)
+      : m_layoutConstraints(layoutConstraints), m_pointScaleFactor(scaleFactor) {}
+
+  winrt::Microsoft::ReactNative::LayoutConstraints LayoutConstraints() const noexcept {
+    return m_layoutConstraints;
+  }
+
+  float PointScaleFactor() const noexcept {
+    return m_pointScaleFactor;
+  }
+
+ private:
+  float m_pointScaleFactor{1.0f};
+  winrt::Microsoft::ReactNative::LayoutConstraints m_layoutConstraints;
+};
+
 struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::Foundation::IInspectable>,
                        ::Microsoft::ReactNativeSpecs::BaseModalHostView<ModalHostView> {
   ~ModalHostView() {
@@ -37,6 +55,13 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
       m_window.Destroy();
       m_window = nullptr;
     }
+
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (m_popUp) {
+      m_popUp.Close();
+      m_popUp = nullptr;
+    }
+#endif
   }
 
   void InitializePortalViewComponent(
@@ -65,13 +90,32 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     ::Microsoft::ReactNativeSpecs::BaseModalHostView<ModalHostView>::UpdateProps(view, newProps, oldProps);
   }
 
-  void UpdateLayoutMetrics(
-      const winrt::Microsoft::ReactNative::ComponentView &view,
-      const winrt::Microsoft::ReactNative::LayoutMetrics &newLayoutMetrics,
-      const winrt::Microsoft::ReactNative::LayoutMetrics & /*oldLayoutMetrics*/) noexcept override {
-    if (m_window) {
-      AdjustWindowSize(newLayoutMetrics);
-    }
+  void UpdateState(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept override {
+    m_state = newState;
+  }
+
+  void MountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept override {
+    AdjustWindowSize(args.Child().LayoutMetrics());
+    assert(!m_childLayoutMetricsToken);
+    m_childLayoutMetricsToken = args.Child().LayoutMetricsChanged(
+        [wkThis = get_weak()](
+            auto &sender, const winrt::Microsoft::ReactNative::LayoutMetricsChangedArgs &layoutMetricsChangedArgs) {
+          if (auto strongThis = wkThis.get()) {
+            strongThis->AdjustWindowSize(layoutMetricsChangedArgs.NewLayoutMetrics());
+          }
+        });
+  }
+
+  void UnmountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept override {
+    assert(m_childLayoutMetricsToken);
+    args.Child().LayoutMetricsChanged(m_childLayoutMetricsToken);
+    m_childLayoutMetricsToken.value = 0;
   }
 
   void FinalizeUpdate(
@@ -85,7 +129,6 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
  private:
   void OnMounted(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
     m_mounted = true;
-
     if (m_showQueued) {
       ShowOnUIThread(view);
     }
@@ -96,6 +139,14 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
   }
 
   void AdjustWindowSize(const winrt::Microsoft::ReactNative::LayoutMetrics &layoutMetrics) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (!m_popUp) {
+#else
+    if (!m_window) {
+#endif
+      return;
+    }
+
     if (layoutMetrics.Frame.Width == 0 && layoutMetrics.Frame.Height == 0) {
       return;
     }
@@ -108,11 +159,20 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     int32_t yCor = static_cast<int32_t>(
         (parentRC.top + parentRC.bottom - layoutMetrics.Frame.Height * layoutMetrics.PointScaleFactor) / 2);
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+    winrt::Windows::Graphics::RectInt32 rect2{
+        (int)xCor,
+        (int)yCor,
+        static_cast<int32_t>(layoutMetrics.Frame.Width * (layoutMetrics.PointScaleFactor)),
+        static_cast<int32_t>(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor))};
+    m_popUp.MoveAndResize(rect2);
+#else
     // Adjust window position and size
     m_window.ResizeClient(
         {static_cast<int32_t>(layoutMetrics.Frame.Width * (layoutMetrics.PointScaleFactor)),
          static_cast<int32_t>(layoutMetrics.Frame.Height * (layoutMetrics.PointScaleFactor))});
     m_window.Move({xCor, yCor});
+#endif
   };
 
   void ShowOnUIThread(const winrt::Microsoft::ReactNative::ComponentView &view) {
@@ -122,6 +182,24 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     m_showQueued = false;
     EnsureModalCreated(view);
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (m_popUp) {
+      m_bridge.Enable();
+      m_popUp.Show();
+
+      auto navHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteBridge(
+          m_popUp.as<winrt::Microsoft::UI::Content::IContentSiteBridge>());
+      auto result = navHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(
+          winrt::Microsoft::UI::Input::FocusNavigationReason::First));
+
+      // dispatch onShow event
+      if (auto eventEmitter = EventEmitter()) {
+        ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnShow eventArgs;
+        eventEmitter->onShow(eventArgs);
+      }
+    }
+#endif
+
     if (m_window && !m_window.IsVisible()) {
       m_bridge.Enable();
       m_window.Show(true);
@@ -146,6 +224,12 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
       m_window.Hide();
     }
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (m_popUp) {
+      m_popUp.Hide();
+    }
+#endif
+
     // dispatch onDismiss event
     if (auto eventEmitter = EventEmitter()) {
       ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnDismiss eventArgs;
@@ -168,6 +252,11 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
       return;
     }
 
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (m_popUp) {
+      return;
+    }
+#endif
     // get the root hwnd
     m_prevWindowID =
         winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(view.ReactContext().Properties());
@@ -175,6 +264,34 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     m_parentHwnd =
         view.as<::Microsoft::ReactNative::Composition::Experimental::IComponentViewInterop>()->GetHwndForParenting();
 
+    auto portal = view.as<winrt::Microsoft::ReactNative::Composition::PortalComponentView>();
+
+#ifdef USE_EXPERIMENTAL_WINUI3
+    m_bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
+        view.Parent().as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Compositor(),
+        winrt::Microsoft::UI::GetWindowIdFromWindow(m_parentHwnd));
+    m_reactNativeIsland = winrt::Microsoft::ReactNative::ReactNativeIsland::CreatePortal(portal);
+    auto contentIsland = m_reactNativeIsland.Island();
+
+    m_popUp = m_bridge.TryCreatePopupSiteBridge();
+    m_popUp.Connect(contentIsland);
+
+    // set the top-level windows as the new hwnd
+    winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
+        view.ReactContext().Properties(),
+        reinterpret_cast<uint64_t>(winrt::Microsoft::UI::GetWindowFromWindowId(m_popUp.WindowId())));
+
+    auto navHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteBridge(
+        m_popUp.as<winrt::Microsoft::UI::Content::IContentSiteBridge>());
+    m_departFocusToken = navHost.DepartFocusRequested(
+        [wkView = winrt::make_weak(view)](
+            const auto &sender, const winrt::Microsoft::UI::Input::FocusNavigationRequestEventArgs &args) {
+          if (auto strongView = wkView.get()) {
+            TrySetFocus(strongView.Parent());
+          }
+        });
+
+#else
     auto presenter = winrt::Microsoft::UI::Windowing::OverlappedPresenter::CreateForDialog();
     presenter.SetBorderAndTitleBar(true, false);
     presenter.IsModal(true);
@@ -190,8 +307,7 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
     // create a react native island - code taken from CompositionHwndHost
     m_bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
         view.Parent().as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Compositor(), m_window.Id());
-    m_reactNativeIsland = winrt::Microsoft::ReactNative::ReactNativeIsland::CreatePortal(
-        view.as<winrt::Microsoft::ReactNative::Composition::PortalComponentView>());
+    m_reactNativeIsland = winrt::Microsoft::ReactNative::ReactNativeIsland::CreatePortal(portal);
     auto contentIsland = m_reactNativeIsland.Island();
 
     auto navHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteBridge(m_bridge);
@@ -202,13 +318,58 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
             TrySetFocus(strongView.Parent());
           }
         });
+    m_bridge.Connect(contentIsland);
+
+#endif
 
     m_bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
-    m_bridge.Connect(contentIsland);
-    AdjustWindowSize(view.LayoutMetrics());
+
+    m_islandStateChangedToken =
+        contentIsland.StateChanged([weakThis = get_weak()](
+                                       winrt::Microsoft::UI::Content::ContentIsland const &island,
+                                       winrt::Microsoft::UI::Content::ContentIslandStateChangedEventArgs const &args) {
+          if (auto pThis = weakThis.get()) {
+            if (args.DidRasterizationScaleChange() || args.DidLayoutDirectionChange()) {
+              pThis->UpdateConstraints();
+            }
+          }
+        });
+
+    UpdateConstraints();
+
+    if (portal.ContentRoot().Children().Size()) {
+      AdjustWindowSize(portal.ContentRoot().Children().GetAt(0).LayoutMetrics());
+    }
     m_bridge.Show();
   }
 
+  void UpdateConstraints() noexcept {
+    auto displayArea = winrt::Microsoft::UI::Windowing::DisplayArea::GetFromDisplayId(
+        m_bridge.SiteView().EnvironmentView().DisplayId());
+    auto workArea = displayArea.WorkArea();
+
+    float scale = m_reactNativeIsland.Island().RasterizationScale();
+
+    winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+    constraints.MinimumSize = {0, 0};
+    // Constrain the size of the modal to 90% of the screen size
+    constraints.MaximumSize = {
+        static_cast<float>((workArea.Width / scale) * 0.9), static_cast<float>((workArea.Height / scale) * 0.9)};
+    constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
+
+    auto layoutDirection = m_reactNativeIsland.Island().LayoutDirection();
+    if (layoutDirection == winrt::Microsoft::UI::Content::ContentLayoutDirection::LeftToRight)
+      constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::LeftToRight;
+    else if (layoutDirection == winrt::Microsoft::UI::Content::ContentLayoutDirection::RightToLeft)
+      constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::RightToLeft;
+
+    // By setting a custom contraint here the behavior of the modal slightly changes.
+    // When no constraint is set (maxSize is std::numeric_limits<Float>::infinity()), yoga will layout the content to a
+    // desired size If we provide a specific max size, then contents with a flex:1 will expand to fill that size. We
+    // might want to provide a windows specific property to control this behavior.
+    m_state.UpdateState(winrt::make<ModalHostState>(constraints, m_reactNativeIsland.Island().RasterizationScale()));
+  }
+
   static void TrySetFocus(const winrt::Microsoft::ReactNative::ComponentView &view) {
     auto focusController = winrt::Microsoft::UI::Input::InputFocusController::GetForIsland(
         view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Root().ReactNativeIsland().Island());
@@ -222,10 +383,16 @@ struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::F
   bool m_showTitleBar{false};
   bool m_showQueued{false};
   bool m_mounted{false};
+  winrt::event_token m_islandStateChangedToken;
   winrt::Microsoft::UI::Input::InputFocusNavigationHost::DepartFocusRequested_revoker m_departFocusRevoker;
   winrt::event_token m_departFocusToken;
+  winrt::event_token m_childLayoutMetricsToken;
+  winrt::Microsoft::ReactNative::IComponentState m_state{nullptr};
   winrt::Microsoft::UI::Content::DesktopChildSiteBridge m_bridge{nullptr};
   winrt::Microsoft::ReactNative::ReactNativeIsland m_reactNativeIsland{nullptr};
+#ifdef USE_EXPERIMENTAL_WINUI3
+  winrt::Microsoft::UI::Content::PopupWindowSiteBridge m_popUp{nullptr};
+#endif
 };
 
 void RegisterWindowsModalHostNativeComponent(

package/Microsoft.ReactNative/Fabric/Composition/PortalComponentView.cpp

@@ -30,11 +30,23 @@ void PortalComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
   m_rootComponentView->MountChildComponentView(childComponentView, index);
+  if (m_builder && m_builder->MountChildComponentViewHandler()) {
+    m_builder->MountChildComponentViewHandler()(
+        *this,
+        winrt::make<winrt::Microsoft::ReactNative::implementation::MountChildComponentViewArgs>(
+            childComponentView, index));
+  }
 }
 
 void PortalComponentView::UnmountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
+  if (m_builder && m_builder->UnmountChildComponentViewHandler()) {
+    m_builder->UnmountChildComponentViewHandler()(
+        *this,
+        winrt::make<winrt::Microsoft::ReactNative::implementation::UnmountChildComponentViewArgs>(
+            childComponentView, index));
+  }
   m_rootComponentView->UnmountChildComponentView(childComponentView, index);
 }
 

package/Microsoft.ReactNative/Fabric/Composition/ReactCompositionViewComponentBuilder.cpp

@@ -3,6 +3,7 @@
 
 #include "pch.h"
 #include "ReactCompositionViewComponentBuilder.h"
+#include <Fabric/AbiViewComponentDescriptor.h>
 #include <Fabric/Composition/CompositionViewComponentView.h>
 #include <Fabric/Composition/ContentIslandComponentView.h>
 #include <Fabric/Composition/PortalComponentView.h>
@@ -128,7 +129,7 @@ void ReactCompositionViewComponentBuilder::SetPortalComponentViewInitializer(
   };
   m_descriptorConstructorFactory = []() {
     return &facebook::react::concreteComponentDescriptorConstructor<
-        ::Microsoft::ReactNative::AbiViewComponentDescriptor>;
+        ::Microsoft::ReactNative::AbiPortalComponentDescriptor>;
   };
 }
 

package/Microsoft.ReactNative/Fabric/Composition/ReactCompositionViewComponentBuilder.h

@@ -3,7 +3,6 @@
 // Licensed under the MIT License.
 
 #include <Fabric/AbiComponentDescriptor.h>
-#include <Fabric/AbiViewComponentDescriptor.h>
 #include <react/renderer/componentregistry/ComponentDescriptorProvider.h>
 #include <react/renderer/core/ReactPrimitives.h>
 #include "winrt/Microsoft.ReactNative.Composition.Experimental.h"

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

@@ -906,21 +906,23 @@ winrt::Microsoft::UI::Content::ContentIsland ReactNativeIsland::Island() {
           }
         });
 #ifdef USE_EXPERIMENTAL_WINUI3
-    m_islandConnectedToken = m_island.Connected(
-        [weakThis = get_weak()](
-            winrt::IInspectable const &, winrt::Microsoft::UI::Content::ContentIsland const &island) {
-          if (auto pThis = weakThis.get()) {
-            pThis->OnMounted();
-          }
-        });
+    if (!m_isFragment) {
+      m_islandConnectedToken = m_island.Connected(
+          [weakThis = get_weak()](
+              winrt::IInspectable const &, winrt::Microsoft::UI::Content::ContentIsland const &island) {
+            if (auto pThis = weakThis.get()) {
+              pThis->OnMounted();
+            }
+          });
 
-    m_islandDisconnectedToken = m_island.Disconnected(
-        [weakThis = get_weak()](
-            winrt::IInspectable const &, winrt::Microsoft::UI::Content::ContentIsland const &island) {
-          if (auto pThis = weakThis.get()) {
-            pThis->OnUnmounted();
-          }
-        });
+      m_islandDisconnectedToken = m_island.Disconnected(
+          [weakThis = get_weak()](
+              winrt::IInspectable const &, winrt::Microsoft::UI::Content::ContentIsland const &island) {
+            if (auto pThis = weakThis.get()) {
+              pThis->OnUnmounted();
+            }
+          });
+    }
 #endif
   }
   return m_island;