react-native-windows 0.76.8 → 0.76.10

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

@@ -5,379 +5,411 @@
 
 #include "WindowsModalHostViewComponentView.h"
 
-#include <AutoDraw.h>
-#include <Fabric/DWriteHelpers.h>
-#include "../CompositionDynamicAutomationProvider.h"
-#include "Unicode.h"
-
-#include <DispatcherQueue.h>
-#include <Fabric/ComponentView.h>
-#include <Fabric/Composition/CompositionContextHelper.h>
-#include <Fabric/Composition/CompositionUIService.h>
-#include <Fabric/Composition/ReactNativeIsland.h>
-#include <windows.ui.composition.interop.h>
-#include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
+#include "../../../codegen/react/components/rnwcore/ModalHostView.g.h"
+#include <ComponentView.Experimental.interop.h>
 #include <winrt/Microsoft.UI.Content.h>
+#include <winrt/Microsoft.UI.Input.h>
+#include <winrt/Microsoft.UI.Windowing.h>
 #include <winrt/Microsoft.UI.interop.h>
-#include <winrt/Windows.UI.Composition.Desktop.h>
-#include <winrt/Windows.UI.Composition.h>
-#include "IReactContext.h"
-#include "ReactHost/ReactInstanceWin.h"
-#include "ReactNativeHost.h"
-#include "WindowsModalHostViewShadowNode.h"
 
 namespace winrt::Microsoft::ReactNative::Composition::implementation {
-WindowsModalHostComponentView::WindowsModalHostComponentView(
-    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
-    facebook::react::Tag tag,
-    winrt::Microsoft::ReactNative::ReactContext const &reactContext)
-    : Super(compContext, tag, reactContext) {}
-
-WindowsModalHostComponentView::~WindowsModalHostComponentView() {
-  // dispatch onDismiss event
-  auto emitter = std::static_pointer_cast<const facebook::react::ModalHostViewEventEmitter>(m_eventEmitter);
-  facebook::react::ModalHostViewEventEmitter::OnDismiss onDismissArgs;
-  emitter->onDismiss(onDismissArgs);
-
-  // reset the topWindowID
-  if (m_prevWindowID) {
-    auto host =
-        winrt::Microsoft::ReactNative::implementation::ReactNativeHost::GetReactNativeHost(m_reactContext.Properties());
-    winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
-        host.InstanceSettings().Properties(), m_prevWindowID);
-    m_prevWindowID = 0;
-  }
 
-  // enable input to parent
-  EnableWindow(m_parentHwnd, true);
+struct ModalHostState
+    : winrt::implements<ModalHostState, winrt::Microsoft::ReactNative::Composition::IPortalStateData> {
+  ModalHostState(winrt::Microsoft::ReactNative::LayoutConstraints layoutConstraints, float scaleFactor)
+      : m_layoutConstraints(layoutConstraints), m_pointScaleFactor(scaleFactor) {}
 
-  // Check if the window handle (m_hwnd) exists and destroy it if necessary
-  if (m_hwnd) {
-    // Close/Destroy the modal window
-    SendMessage(m_hwnd, WM_DESTROY, 0, 0);
-    m_hwnd = nullptr;
+  winrt::Microsoft::ReactNative::LayoutConstraints LayoutConstraints() const noexcept {
+    return m_layoutConstraints;
   }
-}
-
-winrt::Microsoft::ReactNative::ComponentView WindowsModalHostComponentView::Create(
-    const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,
-    facebook::react::Tag tag,
-    winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
-  return winrt::make<WindowsModalHostComponentView>(compContext, tag, reactContext);
-}
-
-// constants for creating a new windows
-constexpr PCWSTR c_modalWindowClassName = L"MS_REACTNATIVE_MODAL";
-constexpr auto CompHostProperty = L"CompHost";
-const int MODAL_MIN_WIDTH = 50;
-const int MODAL_MIN_HEIGHT = 50;
-
-float ScaleFactor(HWND hwnd) noexcept {
-  return GetDpiForWindow(hwnd) / static_cast<float>(USER_DEFAULT_SCREEN_DPI);
-}
 
-// creates a new modal window
-void WindowsModalHostComponentView::EnsureModalCreated() {
-  auto host =
-      winrt::Microsoft::ReactNative::implementation::ReactNativeHost::GetReactNativeHost(m_reactContext.Properties());
-
-  // return if hwnd already exists
-  if (!host || m_hwnd) {
-    return;
+  float PointScaleFactor() const noexcept {
+    return m_pointScaleFactor;
   }
 
-  RegisterWndClass();
-
-  HINSTANCE hInstance = GetModuleHandle(NULL);
-  winrt::com_ptr<::IUnknown> spunk;
+ private:
+  float m_pointScaleFactor{1.0f};
+  winrt::Microsoft::ReactNative::LayoutConstraints m_layoutConstraints;
+};
 
-  // get the root hwnd
-  m_prevWindowID =
-      winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(m_reactContext.Properties().Handle());
+struct ModalHostView : public winrt::implements<ModalHostView, winrt::Windows::Foundation::IInspectable>,
+                       ::Microsoft::ReactNativeSpecs::BaseModalHostView<ModalHostView> {
+  ~ModalHostView() {
+    if (m_window && m_window.IsVisible()) {
+      CloseWindow();
+    }
 
-  m_parentHwnd = GetHwndForParenting();
+    if (m_reactNativeIsland) {
+      m_reactNativeIsland.Island().Close();
+    }
 
-  auto windowsStyle = m_showTitleBar ? WS_OVERLAPPEDWINDOW : WS_POPUP;
+    if (m_bridge) {
+      if (m_departFocusToken && !m_bridge.IsClosed()) {
+        auto navHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteBridge(m_bridge);
+        navHost.DepartFocusRequested(m_departFocusToken);
+      }
+      m_bridge.Close();
+    }
 
-  m_hwnd = CreateWindow(
-      c_modalWindowClassName,
-      L"React-Native Modal",
-      windowsStyle,
-      CW_USEDEFAULT,
-      CW_USEDEFAULT,
-      MODAL_MIN_WIDTH,
-      MODAL_MIN_HEIGHT,
-      m_parentHwnd, // parent
-      nullptr,
-      hInstance,
-      spunk.get());
+    if (m_window) {
+      m_window.Destroy();
+      m_window = nullptr;
+    }
 
-  // Check if window creation succeeded
-  if (!m_hwnd) {
-    throw std::exception("Failed to create new hwnd for Modal: " + GetLastError());
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (m_popUp) {
+      m_popUp.Close();
+      m_popUp = nullptr;
+    }
+#endif
   }
 
-  // Disable user sizing of the hwnd
-  ::SetWindowLong(m_hwnd, GWL_STYLE, GetWindowLong(m_hwnd, GWL_STYLE) & ~WS_SIZEBOX);
-
-  // set the top-level windows as the new hwnd
-  winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
-      host.InstanceSettings().Properties(), reinterpret_cast<uint64_t>(m_hwnd));
-
-  // get current compositor - handles the creation/manipulation of visual objects
-  auto compositionContext = CompositionContext();
-  auto compositor =
-      winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
-          compositionContext);
-
-  // create a react native island - code taken from CompositionHwndHost
-  auto bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
-      compositor, winrt::Microsoft::UI::GetWindowIdFromWindow(m_hwnd));
-  m_reactNativeIsland = winrt::Microsoft::ReactNative::ReactNativeIsland(compositor, m_reactContext.Handle(), *this);
-  auto contentIsland = m_reactNativeIsland.Island();
-  bridge.Connect(contentIsland);
-  bridge.Show();
-
-  // set ScaleFactor
-  ScaleFactor(m_hwnd);
-
-  // set layout contraints
-  winrt::Microsoft::ReactNative::LayoutConstraints constraints;
-  constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
-
-  RECT rc;
-  GetClientRect(m_parentHwnd, &rc);
-  // Maximum size is set to size of parent hwnd
-  constraints.MaximumSize = {(rc.right - rc.left) * ScaleFactor(m_hwnd), (rc.bottom - rc.top) / ScaleFactor(m_hwnd)};
-  constraints.MinimumSize = {MODAL_MIN_WIDTH * ScaleFactor(m_hwnd), MODAL_MIN_HEIGHT * ScaleFactor(m_hwnd)};
-  m_reactNativeIsland.Arrange(constraints, {0, 0});
-  bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
-
-  spunk.detach();
-}
-
-void WindowsModalHostComponentView::ShowOnUIThread() {
-  if (m_hwnd && !IsWindowVisible(m_hwnd)) {
-    ShowWindow(m_hwnd, SW_NORMAL);
-    BringWindowToTop(m_hwnd);
-    SetFocus(m_hwnd);
+  void InitializePortalViewComponent(
+      const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portalComponentView) noexcept {
+    m_reactContext = portalComponentView.ReactContext();
 
-    // disable input to parent
-    EnableWindow(m_parentHwnd, false);
+    portalComponentView.Mounted(
+        [](const auto & /*sender*/, const auto &view) { view.UserData().as<ModalHostView>()->OnMounted(view); });
+    portalComponentView.Unmounted(
+        [](const auto & /*sender*/, const auto &view) { view.UserData().as<ModalHostView>()->OnUnmounted(view); });
+  }
 
-    // dispatch onShow event
-    auto emitter = std::static_pointer_cast<const facebook::react::ModalHostViewEventEmitter>(m_eventEmitter);
-    facebook::react::ModalHostViewEventEmitter::OnShow onShowArgs;
-    emitter->onShow(onShowArgs);
+  void UpdateProps(
+      const winrt::Microsoft::ReactNative::ComponentView &view,
+      const winrt::com_ptr<::Microsoft::ReactNativeSpecs::ModalHostViewProps> &newProps,
+      const winrt::com_ptr<::Microsoft::ReactNativeSpecs::ModalHostViewProps> &oldProps) noexcept override {
+    if (!oldProps || newProps->visible != oldProps->visible) {
+      if (newProps->visible.value_or(true)) {
+        // We do not immediately show the window, since we want to resize/position
+        // the window based on the layout metrics before we show it
+        m_showQueued = true;
+      } else {
+        CloseWindow();
+      }
+    }
+    ::Microsoft::ReactNativeSpecs::BaseModalHostView<ModalHostView>::UpdateProps(view, newProps, oldProps);
   }
-}
 
-void WindowsModalHostComponentView::HideOnUIThread() noexcept {
-  if (m_hwnd) {
-    SendMessage(m_hwnd, WM_CLOSE, 0, 0);
+  void UpdateState(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept override {
+    m_state = newState;
   }
 
-  // dispatch onDismiss event
-  auto emitter = std::static_pointer_cast<const facebook::react::ModalHostViewEventEmitter>(m_eventEmitter);
-  facebook::react::ModalHostViewEventEmitter::OnDismiss onDismissArgs;
-  emitter->onDismiss(onDismissArgs);
+  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());
+          }
+        });
+  }
 
-  // enable input to parent
-  EnableWindow(m_parentHwnd, true);
+  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;
+  }
 
-  // reset the topWindowID
-  if (m_prevWindowID) {
-    auto host =
-        winrt::Microsoft::ReactNative::implementation::ReactNativeHost::GetReactNativeHost(m_reactContext.Properties());
-    winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
-        host.InstanceSettings().Properties(), m_prevWindowID);
-    m_prevWindowID = 0;
+  void FinalizeUpdate(
+      const winrt::Microsoft::ReactNative::ComponentView &view,
+      winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) noexcept override {
+    if (m_showQueued) {
+      ShowOnUIThread(view);
+    }
   }
-}
 
-// Windows Procedure - callback function used for handling all messages (generated by NTUser or manual calls to
-// SendMessage)
-LRESULT CALLBACK ModalBoxWndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam) noexcept {
-  auto data = reinterpret_cast<::IUnknown *>(GetProp(
-      hwnd,
-      CompHostProperty)); // gets data handle from the property list of specified window (ie the window we want to make)
-  winrt::Microsoft::ReactNative::CompositionHwndHost host{nullptr};
-
-  if (data) {
-    winrt::check_hresult(data->QueryInterface(
-        winrt::guid_of<winrt::Microsoft::ReactNative::CompositionHwndHost>(),
-        winrt::put_abi(host))); // look into the data for a CompositionHwndHost and store it in host
-    auto result = static_cast<LRESULT>(host.TranslateMessage(message, wparam, lparam));
-    if (result) {
-      return result;
+ private:
+  void OnMounted(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+    m_mounted = true;
+    if (m_showQueued) {
+      ShowOnUIThread(view);
     }
   }
 
-  switch (message) {
-    case WM_NCCREATE: { // called before WM_CREATE, lparam should be identical to members of CreateWindowEx
-      auto createStruct = reinterpret_cast<CREATESTRUCT *>(lparam); // CreateStruct
-      data = static_cast<::IUnknown *>(createStruct->lpCreateParams);
-      SetProp(hwnd, CompHostProperty, data); // adds new properties to window
-      break;
+  void OnUnmounted(const winrt::Microsoft::ReactNative::ComponentView & /*view*/) noexcept {
+    m_mounted = false;
+  }
+
+  void AdjustWindowSize(const winrt::Microsoft::ReactNative::LayoutMetrics &layoutMetrics) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (!m_popUp) {
+#else
+    if (!m_window) {
+#endif
+      return;
     }
-    case WM_CLOSE: {
-      // Just hide the window instead of destroying it
-      ::ShowWindow(hwnd, SW_HIDE);
-      return 0;
+
+    if (layoutMetrics.Frame.Width == 0 && layoutMetrics.Frame.Height == 0) {
+      return;
     }
-    case WM_DESTROY: { // called when we want to destroy the window
-      ::ShowWindow(hwnd, SW_HIDE);
-      if (data) {
-        data->Release();
+
+    // get Modal's position based on parent
+    RECT parentRC;
+    GetWindowRect(m_parentHwnd, &parentRC);
+    int32_t xCor = static_cast<int32_t>(
+        (parentRC.left + parentRC.right - layoutMetrics.Frame.Width * layoutMetrics.PointScaleFactor) / 2);
+    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
+    // Fix for https://github.com/microsoft/microsoft-ui-xaml/issues/9529
+    auto titleBarHeight = m_window.TitleBar().Height();
+
+    // 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)) - titleBarHeight});
+    m_window.Move({xCor, yCor});
+#endif
+  };
+
+  void ShowOnUIThread(const winrt::Microsoft::ReactNative::ComponentView &view) {
+    if (!m_mounted)
+      return;
+
+    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);
       }
-      SetProp(hwnd, CompHostProperty, nullptr);
-      break;
     }
-  }
+#endif
 
-  return DefWindowProc(hwnd, message, wparam, lparam);
-}
+    if (m_window && !m_window.IsVisible()) {
+      m_bridge.Enable();
+      m_window.Show(true);
+
+      auto navHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteBridge(m_bridge);
+      auto result = navHost.NavigateFocus(winrt::Microsoft::UI::Input::FocusNavigationRequest::Create(
+          winrt::Microsoft::UI::Input::FocusNavigationReason::First));
 
-// Creates and Register a new window class
-void WindowsModalHostComponentView::RegisterWndClass() noexcept {
-  static bool registered = false;
-  if (registered) {
-    return;
+      // dispatch onShow event
+      if (auto eventEmitter = EventEmitter()) {
+        ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnShow eventArgs;
+        eventEmitter->onShow(eventArgs);
+      }
+    }
   }
 
-  HINSTANCE hInstance =
-      GetModuleHandle(NULL); // returns a handle to the file used to create the calling process (.exe file)
-
-  WNDCLASSEX wcex = {}; // contains window class information
-  wcex.cbSize = sizeof(wcex); // size of windows class (bytes)
-  wcex.style = CS_HREDRAW | CS_VREDRAW; // class style (redraw window on size adjustment)
-  wcex.lpfnWndProc = &ModalBoxWndProc; // pointer to windows procedure
-  wcex.cbClsExtra = DLGWINDOWEXTRA; // extra bytes to allocate
-  wcex.cbWndExtra =
-      sizeof(winrt::impl::abi<winrt::Microsoft::ReactNative::ICompositionHwndHost>::type *); // extra bytes to allocate
-  wcex.hInstance = hInstance;
-  wcex.hCursor = LoadCursor(nullptr, IDC_ARROW); // handle to class cursor
-  wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1); // background color
-  wcex.lpszClassName = c_modalWindowClassName; // specify resource name
-  ATOM classId = RegisterClassEx(&wcex); // register new windows class
-  WINRT_VERIFY(classId); // 0 = fail
-  winrt::check_win32(!classId);
-
-  registered = true;
-}
+  void CloseWindow() noexcept {
+    // enable input to parent before closing the modal window, so focus can return back to the parent window
+    EnableWindow(m_parentHwnd, true);
 
-winrt::Microsoft::ReactNative::Composition::Experimental::IVisual
-WindowsModalHostComponentView::VisualToMountChildrenInto() noexcept {
-  return m_reactNativeIsland
-      .as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-      .InternalRootVisual();
-}
+    if (m_window) {
+      m_window.Hide();
+    }
 
-// childComponentView - reference to the child component view
-// index - the position in which the childComponentView should be mounted
-void WindowsModalHostComponentView::MountChildComponentView(
-    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
-    uint32_t index) noexcept {
-  EnsureModalCreated();
-  base_type::MountChildComponentView(childComponentView, index);
-}
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (m_popUp) {
+      m_popUp.Hide();
+    }
+#endif
 
-void WindowsModalHostComponentView::UnmountChildComponentView(
-    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
-    uint32_t index) noexcept {
-  base_type::UnmountChildComponentView(childComponentView, index);
-}
+    // dispatch onDismiss event
+    if (auto eventEmitter = EventEmitter()) {
+      ::Microsoft::ReactNativeSpecs::ModalHostViewEventEmitter::OnDismiss eventArgs;
+      eventEmitter->onDismiss(eventArgs);
+    }
 
-void WindowsModalHostComponentView::updateLayoutMetrics(
-    facebook::react::LayoutMetrics const &layoutMetrics,
-    facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept {
-  base_type::updateLayoutMetrics(layoutMetrics, oldLayoutMetrics);
-  if (m_hwnd) {
-    EnsureModalCreated();
-    AdjustWindowSize();
-    ShowOnUIThread();
-  }
-}
+    // reset the topWindowID
+    if (m_prevWindowID) {
+      winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
+          m_reactContext.Properties().Handle(), m_prevWindowID);
+      m_prevWindowID = 0;
+    }
 
-void WindowsModalHostComponentView::AdjustWindowSize() noexcept {
-  if (m_layoutMetrics.overflowInset.right == 0 && m_layoutMetrics.overflowInset.bottom == 0) {
-    return;
+    m_bridge.Disable();
   }
 
-  // Modal's size is based on it's children, use the overflow to calculate the width/height
-  float xPos = (-m_layoutMetrics.overflowInset.right * (m_layoutMetrics.pointScaleFactor));
-  float yPos = (-m_layoutMetrics.overflowInset.bottom * (m_layoutMetrics.pointScaleFactor));
-  RECT rc;
-  GetClientRect(m_hwnd, &rc);
-  RECT rect = {0, 0, (int)xPos, (int)yPos};
+  // creates a new modal window
+  void EnsureModalCreated(const winrt::Microsoft::ReactNative::ComponentView &view) {
+    if (m_window) {
+      return;
+    }
 
-  if (m_showTitleBar) {
-    AdjustWindowRect(&rect, WS_OVERLAPPEDWINDOW, FALSE); // Adjust for title bar and borders
-  }
+#ifdef USE_EXPERIMENTAL_WINUI3
+    if (m_popUp) {
+      return;
+    }
+#endif
+    // get the root hwnd
+    m_prevWindowID =
+        winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(view.ReactContext().Properties());
 
-  // set the layoutMetrics
-  m_layoutMetrics.frame.size = {(float)rect.right - rect.left, (float)rect.bottom - rect.top};
-  m_layoutMetrics.overflowInset.right = 0;
-  m_layoutMetrics.overflowInset.bottom = 0;
+    m_parentHwnd =
+        view.as<::Microsoft::ReactNative::Composition::Experimental::IComponentViewInterop>()->GetHwndForParenting();
 
-  // get Modal's position based on parent
-  RECT parentRC;
-  GetWindowRect(m_parentHwnd, &parentRC);
-  float xCor = (parentRC.left + parentRC.right - m_layoutMetrics.frame.size.width) / 2; // midpointx - width / 2
-  float yCor = (parentRC.top + parentRC.bottom - m_layoutMetrics.frame.size.height) / 2; // midpointy - height / 2
+    auto portal = view.as<winrt::Microsoft::ReactNative::Composition::PortalComponentView>();
 
-  // Adjust window position and size
-  MoveWindow(m_hwnd, (int)xCor, (int)yCor, (int)(rect.right - rect.left), (int)(rect.bottom - rect.top), true);
+#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();
 
-  // Let RNWIsland know that Modal's size has changed
-  winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactNativeIsland>(m_reactNativeIsland)
-      ->NotifySizeChanged();
-};
+    m_popUp = m_bridge.TryCreatePopupSiteBridge();
+    m_popUp.Connect(contentIsland);
 
-void WindowsModalHostComponentView::updateProps(
-    facebook::react::Props::Shared const &props,
-    facebook::react::Props::Shared const &oldProps) noexcept {
-  const auto &oldModalProps =
-      *std::static_pointer_cast<const facebook::react::ModalHostViewProps>(oldProps ? oldProps : viewProps());
-  const auto &newModalProps = *std::static_pointer_cast<const facebook::react::ModalHostViewProps>(props);
-  newModalProps.visible ? m_isVisible = true : m_isVisible = false;
-  if (!m_isVisible) {
-    HideOnUIThread();
+    // 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);
+
+    m_window = winrt::Microsoft::UI::Windowing::AppWindow::Create(
+        presenter, winrt::Microsoft::UI::GetWindowIdFromWindow(m_parentHwnd));
+
+    // 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_window.Id())));
+
+    // 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(portal);
+    auto contentIsland = m_reactNativeIsland.Island();
+
+    auto navHost = winrt::Microsoft::UI::Input::InputFocusNavigationHost::GetForSiteBridge(m_bridge);
+    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());
+          }
+        });
+    m_bridge.Connect(contentIsland);
+
+#endif
+
+    m_bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
+
+    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();
   }
-  base_type::updateProps(props, oldProps);
-}
 
-facebook::react::SharedViewProps WindowsModalHostComponentView::defaultProps() noexcept {
-  static auto const defaultProps = std::make_shared<facebook::react::ModalHostViewProps const>();
-  return defaultProps;
-}
-const facebook::react::ModalHostViewProps &WindowsModalHostComponentView::modalHostViewProps() const noexcept {
-  return *std::static_pointer_cast<const facebook::react::ModalHostViewProps>(viewProps());
-}
-
-facebook::react::Tag WindowsModalHostComponentView::hitTest(
-    facebook::react::Point pt,
-    facebook::react::Point &localPt,
-    bool ignorePointerEvents) const noexcept {
-  facebook::react::Point ptLocal{pt.x - m_layoutMetrics.frame.origin.x, pt.y - m_layoutMetrics.frame.origin.y};
-
-  if ((ignorePointerEvents || viewProps()->pointerEvents == facebook::react::PointerEventsMode::Auto ||
-       viewProps()->pointerEvents == facebook::react::PointerEventsMode::BoxOnly) &&
-      ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
-      ptLocal.y <= m_layoutMetrics.frame.size.height) {
-    localPt = ptLocal;
-    return Tag();
+  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()));
   }
 
-  return -1;
-}
+  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());
+    focusController.TrySetFocus();
+  }
 
-bool WindowsModalHostComponentView::focusable() const noexcept {
-  return false;
-}
+  ReactContext m_reactContext{nullptr};
+  HWND m_parentHwnd{nullptr};
+  winrt::Microsoft::UI::Windowing::AppWindow m_window{nullptr};
+  uint64_t m_prevWindowID;
+  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
+};
 
-std::string WindowsModalHostComponentView::DefaultControlType() const noexcept {
-  return "modal";
+void RegisterWindowsModalHostNativeComponent(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept {
+  ::Microsoft::ReactNativeSpecs::RegisterModalHostViewNativeComponent<ModalHostView>(
+      packageBuilder,
+      [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+        builder.SetPortalComponentViewInitializer(
+            [](const winrt::Microsoft::ReactNative::Composition::PortalComponentView &portalComponentView) noexcept {
+              auto userData = winrt::make_self<ModalHostView>();
+              userData->InitializePortalViewComponent(portalComponentView);
+              portalComponentView.UserData(*userData);
+            });
+      });
 }
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation